TweenJS RECT命令 “从中心生长”

2017-07-27 48 views 1 likes

创建此琴：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(); 
}

感谢。

来源

2017-07-27 John

“我希望从**中心成长** ...”中心，你指的是矩形的中心，还是画布的中心？ – CrisMVP3200

回答

最好的方法是更改图形的注册点，使其从中心增长。

您的代码：

.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）止跌效果不好，因为你必须补偿这个价值以及你的尺寸变化。]

来源

2017-07-27 22:28:25 Lanny

看起来不错，谢谢！ :) – John

TweenJS RECT命令 “从中心生长”

回答

相关问题