Question

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

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

我想将拖动区域限制为仅限于输入范围的行。

这是KonvaJs库的documentation。

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>

使用KonvaJs在画布中创建自定义输入范围

1 个答案: