javascript - 使用 KonvaJs 在画布中制作自定义输入范围

Question

出于某些目的，我需要画布中的输入类型范围，我需要使用它来更改我的字体大小。我已经制作了形状并且可以拖动，但是圆形控制器超出了这条线。

只需预览垃圾箱即可了解我的意思。杰宾

我只想像输入范围一样将拖动区域限制为行。

这是 KonvaJs 库的文档。

Answer 1

这是有效的，由Lavrton编码

资源

var width = window.innerWidth;
    var height = window.innerHeight;

    var stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height
    });

    var layer = new Konva.Layer();

 var Track = new Konva.Line({
            x: 44,
            y: 55,
            points: [60, 0, 0, 0, 0, 0, 0, 0],
            stroke: '#BDC3C7',
            strokeWidth: 6,
            visible: true,
            name: 'TrackLine',
            lineCap: 'sqare',
            lineJoin: 'sqare'
          });

    var TrackBall = new Konva.Circle({
            x: 44,
            y: 55,
            stroke: '#D35400',
            fill: '#ddd',
            strokeWidth: 2,
            name: 'TrackControl',
            radius: 8,
            draggable: true,
            dragOnTop: false,
            visible: true,
            dragBoundFunc: function(pos) {
              console.log(pos.x, Math.min(44, pos.x))
            return {
                x: Math.min(104, Math.max(44, pos.x)),
                y: this.getAbsolutePosition().y
                };
            }
     });

layer.add(Track);
layer.add(TrackBall);

stage.add(layer);

<script src="https://cdn.rawgit.com/konvajs/konva/0.10.0/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <div id="container" class="CanCont"></div>