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

sia*_*ana 2 javascript html5 html5-canvas fabricjs

我需要创建一个HTML5画布来捕获一些输入.我想渲染一个线条图(白色的黑线),并允许用户为这些部分着色.

然后,我希望能够在最后检索这些数据,以便在服务器端处理它,以便以后再次渲染它.

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

我查看过HTML5和canvas标签.也在Kinetic js库中.我已经能够快速演示我需要的东西.

http://jsfiddle.net/6qskx/

根据我的演示,这种方法很难维护,并且难以在第一时间设置图像,因为每个部分都需要计算和绘制,以便可以将事件添加到它们中.

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

  • 哪个框架最好
  • 哪种方法最灵活,最容易理解.

abh*_*tap 6

我使用Kinectic Js库进入加载和检索数据(画布状态)的类似情况.

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

它通过canvas.toJSON()方法保存对象的属性或状态,然后使用canvas.loadFromJSON()方法重新加载画布.