Question

我正在寻找可以查看图片的页面。我想创建一个旋转工具。我已经做到了，但是，它并不是一贯的。当我设置中心点旋转时，图像会略微跳跃，每次都会变得更糟。我正在尝试，而且，我有代码在我的顶级组的左上角添加一个楔形（所以，在0,0）。如果我将图像旋转45度并将其拖动以使其中一半偏离画布的左边缘，那么我在楔形和组上调用getAbsolutePosition，我得到这些值：

layer.getAbsolutePosition（）对象{x：104.66479545850302，y：279.2748571151325} wedge.getAbsolutePosition（）对象{x：180.2684127179338，y：-73.48773356791764}

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

我想要做的是计算图像中间的绝对位置，当鼠标移过它时，无论它的旋转如何。我有一些代码可以解决旋转点，这看起来几乎可以起作用，但是我使用该工具的次数越来越多。我觉得有一些关于Kinetic如何跟踪这些事情以及它报告的内容，我不知道。任何提示都将是最受欢迎的。我能阅读的教程甚至更好（是的，我已经阅读了从KineticJS网站链接的所有内容并在网上搜索过。）

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

由于

Answer 1

正如您所发现的KinetiJS：

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

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

KineticJS使拖动+旋转变得更加困难。

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

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

解决“跳跃”问题：

重置图像的旋转点（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);

了解旋转并计算KineticJS中的左上角

1 个答案: