element ui背景图_ui_element_zh

概述

UIElement是所有组件的基类，它通常是一个矩形区域，有一定的外观形状，并能处理用户事件。

属性

x 在父控件中的X坐标。

y 在父控件中的Y坐标。

w 控件的宽度。

h 控件的高度。

type 控件的类型(请不要修改它)。

name 控件的名称。

visible 控件是否对用户可见。

enable 控件是否接受用户事件(对于刚体来说，同时会设置刚体的Active属性)。

style 控件的外观属性，如果字体和填充颜色等。参考Style

scale 控件的缩放系数。

rotation 控件的旋转角度(幅度)。

opacity 控件的透明度。

children 控件的子控件(数组)。

方法

setText(text) 设置控件的文本内容，如控件上的文字。

getText() 获取控件的文本内容，如控件上的文字。

getParent() 获取父控件。

setPosition(x, y) 设置控件的位置。

setSize(w, h) 设置控件的大小。

setFlipX(value) 设置是否水平翻转。

setFlipY(value) 设置是否垂直翻转。

getPositionInWindow() 返回控件在窗口里的位置。

setRotation(rotation) 设置控件的旋转角度。

setEnable(enable) enable/disable控件。disable的控件不接受用户事件，如果控件是刚体，会处于不活跃状态。

setVisible(visible) 显示/隐藏控件。

getVisible() 获取控件是否可见,返回true/false。

setZIndex(z) 设置控件在父控件中的位置序数。

getZIndex() 获取控件在父控件中的位置序数。

setAnchor(x,y) 设置控件的锚点(x：范围0-1，y：范围0-1，x指横向锚点，y指纵向锚点)。

setAnchorY(y) 设置控件的纵向锚点(y：范围0-1，y指纵向锚点)。

setAnchorX(x) 设置控件的横向锚点(x：范围0-1，x指横向锚点)。

setPivot(x, y) 设置控件的轴点，即旋转的基准点。

getPivot() 获取控件轴点。

setScale(x,y) 设置控件的纵横向比例。(x：x指横向比例，y:指纵向比例)。

setScaleX(x) 设置控件的横向比例。(x：x指横向比例)。

setScaleY(y) 设置控件的纵向比例。(y:指纵向比例)。

getScaleX() 获取横向比例。

getScaleY() 获取纵向比例。

setOpacity(opacity) 设置控件的透明度。(opacity:透明度，取值0~1)。

getOpacity() 获取控件透明度。

setValue(value, notify, animation) 设置控件的值，不同控件的值有不同的意义，如进度条的值时进度，按钮的值就是上面的文本。

value 新的值。

notify 是否触发onChanged事件。

animation 是否启用动画(只能用于数值的值)。

addValue(delta, notify, animation) 在当前的数值上加上一个增量(只能用于数值的值)。

delta 增量，可以为负数。

notify 是否触发onChanged事件。

animation 是否启用动画。

setValueOf(name, value) 设置子控件的值。

name 子控件的名称。

value 新的值。

getValue() 获取控件的值。

getValueOf(name) 获取子控件的值。

setName(name) 设置控件的名称(通常在属性对话框时设置就行了，运行时一般不需要修改)。

forEach(function(child) {}) 遍历所有子控件。

find(name, recursive) 通常过名称去查找子控件，recursive为true表示递归查找。

findChildByPoint(point, recursive, checkFunc) 通常过点的位置去查找子控件，recursive为true表示递归查找。

checkFunc(child) 回调函数(可选)。用于跳过某些特定的控件，返回false表示跳过此控件继续查找。

var targetElement = this.findChildByPoint(point, true, function(child) {

//Skip dragger self

return child !== dragger;

});

isAnimating() 是否在播放animate动画。

animate(config, onDone, onStep, actionWhenBusy) 让控件动起来。

onDone(name) 动画完成时的回调函数, 对每一个config调用一次。

onStep 动画完成一步时的回调函数。返回false自动停止动画。

onStep原型:onStep(element, timePercent, config)，其中，element:播放动画的控件，timePercent:动画播放时间百分比，取值0~1，config:动画的配置

actionWhenBusy 动画正在进行时，处理本次请求的方法：“replace”:表示替换当前动画，"append":追加到当前动画后面播放。

stopAnimation(callOnDone) 停止animate开启的动画。

callOnDone 是否调用动画结束的回调函数。

relayout() 重新布局控件。

postRedraw(rect) 请求系统重画控件。

rect 要求更新区域，一般为null。

addChildWithJson(json, index) 向控件中增加一个子控件。示例动态创建组件。

json 子控件的JSON数据。

zIndex 位置序数。

dupChild(name, zIndex) 复制指定名称的child，并加入到子控件中。示例。

name child的名称。

zIndex 位置序数。

removeChild(child, destroyIt, sync) 删除指定的child，如果destroyIt为真，同时销毁它。

child child对象。

destroyIt 是否同时销毁child对象。

sync 是否同步执行，缺省异步执行。

remove(destroyIt, sync) 删除自己，如果destroyIt为真，同时销毁它。

destroyIt 是否同时销毁自己。

sync 是否同步执行，缺省异步执行。

getWindow() 获取当前控件所在的窗口。这是一个很常用的函数，你需要通过这个函数得到窗口对象，然后通过窗口的find函数去找窗口上的其它控件。

openWindow(name, onWindowClose, closeCurrent, initData, options) 打开新窗口。窗口目前有三种：普通窗口，游戏场景和对话框。

name 新窗口的名称。

onWindowClose(retInfo) 新窗口关闭时的回调函数，用来返回函数。

closeCurrent 打开新窗口时是否关闭当前窗口。

initData 传递给新窗口的数据, 作为参数传递给新窗口的onOpen/onBeforeOpen事件。

options 其它参数。options.closeOldIfOpened 如果目标窗口已经打开，关闭它并重新打开。options.openNewIfOpened 如果目标窗口已经打开，打开新一个新窗口打开。

openScene(name, initData) 打开游戏场景。本函数只是对openWindow的包装，打开新游戏场景时会关闭当前场景，再次打开当前场景相当于重置游戏。

closeWindow(retInfo) 关闭当前窗口。

retInfo 这个参数用来传递给打开窗口时指定的onWindowClose回调函数。

setFillColor(color) 设置控件的填充颜色。

setLineColor(color) 设置控件的线条颜色。

setTextColor(color) 设置控件的文本颜色。

getFillColor() 获取控件的填充颜色。

getLineColor() 获取控件的线条颜色。

getTextColor() 获取控件的文本颜色。

type UIElement.IMAGE_DEFAULT: 缺省背景图片。不同的控件支持的type不一样，请参控具体的控件文档。

src 可以是图片的URL，Image对象，WImage对象或备用图片的索引。

setImage(src) 相当于setImage(UIElement.IMAGE_DEFAULT, src)。

getImageByType(type) 获取控件的图片(WImage)。

getImageSrcByType(type) 获取控件的图片的URL。

pickImage(onDone) 从当前系统中选择一张图片，返回file对象和DataURL。

onDone(file, dataURL) 选图成功后的回调函数。

示例：

var image = this.getWindow().find("image");

this.pickImage(function(name, url) {

image.setValue(url);

image.postRedraw();

})

setTimeScale(timeScale, fadeDuration) 设置时间缩放系数，让游戏时间变快或变慢。

timeScale 时间缩放系数，0暂停，(0-1)变慢，1正常，大于1表示变快。

fadeDuration 渐变时间(单位为毫秒，可选)。

this.setTimeScale(0.1);

playSoundEffect(name, onDone) 播放音效。

name 音效文件名，不用包含路径。

onDone 播放音效完成后的回调函数。

playSoundMusic(name, onDone) 播放背景音乐。

name 背景音乐文件名，不用包含路径。

onDone 播放背景音乐完成后的回调函数。

stopSoundEffect(name) 停止播放音效。

name 音效文件名，不用包含路径。

stopSoundMusic(name) 停止播放背景音乐。

name 背景音乐文件名，不用包含路径。

setSoundEffectVolume(volume) 设置音效的音量。

volume 音量，范围0到1。

setSoundMusicVolume(volume) 设置音乐的音量。

volume 音量，范围0到1。

playSoundEffect(name, onDone) 播放音效。

name 音效的文件名(不带路径)。

onDone 播放完成后的回调函数。

playSoundMusic(name, onDone) 播放音乐。

name 音乐的文件名(不带路径)。

onDone 播放完成后的回调函数。

setSoundEnable(enable) 开启/禁止播放音效和背景音乐。

getSoundEnable() 当音效和背景音乐都禁止播放时，返回false，否则返回true。

setSoundEffectsEnable(enable) 开启/禁止播放音效。

setSoundMusicsEnable(enable) 开启/禁止播放背景音乐。

getAppInfo() 获取APP相关信息，返回类似下面的结构。

{

"appid":"com.tangide.demo",

"appversion":"1.0.0",

"appname":"Demo",

"appdesc":"Demo",

"gapversion":"1.0",

"screenscale":"fix-width",

"orientation":"portrait",

"developer":"Unkown ",

"appIcon":"/drawapp8/images/appicons/96.png",

"screenShot1":"",

"screenShot2":"",

"screenShot3":""

}

getChild(index) 获取指定序数的子控件。

index 子控件的序数。

setClipRect(x, y, w, h) 设置控件的矩形裁剪区域。如果想进行任意性状裁剪请参考：任意性状裁剪。

setClipCircle(x, y, r) 设置控件的圆形裁剪区域。如果想进行任意性状裁剪请参考：任意性状裁剪。

getChild(index) 获取指定序数的子控件。

index 子控件的序数。

setSoundEnable(enable) 开启或禁用声音。

getSoundEnable() 获取声音的状态(开启或禁用)。

paintSelfOnly() 在控件上绘制图

示例：

var bg = win.find("bg");

bg.paintSelfOnly = function(ctx){

ctx.lineWidth = 1;

ctx.beginPath();

for(var i=1;i<24;i++){

ctx.moveTo(i *20, 0);

ctx.lineTo(i *20,bg.height);

}

for(var i=0;i<43;i++){

ctx.moveTo(0, 3 + i *20);

ctx.lineTo(bg.width,3 + i *20);

}

ctx.strokeStyle = 'rgba(119,136,153,0.5)';

ctx.stroke();

}

事件

示例

在按钮的onClikc事件中打开名为"win-bonus"的窗口。

this.openWindow("win-bonus",

function (retInfo) {console.log("window closed.");});

在按钮的onClick事件中关闭窗口。

var retCode = 0;

this.closeWindow(retCode);