在JavaScript数组中存储形状以在某些操作后重绘

Question

我正在用html5开发一个编辑器。点击时我有创建形状的按钮，包括三角形，矩形，六边形，五边形，七边形，线条等。现在我还想对这些形状执行操作，如旋转，翻转，撤消，重做等等。我想将这些绘制的对象保存在JavaScript数组中，这样我就可以在画布上执行操作后创建它们，因为单个形状无法在画布中旋转或翻转，我们必须重绘它。我怎样才能做到这一点？提前谢谢。

Answer 1

如你所说，你必须清除你的背景并在你改变它们时重绘你的形状。 清除和重绘所有上下文并不是必须的，您只需重新绘制修改形状的区域。

因此，您必须使用自己的属性和渲染方法将形状视为对象（以OOP方式）。 我要做的是创建另一个类来将变换应用于形状（翻转只是-1比例）。

如果你这样做，它可能会成为一项巨大的工作（你添加的功能越多，你的代码变得越复杂，你的应用程序的第一个设计可能会在工作期间重新思考）。 我建议你使用一个已经完成这项工作的框架。

例如，cgSceneGraph旨在让开发人员添加自己的渲染方法，并提供许多方法来操作它们。我是框架的设计者，随时可以询问有关如何应用转换或创建自己的节点的更多信息（教程和示例已经在网站上，但我很乐意帮助您）。

Answer 2

我有一个项目，如果你点击一个矩形的图像，然后你可以绘制一个矩形，点击一个椭圆，然后你可以绘制一个椭圆。我的形状存储为对象，然后使用Canvas绘制，可以翻转，旋转等我没有实现撤消重做。

我的项目位于http://canvimation.github.com/

我的项目的源代码位于https://github.com/canvimation/canvimation.github.com

主分支是当前的工作代码。欢迎您使用任何代码或分叉项目。