CreateJS如何动画矩形的宽度和高度？

Question

所以我想用Createjs动画创建一个矩形大小。我发现有两种方法来创建一个矩形。或者：

var rectangle = new createjs.Rectangle(0,0,100,100); 

或

var rectangle = createjs.Shape(); 
rectangle.graphics.beginFill("000000").drawRect(x,y,w,h); 

当我把它添加到舞台上的第一次调用它不添加。不过，我似乎可以通过rectangle.width和rectangle.height访问矩形的高度和宽度。然而;在第二次电话会议上，我没有这种控制。我想要做的是使用补间访问这些属性。

createjs.Tween.get(rectangle).to({width:###, height:###}, timeinmilli); 

，我已经取得了一些成功的唯一事情是rectangle.scaleX和rectangle.scaleY然而，这相应地在屏幕上移动矩形，我不希望这样。任何人都知道一些简单的解决方案访问和矩形的高度和宽度属性，以便与他们动画？

Answer 1

一个EaselJS Rectangle只是几何 - 定义一个x，y，宽度和高度（就是这样！）。它用于定义矩形区域，如sourceRect，对象边界等。

Graphics.drawRect()方法是你想要的（你的第二个例子）。

在早期版本的EaselJS中，您需要重新绘制一个新尺寸的形状，记住先清除它（并更新舞台）。在新版本（0.7.0+），您可以使用命令对象来修改图形容易得多：

// Store off a command (the "command" after any graphics operation) 
var rectangleCommand = rectangle.graphics.drawRect(0,0,100,100).command; 

// Modify it 
rectangleCommand.w = 300; 

• 我扔了一个快速拨弄起来：http://jsfiddle.net/215wj7aL/
• 下面是另一个示例使用吐温：http://jsfiddle.net/215wj7aL/1/

您可以在线查看所有commands的文档，例如，这里是DrawRect命令：http://createjs.com/docs/easeljs/classes/Graphics.Rect.html - 查看完整列表的侧边菜单中的所有命令。

Answer 2

Rectangle类表示一个几何矩形，带有辅助方法，而不是绘制的Shape。

您可以更新绘制每个刻度，也可以使用保留的绘制命令。

var rectCmd = myShape.graphics.beginFill("red").drawRect(0,0,100,100).command; 
//.. later: 
rectCmd.w = 200; 

http://createjs.com/docs/easeljs/classes/Graphics.html#property_command http://createjs.com/docs/easeljs/classes/Graphics.Rect.html