Javascript画布库的当前状态？

Question

Javascript画布库的当前状态？

eri*_*den 90 javascript html5 html5-canvas

我一直在研究HTML canvas库,我遇到了这个问题.HTML canvas JavaScript库和框架的当前最新技术是什么？那是在2010年被问到的.最好的答案是Fabric.js.在做了一些研究之后,我遇到了http://www.html5canvastutorials.com/,其中包含有关KineticJs的教程,这些教程拥有多个速度画布.后来进行的一项研究表明,在速度和功能方面,Canvas库似乎已经到处都是.今天JavaScript Canvas库和框架的当前状态是什么？有一个出现在顶部？

编辑:由于图书馆不断变化,很多人最近来到这里获取有关新图书馆的新闻和信息,我将问题改为更加永恒.

Answer 1

kan*_*gax 80

免责声明:我是Fabric.js的作者.

我会说Easel.js,Fabric.js和Paper.js是目前使用最多的.我判断每个存储库的Github观察者数量,他们的Google网上论坛的讨论量,以及我在Twitter上用作画布库的频率.

这些也是具有或多或少不错的文档,示例/演示,讨论组和单元测试(大多数其他画布库中的测试状态非常悲伤).

我还维护着各种画布库的比较表,您可以在其中查看最近更新库的大小,其大小,对IE <9或node.js的支持等等.

Answer 2

Eri*_*ell 66

编辑:KineticJS不再被积极维护.

免责声明:我创建了KineticJS

KineticJS实际上做得很好.您可以在Github找到源代码,目前由2180人主演.

它可以处理数千个并发形状:

10,000次拖放压力测试:http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

使用工具提示的10,000个形状:http: //www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

它有非常好的事件支持,包括移动事件,它有一个非常可靠的100个单元测试套件,因此代码库感觉非常可靠.

kangax:PS与fabric.js的精彩工作!除了KineticJS(当然),我最喜欢的另外两个库是织物和纸张.

只是看了演示,性能确实看起来非常棒!也很高兴听到你有单元测试.我看到你允许创建多个图层.真好.在结构中,我们以相同的方式进行优化,但只有2层 - 一个用于选择,一个用于绘图 - 和内部(用户无法创建更多).不知何故,我在创建库比较图时错过了Kinetic.我们应该修复:) (7认同)
KineticJS与EaselJS相比如何？什么时候应该使用什么？ (7认同)
更新:KineticJS现在在github:https://github.com/ericdrowell/KineticJS (6认同)
@EricRowell Mate我喜欢KineticJS,它的速度,与GSAP的结合,但是让我头脑旋转的方法有一种方法可以像FabricJS那样自由地转换KineticJS对象吗？以下是我想说的链接参考:http://fabricjs.com/customization/我不想使用FabricJs,因为它非常慢,而且它的低性能可以从各种单元测试中看出来.我真的很期待找到一种能够在KineticJS中自由变换物体的方法,因为它会让生活变得更加轻松.谢谢,Praney (2认同)

Answer 3

Jer*_*ton 63

对于最近的读者,截至2013年1月,我评估了:

动力学
布
纸
画架

通过"评估",我做的不仅仅是阅读文档; 我创建了一个原型应用程序

我从Fabric开始,因为它似乎拥有最大的社区,并认为这将是我的解决方案.但是,由于以下原因,我放弃了Fabric:

奇怪的和未记录的API不一致,不必要地耗费了我很多时间.
不一致的指针事件支持.具体来说,Fabric不会将"Path"视为可选择和可观察的真实形状对象.这不符合我的需求,因为交互式路径是我的应用程序的主要要求.
幕后添加了对Canvas的翻译以定位对象.对我来说,Fabric在这方面试图过于聪明,而不向开发人员清楚它正在做什么.
关于如何移动,调整大小和旋转交互性工作的过于强烈的意见.在很多方面,将这个功能内置到框架中是很棒的,但在我的情况下,我不同意它的实现方式,这意味着无论如何都必须自己重新实现它.
稀疏文档 - 很多情况下,方法的文档形式如下:"setX(Y) - 将X设置为Y":-)

我看了一眼Paper并没有走得太远.它对我来说似乎过于迟钝,而且也介于IMO之间 - 它太过于可视化库,无法成为Canvas的简单对象模型,但是与D3竞争的可视化库还不够.此外,文档再次不是特别容易访问.

我认为如果你有Flash/ActionScript背景,Easel可能会有很多意义,但事实并非如此.另外,对于我的要求,它似乎过于注重游戏.棺材中的指甲再次记录 - 不够,并以非标准格式呈现.

所以,我最终选择了Kinetic因为:

真正丰富而清晰的教程和示例
API函数执行它们所谓的并且在很大程度上是可猜测的 - 更快的生产力,更浅的学习曲线
相当清楚它做了什么以及它做了什么 - 它不像其他一些那样富有,但这是一个好处; 它做的事情少,但做得更好
路径是一流的公民形状,就像任何其他形状一样,这对我的要求至关重要.

无论如何,Kinetic并不完美,而且有几次我不得不深入研究源代码以找出实际发生的事情.另外,我想念Fabric的SVG解析和输出.

Jeremy,我很想听到更多有关Fabric中__API不一致的信息.我尽量让它尽可能直观,所以如果有些东西仍然很奇怪,我肯定想要照顾它.你可以在这里提交机票或提及吗？__文档自1月以来一直在改善,但仍然没有我想要的那么好.__Strong观点_交互性 - 我想你可以这么说,虽然你可以做很多调整.你究竟想要什么不同？最后,__pointer events__ - 不确定你的意思.路径肯定是一个真正的形状:http://fabricjs.com/quadratic-curve/ (8认同)

Answer 4

ben*_*elo 23

我强烈推荐pixijs.它是一个高性能的画布库.

Pixi.js是一款2D webGL渲染器,具有无缝画布回退功能,可以在桌面和移动设备的所有现代浏览器中使用.

http://www.goodboydigital.com/pixi-js-is-out/

截至2014年7月,这似乎是最好的画布库.有4,000人在Github上出演,它被大公司和代理商使用.http://www.pixijs.com/projects/喜欢谷歌. (3认同)

归档时间：	13 年，10 月前
查看次数：	40537 次
最近记录：	10 年，9 月前