Class: ImageDrawable

ht.ui.drawable. ImageDrawable

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:
© 2017 Hightopo Inc. All rights reserved. - Email: service@hightopo.com