一,编辑器
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);