一，编辑器
ht_editor编辑器，可以用来绘制图纸，将绘制的图纸引用到html页面中，可以用在项目里。ht_editor编辑器是基于node开发的，他编辑了一个服务器，启动服务可以在浏览器中打开编辑页面，进行编辑。
其中有组件、图标、图纸三大元素，组件是最小单位，可以组成图标，多个图标又可以组成一个图纸，从而引用到页面中。
二、HT在页面中的使用流程
1、先在编辑器中根据需求编辑图纸，编辑的图纸可以转换成json文件。
2、将图纸对应的json放到项目中（图纸中用到的图标和组件对应的json文件也要放置到项目中，并注意地址的对应）。
3、创建html页面，并引入需要用到的ht插件：
<script src='bin/STRKsjneBjNp.js'></script>
<script src="bin/ht.js"></script>
<!--动画效果-->
<script src="bin/plugin/ht-animation.js"></script>
<!--自动适配页面-->
<script src="bin/plugin/ht-autolayout.js"></script>
<script src='bin/product_generated.js'></script>4、通过js来控制解析json文件，并添加到页面的body下。
//初始化
dataModel = new ht.DataModel();
graphView = new ht.graph.GraphView(dataModel);
graphView.addToDOM();//添加到body下
//装载数据文件
ht.Default.xhrLoad('json/progress.json',(text)=>{
var json = ht.Default.parse(text);
if(json.title) document.title = json.title;
dataModel.deserialize(json);
//循环解析出dataModel的所有数据对象
dataModel.each(data=>{
//data包含编辑器中绑定的所有数据，可以通过data.a('dataName')来获取数据绑定值
});
});
//自动适配
autoLayout = new ht.layout.AutoLayout(graphView);
autoLayout.layout('circular', function(){
graphView.fitContent(true);
});5、此时图纸是完全添加到body里的，但是我们应用时还需要很多其他的html元素，这个时候应该有两种方法：
第一种：通过iframe元素引入。
第二种：通过addToDOM()后面传参数直接绑定到对应的div内。（但是没有实现：通过传入document.getElementById('showDom')获取的Dom节点不能成功推入。）
三、启动使用
进入ht_editor文件夹下的server文件夹打开控制台，启动server.js服务。
config.ini：配置，可配置locale=zh/en(中文/英文)、port：端口号、autoOpen：是否自动打开浏览器、以及一些json存在地址。
四、创建组件、图标、图纸信息
1、组件：创建组件时，需要用函数编辑，函数有五个参数。
g：画笔，可以调用canvas中画笔方法
rect：组件的矩形信息对象，包含x、y、width、height属性
comp：获取右侧绑定的数据，通过comp.getValue('attrName')来获取绑定的属性值进行组件绘制
data：绑定的数据
view：视图窗。
2、图标：创建图标可以应用组件，也可以直接用编辑器顶端图形绘制
绑定数据：在数据绑定的表格下添加需要绑定的数据，然后选中需要绑定的元素，在该元素对应的参数下绑定数据。（数据后面对应的超链接符号。）
绑定事件：选中对象后，点击上面的事件处理，在弹窗内进行事件绑定。
3、图纸：可以将图标直接应用，也可以直接应用编辑器顶端图形绘制
绑定数据：方法与图标绑定数据一致。
绑定量测：即可以将两个图标进行组合绑定，组合后修改组合名称，然后选中单个图标，点击对应的参数后面的超链接符号，会弹出绑定量测的窗口，编号为组合的名称，函数为：function(value){//value为绑定的量测值，页面调用时会设置该值}
事件处理：此处也可以添加处理事件，如果添加事件处理后，需要在对应基础信息的事件处理后面的复选框上打勾，这样初始化到页面中后，事件处理函数才能发挥作用
五、常用功能示例
1、量测绑定操作：
a、先根据绑定的量测编号还自定义量测对象
var temperatures={
loading:10 //loading即为图纸中绑定量测的编号值
}b、绑定量测值
//绑定量测
var dataBindings=data.getDataBindings();
if(dataBindings){
for(var name in dataBindings.a){
var db=dataBindings.a[name];
var value=temperatures[db.id];
if(db.func){
value=db.func(value);
}
data.a(name,value)
}
}2、在图纸上添加html节点
通过js创建节点，然后添加在view中。
//在拓扑组件的根层div下添加html元素
view=graphView.getView();//获取拓扑组件的根层div
addDom('input','input','width:100px;position:absolute;top:10px;left:30px',view);
function addDom(nodeName,id,style,parentNode,html) {
var node=document.createElement(nodeName)
node.id=id;
node.style=style;
node.innerHTML=html;
parentNode.appendChild(node);
}3、应用图片在图纸上创建元素（通过Node对象）
//根据图片创建元素
var toy = new ht.Node();
ht.Default.setImage('soccer', 10,10,'res/ball.png');//如果不设置大小可以将第二个和三个参数去掉
toy.setImage('soccer');
toy.setPosition(18, 14);//定位
dataModel.add(toy);4、动画效果添加
a、需要先引入ht-animation.js文件
b、调用ht.Default里面的方法设置动画
var finishFunc = function(){
isAnimating = false;//动画停止
};
ht.Default.startAnim({
duration: 500,// 时长
finishFunc: finishFunc,
action: function(v){
toy.setPosition(
p1.x + (p2.x - p1.x) * v,
p1.y + (p2.y - p1.y) * v
);
}
}); 5、前端绑定事件
graphView.setInteractors(null)//取消所有默认交互功能
var type = "ontouchend" in document ? 'touchstart' : 'mousedown';//跟js中事件种类一致
//事件需要绑定到view=graphView.getView()上
view.addEventListener(type, function(e){
//获取事件的点击位置
var p2 = graphView.getLogicalPoint(e);//只能获取到PC端，移动端的touch事件不可行
//toy为node节点
var p1 = toy.getPosition();
//选中目标（target为dataModel里面的data对象）
var target = graphView.getDataAt(e);
}, false);