Javascript 在KineticJS中旋转形状似乎会使其失去同步'；s组

我正在使用KineticJS中的一些图像查看工具。我有一个旋转工具。将鼠标移到图像上时，从图像中心到鼠标位置会出现一条线，然后单击并移动时，该线将跟随，图像将围绕该点旋转，与该线同步。这很有效

我的问题是，我有以下设置：

画布-> 舞台-> 层-> A组-> B组-> 形象

这是因为我在GroupA上为选项绘制选项卡，并将其视为图像的容器。之所以使用GroupB，是因为我翻转GroupB来翻转图像（以及沿轨迹向下，我添加到图像中的任何对象，如文本和路径），以便图像翻转但保持不变。这一切都很好。我还希望，当我提供缩放功能时，可以缩放groupb，从而缩放图像上绘制的任何内容，但groupA可以创建剪辑并继续支持拖动按钮，等等

我正在旋转的对象是GroupA。以下是我调用的设置旋转的方法：

this.init = function(control)
{
    console.log("Initing rotate for : " + control.id());

    RotateTool.isMouseDown = false;
    RotateTool.startRot = isNaN(control.getRotationDeg()) ? 0 : control.getRotationDeg();
    RotateTool.lastAngle = control.parent.rotation() / RotateTool.factor;
    RotateTool.startAngle = control.parent.rotation();

    this.image = control.parent;

    var center = this.getCentrePoint();

    RotateTool.middleX = this.image.getAbsolutePosition().x + center.x;
    RotateTool.middleY = this.image.getAbsolutePosition().y + center.y;

    this.image.x(this.image.x() + center.x - this.image.offsetX());
    this.image.y(this.image.y() + center.y - this.image.offsetY());
    this.image.offsetX(center.x);
    this.image.offsetY(center.y);
}

getCentrePoint是一种基于旋转使用trig获取图像大小的方法。当我在图像的中心画一条线时，我可以看出它工作得很好。我也加入了它，它总是返回比实际宽度和高度略高的值，它们看起来总是应该和我预期的图像角度差不多

以下是我在鼠标移动时用于旋转图像的代码：

this.layerMouseMove = function (evt, layer)
{
    if (RotateTool.isRotating == false)
        return;

    if (!Util.isNull(this.image) && !Util.isNull(this.line))
    {
        if (Item.moving && !RotateTool.isRotating)
        {
            console.log("layer mousemove item moving");

            RotateTool.layerMouseUp(evt, layer);
        }
        else
        {
            var pt = this.translatePoint(evt.x, evt.y);
            var x = pt.x;
            var y = pt.y;

            var end = this.getPoint(x, y, .8);

            RotateTool.line.points([this.middleX, this.middleY, end.x, end.y]);
            RotateTool.line.parent.draw();

            RotateTool.sign.x(x - 20);
            RotateTool.sign.y(y - 20);

            var angle = Util.findAngle({ x: RotateTool.startX, y: RotateTool.startY }, { x: x, y: y }, { x: RotateTool.middleX, y: RotateTool.middleY });

            var newRot = (angle) + RotateTool.startAngle;

            RotateTool.image.rotation(newRot);

            console.log(newRot);
        }
    }
}

这段代码大部分都是短暂的，它保持着从鼠标中心到鼠标的80%的直线长度，因为我也在鼠标上方显示了一个旋转图标

对不起，我说的太多了，我正在努力确保我说的清楚，很明显，在寻求帮助之前，我已经做了很多工作

所以，这就是我的问题。在我旋转几次之后，当我再次单击时，线条所指向的“中心”点远离屏幕的右下角，如果我设置一个断点，我的组的绝对位置肯定不再同步。在我看来，我的旋转似乎以我希望的方式移动了图像，但移动了我的组在屏幕外。当我设置offsetX和offsetY时，我是否也需要在所有的孩子身上设置它？但是，它是我能看到的最下面的孩子，也是我设置这些东西的最上面的组，所以我真的不明白这是怎么发生的

我注意到当我将鼠标移到图像上时，图像会跳跃几个像素（这是在调用init方法时）所以我觉得也许我只是在某个地方稍微有点不对劲，这导致了这种效果。我做了更多的测试，当我在图像上移动鼠标时，我的图像总是稍微向上和向右跳跃，旋转工具继续可靠地工作，只要我不再在图像上移动鼠标，导致我的init方法调用。似乎每次调用它时，它都会断开。因此，我可以只调用一次，但我必须将数据与图像关联起来，原因很简单，一旦我有许多图像，我就需要随着所选图像的更改而更改数据。无论哪种方式，我都希望理解并解决问题，而不仅仅是隐藏它

---

感谢您的帮助。

我有一个理论。我认为问题在于左上角的位置不是它声称的那样，所以当我设置image.setX（image.getX（）时+..，问题是它得到的x没有考虑到旋转，但是它设置的x，如果有意义的话。我想我需要通过旋转来转换我的x和y点。仍然卡住了，但这是我追求的方向，如果有人有任何见解，你能创建一个JSFIDLE吗？不容易，它包含很多复杂的代码。我问这个问题又解决了，我正在用鼠标滚轮放大图像：-）