TweenJS rect命令“从中心生长”

Question

新创造to在这里：

创建了这个小提琴：示例。我希望直肌从中间而不是左上角长出来。我找不到任何帮助，我不知道该找什么。

代码：

const   PAGE_WIDTH  = 150,
        PAGE_HEIGHT = 75;

var stage = new createjs.Stage("canvas");
createjs.Ticker.setFPS(60);
createjs.Ticker.on("tick", tick);

var page = new createjs.Shape();
page.regX = PAGE_WIDTH/2;
page.regY = PAGE_HEIGHT/2;
page.x = 50;
page.y = 50;
stage.addChild(page);

var pageCommand = page.graphics
   .beginFill('red')
   .drawRect(0, 0, 1, 1).command;

createjs.Tween.get(pageCommand)
   .to({w:PAGE_WIDTH, h: PAGE_HEIGHT}, 700, createjs.Ease.elasticOut)

function tick() {
  stage.update();
}

谢谢。

Answer 1

最好的方法是改变你的图形的注册点，使它从中心生长。

你的代码：

.drawRect(0, 0, 1, 1).command;
.to({w:PAGE_WIDTH, h: PAGE_HEIGHT})

相反：

.drawRect(-1.-1, 2, 2);
.to({x:-PAGE_WIDTH/2, y:-PAGE_WIDTH/2, w:PAGE_WIDTH, h: PAGE_HEIGHT})

小提琴：http://jsfiddle.net/1kjkqo2v/

编辑:我最初说过有两个选项，但第二个选项(使用regX和regY)不能很好地工作，因为您必须在这个值和大小之间进行调整。