取消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/