取消kineticjs上可拖動的'dragmove'？

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-horizontally-or-vertically-tutorial/