HT for web Class: Drawable
HT for web Class: ImageDrawable
HT UI 定义类手册
序列化手册 - HT for Web
渲染元素中实例化的UI组件，并且调用API置图标json，如果图标json有做过据绑绑定，能对其动态赋值吗？实际测试发现这样通常方式并不起效果。
| JavaScript
//以下操作：
myview.setIconDrawable(new ht.ui.drawable.ImageDrawable('symbols/admin/AiotOS/base/processCircle.json'));
//效果等同于：
myview.setIcon('symbols/admin/AiotOS/base/processCircle.json')
//如果有设置setIcon(),那么setIconDrawable()就会失效不起作用（被重写覆盖掉了？） |
| JavaScript
var myview = new ht.ui.Button();
myview.setIconHeight(250)
myview.setIconWidth(400)
function MyDrawable(url){//构造函数调用基类需传入this，同时注意实例化时是否有构造参数的传入！
MyDrawable.superClass.constructor.call(this,url);
}
ht.Default.def(MyDrawable, ht.ui.drawable.ImageDrawable , {
draw: function(x, y, width, height, data, view, dom) {
let self = this;//成员函数调用基类方法，也需传入this
MyDrawable.superClass.draw.call(self,x ,y, width, height, data, view, dom);
console.error(data) //打印基本都是null
// var g = view.getRootContext(dom);
// g.beginPath();
// g.rect(x, y, width, height);
// g.fillStyle = 'red';
// g.fill();
}
});
//注意这里实例化构造传入了参数，ImageDrawable(image, stretch, colorTint, rect)原本有4个可以传参！
myview.setIconDrawable(new MyDrawable("symbols/admin/AiotOS/base/processCircle.json")); |
【重要】组态icon图标，iconfont、fontawesome、SVG图片可以在组态assets资源目录中右键转换成图纸或者图标，并且自动化保存到图标目录下同样命名的文件夹内的步骤；data.a()、data.ca()，带前缀和不带前缀的属性获取及设置方法！
示例：实际使用drawable的场景（table条纹表格行背景颜色）：
| JavaScript
//设置条纹方式1：
table.setRowBackgroundDrawable(new ht.ui.drawable.StripedRowBackgroundDrawable([nodeData.ca('stripeColors')[1], nodeData.ca('stripeColors')[0]]));
//设置条纹方式2（不建议，这样失去了api设置的效果比如划过的行颜色）
// table.drawRowBackground = function(drawable, x, y, width, height, data) {
// var g = cache.table.getRootContext();
// if (cache.table.isSelected(data)) {
// g.fillStyle = nodeData.ca('rowBackground')[0];
// } else if (cache.table.getRowIndex(data) % 2 === 0) {
// g.fillStyle = nodeData.ca('stripeColors')[1];
// } else {
// g.fillStyle = nodeData.ca('stripeColors')[0];
// }
// g.beginPath();
// g.rect(x, y, width, height);
// g.fill();
// }; |
要起效果，可以通过构建中间对象ht.Node，然后在重载的draw函数中传入到data变量中具体如下：
渲染元素实例化内示例：
| JavaScript
let nodeData = data;
if (!cache.obj) {
function init() {
//----------------------------------------------------------
var myview = new ht.ui.Button();
myview.setIconHeight(250)
myview.setIconWidth(400)
function MyDrawable(url){//构造函数调用基类需传入this，同时注意实例化时是否有构造参数的传入！
MyDrawable.superClass.constructor.call(this,url);
}
ht.Default.def(MyDrawable, ht.ui.drawable.ImageDrawable , {
draw: function(x, y, width, height, data, view, dom) {
let self = this;//成员函数调用基类方法，也需传入this
/*通过创建Node实例来中间过渡，作为参数传给基类的draw方法！*/
let mydata = new ht.Node()
/*前面通过构造函数传入到MyDrawable，
这里通过this和成员方法获得传入的图标URL字符串*/
mydata.setImage(self.getImage())
/*开始调用属性，对数据绑定的变量来动态赋值！！！*/
mydata.a('text','hi iotos!')
mydata.a('borderColor','green')
MyDrawable.superClass.draw.call(self,x ,y, width, height, mydata, view, dom);
}
});
//注意这里实例化构造传入了参数，ImageDrawable(image, stretch, colorTint, rect)原本有4个可以传参！
myview.setIconDrawable(new MyDrawable('symbols/admin/AiotOS/base/processCurve.json'));
//----------------------------------------------------------
return myview;
}
var obj = cache.obj = init()
obj.layoutHTML = function () {
gv.layoutHTML(data, obj, false);
}
}
return cache.obj; |
渲染元素实例化内实例：
| JavaScript
//方式一：通过ImageDrawable结合染色，来实现对“部分”（不是所有的都能被染色）的图标颜色改变
// textField.setIconDrawable(new ht.ui.drawable.ImageDrawable(autoCompleteIconPath(data,'iconPath'),'centerUniform',data.ca('iconColor')));
/*方式二：iconfont导入的矢量图标，都有做icon-background数据绑定属性暴露，动态赋值，这里不同的
传入的图标根据各自具体的暴露的数据绑定来自行调用属性赋值！*/
let iconPath = autoCompleteIconPath(data,'iconPath'),
iconColor = data.ca('iconColor');
function MyDrawable(url){//构造函数调用基类需传入this，同时注意实例化时是否有构造参数的传入！
MyDrawable.superClass.constructor.call(this,url);
}
ht.Default.def(MyDrawable, ht.ui.drawable.ImageDrawable , {
draw: function(x, y, width, height, data, view, dom) {
let self = this;//成员函数调用基类方法，也需传入this
let mydata = new ht.Node()
mydata.setImage(self.getImage())
mydata.a('icon-background', iconColor)
MyDrawable.superClass.draw.call(self,x ,y, width, height, mydata, view, dom);
}
});
//注意这里实例化构造传入了参数，ImageDrawable(image, stretch, colorTint, rect)原本有4个可以传参！
textField.setIconDrawable(new MyDrawable(iconPath)); |
【重要】组态icon图标，iconfont、fontawesome、SVG图片可以在组态assets资源目录中右键转换成图纸或者图标，并且自动化保存到图标目录下同样命名的文件夹内的步骤；data.a()、data.ca()，带前缀和不带前缀的属性获取及设置方法！
封装后的ImageDrawable派生类，并且通过构造函数动态传入任意数量的数据绑定变量与值的键值对
| JavaScript
//------------------------iotosCommon.js中封装类的定义--------------------------------
//构造函数除了传入关键的图标url，还要传入自定义的key-value，任意数量的数据绑定变量字段
function DatabindingsImageDrawable(url, attrsValues = {
'icon-background': 'rgb(55,125,255)',
'text': 'text'
}) { //构造函数调用基类需传入this，同时注意实例化时是否有构造参数的传入！
DatabindingsImageDrawable.superClass.constructor.call(this, url);
this.attrsValues = attrsValues;//js对象加任意属性，供给类的成员方法访问很简单，直接.xxx=yyy赋值即可！
}
/*注意，参数可以是字符串也可以直接是类对象。只是如果用字符串，则会将类名自动注册到HT的classMap中，
一般使用函数(构造函数)即可；如果不是类字符串名而是类对象DatabindingsImageDrawable，
那么在其他地方使用new DatabindingsImageDrawable()创建对象会无法识别，只能在定义的地方使用！
https://www.hightopo.com/guide/doc/ht.Default.html#.def*/
ht.Default.def("DatabindingsImageDrawable", ht.ui.drawable.ImageDrawable, {
draw: function(x, y, width, height, data, view, dom) {
let self = this; //成员函数调用基类方法，也需传入this
/*通过创建Node实例来中间过渡，作为参数传给基类的draw方法！*/
let mydata = new ht.Node()
/*前面通过构造函数传入到DatabindingsImageDrawable，再通过this和成员方法
获得传入的图标URL字符串, 以及遍历传参key-value对数据绑定的变量来动态赋值！*/
mydata.setImage(self.getImage())
for(attrItem in self.attrsValues){//使用构造函数中对当前类的自定义属性定义赋值
mydata.a(attrItem, self.attrsValues[attrItem]);
}
// /*开始调用属性，对数据绑定的变量来动态赋值！！！*/
// mydata.a('text', 'hi iotos!')
// mydata.a('borderColor', 'green')
DatabindingsImageDrawable.superClass.draw.call(self, x, y, width, height, mydata, view, dom);
}
});
//-------------------------------------------------------------------
//-----------------------其他js中调用使用-------------------------------------
let objtmp = new ht.ui.LinkButton();
//方式一：由固定图标写死传入：
//objtmp.setIcon('symbols/demo/AiotOS/icons/light/anchor.json')
//方式二：动态图标数据绑定赋值：
defineClass_DatabindingsImageDrawable();
objtmp.setHoverIconDrawable(new DatabindingsImageDrawable('symbols/demo/AiotOS/icons/light/anchor.json',{
'icon-background': 'yellow'
})); |
对于可以设置背景background属性的，一般都对应可以设置backgroundDrawable，并且传入ImageDrawable对象，此时就可以很好地利用图元节点设置任何矢量图标并动态变量属性设置！对颜色background可配置的区域如何设置圆角radius
【附】字符串形式定义类名称的自定义派生类实例：
HT for web Class: DropDownTemplate
| JavaScript
if (!cache.obj) {
function init() {
importCssJs.js('custom/libs/leaflet/leaflet/leaflet.js');
importCssJs.css('custom/libs/leaflet/leaflet/leaflet.css');
mapPicker = new ht.ui.ComboBox();
mapPicker.setDropDownTemplate(ht.ui.MapDropDown);
return mapPicker;
}
var obj = cache.obj = init()
obj.layoutHTML = function () {
gv.layoutHTML(data, obj, runningMode());
}
}
return cache.obj; |
| JavaScript
function registerHtCommonImage() {
//……
//自定义派生类
ht.ui.MapDropDown = function() {}
ht.Default.def('ht.ui.MapDropDown', ht.ui.DropDownTemplate, {
initDropDownView: function(master, datas, value) {
var self = this,
htmlView = new ht.ui.HtmlView(),
mapDiv = self._mapDiv = document.createElement("div"),
map = self._map = L.map(mapDiv, {
zoomAnimation: false,
trackResize: false
}).setView([39.9123, 116.3913], 15);
mapDiv.style.width = '100%';
mapDiv.style.height = '100%';
// mapDiv.style.boxShadow = master.getBoxShadow();
L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}', {
attribution: 'www.aiotos.net',
maxZoom: 18,
minZoom: 3
}).addTo(map);
map.on('click', function(e) {
var latlng = e.latlng;
self._latlng = latlng.lat + "," + latlng.lng;
self.stop();
});
htmlView.setContent(mapDiv);
htmlView.setPreferredSize(400, 200);
return htmlView;
},
getDropDownValue: function() {
return this._latlng;
},
afterOpen: function(v) {
var self = this,
map = self._map;
self.getDropDownView().validate();
self._map.invalidateSize();
if (v) {
self._latlng = v;
var latlng = v.split(",");
map.setView([latlng[0], latlng[1]], 15);
self._marker = new L.marker([latlng[0], latlng[1]]);
self._marker.addTo(map).bindPopup('Here!').openPopup();
}
}
});
} |
6453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
