Прямоугольная команда TweenJS "расти из центра"

Question

Новое для создания здесь:

Создал эту скрипку: пример. Я бы хотел, чтобы прямоугольник рос из центра, а не из верхнего левого угла. Я не мог найти никакой помощи, я не знаю, что искать.

Код:

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/

[edit: Первоначально я сказал 2 варианта, но второй (с использованием regX и regY) не сработает, так как вам нужно изменить это значение, а также изменить размер.]