javascript - 使用 KonvaJs 在 Canvas 中自定义输入范围

Question

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

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

我只想像输入范围一样将拖动区域限制在直线上。

这是 documentation KonvaJs 库。

Answer 1

这是有效的，由 Lavrton 编码

Source

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>