draggable - kineticjsでドラッグ可能な「ドラッグムーブ」をキャンセルしますか?

Question

座標 'y' が特定の座標 (x,y) のピクセル 'y-15' にある場合、円の動きに制限を設定する必要があります。イベント「mouseup」および「mousedown」で「draggable=true」を使用しようとしましたが、必要な結果が得られません。誰か助けてくれませんか？

私のコードは次のとおりです。

circle.on('mouseover',function(){
    this.setAttr('draggable',true);
  });

  circle.on('dragmove',function(e){

    var mousePos = stage.getMousePosition();
    var x = mousePos.x;
    var y = mousePos.y;

    if(y < y2- 15){

      //do anything
    }
    else{
      this.setAttr('draggable',false);
    }

  });

Answer 1

私の理解が正しければ、あなたが望むのは ですdragBoundFunc。

このチュートリアルを参照してください:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-bounds-tutorial-with-kineticjs/

    // bound below y=50
    var blueGroup = new Kinetic.Group({
      x: 100,
      y: 70,
      draggable: true,
      dragBoundFunc: function(pos) {
        var newY = pos.y < 50 ? 50 : pos.y;
        return {
          x: pos.x,
          y: newY
        };
      }
    });

マウス座標を取得するときに y-15 を探すようにコードを変更し、dragBoundFuncクリックした座標を反映するように を設定するだけです。

既知の固定 y 値で y 軸を制限しようとしている場合、Y を制限する座標を変更するだけでよいことを除いて、チュートリアルで示した方法とまったく同じように、これはさらに簡単になります。

これもクイックリファレンスとして確認してください。

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-shapes-horizo​​ntally-or-vertically-tutorial/