无论在任何领域，只要是非程序员，只要能通过拖拽的方式实现2D和3D设计图，就很不错了。今天我们不需要像3dMaxs这样的设计软件。我可以用HT自己写一个2D和3D编辑器。我觉得实现这个功能的成就感是爆棚的，哈哈！只要你会想，会做，按照小编的说法，你可以把它做成一件大事！本例地址：http://www.hightopo.com/demo/...下面是实现效果图：我们先把需要用到矢量图的json文件全部输出。矢量图形的优点是组件上的图形元素Scaling不会变形，也不需要为Retina显示器提供不同尺寸的图片。在devicePixelRatio多样化的移动时代，vectors可能是实现完美跨平台的成本最低的方案。HT通过ht.Default.setImage函数注册图片，可以是base64、jpg、png、json格式的图片：ht.Default.setImage('edit','images/default.json');ht.Default。setImage('shape','images/edit.json');ht.Default.setImage('edge','images/edge.json');ht.Default.setImage('circle','images/circle.json');ht.Default.setImage('roundRect','images/roundRect.json');ht.Default.setImage('rect','images/rect.json');这里我注册了6个toptoolbar的4张图片，分别是“编辑”、“不规则形状”、“圆形”、“圆角矩形”、“矩形”和“连线”。功能正如其名称所暗示的那样。主要操作：点击工具栏任意图标，在工具栏下方空白处拖动鼠标即可实现绘图。那么下一步就是创建一个“工具栏”。HT封装了工具栏组件ht.widget.Toolbar，并在该函数的参数中填充了工具栏的元素。具体操作方法请参考HTforWebToolbar手册。这里值得注意的一点是，groupId是对一种类型的元素进行分组。分组的好处是当我们选中这个组中的任意一个元素时，其他元素都没有被选中，这样可以造成“单选”效果：toolbar=newht.widget.Toolbar();toolbar.addItem(createItem('edit','edit','edit',[newht.graph.EditInteractor(graphView)]));//这是最后一个参数数组，可以放置多个交互器。具体请参考HTforWeb入门手册。//addItem(item,index)可以在指定索引位置插入一个新元素。如果索引为空，则表示在末尾插入。toolbar.addItem(createItem('shape','shape','不规则图形',[newCreateShapeInteractor(graphView)]));toolbar.addItem(createItem('circle','circle','circle',[newCreateNodeInteractor(graphView)]));toolbar.addItem(createItem('roundRect','roundRect','圆角矩形',[newCreateNodeInteractor(graphView)]));toolbar.addItem(createItem('rect','rect','Rectangle',[newCreateNodeInteractor(graphView)]));toolbar.addItem(createItem('edge','edge','Connection',[newCreateEdgeInteractor(graphView)]));toolbar.getItemById('edit').selected=true;//默认选中“edit”toolbar.getSelectBackground=function(){//重载自定义选中背景色return'#eee';}上面用到的addItem函数是为了ht。将元素添加到widget.Toolbar工具栏。添加的元素是从createItem函数传回的元素。在这个函数中，我们使用向量vector来创建一个矩形和一张图片的组合。我们将注册之前注册的vector图片传递给这个组合中的“图片”，然后通过控制图片的“渲染颜色”来过滤工具栏选中和未选中状态的颜色：functioncreateItem(id,iconName,toolTip,interactorsArr){varitem={id:id,//工具栏元素的唯一标识，如果设置了，可以通过getItemById获取unfocusable:true,//工具栏元素是否不能获得焦点.默认情况下，鼠标经过时会显示一个矩形边框，可以设置设置为true关闭此效果icon:iconName,//工具栏元素的图标toolTip:toolTip,//工具栏元素的文字提示groupId:'bar'//对工具栏元素进行分组，以及同组的元素会被选中自动互斥效果};varjson=ht.Default.getImage(iconName);变种宽度=JSON？json.宽度：16；变种高度=JSON？json.height:16;item.icon={width:width+8,height:height+8,fitSize:json?json.fitSize:false,comps:[{type:'rect',//组件类型rect:[0,0,width+8,height+8]//指定vector中组件绘制的矩形边界},{type:'image',name:iconName,color:{//渲染颜色，HT系统会自动使用这个颜色渲染图片内容func:(data,view)=>{return'#000'}}}]};item.action=function(){//函数类型，点击工具栏元素时调用for(vari=0;i
