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));

但它始终在容器的左上方旋转，有人可以知道为什么我要在容器中间旋转它吗？

Answer 1

这非常简单：

将对象的x和y位置设置为容器宽度和高度的50％。
将内容的regX和regY设置为宽度和高度的50％。

请注意，您无法使用.width和.height来获取这些值。如果内容是具有这些类型内容的Bitmap，Sprite，Text或Container，则可以使用getBounds()来获取宽度/高度和偏移量0.如果内容是图形/形状，则无法获取它会自动生成，并且必须自己指定尺寸。

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);

以下是该代码的小提琴：http://jsfiddle.net/lannymcnie/548jsume/

如何在容器中心旋转我的补间

1 个答案: