jQuery SVG与Raphael [关闭]

2020/10/09 19:21 · javascript ·  · 0评论

我正在使用SVG和JavaScript / jQuery构建交互式界面,并且试图在RaphaeljQuery SVG之间做出选择我想知道

  1. 两者之间的权衡是什么
  2. 发展势头似乎在哪里。

我不需要Raphael中的VML / IE支持,也不需要jQuery SVG的绘图功能。我主要对在SVG画布上创建,设置动画和操作单个项目的最优雅方式感兴趣。

我最近同时使用了Raphael和jQuery SVG-这是我的想法:

拉斐尔

优点:良好的入门库,使用SVG可以轻松快速地完成很多事情。良好的书面记录。很多例子和演示。非常可扩展的体系结构。伟大的动画。

缺点:是实际SVG标记上的一层,这使得使用SVG难以完成更复杂的事情-例如分组(它支持Set,但不支持分组)。使用现有元素进行编辑时效果不佳。

jQuery SVG

优点: jQuery插件(如果您已经在使用jQuery)。良好的书面记录。很多示例和演示。支持大多数SVG元素,允许轻松地本地访问元素

缺点:体系结构不如Raphael可扩展。有些事情可能会更好地记录下来(例如SVG元素的配置)。使用现有元素进行编辑时效果不佳。动画依赖SVG语义-并不是那么好。

SnapSVG作为Raphael的纯SVG版本

SnapSVG是Raphael的继任者。仅支持SVG的浏览器支持它,并且几乎支持SVG的所有功能。

结论

如果您要快速简便地做某事,Raphael是一个简单的选择。如果您要做一些更复杂的事情,我选择使用jQuery SVG,因为与Raphael相比,我可以更轻松地操纵实际标记。而且,如果您需要非jQuery解决方案,那么SnapSVG是一个不错的选择。

对于后代,我要指出的是我最终选择了Raphael,这是因为它提供了干净的API和“免费” IE支持,并且由于积极的发展看起来很有希望(例如,仅在0.7中添加了事件支持)。但是,我将不回答这个问题,并且我仍然想听听别人使用Javascript + SVG库的经历。

我是Raphael的忠实拥护者,并且发展势头似乎很强劲(上周晚些时候发布了0.85版)。另一个很大的好处是,其开发人员Dmitry Baranovskiy目前正在开发Raphael图表插件g.raphael,看起来它的外观非常漂亮(Flickr早期版本的输出中有一些示例) 。

但是,只是为了将另一个可能的竞争者加入SVG库组合中,Google的SVG Web看起来确实非常有前途(尽管我不是Flash的忠实拥护者,它用于在不符合SVG的浏览器中进行渲染)。可能值得一看,尤其是在即将举行的SVG Open会议上

Raphael绝对易于安装和上手,但请注意,有些方法无法在SVG中表达,而Raphael则无法实现。如上所述,没有“组”。这意味着您不能实现坐标变换的图层。相反,只有一个坐标变换可用。

如果您的设计依赖于嵌套坐标变换,那么Raphael不适合您。

自六月以来,拉斐尔(Oh Raphael)取得了长足发展。有一个可以使用的新图表库,这些图表非常引人注目。Raphael还支持完整的SVG路径语法,并集成了真正的高级路径方法。快来看我站点上的1.2.8+(Shameless插件),然后从那里弹跳到Dmitry的站点。
http://www.irunmywebsite.com/raphael/raphaelsource.html

我认为这不是完全无关的,但是您是否考虑过画布?Process JS这样的东西可以使它更简单。

您还应该看看svgweb。它使用Flash来在IE和其他浏览器中渲染svg(在支持比浏览器本身更多的情况下)。

http://code.google.com/p/svgweb/

我将投票支持Raphael-跨浏览器支持,干净的API和一致的更新(到目前为止)使使用起来很高兴。它与jQuery的配合也很好。处理过程很酷,但是作为当前最先进的东西的演示更有用。

作为Java语言的初学者,我发现Rapahel示例并不那么容易,我建议 http://cancerbero.mbarreneche.com/raphaeltut,这是一个真正的分步教程。

对于那些不关心IE6 / IE7的人,写Raphael的那个人专门为现代浏览器构建了一个svg引擎:Snap.svg ..他们有一个非常不错的网站,提供了出色的文档:http : //snapsvg.io

snap.svg易于使用,开箱即用,可以操纵/更新现有的SVG或生成新的SVG。您可以在snap.io关于页面上阅读这些内容,但是这里有一个简要介绍:

缺点

  • 要使用snap的功能,您必须放弃对旧版浏览器的支持。Raphael支持IE6 / IE7等浏览器,仅IE9及更高版本,Safari,Chrome,Firefox和Opera支持快照功能。

优点

  • 实现SVG的全部功能,例如遮罩,剪切,图案,完整渐变,组等。

  • 使用现有SVG的能力:不必使用Snap生成内容,就可以与Snap一起使用,从而使您可以使用任何常用的设计工具来创建内容。

  • 使用简单易用的JavaScript API全面支持动画

  • 与SVG字符串(例如,通过Ajax加载的SVG文件)一起使用时,无需先实际呈现它们,类似于资源容器或Sprite表。

如果您感兴趣,请查看:http : //snapsvg.io

由于这里尚未提到:您还应该看看Dojox.drawing,它也提供了良好的SVG绘制功能。它具有一组令人印象深刻的功能。我只是用它开始一个项目,但是在我看来,它(至少在功能方面)比Raphael和JQuerySVG好得多。

该演示使我确信可以使用它代替Raphael / JQuerySVG:http ://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082

参考:http :
//dojotoolkit.org/reference-guide/dojox/index.html

关于Dojocampus的参考:http ://docs.dojocampus.org/dojox/drawing

下载Dojo(包括Dojox):http ://dojotoolkit.org/download/

您可能要查看的另一个svg javascript库是d3.js。http://d3js.org/

我更喜欢使用RaphaelJS,因为它具有强大的跨浏览器功能。但是,使用RaphaelJS(复杂渐变...)无法实现某些SVG和VML效果。

Google还开发了自己的库以在IE中启用SVG支持:http :
//svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip

如果不需要VML和IE8支持,请使用Canvas(例如PaperJS)。查看Windows 7的最新IE10演示。它们在Canvas中具有惊人的动画。SVG无法执行任何接近它们的操作。所有移动浏览器都提供“总体画布”。SVG无法在Android 2.0- 2.3的早期版本中运行(据我所知)

是的,Canvas无法扩展,但是它是如此之快,以至于您可以比能够滚动查看端口的浏览器更快地重绘整个画布。

从我的角度来看,Microsoft的优化提供了将Canvas用作常规GDI引擎并实现图形应用程序的方式,就像我们现在在Windows上所做的那样。

本文地址:http://javascript.askforanswer.com/jquery-svgyuraphael-guanbi.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!