Question

当坐标'y'位于像素'y-15'上时，我必须在特定坐标（x，y）上设置圆的移动限制。我试图在事件'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值上，那么这变得更加容易，就像教程向您展示的那样，除了您只需要更改要限制的坐标是的。

将此作为快速参考检查：

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

在kineticjs上取消可拖动的'dragmove'？

1 个答案: