如何在容器中心旋转我的Tween

Question

我有一个容器，大小为276*266，我想在这个容器的中心旋转一个对象，因此我使用了以下代码：

    createjs.Tween.get(element, {loop: false})
    .to({regY:element.height/2, regX:element.width/2,x:element.x,y:element.y,rotation: 360}, 1000)
    .to({regY:element.height/2, regX:element.height/2,x:element.x,y:element.y,rotation: 0}, 1000)
    .to({alpha: 0}, 500, createjs.Ease.getPowInOut(2))
    .to({alpha: 1}, 500, createjs.Ease.getPowInOut(2));

但它总是在容器的左上角旋转，有人知道为什么吗？我该怎么做才能让它在容器中间旋转？

- Coolbrain

---

你是想对注册点和位置进行缓动，还是只是旋转和透明度？ - Lanny

只想将位图在容器中间的原始位置旋转。 - Coolbrain

Answer 1

这很简单：

1. 将对象的x和y位置设置为容器宽度和高度的50%。
2. 将内容的regX和regY设置为其宽度和高度的50%。

请注意，您不能使用.width和.height来获取这些值。如果内容是位图、精灵、文本或带有这些类型内容的容器，则可以使用 getBounds() 获取宽度/高度和偏移量。如果内容是Graphics/Shape，则无法自动获取大小，必须自行指定大小。

var container = new createjs.Container();
stage.addChild(container);
var containerWidth = 100;
var containerHeight = 100;

// Draw some "bounds" on the container. This is just for the visual, 
// and does not actually affect the bounds, since it can not be calculated.
var bounds = new createjs.Shape();
bounds.graphics.f("#eee").dr(0,0,containerWidth,containerHeight);
container.addChild(bounds);

// Draw the contents. Note this is drawn with the registration point at the top left to illustrate the regX/regY at work.
var shape = new createjs.Shape();
shape.graphics.f("#f00").drawRect(0,0,50,50);
container.addChild(shape);

// Center the shape
shape.x = containerWidth/2;
shape.y = containerHeight/2;

// Change the registration point to the center
shape.regX = 25; //25 is half of the width on the shape that we specified.
shape.regY = 25;

// Tween the shape
createjs.Tween.get(shape).to({rotation:360}, 3000);

这里有一个包含该代码的 fiddle: http://jsfiddle.net/lannymcnie/548jsume/

- Lanny

---

有关 EaselJS 中宽度和高度的更多信息，请查看此文章：http://blog.createjs.com/update-width-height-in-easeljs/ - Lanny