Question

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

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

Canvas-＆GT; 阶段 - ＆GT; 层 - ＆GT; GroupA-＆GT; GroupB-＆GT; 图像

这是因为我在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方法调用。似乎每次调用它时，它都会被打破。所以，我可以只调用一次，但是我必须将数据与图像相关联，原因很简单，一旦我有很多图像，我就需要在我选择的图像发生变化时更改数据。不管怎样，我更愿意理解并解决问题，而不仅仅是隐藏它。

任何帮助表示赞赏。

在KineticJS中旋转一个形状似乎使它与它的组不同步

0 个答案: