Javascript Canvas库的当前状态?[关闭]


90

我一直在研究HTML canvas库,遇到了这个问题。HTML canvas JavaScript库和框架的最新技术是什么?在2010年被问到。最高答案是Fabric.js。经过更多研究后,我发现http://www.html5canvastutorials.com/上有有关KineticJs的教程,该教程具有多个画布以提高速度。后来更多的研究表明,在速度和功能方面,Canvas库似乎无处不在。今天的JavaScript Canvas库和框架的当前状态是什么?有没有拔得头筹?

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


2
绝对。我相信选项看起来像这样:2d上下文-> KineticJS,fabric.js,paper.js或easyl.js。3d上下文(webgl)-> Three.js
埃里克·罗威尔

1
您可以查看kangax到画布库比较的链接。转贴这里docs.google.com/spreadsheet/...
ericbowden

4
我很惊讶这个问题尚未解决,因为这里的几乎所有内容通常都已经解决。我想回答,但我太害怕了(读为“害怕的”),因为它可能被认为不在主题之列。也许如果您将问题改写为“什么是相似点/权衡”,我可以加两分钱(阅读“答案”)
puk 2012年

4
我和@puk一样。另外,我认为在本质上只是“开放式”与标记为“非建设性”之间的语义鸿沟很有趣。粗略地说,这是说在世界上最流行和最全面的编程知识资料库中,没有一个单一的无法回答的问题是不值得考虑的。我知道它们不适合“ Q + A”,但为什么不只是将它们标记为“高度主观”,限制代表点并保持开放……一些东西。
马克·福克斯

1
仅仅为SO权衡,我也真的因为不断提出有用的问题而感到恼火,因为这些问题是主观的。所以呢!?这是有用的东西。
伊恩·邓肯

Answers:


80

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

我想说的是Easel.js,Fabric.js和Paper.js是目前使用最广泛的工具。我是根据每个存储库的Github监视程序的数量,它们在Google网上论坛中的讨论量以及我多久听说一次将它们用作Twitter上的画布库来判断的。

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

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


您的比较提供了很多信息,但是其公开可编辑的信息应该受到限制,因为其他一些用户会错误地编辑这些信息。我需要帮助是dynamicjs不支持nodjs吗?并且您能举一个像Windows绘画程序(用织物实时绘制对象圆)的
示例吗?

它不是公开可编辑的
kangax

1
真幸运,我找到了这个帖子!曾经与Kinetic合作,但还不成熟。然后尝试了画架,但是太重了。终于搬到了Fabric,真是太好了!
MeLight

@kangax对不起,请谅解,您能给我一个例子吗,例如Windows绘画程序(用织物实时绘制对象圆)
Thirumalai murugan

@Thirumalaimurugan您可以在这里:jsfiddle.net/fabricjs/nXmTC/1
kangax

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(当然)以外,我另外两个最喜欢的库是织物和纸张。


7
只是看了一下演示,表现确实很棒!也很高兴听到您已经进行了单元测试。我看到您允许创建多层。真好。在结构中,我们以相同的方式进行优化,但只有两层-一层用于选择,一层用于绘图-并且在内部(用户无法创建更多层)。创建库比较表时,以某种方式我错过了Kinetic。我们应该解决这个问题:)
kangax

6
更新:KineticJS现在在github中:github.com/ericdrowell/KineticJS
Eric Rowell

7
KineticJS与EaselJS相比如何?什么时候应该使用什么?
geeky_monster,2012年

1
谨指出,KineticJS也通过Kinetic.Path()形状html5canvastutorials.com/kineticjs/…支持SVG向量
Eric Rowell

2
@EricRowell Mate我爱KineticJS,它的速度,与GSAP的结合,但是让我头疼的是,有没有办法像FabricJS中那样自由地转换KineticJS对象?这是指向我要说的内容的链接参考:fabricjs.com/customization我不想使用FabricJs,因为它的速度非常慢,而且从各种单元测试中可以看出它的性能很低。我真的很期待找到一种能够在KineticJS中自由转换对象的方法,因为它将使生活变得更加轻松。谢谢普兰妮
praneybehl 2013年

62

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

  • 动能
  • 画架

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

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

  • 怪异且未记录的API不一致不必要地消耗了我很多时间。
  • 不一致的指针事件支持。具体地说,Fabric不会将“路径”视为是可选且可观察的真实形状对象。这不能满足我的需求,因为交互式路径是我应用程序的主要要求。
  • 在幕后添加了对“画布”的翻译,以定位对象。对我来说,Fabric试图在这方面过于机灵,而开发人员却无法清楚自己在做什么。
  • 关于如何移动,调整大小和旋转交互性的意见过于强烈。从很多方面来说,将此功能内置到框架中是很棒的,但就我而言,我不同意它的实现方式,这意味着本质上无论如何我都必须重新实现它。
  • 稀疏文档-方法文档的格式为:“ setX(Y)-将X设置为Y”的情况很多:-)

我看了看Paper,并没有走太远。在我看来,这似乎太过迟钝,而且还落在IMO的大便之内-它太多了,无法作为Canvas的简单对象模型的可视化库,但还不足以与D3竞争。另外,该文档再次不是特别可访问。

如果您具有Flash / ActionScript背景,我认为Easel可能很有意义,但我没有。另外,对于我的要求而言,它似乎过于注重游戏。棺材上的钉子再次是文件资料-不够用,以非标准格式显示。

因此,我最终选择了Kinetic,因为:

  • 真正丰富而清晰的教程和示例
  • API函数可以实现所谓的功能,而且在很大程度上可猜测-生产率更高,学习曲线更浅
  • 对它的作用和不作用的认识很明确-它不像其他的那么丰富,但这是有好处的;它做的事更少,但是做得更好
  • 路径是一流的公民形状,就像其他任何形状一样,这对我的需求至关重要。

Kinetic无论如何都不是完美的,并且有好几次我不得不深入研究源代码来弄清楚幕后的实际情况。另外,我想念Fabric的SVG解析和输出。


1
感谢您的回答,为我节省了很多时间。我将与Kinetic合作,希望您发现您已经说过的话。
巴谢维斯,

我已经对上面提供的iPad3和Samsung Galaxy Tab2上的库的拖放演示进行了非科学的用户测试。KineticJS在这里也很明显是赢家,它的响应速度更快,触摸位置更精确。
Per Quested Aronsson

1
我正在对两者进行评估,目前,fabricjs似乎已经很完整并且文档齐全。
albanx

9
杰里米,我很想听听更多关于Fabric中API不一致的信息。我尝试使其尽可能直观,因此,如果仍然有些怪异,我肯定会照顾它。您可以在这里提交票证或提及吗?自一月份以来,文档一直在改进,尽管仍然不如我希望的那样。关于交互性的强烈意见 -我想您可以这么说,尽管您可以进行很多调整。您到底想要什么不同?最后,指针事件 -不确定您的意思。路径肯定是真实的形状:fabricjs.com/quadratic-curve
kangax

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.