基于HTML5技术的电力3D监控应用（二）

我们选用HTML5技术还是顶着很大压力，毕竟HTML5技术性能行不行，浏览器兼容性会不会有问题，这些在项目选型阶段还是充满疑惑，项目做到现在终于快收尾了我们才敢松口气，压力基本顶住了，我个人总结的经验是：HTML5性能肯定不是最高，但对企业应用足够高效，HTML5标准不可能所有浏览器都一致实现，但对于企业应用已经足够工作。选择正确的引擎框架，进行合理的设计才是关键，HTML5真的已经Ready！

 

选择HTML5除了看中JavaScript动态语言的灵活性，能够很好的和其他异构系统融合到页面外，HTML5的跨平台性也是我们看中的重要原因，以前PC桌面应用上采用Flex和Silverlight到是可以跨平台，但如今的系统还不能上移动终端实在就说不过去了，而Flex和SL在跨移动终端方面就卡壳了，虽然有AIR可以导成native app应用，但还是远不如HTML5纯页面来的高效，每次修改任何东西PC上都可以模拟测试，看看Chrome DevTools for Mobile越来越屌爆的Screencast and Emulation功能： 

我现在测试移动终端大部分情况都不需要用真机，当PC上模拟测试得差不多后再进行真机测试基本都能一次性通过，回想以前用Flex的AIR进行转换Native App真是浪费生命，每次测试我都要刷几条微博消磨难熬的等待时间，上一次项目我们团队也分为Android和iOS两个完全采用独立Native开发方式，但也存在版本发布不一致，应用体验不一样，包括很多业务逻辑代码本可以复用的但由于Java和ObjectiveC的差异，搞得我们非得写两套一样逻辑的代码，其中加密的部分还得费劲的用C++实现了一个统一的实现，然后再有Java和OC分别去调用C++的代码，总之系统越搞越复杂，团队需要的人越来越多，当然我们经验不足也是一个原因，但我们毕竟是做企业应用搞项目的，不过可能有资源像BAT那些移动互联网巨头去慢慢融合摸索经验，我们除了这些基础技术外，还有学习很多电力业务，还得和硬件打交道，学习各种电力规约协议，扯淡了这么多你应该明白我们现在成功的使用了HTML5一个js语言就能跨所有平台之爽。

 

项目初期我们团队在选型初期对3D建模进行了一定的研究，传统的3D引擎一般只提供后期三维模型的渲染呈现，并不提供3D建模的解决方案，本以为还需要招聘专业的3DMax或Maya三维建模设计师，因为我们目前的美工设计师只会ps，但HT提供了一套完全基于HTML5的3D设计编辑工具，别说只会ps的美工设计师，其实后续项目的大部分3D场景我们程序员都参与了设计。

 

完全基于HTML5的设计器这点还是挺让我佩服的，虽然大家都在转型到HTML5但还很少有做得彻底的，如Google Web Designer和Adobe Edge Tools这些巨头的产物，包括Sencha Architect折腾了很长时间又走回Qt的路线，我实在不看好这些还不采用HTML5做设计器的路线，这时代HTML5已经足够强大，JS虚拟机的性能如V8也足够高效，数据直接云存储就可以，如果需要本地功能采用Node-Webkit也是很不错的方案。以前我们团队常用Qt或Java Swing来写些小工具，我发现这个项目历练之后Node-Webkit的技术方案成了大家些写工具应用的首选。

以下为几张运行系统抓图，以及这些系统图在编辑器内编辑的过程抓图

评论

10 楼 xhload3d 2014-02-23  

hss118100 写道

我现在也在头疼电力画图选型到底是选svg/vml还是选canvas，看了楼主的博文，我感觉选canvas还是会更好一些 另外，楼主能否透漏一下你们的canvas框架用的是什么

www.hightopo.com HT for Web - Everything you need to create cutting-edge 2D and 3D visualization

9 楼 hss118100 2013-12-17  

我现在也在头疼电力画图选型到底是选svg/vml还是选canvas，看了楼主的博文，我感觉选canvas还是会更好一些 另外，楼主能否透漏一下你们的canvas框架用的是什么

8 楼 xhload3d 2013-12-17  

zha_zi 写道

你说的有道理，反正都是浏览的技术，具体情况具体分析，正因为有不同的场景才会催生不同的技术

7 楼 zha_zi 2013-12-17  

xhload3d 写道

zha_zi 写道

canvas 是标准的位图技术，非矢量图技术，目前主流的矢量图技术可以也就是flash 和SVG 了，你可把你渲染后的图形看一下是不是可以任意缩放你就明白了，我说canvas性能低下是是js执行机制的问题，跟你加载多少万个元件并没有直接关系，js是原生的单线程，在做轮询做动画切换的时候画面动态会不细腻很难精准控制，你可以在试一下加载一百个js控制的动画元件会是什么效果，还有不是svg封装了动画而是svg 支持smil协议，目前除去IE意外的浏览器都是支持的，还有就是canvas没有原生事件支持，我不相信三方框架做的事件支持会比浏览器原生的事件支持还要优秀，如果这些东西在canvas中都是标准性的对开发者来说不是一件好事情吗？纯技术讨论，谢谢可能我理解有限，若有错误可以指出

