1

何らかの目的でキャンバスに入力タイプの範囲が必要です。それを使用してフォントサイズを変更する必要があります。私はすでにシェイプを作成し、ドラッグも可能にしていますが、円コントローラーは線を超えています。

ビンをプレビューして、意味を確認してください。ジャスビン

入力範囲が機能するように、ドラッグ領域を線のみに制限したい。

これは、KonvaJs ライブラリのドキュメントです。

4

1 に答える 1

2

これは機能しており、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>

于 2016-03-31T07:09:47.293 に答える