基于HTML5 Canvas 点击添加 2D 3D 机柜模型

今天又返回好好地消化了一下我们的数据容器 DataModel，这里给新手做一个典型的数据模型事件处理的例子作为参考。这个例子看起来很简单，实际上结合了数据模型中非常重要的三个事件处理的部分：属性变化事件监听、选中变化事件监听以及数据模型变化事件监听。

为了让这个例子具现化，我将这个简单的例子做了一点改动，下面我会一一解释。

例子地址：http://hightopo.com/guide/guide/core/datamodel/examples/example_datamodel.html

 

这是我改造之后的模样，将 dataModel 数据容器共享，通过对数据容器的增删事件的监听得到的现在的结果，并且在显示上做了一点“手脚”。下面我们从头解析这例子，你们会知道为什么我特地将这个简单的例子提出来。

首先，我们得创建场景将作为基础，整个场景我算是分为三个部分，顶部工具栏，2D 部分以及 3D 部分。顶部工具栏部分使用的纯 HTML 写的：

<button οnclick="addData()">Add</button>
<button οnclick="removeData()">Remove</button>
<button οnclick="clearDataModel()">Clear</button>
<span id="property" class="output"></span>
<span id="model" class="output"></span>
<span id="selection" class="output"></span>

因为有点击事件，所以我们直接在 button 按钮上进行，后面的 span 标签显示纯文本内容。

我们知道，HT 的所有组件都是基于一个根部 div 的，要将这个 div 部署到 html 页面上很简单，但是 HT 内部对这个 div 设置了绝对定位，所以我们在添加这个 div 进 HTML 页面中时，也要设置绝对定位中的位置，我在页面中添加了一个 div，将 HT 的部分都添加进这个 div 中：

<div id="myDiv" style="border: 1px solid red; width: 800px; height: 600px;position: absolute; "></div>

dataModel = new ht.DataModel();
g3d =