旋转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示例：

​

​

当此形状的translation、rotation或scale更改时，这些更改将被反映为形状中心的转换。

然而，Two.Group的行为不是这样的。把它们想象成没有显示的矩形。它们是原点，即group.translation向量，总是从(0，0)开始。在您的情况下，您可以通过规范化来处理这一问题，即您在所有圆圈上定义的translation。

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

在这个码页例子中，我们定义了所有圆在-100,100附近的位置，实际上是正负x和y方向半径的一半。一旦我们在这些约束中定义了圆圈，我们就可以用group.translation.set将整个组移动到屏幕的中央。现在，当圆圈旋转时，他们被认为是围绕着自己旋转的。

例2:事实之后的正常化

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

注:这个例子有点复杂，因为它调用了下划线的defer方法，该方法强制在所有更改注册后对组进行对中。我正在修复这件事。