[英]Rotate a Two.js object in its position
I have a large circle with smaller ones inside made using two.js . 我有一个大圈子,里面有较小的圈子,使用two.js。
My problem is that these two do not rotate in their own place but in the top left axis. 我的问题是这两个不是在自己的位置旋转,而是在左上轴。 I want the group of circles ( circlesGroup
) rotate only inside the large one in a static position . 我希望圆组( circlesGroup
)仅在静态位置的circlesGroup
内旋转 。 The circlesGroup
and the large circle are grouped together as rotatoGroup
. circlesGroup
和大圆圈组合在一起作为rotatoGroup
。
two.bind('update', function(frameCount, timeDelta) {
circlesGroup.rotation = frameCount / 120;
});
two.bind('update', function(frameCount, timeDelta) {
rotatoGroup.rotation = frameCount / 60;
});
All visible shapes when invoked with two.make...
( circles, rectangles, polygons, and lines ) are oriented in the center like this Adobe Illustrator example: 使用two.make...
(圆形,矩形,多边形和线条)调用时所有可见的形状都定位在中心,就像这个Adobe Illustrator示例:
When this shape's translation
, rotation
, or scale
change those changes will be reflected as transformations about the center of the shape. 当此形状的translation
, rotation
或scale
更改时,这些更改将反映为有关形状中心的变换。
Two.Group
s however do not behave this way. 但是, Two.Group
不会这样做。 Think of them as display-less rectangles. 将它们视为无显示矩形。 They're origin, ie group.translation
vector, always begins at (0, 0). 它们是原点,即group.translation
矢量,总是从(0,0)开始。 In your case you can deal with this by normalizing the translation
your defining on all your circles. 在您的情况下,您可以通过规范化所有圈子中的定义translation
来解决此问题。
In this codepen example we're defining the position of all the circles around -100, 100, effectively half the radius in both positive-and-negative x-and-y directions. 在这个codepen示例中,我们定义了-100,100周围的所有圆的位置,实际上是正x和y方向上半径的一半。 Once we've defined the circles within these constraints we can move the whole group with group.translation.set
to place it in the center of the screen. 一旦我们在这些约束中定义了圆圈,我们就可以使用group.translation.set
移动整个组,将其放在屏幕的中心。 Now when the circles rotate they are perceived as rotating around themselves. 现在,当圆圈旋转时,它们被感知为围绕自身旋转。
In this codepen example we're working with what we already have. 在这个codepen示例中,我们正在使用我们已有的东西。 A Two.Group
that contains all of our shapes ( the bigger circle as well as the array of the smaller circles ). 包含所有形状的Two.Group
(较大的圆圈以及较小圆圈的数组)。 By using the method group.center();
通过使用方法group.center();
( line 31 ) we can normalize the children of the group to be around (0, 0). (第31行)我们可以将该组的子项规范化为(0,0)。 We can then change the translation
of the group in order to be in the desired position. 然后,我们可以更改组的translation
,以便处于所需的位置。
NB: This example is a bit complicated because it invokes underscore's defer
method which forces the centering of the group after all the changes have been registered. 注意:这个例子有点复杂,因为它调用了下划线的defer
方法,该方法在注册了所有更改后强制组的居中。 I'm in the process of fixing this. 我正在解决这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.