限制KineticJS仅拖动到一个方向

Question

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

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

What I have so far.

Answer 1

您可以向lawnMowerImg添加一个变量，该变量充当拖动的左边界：

    lawnMowerImg.minX=lawnMowerImg.getX();

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

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

因此修改后的lawnMowerImg将如下所示：

这是一个小提琴：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();