找回密码
 FreeOZ用户注册
查看: 14268|回复: 89
打印 上一主题 下一主题

[论坛技术] javascript库求推荐

[复制链接]
跳转到指定楼层
1#
发表于 16-1-2012 21:31:10 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?FreeOZ用户注册

x
MS对.net/C#平台的态度十分不明朗,公司开始考虑全面迁移到javascript/html5平台的可能性。
这两天在寻找合适的开源js库,请大家推荐。
基本的要求是:
1.基于canvas
2.提供带zorder的hittest支持
3.提供基于canvas的绘图扩展
4.一定的动画支持
5.最好提供一定的重绘区域管理功能。因为需要支持较高的分辨率,很多游戏js库的那种每帧全部自动刷新的方式估计会有效率问题。
6.如果自带部分控件库就更好了。
回复  

使用道具 举报

2#
 楼主| 发表于 16-1-2012 21:36:56 | 只看该作者
对了,还有一条,就是license允许用于商业用途
回复  

使用道具 举报

3#
发表于 16-1-2012 21:38:43 | 只看该作者
sencha

评分

参与人数 1威望 +50 收起 理由
woodheadz + 50 谢谢分享!

查看全部评分

回复  

使用道具 举报

4#
发表于 16-1-2012 21:43:46 | 只看该作者

回复 #1 woodheadz 的帖子

我很喜欢HTML5, 2011年几乎全年都在折腾canvas标准的实现
回复  

使用道具 举报

5#
 楼主| 发表于 16-1-2012 21:44:24 | 只看该作者
对了,再加一条,最好提供touch支持!
回复  

使用道具 举报

6#
 楼主| 发表于 16-1-2012 21:46:57 | 只看该作者
回复  

使用道具 举报

7#
 楼主| 发表于 16-1-2012 21:48:27 | 只看该作者
原帖由 coredump 于 16-1-2012 21:43 发表
我很喜欢HTML5, 2011年几乎全年都在折腾canvas标准的实现

我主要是不大喜欢javascript,其实所有弱类型的语言我都不大喜欢。
但对html5的绘图效率还真是觉得惊喜

评分

参与人数 1威望 +20 收起 理由
coredump + 20 同不喜欢

查看全部评分

回复  

使用道具 举报

8#
发表于 16-1-2012 22:30:46 | 只看该作者
跟随微软好像不大好。

1 倾向于把开发人员变成傻瓜,鼠标一点帮你搞定一切。
2 自己技术路线不清晰,抄袭其他人的技术,抛弃自己的。
回复  

使用道具 举报

9#
发表于 16-1-2012 22:31:39 | 只看该作者
为什么说MS对.net/C#平台的态度十分不明朗呢?我觉得MS的态度很清楚啊。 跨平台的HTML5, 微软平台的尽可以用C#啊
回复  

使用道具 举报

10#
发表于 16-1-2012 22:33:45 | 只看该作者
jquery

评分

参与人数 1威望 +50 收起 理由
woodheadz + 50 谢谢分享!

查看全部评分

回复  

使用道具 举报

11#
发表于 16-1-2012 22:48:47 | 只看该作者
用Vaadin + GWT 纯 Java ,比直接用Javascripts 好多了,可以很容易支持第三方Javascripts 库 (JSNI),比直接用Javacripts 开发效率高。

评分

参与人数 2威望 +70 收起 理由
woodheadz + 50 谢谢分享!
coredump + 20 谢谢分享!

查看全部评分

回复  

使用道具 举报

12#
发表于 16-1-2012 22:55:59 | 只看该作者
smarty GWT.
不喜欢
回复  

使用道具 举报

13#
发表于 16-1-2012 23:00:31 | 只看该作者
原帖由 woodheadz 于 16-1-2012 20:48 发表

我主要是不大喜欢javascript,其实所有弱类型的语言我都不大喜欢。
但对html5的绘图效率还真是觉得惊喜
别太高兴, canvas绘图再利用硬件加速上还有很长的路要走, 所以大部分还是软件渲染, OpenGL和canvas的2d api有很多不可调和的矛盾.

如果是做game, 可以考虑直接上webgl

评分

参与人数 1威望 +50 收起 理由
woodheadz + 50 谢谢分享!

查看全部评分

回复  

使用道具 举报

14#
发表于 16-1-2012 23:01:25 | 只看该作者
原帖由 huazhb 于 16-1-2012 21:31 发表
为什么说MS对.net/C#平台的态度十分不明朗呢?我觉得MS的态度很清楚啊。 跨平台的HTML5, 微软平台的尽可以用C#啊

Win8开始把HTML5和Javascript作为first class支持了.
回复  

使用道具 举报

15#
发表于 16-1-2012 23:02:49 | 只看该作者
原帖由 trisun 于 16-1-2012 21:48 发表
用Vaadin + GWT 纯 Java ,比直接用Javascripts 好多了,可以很容易支持第三方Javascripts 库 (JSNI),比直接用Javacripts 开发效率高。

我说不上真正的理由, 不过潜意识里就不喜欢GWT这样的思路, 不过GWT优点的确很多.
回复  

使用道具 举报

16#
 楼主| 发表于 17-1-2012 00:10:32 | 只看该作者
原帖由 coredump 于 16-1-2012 23:00 发表
别太高兴, canvas绘图再利用硬件加速上还有很长的路要走, 所以大部分还是软件渲染, OpenGL和canvas的2d api有很多不可调和的矛盾.

如果是做game, 可以考虑直接上webgl

不是game,是正经八百的应用软件。
但我们的软件有大量的绘图和动画,所以基本上只能考虑html5. 我前两天直接用canvas做了几个效率测试(win平台,chrome和ie9),感觉效率实在很棒。
但因为这个平台太新,很担心会碰到大的技术风险。
回复  

使用道具 举报

17#
 楼主| 发表于 17-1-2012 00:12:49 | 只看该作者
原帖由 trisun 于 16-1-2012 22:48 发表
用Vaadin + GWT 纯 Java ,比直接用Javascripts 好多了,可以很容易支持第三方Javascripts 库 (JSNI),比直接用Javacripts 开发效率高。

我们的应用比较特殊,开发效率我们这儿可以基本不用考虑。 用java的话,可能在苹果、win8的app store方面碰到问题。
回复  

使用道具 举报

18#
发表于 17-1-2012 00:16:08 | 只看该作者
原帖由 woodheadz 于 16-1-2012 23:10 发表

不是game,是正经八百的应用软件。
但我们的软件有大量的绘图和动画,所以基本上只能考虑html5. 我前两天直接用canvas做了几个效率测试(win平台,chrome和ie9),感觉效率实在很棒。
但因为这个平台太新,很担心 ...

基本的2d绘图应用, canvas完全可以胜任, vmware都用canvas做远程桌面客户端了.
回复  

使用道具 举报

19#
 楼主| 发表于 17-1-2012 00:20:35 | 只看该作者
原帖由 huazhb 于 16-1-2012 22:31 发表
为什么说MS对.net/C#平台的态度十分不明朗呢?我觉得MS的态度很清楚啊。 跨平台的HTML5, 微软平台的尽可以用C#啊

win8 里能上metro UI的app应用必须使用winrt,而不是.net, 而winrt甚至连个dc都取不到。 如果有复杂的自定义图形,要么使用Javascript,要么使用directx,根本无法用C#。
我觉得MS现在已经被苹果和google搞得阵脚大乱,自己家的看家本事都要弄丢了
回复  

使用道具 举报

20#
 楼主| 发表于 17-1-2012 00:26:59 | 只看该作者
原帖由 coredump 于 17-1-2012 00:16 发表

基本的2d绘图应用, canvas完全可以胜任, vmware都用canvas做远程桌面客户端了.

嘿嘿,你这句话让我安心不少啊
对了,你在做的html实现是用在哪个浏览器上的?
回复  

使用道具 举报

21#
发表于 17-1-2012 00:32:36 | 只看该作者
原帖由 woodheadz 于 16-1-2012 23:26 发表

嘿嘿,你这句话让我安心不少啊
对了,你在做的html实现是用在哪个浏览器上的?

Qt的qml框架里的, 不是浏览器的.
回复  

使用道具 举报

22#
 楼主| 发表于 19-1-2012 12:50:42 | 只看该作者
今天研究开源库Kinetic,主要想搞清楚它的hittest是怎么实现的,结果真是很让人吃惊。
Kinetic有个Shape对象,系统自动完成Shape对象的绘制准备工作(Scale,Rotate...)后调用回调传出context让调用端完成Shape的绘制。调用端绘制的图形自动支持hitTest检查。
实现的方式居然是每次做hitTest检查时:
1.以zindex逆序遍历所有的Shape对象,让Shape对象将图形逐个绘制到一个不可见的canvas上(这个canvas大小位置和可见canvas完全一样)
2.每绘制完一个图形,在不可见canvas上执行isPointInPath,如果为真则认为hit到,否则继续。

不可思议的是这样做似乎效率还不错!

有一个简单的替代方案是为每个对象单独创建一个canvas,这样程序就会非常简单,并且也能够自然支持复合模式(kinetic目前最大的问题就是不支持Shape复合)。Kinetic不采用这种模式,难道canvas那么消耗资源?
回复  

使用道具 举报

23#
发表于 19-1-2012 13:23:59 | 只看该作者
微软不是官方主推支持jquery吗?不过对于HTML5的特性是IE9跟不太上,所以微软也就没办法表明官方推荐什么库。反正我还是停留在HTML5之前的javascript库的,似乎是手机客户端对HTML5的特性比较需要,火了sencha哈。.Net应该可以直接掉winrt的API,不过所有HTML5的特性都是需要浏览器去支持的吧,也就是IE里面实现的javascript支持多少HTML5对象和方法咯
回复  

使用道具 举报

24#
 楼主| 发表于 19-1-2012 13:55:26 | 只看该作者
