javascript - Html5 复杂形状和事件 - 推荐一种可维护和灵活代码的方法

Question

我需要创建一个 HTML5 Canvas 来捕获一些输入。我想渲染一个线条图(白底黑线)并允许用户为其中的部分着色。

然后我希望能够在最后检索此数据以在服务器端处理它，以便它可以在以后再次呈现。

我想将用于渲染图像的数据存储在数据库中，以便可以绘制任何图像。

我查看了 HTML5 和 canvas 标签。同样在 Kinetic js 库中。我已经能够快速演示我需要的内容。

http://jsfiddle.net/6qskx/

从我演示的情况来看，这种方法很难维护，而且一开始就很难设置图像，因为每个部分都需要计算和绘制，以便可以向其中添加事件。

我的问题是 - 有没有人有任何类似这样的经验或许多框架中的任何一个建议:

• 哪个框架最好
• 哪种方法最灵活、最易于维护。

Answer 1

我遇到了使用 Kinectic Js 库加载和检索数据( Canvas 状态)的类似情况。

现在我正在使用 fabric js 库。 https://github.com/kangax/fabric.js/

它通过 canvas.toJSON() 方法保存对象的属性或状态，然后使用 canvas.loadFromJSON()< 重新加载 Canvas /em> 方法。