javascript - 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);

当我在第一次调用时将其添加到舞台时，它没有添加。不过，我似乎能够使用矩形.宽度和矩形.高度访问矩形的高度和宽度。然而;在第二次通话时我没有这种控制权。我想做的是使用 Tween 访问这些属性。

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

我唯一取得了一些成功的是矩形.scaleX和矩形.scaleY，但是这会相应地在屏幕上移动矩形，我不希望这样。有人知道一些简单的解决方案来访问矩形的高度和宽度属性，以便用它们制作动画吗？

Answer 1

EaselJS 矩形 只是几何图形 - 定义 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/
• 这是使用 Tween 的另一个示例:http://jsfiddle.net/215wj7aL/1/

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