Question

我是KineticJS的新手，我正在尝试使用锚点来旋转和围绕中心点进行图像处理，这是使用单独的锚定义的。

我有旋转工作和定义旋转中心也工作。但是当用户拖动锚点以定义旋转中心时，我使用setOffset（）函数，它会导致图像移动而不是锚点。

我想知道是否有办法允许用户拖动锚点并且锚点移动并设置偏移量而不是用户拖动锚点并且图像会移动？

更新功能如下

function update(group, activeAnchor) {
var topLeft = group.get(".topLeft")[0];
var topRight = group.get(".topRight")[0];
var bottomRight = group.get(".bottomRight")[0];
var bottomLeft = group.get(".bottomLeft")[0];
var centre = group.get(".centre")[0];
var image = group.get(".image")[0];

var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();

var centreX = group.getOffsetX();
var centreY = group.getOffsetY();

var width = group.getWidth();
var height = group.getHeight();
// update anchor positions
switch (activeAnchor.getName()) {
     case 'topLeft':
          topRight.setY(anchorY);
          bottomLeft.setX(anchorX);
          centreX = topLeft.getX()/2;
          centreY = topLeft.getY()/2;
          break;

    case 'topRight':
          topLeft.setY(anchorY);
          bottomRight.setX(anchorX);
          centreX = topRight.getX()/2;
          centreY = topRight.getY()/2;
          break;

    case 'bottomRight':
          bottomLeft.setY(anchorY);
          topRight.setX(anchorX);
          break;

    case 'bottomLeft':
          bottomRight.setY(anchorY);
          topLeft.setX(anchorX);

          centre.setX(centreX);
          centre.setY(centreY);
          break;

    case "centre":
          var absolute = group.getPosition();
          group.setOffset(anchorX, anchorY);
          group.setPosition(absolute);
  }

image.setPosition(topLeft.attrs.x, topLeft.attrs.y);

var width = topRight.attrs.x - topLeft.attrs.x;
var height = bottomLeft.attrs.y - topLeft.attrs.y;
if(width && height) {
    image.setSize(width, height);
 }
}

我也试图在拖动时调整图像的四个角来更新旋转中心。知道怎么做吗？

提前谢谢。

更新

小提琴：http://jsfiddle.net/njPdr/（这里可能无法正常工作，但你可以看到我在这里要做的事情）

Answer 1

您正在使用以下设置图像的位置：image.setPosition(topLeft.attrs.x, topLeft.attrs.y);

如果用image.setOffset(youroffsetx, youroffsety);替换它，图像将不再移动，您将设置一个您想要的偏移。关于第二个问题，请记住偏移是旋转中心。

如评论中所述进行编辑：

case "centre":
          var absolute = group.getPosition();
          group.setOffset(anchorX, anchorY);
          group.setPosition({x:absolute.x + group.getOffsetX(), y:absolute.y + group.getOffsetY()});
  }

KineticJS：使用锚点定义偏移和旋转

1 个答案: