大佬教程收集整理的这篇文章主要介绍了快速开发基于 HTML5 网络拓扑图应用之 DataBinding 数据绑定篇,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
{ "width": 48,//矢量整体宽度 "height": 262,//矢量整体高度 "comps": [ { "type": "text",//文本 "text": "端口3",//文本内容 "align": "center",//文本对齐方式 "color": "rgb(255,255,255)",//字体颜色 "font": "8px arial,sans-serif",//文本字体大小 "rect": [//组件绘制在矢量中的矩形边界 18.28654,//x 轴坐标 39.80679,//y 轴坐标 27.82265,//width 11.5434//height ] },{ "type": "rect",//矩形 "BACkground": "rgb(255,0)",//属性默认值"shadow": true,//设置为true显示阴影"shadowOffsetX": 0,//选中图元的阴影水平偏移 "shadowOffsetY": 0,//选中图元的阴影垂直偏移 "rect": [//组件绘制在矢量中的矩形边界 4.38544,//x 轴坐标 32.55505,//y 轴坐标 14.46481,//width 6.1554//height ] }] }@H_674_6@这段代码绘制了一个矩形和一个文本。 @H_674_6@绘制完矢量之后,我们就可以通过给节点设置图片的方式来显示这个矢量。当然上面绘制的矢量并不是全部的绘制矢量的代码,具体内容请参考:https://download.csdn.net/dow... @H_674_6@要动态改变一个节点的属性,那么肯定要先获取到这个节点,我们可以通过遍历数据模型 DataModel,或者通过 tag 标签获取节点,又或者通过鼠标点击事件等等。这个 Demo 中需要操作的节点比较多,所以我选择用遍历数据模型的方法来获取节点。那么问题来了,我怎么通过一张图片或者一个矢量定位这个节点?如果节点都没有创建,也不可能获取到图片对应的节点(或者说如果直接把这个矢量图拿来作为一个节点的图片,有可能出现的情况就是,六个设备的变化情况都一模一样!毕竟是同一个节点!)。所以我们得把这些特殊的部分从图片中删除掉,然后在对应的位置填充上节点,再给节点设置上设备的矢量图。先把对应位置的矢量图删除掉,如下图红框部分: @H_674_6@@H_673_18@ @H_674_6@我们在红框部分单独创建八个设备节点,并给这八个节点分别设置同一张矢量图。诶?你可能会诧异为什么同一张图显示却不同(灯亮的变化顺序不同),下面我们来看看这是怎么完成的。 @H_674_6@@H_673_18@ @H_674_6@那么这八个拥有相同矢量图的设备是如何通过代码控制闪烁灯随机变化的呢?关键就在我们上面绘制的矢量图中,前面有意略过了这部分:数据绑定。
{ "type": "rect",//矩形 "BACkground": {//矩形背景 "func": "attr@rectBg2",//数据绑定String类型若以attr@***开头,则返回data.getAttr(***)值,其中***代表attr的属性名 "value": "rgb(255,0)"//属性默认值 },"shadow": true,//设置为true显示阴影 "shadowColor": {//阴影颜色 "func": "attr@shadowColor2",//数据绑定String类型 "value": "rgba(255,0.35)"//属性默认值 },"shadowOffsetX": 0,//选中图元的阴影水平偏移 "shadowOffsetY": 0,//选中图元的阴影垂直偏移 "rect": [//组件绘制在矢量中的矩形边界 4.38544,//x 轴坐标 32.55505,//y 轴坐标 14.46481,//width 6.1554//height ] }@H_674_6@上面是我对矩形灯矢量的部分重新绘制后的代码,看出什么不同了?对,BACkground 属性和 shadowColor 属性都出现了两个值,并且这两个值看起来“怪怪的”?数据绑定(http://hightopo.com/guide/gui...)没有那么难,绑定的格式很简单,只需将以前的参数值用一个带 func 属性的对象替换即可,如果对应的 func 取得的值为 undefined 或 null 时,则会采用 value 属性定义的默认值。 @H_674_6@func 的内容有以下几种类型: @H_674_6@所以我们通过 "func" 来绑定数据,这里用的是 attr@ 的方式绑定,到时候要调用这个属性的时候就直接通过 data.getAttr() 或者缩写 data.a(*) ;然后通过 "value" 设置一个默认值,作为 func 返回的值为空时的“备用”。 @H_674_6@一般我们将代码比较多的矢量图放在一个 json 文件中,我取名叫做 service3d.json 放在 scene 文件夹下 ,通过 ht.Default.xhrLoad 方法解析 json 文件的内容,如下:
ht.Default.xhrLoad('scene/service3d.json',function(text) { var json = ht.Default.parse(text); dm.deserialize(json);//反序列化 })@H_674_6@其中 deserialize 反序列化函数是将数据反序列化到模型,传入的参数 json 为数据信息对象,用于解析生成对应的 Data 对象并添加到数据容器中。 @H_674_6@因为 xhrLoad 方法是异步加载,为了避免后面出现获取不到数据的问题,我们将剩下的节点属性控制代码也写在 xhrLoad 函数中:
dm.each(function(data) {//遍历dataModel var infos = [//我设置的业务属性名称 {shadowColor: 'shadowColor1',BACkground: 'rectBg1'},{shadowColor: 'shadowColor2',BACkground: 'rectBg2'},{shadowColor: 'shadowColor3',BACkground: 'rectBg3'},{shadowColor: 'shadowColor4',BACkground: 'rectBg4'},{shadowColor: 'shadowColor5',BACkground: 'rectBg5'},]; infos.forEach(function(info) {//遍历infos数组 data.a(info.shadowColor,'rgba(255,0.35)');//注册业务属性 attr 为业务属性 简写为 a data.a(info.BACkground,'rgb(255,0)'); }); seTinterval(function() {//设置动画 动态变化闪烁灯的亮和灭的显示 var random = Math.ceil(Math.random() * 5);//获取5以内一个随机整数 (可以配合我设置的业务属性名称) var shadowName = 'shadowColor' + random,bgName = 'rectBg' + random; if(data.a(shadowName) === 'rgba(255,0.35)') {//如果是红色透明 data.a(shadowName,'rgba(0,0.35)');//设置为绿色透明 } else if(data.a(shadowName) === 'rgba(0,0.35)') {//如果是绿色透明 data.a(shadowName,0.35)');//设置为红色透明 } if(data.a(bgName) === 'rgb(255,0)') {//如果是红色 data.a(bgName,'rgb(0,0)');//设置为绿色 } else if(data.a(bgName) === 'rgb(0,0)') {//如果是绿色 data.a(bgName,0)');//设置为红色 } },1000); });@H_674_6@值得注意的一点是,虽然我们在 json 中已经绑定了业务属性(这里是“shadowColor1,2,3,4,5...”和“rectBg1,5”),但是节点上并没有这个属性,所以我们需要注册一下这些属性,并给这些属性设置属性值。 @H_674_6@然后我们就可以通过调用这些属性来动态更新 Data 上的属性值图形界面就会自动刷新,从而达到实时显示数据的效果。因为 HT 只有一个数据模型,绑定 DataModel 的图形组件并没有组件内部的其他数据模型,所以组件都是如实根据 DataModel 来呈现界面效果,因此当用户拖拽图元移动时, 本质也是修改了数据模型中 Node 的 position 位置值,而该属性变化触发的事件通过模型再次派发到图形组件,引发图形组件根据新的模型信息刷新界面。
以上是大佬教程为你收集整理的快速开发基于 HTML5 网络拓扑图应用之 DataBinding 数据绑定篇全部内容,希望文章能够帮你解决快速开发基于 HTML5 网络拓扑图应用之 DataBinding 数据绑定篇所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。