在其位置旋转Two.js对象

Question

我的内部有一个较小的圆圈，使用two.js制作。

我的问题是这两个不是在自己的位置旋转，而是在左上轴。 我希望圈组（circlesGroup）仅在静态位置的大型圈内旋转。 circlesGroup和大圆圈组合在一起为rotatoGroup。

two.bind('update', function(frameCount, timeDelta) {
  circlesGroup.rotation = frameCount / 120;
});

two.bind('update', function(frameCount, timeDelta) {
  rotatoGroup.rotation = frameCount / 60;
});

整个代码位于CodePen。

Answer 1

使用two.make...（圆形，矩形，多边形和线条）调用的所有可见形状都定位在中心，如Adobe Illustrator示例所示：

当此形状的translation，rotation或scale更改时，这些更改将反映为有关形状中心的变换。

然而，

Two.Group不会这样做。将它们视为无显示矩形。它们是原点，即group.translation向量，总是从（0,0）开始。在您的情况下，您可以通过规范化 translation在您的所有圈子中定义来处理此问题。

示例1：在规范化空间中预定义

在这个codepen示例中，我们定义了-100,100周围所有圆的位置，实际上是正负x方向和半径方向的半径的一半。一旦我们在这些约束中定义了圆圈，我们就可以使用group.translation.set移动整个组，将其放在屏幕的中心。现在，当圆圈旋转时，它们感知围绕自己旋转。

示例2：事后正常化

在这个codepen示例中，我们正在处理已有的内容。一个Two.Group，包含我们所有的形状（较大的圆圈以及较小圆圈的数组）。通过使用方法group.center();（第31行），我们可以将组的子项规范化为（0,0）。然后我们可以更改组的translation以便处于所需的位置。

N.B：这个例子有点复杂，因为它调用了下划线的defer方法，该方法在注册了所有更改后强制了组的居中。我正在解决这个问题。