感谢你的回复，Flash和SVG底层也是用基本的2D（也会有GPU的优化）模式来实现，flash的vm和svg的浏览器实现源代码也是调用2D的API实现，所以在我看来flash和svg是2dAPI之上的产物。
cavnas自然可以实现scale缩放，只要自己定义类似svg或vml或pdf等任何矢量的描述标准后都可以用cavnas来实现，因此会有http://fabricjs.com/ 这样SVG-to-canvas的产物出现，至于性能的话优化空间主要看具体项目应用，我不是做游戏领域所以可能对我们来说动画只是示意，用户能看到告警或者状态信息就可以了，至于动画是否匀速，是否精确对于我们这种应用来说不是很关键，因此这方面来说cavnas和js对我们还是足够用的。
最后你提到的“我不相信三方框架做的事件支持会比浏览器原生的事件支持还要优秀“这点还是得看具体应用，浏览器的事情要考虑大而全的整体html标准，因而对于垂直应用领域专业的第三方框架会更优秀的多，例如OpenGL虽然是3D标准了，但Unity3d也活得很好，Cocos2d也活得很好，第三方框架肯定会着重于你是应用游戏领域，你是应用电信领域，你是应用电力领域，你是应用仿真领域，你是应用生物学领域，你是应用工业控制领域而存在，所以笼统的说第三方就不如原生的说法我感觉意义不大，不同领域问题是多样的，肯定需要不同工具来搞定不同问题。
当然我也不是canvas的拥护者或svg的反对派，只不过canvas的2D和3D满足了我们这次项目的电力需求，对于其他应用肯定也有svg强项的方面

你说的有道理，反正都是浏览的技术，具体情况具体分析，正因为有不同的场景才会催生不同的技术

6 楼 xhload3d 2013-12-17  

zha_zi 写道

canvas 是标准的位图技术，非矢量图技术，目前主流的矢量图技术可以也就是flash 和SVG 了，你可把你渲染后的图形看一下是不是可以任意缩放你就明白了，我说canvas性能低下是是js执行机制的问题，跟你加载多少万个元件并没有直接关系，js是原生的单线程，在做轮询做动画切换的时候画面动态会不细腻很难精准控制，你可以在试一下加载一百个js控制的动画元件会是什么效果，还有不是svg封装了动画而是svg 支持smil协议，目前除去IE意外的浏览器都是支持的，还有就是canvas没有原生事件支持，我不相信三方框架做的事件支持会比浏览器原生的事件支持还要优秀，如果这些东西在canvas中都是标准性的对开发者来说不是一件好事情吗？纯技术讨论，谢谢可能我理解有限，若有错误可以指出

感谢你的回复，Flash和SVG底层也是用基本的2D（也会有GPU的优化）模式来实现，flash的vm和svg的浏览器实现源代码也是调用2D的API实现，所以在我看来flash和svg是2dAPI之上的产物。
cavnas自然可以实现scale缩放，只要自己定义类似svg或vml或pdf等任何矢量的描述标准后都可以用cavnas来实现，因此会有http://fabricjs.com/ 这样SVG-to-canvas的产物出现，至于性能的话优化空间主要看具体项目应用，我不是做游戏领域所以可能对我们来说动画只是示意，用户能看到告警或者状态信息就可以了，至于动画是否匀速，是否精确对于我们这种应用来说不是很关键，因此这方面来说cavnas和js对我们还是足够用的。
最后你提到的“我不相信三方框架做的事件支持会比浏览器原生的事件支持还要优秀“这点还是得看具体应用，浏览器的事情要考虑大而全的整体html标准，因而对于垂直应用领域专业的第三方框架会更优秀的多，例如OpenGL虽然是3D标准了，但Unity3d也活得很好，Cocos2d也活得很好，第三方框架肯定会着重于你是应用游戏领域，你是应用电信领域，你是应用电力领域，你是应用仿真领域，你是应用生物学领域，你是应用工业控制领域而存在，所以笼统的说第三方就不如原生的说法我感觉意义不大，不同领域问题是多样的，肯定需要不同工具来搞定不同问题。
当然我也不是canvas的拥护者或svg的反对派，只不过canvas的2D和3D满足了我们这次项目的电力需求，对于其他应用肯定也有svg强项的方面

5 楼 zha_zi 2013-12-17  

xhload3d 写道

zha_zi 写道

xhload3d 写道

zha_zi 写道

我们做的组态监控软件第一版也是基于html5 canvas 使用的是kineticjs框架，后来发现有些方面canvas 不能满足后来换成了SVG技术 。

所以文中提到“选择正确的引擎框架，进行合理的设计才是关键”，也许是kineticjs的不足而非canvas

kineticjs 还是比较强大的版本更新，bug修复非常快，主要原因当时需要软件做矢量化，canvas不是矢量化技术，所以最后放弃了，canvas 原生支持的api实在是太少了，几乎所有功能都要依赖于三方框架解决，性能问题，js执行机制，渲染问题，感觉canvas距离真正做大型复杂动画还有一段距离

