突然有了一个想法，如果我能把一些用在不同地方的知识点放在同一个界面上，放在一个盒子里，这样我想看东西的时候，我can可以直接显示，盒子必须是可以打开的。我用HT实现了我的想法，代码100多行，这么少的代码就能达到这样的效果，我觉得很了不起。我们先来看一下效果图：这个例子最基础的就是最外层的盒子，所以我们先来看看如何实现：varbox=newht.CSGBox();dataModel.add(box);你可以使用HT来实现这个盒子是非常容易的。HT中封装了很多基本的原始类型，我们经常使用的ht.Node也是其中之一，这样我们就可以完成基本的实现而不需要重复编写相同的代码。本例中使用的封装的基本原语是ht.CSGBox，一个盒子模型，可以参考HTforWebModelingManual，我们在手册中可以看到CSGBox中我们只能对盒子的所有面进行操作，如果你想自己设置一些特殊功能，只需要操作ht.Style（HTforWebstyle手册）即可。给盒子的一个表面添加纹理，我能想到的就是HT封装的ht.Default.setImage函数。想必大家都注意到盒子上有一个模型化的水泵，风扇叶片在上面旋转，调用graphView.deserialize(json)将json文件导出成可视化的2d模型并设置动画动画，然后立即刷新给水泵，否则即使设置了动画，水泵上的扇叶旋转也不会生效。ht.Default.xhrLoad('displays/demo/pump.json',function(text){constjson=ht.Default.parse(text);pumpDM.deserialize(json);varcurrentRotation=0;varlastTime=newDate().getTime();setInterval(function(){vartime=newDate().getTime();vardeltaTime=time-lastTime;currentRotation+=deltaTime*Math.PI/180*0.3;lastTime=time;pumpDM.getDataByTag('fan1').setRotation(currentRotation);pumpDM.getDataByTag('fan2').setRotation(currentRotation);box.iv();//g3d.iv();你也可以在这里刷新g3d，但是在本地刷新并保存pumpGV.validateImpl();},10);},10);这个时候我不能把水泵的graphView和g3d加到最下面的div上，我的本意是把水泵的graphView加到g3d的CSGBox的一侧，所以为了显示水泵，水泵所在的graphView的宽高是必须要设置的，而且这个宽高必须要大于我json画的图所占的面积，否则显示不完整。如果想看这个宽高在显示上的效果，可以自己改一下玩玩。pumpGV.getWidth=function(){return600;}pumpGV.getHeight=function(){return600;}pumpGV.getCanvas().dynamic=true;//这样设置是为了动态显示画布解释一个函数getDataByTag(tagName)这个函数是获取标识号。在HT中，tag属性是一个唯一标识符。HT虽然也有id，但是id是构造HT中Data类型对象时，内部自动给定的id属性。可以通过data.getId()和data.setId(id)获取和设置，Data对象加入DataModel后id值不允许修改，可以通过dataModel.getDataById(ID）。一般我们建议id属性由HT自动赋值。用户业务意义的唯一标识可以存在于tag属性上。data.setTag(tag)函数允许任意动态改变tag值，通过dataModel.getDataByTag(tag)可以找到对应的tag。Data对象，支持通过dataModel.removeDataByTag(tag)删除Data对象。您可能很好奇我们没有在代码中提到标签“fan1”。这个标签设置在水泵的json中。关于扇叶的标签，我们获取扇叶，然后设置它的旋转。echarts图表的显示也是很基础的，但是我们会发现当echarts图表添加到graphView后，它的动画效果是不会显示的，所以我们首先需要设置echarts图表所在的图表的动态located为true，即设置为fordynamic:functioncharts(option){v??arinfo={canvas:document.createElement('canvas')};info.canvas.dynamic=true;//设置info.canvas为动态info.chart=echarts.init(info.canvas);info.chart.setOption（选项）；returninfo.canvas;}最后只需要将返回的两个canvas传入ht.Default.setImage即可：ht.Default.setImage('echart',charts(option));ht.Default.setImage('pump',pumpGV.getCanvas());生成新图片的ht.Default.drawImage函数其实就是在canvas上绘制，所以我们只需要将已经绘制好的canvas传给ht.Default.setImage就可以生成图片了。
