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)'); |