html5组态canvas,基于 HTML5 Canvas 的 Web SCADA 组态电机控制面板

前言

HT For Web 提供完整的基于 HTML5 图形界面组件库。您可以轻松构建现代化的，跨桌面和移动终端的企业应用，无需担忧跨平台兼容性，及触屏手势交互等棘手问题。也可用于快速创建和部署，高度可定制化，并具有强大交互功能的拓扑图形及表盘图表等应用。HT for Web 非常适用于实时监控系统的界面呈现，广泛应用于电信网络拓扑和设备管理，以及电力、燃气等工业自动化 ( HMI / SCADA ) 领域。HT for Web 还有提供了一套一套强大的基于 WebGL 技术的 3D 图形引擎，独特的 WebGL 层抽象，将 Model – View – Presenter ( MVP ) 的设计模型延伸应用到了 3D 图形领域。使用 HT for Web 您可更关注于业务逻辑功能，不必将精力投入复杂 3D 渲染和数学等非业务核心的技术细节。( http://www.hightopo.com )

作为刚入门的小白(大家可以叫我老郑)，我尝试着一步一步的做这个面板，用这篇文章来记录自己的一些收获(毕竟我还是个菜鸟)以及代码的实现，希望能够帮到一些朋友。当然，如果有什么意见可以直接跟我说，大家一起交流才会进步！

效果图

代码实现

话不多说，上代码。整体是一个 2D 的面板，那么要引入我们必须需要用到的 HT 核心库：ht.js 。

首先，要创建数据容器和拓扑图形组件。DateModel 作为承载 Data 数据的模型，管理着Data数据的增删以及变化事件派发， HT 框架所有组件都是通过绑定 DataModel，以不同的形式呈现到用户界面；同时组件也会监听 DataModel 模型的变化事件， 实时同步更新界面数据信息，掌握了 DataModel 的操作就掌握了所有组件的模型驱动方式；拓扑图形组件 ht.graph.GraphView 是 HT 框架中 2D 功能最丰富的组件，其相关类库都在 ht.graph 包下。GraphView 具有基本图形的呈现和编辑、拓扑节点连线及自动布局功能。

var dataModel = newht.DataModel();var graphView = new ht.graph.GraphView(dataModel);

通过以下代码来进行一些基础操作上的设置：

// 禁止平移

graphView.setPannable(false);

// 将其重载为空函数，禁止滚动

graphView.handleScroll= f