createjs - TweenJS rect 命令“从中心增长”

Question

这里是 createjs 的新手：

创建了这个小提琴：example。我希望矩形从中心而不是从左上角生长。我找不到任何帮助，我不知道要搜索什么。

代码：

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/

[编辑：我最初说 2 个选项，但第二个（使用 regX 和 regY）效果不佳，因为您必须调整该值以及您的大小更改。]