在 KineticJS 中理解旋转和计算左上角

Question

我正在创建一个可以查看图像的页面。我想创建一个旋转工具。我已经这样做了，但是，它并没有始终如一地工作。当我将中心点设置为旋转时，图像会轻微跳跃，并且每次都会变得更糟。我正在试验，并且，我有代码在我的顶级组的左上角添加一个楔子（所以，在 0,0 处）。如果我将图像旋转 45 度并拖动它，使其一半离开画布的左边缘，然后我在楔形和组上调用 getAbsolutePosition，我得到这些值：

layer.getAbsolutePosition() 对象 {x: 104.66479545850302, y: 279.2748571151325} 楔形.getAbsolutePosition() 对象 {x: 180.2684127179338, y: -73.48773356791764}

我认为这意味着我的 y 位置实际上是图像的底部，它在屏幕外。

我想要做的是计算图像中间的绝对位置，当鼠标移到它上面时，不管它是否旋转。我有一些代码可以通过旋转来计算点，这似乎一开始几乎可以工作，但是我使用该工具的次数越多，它就越坏。我觉得关于 Kinetic 如何跟踪这些事情以及它报告了什么，我错过了一些东西。任何提示将不胜感激。我可以阅读的教程甚至更好（是的，我已经阅读了 KineticJS 网站链接的所有内容并搜索了网络）。

简而言之，问题是，如果我在一个组中有一个图像，并且它被旋转了，我如何计算图像的中心点，将旋转考虑在内，以及如何设置偏移量所以它会从那个点旋转，并保持在同一个地方？

谢谢

Answer 1

正如您对 KinetiJS 的发现：

• 旋转很容易
• 拖动很容易
• 拖动+旋转困难

拖动图像后，您必须重置其旋转点（offsetX/offsetY）。

KineticJS 使拖动+旋转变得比它必须的更困难。

重置图像的偏移点将导致 KineticJS 自动移动图像（不！）。

这就是导致你跳跃的原因。

“跳”问题的解决方法：

当您重置图像的旋转点 (offsetX/OffsetY) 时，您还必须重置图像的 X/Y 位置。

此代码在拖动后重置图像的 XY 和偏移：

演示：http://jsfiddle.net/m1erickson/m9Nw7/

// calc new position and offset

var pos=rect.getPosition();
var size=rect.getSize();
var offset=rect.getOffset();
var newX=pos.x-offset.x+size.width/2;
var newY=pos.y-offset.y+size.height/2;

// reset both position and offset

rect.setPosition([newX,newY]);
rect.setOffset(size.width/2,size.height/2);