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访问矩形的高度和宽度。然而;在第二次通话中我没有这种控制。我想要做的是使用Tween访问这些属性。

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/
以下是使用Tween的另一个示例：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

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

2 个答案: