javascript库求推荐

woodheadz

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

woodheadz

对了，还有一条，就是license允许用于商业用途

coredump

sencha

coredump

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

woodheadz

对了，再加一条，最好提供touch支持！

woodheadz

原帖由 coredump 于 16-1-2012 21:43 发表

                               
登录/注册后可看大图

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

你在搞实现啊？ 有点厉害哦
我才开始应用

woodheadz

原帖由 coredump 于 16-1-2012 21:43 发表

                               
登录/注册后可看大图

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

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

狮子的眼睛

跟随微软好像不大好。

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

huazhb

为什么说MS对.net/C#平台的态度十分不明朗呢？我觉得MS的态度很清楚啊。 跨平台的HTML5， 微软平台的尽可以用C#啊

周星星1832

jquery

trisun

用Vaadin + GWT 纯 Java ,比直接用Javascripts 好多了，可以很容易支持第三方Javascripts 库 （JSNI)，比直接用Javacripts 开发效率高。

周星星1832

smarty GWT.
不喜欢

coredump

原帖由 woodheadz 于 16-1-2012 20:48 发表

                               
登录/注册后可看大图

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

别太高兴, canvas绘图再利用硬件加速上还有很长的路要走, 所以大部分还是软件渲染, OpenGL和canvas的2d api有很多不可调和的矛盾.

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

coredump

原帖由 huazhb 于 16-1-2012 21:31 发表

                               
登录/注册后可看大图

为什么说MS对.net/C#平台的态度十分不明朗呢？我觉得MS的态度很清楚啊。 跨平台的HTML5， 微软平台的尽可以用C#啊

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

coredump

原帖由 trisun 于 16-1-2012 21:48 发表

                               
登录/注册后可看大图

用Vaadin + GWT 纯 Java ,比直接用Javascripts 好多了，可以很容易支持第三方Javascripts 库 （JSNI)，比直接用Javacripts 开发效率高。

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

woodheadz

原帖由 coredump 于 16-1-2012 23:00 发表

                               
登录/注册后可看大图

别太高兴, canvas绘图再利用硬件加速上还有很长的路要走, 所以大部分还是软件渲染, OpenGL和canvas的2d api有很多不可调和的矛盾.

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

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

woodheadz

原帖由 trisun 于 16-1-2012 22:48 发表

                               
登录/注册后可看大图

用Vaadin + GWT 纯 Java ,比直接用Javascripts 好多了，可以很容易支持第三方Javascripts 库 （JSNI)，比直接用Javacripts 开发效率高。

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

coredump

原帖由 woodheadz 于 16-1-2012 23:10 发表

                               
登录/注册后可看大图

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

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

woodheadz

原帖由 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搞得阵脚大乱，自己家的看家本事都要弄丢了

woodheadz

原帖由 coredump 于 17-1-2012 00:16 发表

                               
登录/注册后可看大图

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

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

coredump

原帖由 woodheadz 于 16-1-2012 23:26 发表

                               
登录/注册后可看大图

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

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

woodheadz

今天研究开源库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那么消耗资源？

mason00

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

woodheadz

原帖由 mason00 于 19-1-2012 13:23 发表

                               
登录/注册后可看大图

微软不是官方主推支持jquery吗？不过对于HTML5的特性是IE9跟不太上，所以微软也就没办法表明官方推荐什么库。反正我还是停留在HTML5之前的javascript库的，似乎是手机客户端对HTML5的特性比较需要，火了sencha哈。.N ...

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

coredump

原帖由 woodheadz 于 19-1-2012 11:50 发表

                               
登录/注册后可看大图

今天研究开源库Kinetic，主要想搞清楚它的hittest是怎么实现的，结果真是很让人吃惊。
Kinetic有个Shape对象，系统自动完成Shape对象的绘制准备工作（Scale，Rotate...）后调用回调传出context让调用端完成Shape的绘 ...

因为Canvas是立即模式的绘图， 其实就是像素操作， 所有在没有DOM可以依赖的前提下那么最终hittest都会落在isPointInPath上。


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

coredump

原帖由 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 编辑 ]

coredump

在性能上Fabric就是用的多Canvas方式， 不过不是每个对象一个Canvas这么极端，因为这样反而完全丧失了Canvas做为2D底层绘图的优势，Fabric使用的是2层 Canvas。

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

coredump

这里有一个Fabric的PPT
http://www.slideshare.net/kangax ... ng-acanvaslibrarybk

woodheadz

原帖由 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再去看看

coredump

原帖由 woodheadz 于 19-1-2012 14:46 发表

                               
登录/注册后可看大图

把所有需要hitTest测试的对象全部重绘一次（最坏的情况下）才能得到结果。...

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