kineticjs - 限制 KineticJS 仅向一个方向拖动

Question

我正在尝试构建一个真正简单的割草机介绍页面。有两个图像，一个用作背景，另一个用作您拖动的手柄。

有没有办法设置它，使拖动事件只发生在一个方向，特别是从左到右？

到目前为止我所拥有的。

Answer 1

您可以将一个变量添加到作为拖动的左边界的 glassMowerImg：

    lawnMowerImg.minX=lawnMowerImg.getX();

然后，在 dragBoundFunc 中，如果拖动尝试向 minX 左侧移动，则设置 pos.x = min.X：

    if(pos.x<this.minX){  pos.x=this.minX; }
    this.minX=pos.x;

所以修改后的 glassMowerImg 看起来像这样：

这是一个小提琴：http: //jsfiddle.net/m1erickson/hfE6A/

    var lawnMowerImg = new Kinetic.Image({
      image: imageObj,
      x: stage.getWidth() / 2 - 896 / 1,
      y: stage.getHeight() / 2 - 255 / 2,
      width: 896,
      height: 255,
      draggable: true,
      dragBoundFunc: function(pos) {
          if(pos.x<this.minX){  pos.x=this.minX; }
          this.minX=pos.x;
          return {
            x: pos.x,
            y: this.getAbsolutePosition().y
          }
      }
    });
    lawnMowerImg.minX=lawnMowerImg.getX();