HT for Web 数据绑定手册

索引


概述

数据绑定意味将Data图元的数据模型信息,与界面图形的颜色、大小和角度等可视化参数进行自动同步, HT的预定于图形组件默认就已与DataModel中的Data数据绑定,例如用户修改Nodeposition位置值, 则GraphViewGraph3dView上的相应图元位置会自动同步变化。

传统的数据绑定有单向绑定和双向绑定的概念,但HT系统的设计模式使得绑定更加简化易于理解,HT只有一个DataModel数据模型, 绑定DataModel的图形组件并没有组件内部的其他数据模型,所以组件都是如实根据DataModel来呈现界面效果,因此当用户拖拽图元移动时, 本质也是修改了数据模型中Nodeposition位置值,而该属性变化触发的事件通过模型再次派发到图形组件,引发图形组件根据新的模型信息刷新界面。

HT的预定义图元都已自动实现数据绑定,本手册要介绍的主要针对自定义矢量、自定义图标和自定义3d模型,这三种可扩展图形展示效果的数据绑定机制, 这三种自定义图形都具有一致的描述与Data进行数据绑定的json格式,用户只需要根据HT指定的规则格式描述好图元参数绑定的Data属性, 应用中只需要更新Data上的数据,图形界面就会自动刷新,从而达到实时显示数据的效果。

绑定格式

绑定的格式很简单,只需将以前的参数值用一个带func属性的对象替换即可,func的内容有以下几种类型:

除了func属性外,还可设置value属性作为默认值,如果对应的func取得的值为undefinednull时,则会采用value属性定义的默认值。 例如以下代码,如果对应的Data对象的attr属性stateColorundefinednull时,则会采用yellow颜色:

color: {
    func: 'attr@stateColor',
    value: 'yellow'
}

矢量绑定

数据绑定是HT系统矢量比传统矢量描述格式如SVG灵活强大的重要因素, 上文描述的所有矢量组件属性全部可以设置成动态绑定Data模型属性。因此一般的工作流程为:先手工或者采用矢量编辑工具生成矢量json信息, 将需要动态变化的参数设计成数据绑定的格式。运行中只需要修改Data中绑定图形的相关属性,则矢量会自动将绑定的属性值, 转换显示为相应的颜色,大小,角度等图形信息,最终达到松耦合的数据可视化流程架构。

饼图案例

上例子中:

开关案例

下例展示了颜色background,宽度borderWidth,旋转角度rotation和可见visible多种类型属性, 与Data图元attr属性的数据绑定。

background: {
    value: '#2C3E50',
    func: 'attr@switch.background'
},
visible: {
    value: true,
    func: 'attr@switch.visible'
} 
borderWidth: {
    value: 8,
    func: 'attr@switch.thickness'
},
rotation: {
    value: -Math.PI/4,
    func: 'attr@switch.angle'
}

图标绑定

图标用于呈现在图元周围作为附属物的展示方式,可参见入门手册3D手册的说明,定义图标的参数皆可采用数据绑定的描述方式实现动态变化。

node.addStyleIcon('alarm', {                    
    names: ['alarm-star', 'alarm-triangle', 'alarm-circle'],                    
    position: {func: 'attr@alarm.position'},
    direction: { func: 'attr@alarm.direction' },
    gap: { func: 'attr@alarm.gap' },
    width: { func: 'attr@alarm.width' },
    height: { func: 'attr@alarm.height' },
    visible: { func: 'attr@alarm.visible' },                    
    rotation: { func: 'attr@alarm.rotation' },
    stretch: { func: 'attr@alarm.stretch' },
    opacity: { func: 'attr@alarm.opacity' },
    transparent: { func: function(data){ return data.a('alarm.opacity') < 1; } },
    light: { func: 'attr@alarm.light' },
    textureScale: { func: 'attr@alarm.texture.scale' },
    discardSelectable: { func: 'attr@alarm.discard.selectable' },
    r3: { func: function(data) { return [0, 0, -data.a('alarm.rotation')]; } },
    face: { func: 'attr@alarm.face' },
    reverseFlip: { func: 'attr@alarm.reverse.flip' },
    reverseCull: { func: 'attr@alarm.reverse.cull' },
    reverseColor: { func: 'attr@alarm.reverse.color' },
    autorotate: { func: 'attr@alarm.autorotate' }
});

模型绑定

建模手册中介绍的自定义3D模型也支持数据绑定机制, 可数据绑定是HT的建模远强大于传统3D建模工具的特色功能,构建模型的任何颜色、大小、旋转等参数皆可绑定Data数据模型属性, 以这样的方式建模后用户只需要更新Data数据对象属性值,则3D界面对应图元的呈现效果即可实时同步更新。

设备案例

以上例子注册的ems-block模型由一个立方体和一个圆筒构造,两个模型的颜色分别绑定了Dataattr属性的circleColorrectColor值:

ht.Default.setShape3dModel('ems-block', [
    {
        shape3d: ht.Default.createCylinderModel(32, 0, 32, false, false, true, true),   
        r3: [Math.PI/2, 0, 0],   
        color: {
            func: 'attr@circleColor',
            value: '#3498DB'
        }     
    },
    {
        shape3d: 'box',
        s3: [1, 0.2, 1], 
        t3: [0, -0.7, 0],
        color: {
            func: 'attr@rectColor',
            value: '#3498DB'
        }
    }
]); 

HT的所有通用组件也都支持对矢量图片的渲染,该例子中左侧TreeView显示的正是实现了数据绑定的矢量图标, Graph3dViewTreeView的组件都绑定了同样的数据源,因此修改Dataattr属性的circleColorrectColor可同时驱动不同的视图组件。

ht.Default.setImage('ems-block', {
    width: 18,
    height: 18,
    comps: [
        {
            type: 'circle',
            rect: [0, 2, 18, 10],
            background: {
                func: 'attr@circleColor',
                value: '#3498DB'                               
            }
        }, 
        {
            type: 'rect',
            rect: [4, 14, 10, 3],
            background: {
                func: 'attr@rectColor',
                value: '#3498DB'                               
            }
        }                           
]}); 

告警案例

icons图标功能不仅可显示平面图片,也支持将注册的模型作为图标摆放。以上例子在Node图元顶上摆放了一个3d模型的图标, 该模型有三个部分构成一个告警提示,模型三个部分的颜色绑定了图元style属性的all.blend值,模型的旋转角度绑定了alarm.rotation.*

var array = [
    {
        shape3d: ringModel,  
        color: { func: 'style@all.blend' },
        r3: [Math.PI/2, 0, 0]
    },
    {
        shape3d: sphereModel,
        color: { func: 'style@all.blend' },
        t3: [0, 30, 0]
    },
    {
        shape3d: cylinderModel, 
        color: { func: 'style@all.blend' },
        t3: [0, -10, 0]
    }
];

ht.Default.setShape3dModel('alarm', {
    shape3d: array,                       
    t3: [0, 50, 0],
    r3: {func: function(data){
         return [
             data.a('alarm.rotation.x'), 
             data.a('alarm.rotation.y'), 
             data.a('alarm.rotation.z')];
    }}
});

图标为3d模型时不同于传统的通过names定义图标数组,而是设置shape3d的模型名称,目前还不支持数组方式, 只允许指定一个模型名称,如需添加多个3d模型图标可通过多次调用addStyleIcon实现:

node.addStyleIcon('alarm', {
   position: 3,
   face: 'center',
   shape3d: 'alarm'                   
}); 

欢迎交流 service@hightopo.com