draggable - 取消 kineticjs 上的可拖动“dragmove”？

Question

当坐标'y'在像素'y-15'上，在特定坐标（x，y）上时，我必须为圆的移动设置一个限制。我尝试将 'draggable=true' 与事件 'mouseup' 和 'mousedown' 一起使用，但我无法获得所需的结果。有人能帮助我吗？

我的代码是：

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/