javascript - 如何使用 TweenJS 和 Easeljs 更改矩形的形状

标签 javascript canvas createjs easeljs tween.js

我有一个简单的形状:

var line = new createjs.Shape();
line.graphics.beginFill('red').drawRect(0, 0, 1, 10);

我想让这个形状的宽度在这种情况下从 1px 变为 100px

我该如何解决这个问题?

我已经阅读了几乎所有文档,但目前仍不确定是否可行,而且我似乎无法在他们的网站或其他任何地方找到这方面的示例。

createjs.Tween.get(line).to({width: 100}, 1000, linear);

这几乎出现在所有动画文档中,但在使用宽度时没有任何作用。当我更改 x 或 y 属性时,它工作正常。有我可以更改的属性列表吗?如果是的话我在哪里可以找到这些。

我从 stackoverflow 上的一个问题中找到了这个例子: http://jsfiddle.net/cZDEP/1/

但是在这种情况下他们没有使用 TweenJS,是否可以使用 TweenJS 替换此示例,或者在这种情况下我必须使用 Ticker 来为线条设置动画吗?

最佳答案

这是我使用图形命令整理的一个快速示例: http://jsfiddle.net/d0d6mpLu/

EaselJS 中没有宽度/高度。您可以获取和设置大多数显示对象的边界,但不能获取和设置形状。 http://blog.createjs.com/update-width-height-in-easeljs/

对于上面的示例,您可以保存任何图形命令,并稍后修改其属性(并更新舞台以反射(reflect)它)。 EaselJS 0.7.0 中添加了图形命令。以下是该示例中使用的 drawRect 命令的文档:http://www.createjs.com/docs/easeljs/classes/Graphics.Rect.html

要保存命令,您可以在添加指令后访问 Graphics 的 command 属性。最简单的方法是链接命令属性:

var rectCommand = bar.graphics.drawRect(0,0,0,30).command;

然后你可以修改它:

rectCommand.w = 200;

另一种方法是绘制矩形,并使用 scaleX/scaleY 属性。这适用于旧版本的 EaselJS。对于包含的示例,您需要一个单独的形状来调整其比例。以下是使用该方法的更新示例:http://jsfiddle.net/d0d6mpLu/1/

希望有帮助!

关于javascript - 如何使用 TweenJS 和 Easeljs 更改矩形的形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34780556/

相关文章:

javascript - 使用 Jquery 获取复选框值有时会返回错误值,但并非每次都返回错误值

javascript - 如何使用 require.js 删除 Backbone View ?

android - 如何在 Activity View 中重绘 Canvas

javascript - CreateJS createjs.Ticker.off ("tick",element.update)不起作用

javascript - 断断续续的 Canvas 动画 - EaselJS

javascript - 如何仅使用 jQuery 使单选按钮选项依赖于其他单选按钮选项?

Javascript + iPhone 在对话框中打开文件

java - 从事 Java GUI/Canvas 项目

javascript - 翻译后递归清除 Canvas

javascript - 如何在同一行中制作不同大小的文本