new ImageDrawable(image, stretch, colorTint, rect)
ImageDrawable 类从 ht.ui.drawable.Drawable 继承,重写了 draw 方法来绘制图片和矢量图; 提供了拉伸、染色等属性来控制绘制效果。
Parameters:
Name | Type | Argument | Description |
---|---|---|---|
image |
String | Object | 要绘制的图片,可以是注册的图片名或图片路径或者矢量对象 |
|
stretch |
String |
<optional> |
拉伸方式,可选值为:'fill'|'uniform'|'centerUniform'|'center'|null(等同于 centerUniform) |
colorTint |
color |
<optional> |
染色 |
rect |
rect |
<optional> |
图片矩形范围,格式为:{x: x, y: y, width: width, height: height} |
Example
button.setBackgroundDrawable(new ht.ui.drawable.ImageDrawable('node_image'));
Extends
Methods
-
addPropertyChangeListener(listener, scope, ahead)
-
增加属性事件变化监听函数
Parameters:
Name Type Argument Description listener
function 监听器函数
scope
Object <optional>
函数域
ahead
Boolean <optional>
是否将当前监听器插入到监听器列表开头
- Inherited From:
-
draw(x, y, width, height, data, view, dom)
-
绘制内容
Parameters:
Name Type Argument Description x
Number 绘制范围的 x 坐标
y
Number 绘制范围的 y 坐标
width
Number 绘制范围的宽度
height
Number 绘制范围的高度
data
ht.Data <optional>
绘制相关的 Data 对象,如绘制树组件中节点的 icon 时,可以用此参数判断出当前在绘制哪个节点
view
ht.View 当前在绘制的组件
dom
HTMLElement <optional>
当前在绘制的 dom 对象,绝大多数组件无需考虑这个参数(因为只有一个绘制 canvas),特殊的是右键菜单,每个子菜单都是一个单独的 canvas,这种情况下才有这个参数
- Inherited From:
Example
// 下面这段代码绘制了一个矩形 function MyDrawable() { MyDrawable.superClass.constructor.call(this); } ht.Default.def(MyDrawable, ht.ui.drawable.Drawable, { draw: function(x, y, width, height, data, view, dom) { var g = view.getRootContext(dom); g.beginPath(); g.rect(x, y, width, height); g.fillStyle = 'red'; g.fill(); } });
-
firePropertyChange(property, oldValue, newValue, compareFunc) → {Boolean}
-
派发属性变化事件
Parameters:
Name Type Argument Description property
String 属性名
oldValue
Object 属性变化之前的值
newValue
Object 属性变化之后的值
compareFunc
function <optional>
比较函数,用于比较新值和旧值是否一致,如果一致则不会派发事件
- Inherited From:
Returns:
事件是否派发成功
- Type
- Boolean
-
fp(property, oldValue, newValue, compareFunc) → {Boolean}
-
派发属性变化事件,firePropertyChange 的缩写
Parameters:
Name Type Argument Description property
String 属性名
oldValue
Object 属性变化之前的值
newValue
Object 属性变化之后的值
compareFunc
function <optional>
比较函数,用于比较新值和旧值是否一致,如果一致则不会派发事件
- Inherited From:
Returns:
事件是否派发成功
- Type
- Boolean
-
getColorTint() → {color}
-
获取图片染色
Returns:
图片染色
- Type
- color
-
getImage() → {String|Object}
-
获取要绘制的图片
Returns:
要绘制的图片,可能是注册的图片名或图片路径或者矢量对象
- Type
- String | Object
-
getRect() → {rect}
-
获取图片范围
Returns:
图片范围
- Type
- rect
-
getStretch() → {String}
-
获取拉伸方式,默认为 'centerUniform'
Returns:
拉伸方式,可选值为:'fill'|'uniform'|'centerUniform'|'center'|null(等同于 centerUniform)
- Type
- String
-
mp(listener, scope, ahead)
-
增加属性事件变化监听函数,addPropertyChangeListener 的缩写
Parameters:
Name Type Argument Description listener
function 监听器函数
scope
Object <optional>
函数域
ahead
Boolean <optional>
是否将当前监听器插入到监听器列表开头
- Inherited From:
-
removePropertyChangeListener(listener, scope)
-
删除属性事件变化监听器
Parameters:
Name Type Argument Description listener
function 监听器函数
scope
Object <optional>
函数域
- Inherited From:
-
setColorTint(color)
-
设置图片染色
Parameters:
Name Type Description color
color 颜色值
-
setImage(image)
-
设置要绘制的图片
Parameters:
Name Type Description image
String | Object 要绘制的图片,可以是注册的图片名或图片路径或者矢量对象
-
setRect(rect)
-
设置图片范围
Parameters:
Name Type Description rect
rect 矩形范围,格式为:{x: 'left'|'right'|'center'|Number, y: 'top'|'bottom'|'middle'|Number, width: 'wrap_content'|'match_parent'|Number, height: 'wrap_content'|'match_parent'|Number }
-
setStretch(stretch)
-
设置拉伸方式
Parameters:
Name Type Description stretch
String 拉伸方式,可选值为:'fill'|'uniform'|'centerUniform'|'center'|null(等同于 'fill')
-
ump(listener, scope)
-
删除属性事件变化监听器,removePropertyChangeListener 的缩写
Parameters:
Name Type Argument Description listener
function 监听器函数
scope
Object <optional>
函数域
- Inherited From: