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

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);
 }
}

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

提前谢谢你。

更新

Fiddle：http://jsfiddle.net/njPdr/（在这里可能无法正常工作，但您可以在这里看到我正在尝试做的事情）

Answer 1

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

如果您将其替换为image.setOffset(youroffsetx, youroffsety);，图像将不再移动，您将按照自己的意愿设置偏移量。 关于第二个问题，请记住偏移量是旋转中心。

如 cmets 中所述进行编辑：

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