ht.Default.setImage()注册图片(矢量图标)以及使用;渲染元素对象设定矢量图标,数据绑定动态赋值

https://github.com/yancy-li/carousel/blob/master/src/core.js

不少场合需要传入图片,可以是png或者是矢量图,比如下:

JavaScript
//1)注册图片
//设置方式一:图片文件路径
ht.Default.setImage('mac', 'res/mac.png');
//设置方式二:HT矢量图标文件路径
ht.Default.setImage('mac', 'symbols/admin/icons/search.json');
//设置方式三:HT矢量图标内容(不需要手写,编辑器设计图标,生成的对应json内容就是)
ht.Default.setImage('mac',{
    "width": 20,
    "height": 40,
    "comps": [{
    "type": "rect",
    "background": "rgba(0,0,0,0.40)",
    "rect": [
        0,
        0,
        20,
        40
    ]
    },
    {
    "type": "shape",
    "borderWidth": 1,
    "borderColor": "rgba(255, 255, 255, 0.4)",
    "rotation": 3.14159,
    "points": [
    5.98486,
    10.84151,
    14.01514,
    20.09022,
    6.14152,
    29.15849
    ]
    }
    ]
    }
});

//2)使用图片
//使用方式一:直接使用png(略)
//使用方式二:用注册的image名称:
carousel.setIndicator('mac')
//使用方式三:直接传入矢量json:
carousel.setIndicator({
        "modified": "Sat Aug 06 2022 01:19:49 GMT+0800 (中国标准时间)",
        "width": 10,
        "height": 10,
        "fitSize": true,
        "comps": [{
            "type": "roundRect",
            "background": "rgba(100,100,100,0.5)",
            "rect": [
                0,
                0,
                10,
                10
            ]
        }]
    })
    
//3)数据绑定
carousel.setIndicator({
"modified": "Sat Aug 06 2022 13:36:40 GMT+0800 (中国标准时间)",
"background": "rgb(32,37,46)",
"dataBindings": [{   //现在对矢量图片,不给固定描述json,而是带上变量数据绑定!
        "attr": "indicator.background",
        "valueType": "Color"
    },
    {
        "attr": "indicator.text",
        "valueType": "String"
    }
],
"width": 100,
"height": 100,
"fitSize": true,
"comps": [{
        "type": "roundRect",
        "background": {
            "func": "attr@indicator_default.background", //属性变量暴露1
            "value": "rgba(217,217,217,0.5)"
        },
        "borderWidth": 1,
        "borderColor": "#979797",
        "rect": [
            0,
            0,
            100,
            100
        ]
    },
    {
        "type": "text",
        "text": {
            "func": "attr@indicator_default.text",      //属性变量暴露2
            "value": "文本"
        },
        "align": "center",
        "layoutH": "scale",
        "layoutV": "scale",
        "rect": [
            25,
            25,
            50,
            50
        ]
    }
]
});
/*注意!!!carousel是ht组件对象,通过a(xxx,yyy)可以实现对任意属性进行赋值,
这里将矢量图形传入了改变量,那么久直接对改变量的属性进行赋值即可,属性名称就是
json矢量图形中暴露和绑定的变量即可!并不需要*/
carousel.a('indicator_default.background', 'rgb(255,0,0)');

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IOTOS

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值