所以还是框架的问题，cavnas天生就是矢量，你只需要的只是一种描述，hightopo.com我们现在也用了他们的矢量功能，这个后续我可以再写文章介绍。SVG是可以有元素的直接事件和操作，但只要框架良好的封装Canvas上提供这些事件也是基本框架应该做的功能。

至于SVG和Canvas的性能，我们现在测试HT的组件都是以万甚至10万的压力在测试，你可以试试SVG加载1万个元素的体验。

最后你提到了Canvas的API少得问题，这个是事实但不是问题，Canvas的确只有小几十的API数量，但这些基本函数已经足够封装常规的应用，如果需要更高性能更变态的渲染那就是WebGL的强项了，但SVG的太过“丰富”也是他的短板，SVG封装到了filter甚至封装了动画等等效果，但各种浏览器的支持差异巨大，其实作为产品最终往往考虑兼容性能用到的函数还是最基本的那些，所以从这点来说我感觉Canvas的API少不是太大问题。

不过kineticjs我没研究过，想必zha_zi同学还是挺有研究的，我说得可能不客观，呵呵

canvas 是标准的位图技术，非矢量图技术，目前主流的矢量图技术可以也就是flash 和SVG 了，你可把你渲染后的图形看一下是不是可以任意缩放你就明白了，我说canvas性能低下是是js执行机制的问题，跟你加载多少万个元件并没有直接关系，js是原生的单线程，在做轮询做动画切换的时候画面动态会不细腻很难精准控制，你可以在试一下加载一百个js控制的动画元件会是什么效果，还有不是svg封装了动画而是svg 支持smil协议，目前除去IE意外的浏览器都是支持的，还有就是canvas没有原生事件支持，我不相信三方框架做的事件支持会比浏览器原生的事件支持还要优秀，如果这些东西在canvas中都是标准性的对开发者来说不是一件好事情吗？纯技术讨论，谢谢可能我理解有限，若有错误可以指出

4 楼 xhload3d 2013-12-17  

zha_zi 写道

xhload3d 写道

zha_zi 写道

我们做的组态监控软件第一版也是基于html5 canvas 使用的是kineticjs框架，后来发现有些方面canvas 不能满足后来换成了SVG技术 。

所以文中提到“选择正确的引擎框架，进行合理的设计才是关键”，也许是kineticjs的不足而非canvas

kineticjs 还是比较强大的版本更新，bug修复非常快，主要原因当时需要软件做矢量化，canvas不是矢量化技术，所以最后放弃了，canvas 原生支持的api实在是太少了，几乎所有功能都要依赖于三方框架解决，性能问题，js执行机制，渲染问题，感觉canvas距离真正做大型复杂动画还有一段距离

所以还是框架的问题，cavnas天生就是矢量，你只需要的只是一种描述，hightopo.com我们现在也用了他们的矢量功能，这个后续我可以再写文章介绍。SVG是可以有元素的直接事件和操作，但只要框架良好的封装Canvas上提供这些事件也是基本框架应该做的功能。

至于SVG和Canvas的性能，我们现在测试HT的组件都是以万甚至10万的压力在测试，你可以试试SVG加载1万个元素的体验。

最后你提到了Canvas的API少得问题，这个是事实但不是问题，Canvas的确只有小几十的API数量，但这些基本函数已经足够封装常规的应用，如果需要更高性能更变态的渲染那就是WebGL的强项了，但SVG的太过“丰富”也是他的短板，SVG封装到了filter甚至封装了动画等等效果，但各种浏览器的支持差异巨大，其实作为产品最终往往考虑兼容性能用到的函数还是最基本的那些，所以从这点来说我感觉Canvas的API少不是太大问题。

不过kineticjs我没研究过，想必zha_zi同学还是挺有研究的，我说得可能不客观，呵呵

3 楼 zha_zi 2013-12-17  

xhload3d 写道

zha_zi 写道

我们做的组态监控软件第一版也是基于html5 canvas 使用的是kineticjs框架，后来发现有些方面canvas 不能满足后来换成了SVG技术 。

所以文中提到“选择正确的引擎框架，进行合理的设计才是关键”，也许是kineticjs的不足而非canvas

kineticjs 还是比较强大的版本更新，bug修复非常快，主要原因当时需要软件做矢量化，canvas不是矢量化技术，所以最后放弃了，canvas 原生支持的api实在是太少了，几乎所有功能都要依赖于三方框架解决，性能问题，js执行机制，渲染问题，感觉canvas距离真正做大型复杂动画还有一段距离

2 楼 xhload3d 2013-12-16  

zha_zi 写道

我们做的组态监控软件第一版也是基于html5 canvas 使用的是kineticjs框架，后来发现有些方面canvas 不能满足后来换成了SVG技术 。

所以文中提到“选择正确的引擎框架，进行合理的设计才是关键”，也许是kineticjs的不足而非canvas

1 楼 zha_zi 2013-12-16  

我们做的组态监控软件第一版也是基于html5 canvas 使用的是kineticjs框架，后来发现有些方面canvas 不能满足后来换成了SVG技术 。