原帖由 mason00 于 19-1-2012 13:23 发表
微软不是官方主推支持jquery吗?不过对于HTML5的特性是IE9跟不太上,所以微软也就没办法表明官方推荐什么库。反正我还是停留在HTML5之前的javascript库的,似乎是手机客户端对HTML5的特性比较需要,火了sencha哈。.N ...

我们的需求比较特别,重点在于绘图功能和图形功能的互动方面,而不是组件库上。所以得找找jquery,sencha之类的UI框架以外的东西
回复  

使用道具 举报

25#
发表于 19-1-2012 14:43:32 | 只看该作者
原帖由 woodheadz 于 19-1-2012 11:50 发表
今天研究开源库Kinetic,主要想搞清楚它的hittest是怎么实现的,结果真是很让人吃惊。
Kinetic有个Shape对象,系统自动完成Shape对象的绘制准备工作(Scale,Rotate...)后调用回调传出context让调用端完成Shape的绘 ...
因为Canvas是立即模式的绘图, 其实就是像素操作, 所有在没有DOM可以依赖的前提下那么最终hittest都会落在isPointInPath上。


你说的多个Canvas也是常用的模式之一。
回复  

使用道具 举报

26#
发表于 19-1-2012 14:46:16 | 只看该作者
原帖由 woodheadz 于 19-1-2012 12:55 发表

我们的需求比较特别,重点在于绘图功能和图形功能的互动方面,而不是组件库上。所以得找找jquery,sencha之类的UI框架以外的东西

如果不需要太多的UI组件框架,而只是焦点在Canvas绘图上,也可以研究下 Fabric
https://github.com/kangax/fabric.js/
后台建立在Node.js上, 目标之一就是速度。
Demo:http://kangax.github.com/fabric.js/kitchensink/
MIT license, 应该也符合你的要求

[ 本帖最后由 coredump 于 19-1-2012 13:50 编辑 ]

评分

参与人数 1威望 +20 收起 理由
woodheadz + 20 你太有才了!

查看全部评分

回复  

使用道具 举报

27#
发表于 19-1-2012 14:54:10 | 只看该作者
在性能上Fabric就是用的多Canvas方式, 不过不是每个对象一个Canvas这么极端,因为这样反而完全丧失了Canvas做为2D底层绘图的优势,Fabric使用的是2层 Canvas。

https://github.com/kangax/fabric.js/wiki/Focus-on-speed
回复  

使用道具 举报

28#
发表于 19-1-2012 14:54:54 | 只看该作者
回复  

使用道具 举报

29#
 楼主| 发表于 19-1-2012 15:46:19 | 只看该作者
原帖由 coredump 于 19-1-2012 14:54 发表
在性能上Fabric就是用的多Canvas方式, 不过不是每个对象一个Canvas这么极端,因为这样反而完全丧失了Canvas做为2D底层绘图的优势,Fabric使用的是2层 Canvas。

https://github.com/kangax/fabric.js/wiki/Focus- ...

Kinetic也用了很多个canvas(7个)。和Fabric类似,它也是每个canvas有不同的作用,比如有绘制静态背景的canvas,不需要hittest支持的对象的canvas等等。每一层canvas上可以同时绘制多个对象。为了分清楚用户点击鼠标时到底是点中了canvas上的哪个对象,它就采取了那么一种我觉得有点“极端”的hitTest测试方式。
如果每个对象单独放一个canvas,那么只需要针对不同的canvas执行isPointInPath即可,而不用像Kinetic一样,把所有需要hitTest测试的对象全部重绘一次(最坏的情况下)才能得到结果。
正在研究另一个游戏js库EaselJS,号称要用JS模拟Flash对象模型的,看到现在觉得他们似乎是用每个对象一个canvas的方式。 但EaselJS的动画效率似乎没有Kinetic的效率来得好。

Fabric还没仔细研究,看它的介绍似乎偏重于SVG之类的复杂图形的支持? 我们的绘图不会那么复杂,但会有很多需要执行hitTest的对象,不知道适用不?
等研究完EaselJS再去看看
回复  

使用道具 举报

30#
发表于 19-1-2012 16:34:12 | 只看该作者
原帖由 woodheadz 于 19-1-2012 14:46 发表
把所有需要hitTest测试的对象全部重绘一次(最坏的情况下)才能得到结果。...

我觉得这个之所以没想像中性能那么差, 是因为hitTest本来就是个慢速,低频率的事情, 现在的机器, 一个满屏的canvas, 重绘的FPS也很快, 如果跑到移动设备上, 硬件是差了, 可是屏幕也小了, 所以,都在可接受的范围内, hitTest成不了瓶颈点。
回复  

使用道具 举报

您需要登录后才可以回帖 登录 | FreeOZ用户注册

本版积分规则

小黑屋|手机版|Archiver|FreeOZ论坛

GMT+11, 28-12-2024 05:06 , Processed in 0.079816 second(s), 47 queries , Gzip On, Redis On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表