组态图标数据绑定中，有属性attr和函数func两个选项，其中函数参数data、view，可以实现一个属性分身为多个变量暴露出去并做逻辑处理给到原来的属性变量！HT矢量数据绑定原理！

IOTOS

于 2022-09-29 09:59:58 发布

阅读量214

点赞数

本文链接：https://blog.csdn.net/IOTOS/article/details/127101539

版权

ht for web深度开发实践专栏收录该内容

63 篇文章 35 订阅

订阅专栏

如下图所示，通常情况下，图标的属性跟放在图纸上属性绑定一样，是绑定一个变量。其中在图纸中，这个变量虽然是一个，但是可以是带数据结构的，经过过滤函数可以实现对数据进行拆解处理成一个或多个数据，实现了多个变量的效果！

图纸上绑定的数据是数据接口由机器提供的这还好说，图标的属性是放在图纸上暴露出来让人去配置的，这个时候如果想动态让这个固定一个属性有多个可配置的项，就比较费劲了！

所以可以利用到func函数绑定！函数绑定中是可以定义多个变量的，这个变量直接使用，然后在数据绑定中创建声明下就可以了，并且多个变量可以在函数func中做逻辑，于是实现人在组态中想动态配置多个参数给到图标的一个固定属性，那就能实现了！

注意，func属性函数中传参分两种情况：

图标全局背景下（未选中图标内嵌套的组件或其他图标时）属性的func中传入参数：data是当前（一层层嵌套的最上层）图标，被拖放到图纸后形成的data数据模型节点对象；view则是数据模型对应的视图，通过data.a(xxx)，可以获取到图标属性绑定中不管是显式还隐式创建的变量，获取或设置其值。

在选中图标内嵌套的组件或其他图标时的属性func，data是选中节点图标的data数据模型，view对应其视图，注意，此时界面也不会显示“数据绑定”，只有在未选中任何嵌套图标组件点击图标背景时才会出现数据绑定！

此外注意，在func中使用的变量就是隐式的，需要手动在“数据绑定”中创建；直接以attr属性的方式设置名称绑定，那么只需要按旋转图标，就会自动在数据绑定中创建变量一键自动生成，但是这样会覆盖掉隐式变量手动创建定义的

数据绑定手册 - HT for Web

JavaScript
<!DOCTYPE html>
<html>
    <head>
    <title>Pie Data Binding</title>
    <meta charset="UTF-8">
    <style>
    html, body {
            padding: 0px;
            margin: 0px;
    }
    .main {
        margin: 0px;
        padding: 0px;
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px
    }
    </style>
    <script src="../../../../lib/core/ht.js"></script>
    <script>
    function init() {
            //数据模型
            dataModel = new ht.DataModel();
            graphView = new ht.graph.GraphView(dataModel);
            //视图
            view = graphView.getView();
            view.className = 'main';
            //dom及事件监听
            document.body.appendChild(view);
            window.addEventListener('resize', function(e) {
                graphView.invalidate();
            }, false);
            //HT格式的矢量图片，以及数据变量跟图形属性绑定
            ht.Default.setImage('pie', {    //注册图片
                width: { func: 'getWidth' },
                height: { func: 'field@_height' },
                comps: [
                    {
                        type: 'pieChart',
                        hollow: {func: 'style@isHollow'},
                        startAngle: {func: 'attr@angle'},
                        rect: { func: function (data) { return [5, 5, 190, 190]; } },
                        label: true,
                        labelColor: 'white',
                        values: [56.15, 19.15, 17.17, 5.55, 1.98],
                        colors: ['#E74C3C', '#E2E2E2', '#34495E', '#3498DB', 'yellow']
                    }
                ]
            });
            //数据模型的图元内容对象
            node = new ht.Node();
            //图元对象数据变量赋值
            node.setPosition(120, 120);
            node.setSize(200, 200);
            node.setAttr('angle', 0);
            node.setStyle('isHollow', true);
            node.setImage('pie');    //设置图片
            node.setStyle('note', 'Try to drag and double click on me');
            node.setStyle('note.position', 17);
            //图元对象添加到数据模型中
            dataModel.add(node);
            //时间交互改变数据模型中图元对象的数据变量值，观察对应矢量图形的外观变化！
            graphView.addInteractorListener(function(e) {
                if (e.kind === 'betweenMove') {
                    node.setAttr('angle', node.getAttr('angle') + Math.PI / 15);
                }
                else if(e.kind === 'doubleClickData'){
                    node.setStyle('isHollow', !node.getStyle('isHollow'));
                }
            });
        }
    </script>
    </head>
    <body οnlοad="init();">
    </body>
</html>

另外注意，在嵌套图标设置attr数据变量后，不一定都需要做图标全局数据绑定申明（可以符号一键自动添加，虽然可能导致手动数据绑定的func中的变量会被清除），可只作为图标内部逻辑中间变量！

如下图所示，在鼠标移入移出，需要改变边框borderColor颜色，一般情况下borderColor做数据绑定申明，然后可以在图纸中手动配置，但我们需要两个用来配置borderColor-default和borderColor-hover，而且default是鼠标移出时候颜色、hover是鼠标移入时的颜色：

JavaScript
//鼠标离开
data.ca('borderColor',data.ca('borderColor-default'))

//鼠标移入
data.ca('borderColor',data.ca('borderColor-hover'))

利用组态数据绑定实现组件图标属性支持配置FontAwesome矢量图标的制作步骤

组态icon图标，iconfont、fontawesome、SVG图片可以在组态assets资源目录中右键转换成图纸或者图标，并且自动保存到图标目录下同样命名的文件夹内，很自动化！

IOTOS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
组态图标数据绑定中，有属性attr和函数func两个选项，其中函数参数data、view，可以实现一个属性分身为多个变量暴露出去并做逻辑处理给到原来的属性变量！HT矢量数据绑定原理！

函数绑定中是可以定义多个变量的，这个变量直接使用，然后在数据绑定中创建声明下就可以了，并且多个变量可以在函数func中做逻辑，于是实现人在组态中想动态配置多个参数给到图标的一个固定属性，那就能实现了！如下图所示，通常情况下，图标的属性跟放在图纸上属性绑定一样，是绑定一个变量。在选中图标内嵌套的组件或其他图标时的属性func，data是选中节点图标的data数据模型，view对应其视图，注意，此时界面也不会显示“数据绑定”，只有在未选中任何嵌套图标组件点击图标背景时才会出现数据绑定！//dom及事件监听。
复制链接

扫一扫