界面 / StaleButton
StaleButton Class
文本按钮
使用示例:创建一个名为"NewScript"的脚本,放置在对象管理器对象子级中,打开脚本,输入以下代码保存,运行游戏,屏幕显示一个按钮。ts
@Component
export default class NewScript extends Script {
protected onStart(): void {
if(SystemUtil.isClient()){
if(SystemUtil.isClient()){
let mainui = UIService.create(UI_Main);
UIService.showUI(mainui);
UIService.canvas.addChild(mainui.button);
}
}
}
}
class UI_Main extends UIScript {
button: StaleButton = undefined;
public onAwake() {
let size = WindowUtil.getViewportSize();
this.button = StaleButton.newObject();
this.button.transform = new UITransform(size.x/2,size.y/2,size.x / 14, size.y / 20);
this.button.size = new Vector2(size.x / 14, size.y / 20);
this.button.text = "StaleButton";
this.button.fontSize = 18;
this.button.transitionEnable = true;
InputUtil.bindButton(Keys.X, this.button);
this.button.setPressedImageColorDecimal(200, 200, 200, 255);
this.button.onClicked.add(() => {
// 当按下按钮执行以下逻辑
console.log("The \"StaleButton\" button was pressed ~");
});
}
}@Component
export default class NewScript extends Script {
protected onStart(): void {
if(SystemUtil.isClient()){
if(SystemUtil.isClient()){
let mainui = UIService.create(UI_Main);
UIService.showUI(mainui);
UIService.canvas.addChild(mainui.button);
}
}
}
}
class UI_Main extends UIScript {
button: StaleButton = undefined;
public onAwake() {
let size = WindowUtil.getViewportSize();
this.button = StaleButton.newObject();
this.button.transform = new UITransform(size.x/2,size.y/2,size.x / 14, size.y / 20);
this.button.size = new Vector2(size.x / 14, size.y / 20);
this.button.text = "StaleButton";
this.button.fontSize = 18;
this.button.transitionEnable = true;
InputUtil.bindButton(Keys.X, this.button);
this.button.setPressedImageColorDecimal(200, 200, 200, 255);
this.button.onClicked.add(() => {
// 当按下按钮执行以下逻辑
console.log("The \"StaleButton\" button was pressed ~");
});
}
}Hierarchy
↳
StaleButton
Table of contents
Accessors
clickMethod(inClickMethod: ButtonClickMethod): void client |
|---|
| 设置点击模式 |
contentColor(): LinearColor client |
| 设置字体内容颜色 |
disableImageColor(): Readonly<LinearColor> client |
| 获取禁用图片颜色 |
disableImageDrawType(): Readonly<SlateBrushDrawType> client |
| 获取禁用图片绘制类型 |
disableImageGuid(): string client |
| 获取禁用图片ID |
disableImageInfo(): ImageInfo client |
| 获取按钮Disable图片的ImageInfo |
disableImageMargin(): Readonly<Margin> client |
| 获取禁用图片边距 |
disableImageSize(): Readonly<Vector2> client |
| 获取禁用图片大小 |
focusable(): boolean client |
| 获取是否获取输入焦点 |
fontColor(): LinearColor client |
| 获取字体颜色 |
fontLetterSpace(): number client |
| 获取字体间距 |
fontSize(): number client |
| 获取字体大小 |
glyph(): UIFontGlyph client |
| 获取字体字形 |
normalImageColor(): Readonly<LinearColor> client |
| 获取普通图片颜色 |
normalImageDrawType(): Readonly<SlateBrushDrawType> client |
| 获取普通图片绘制类型 |
normalImageGuid(): string client |
| 获取普通图片ID |
normalImageInfo(): ImageInfo client |
| 获取按钮normal图片的ImageInfo |
normalImageMargin(): Readonly<Margin> client |
| 获取普通图片边距 |
normalImageSize(): Readonly<Vector2> client |
| 获取图片大小 |
onClicked(): MulticastDelegate<() => void> client |
| 点击事件 |
onHovered(): MulticastDelegate<() => void> other |
| 悬浮事件 |
onPressed(): MulticastDelegate<() => void> client |
| 按下事件 |
onReleased(): MulticastDelegate<() => void> client |
| 释放事件 |
onUnhovered(): MulticastDelegate<() => void> client |
| 未悬浮事件 |
outlineColor(): LinearColor client |
| 获取字体描边颜色 |
outlineSize(): number client |
| 获取字体描边宽度 |
pressMethod(inPressMethod: ButtonPressMethod): void client |
| 设置按压模式 |
pressedImagColor(): Readonly<LinearColor> client |
| 获取按压图片颜色 |
pressedImageDrawType(): Readonly<SlateBrushDrawType> client |
| 获取按压图片绘制类型 |
pressedImageGuid(): string client |
| 获取按下图片ID |
pressedImageInfo(): ImageInfo client |
| 获取按钮Pressed图片的ImageInfo |
pressedImageMargin(): Readonly<Margin> client |
| 获取按压图片边距 |
pressedImageSize(): Readonly<Vector2> client |
| 获取按压图片大小 |
shadowColor(): LinearColor client |
| 获取字体阴影颜色 |
shadowOffset(): Vector2 client |
| 获取字体阴影偏移 |
strikethroughEnable(): boolean client |
| 获取是否开启字体删除线 |
text(): string <Badge type="tip" text="client" /> |
| 获取按钮文字 |
textAlign(): TextJustify client |
| 获取字体对齐方式 |
textVerticalAlign(): TextVerticalJustify client |
| 获取字体垂直对齐方式 |
touchMethod(inTouchMethod: ButtonTouchMethod): void client |
| 设置触摸模式 |
transitionEnable(): boolean client |
| 获取按钮是否启用过度模式,按下是否有效果 |
underlineEnable(): boolean client |
| 返回是否开启字体下划线 |
click
Accessors
autoSizeHorizontalEnable(): boolean client |
|---|
| 获取是否自动水平设置大小 |
autoSizeVerticalEnable(): boolean client |
| 获取是否自动垂直设置大小 |
cachedGeometry(): Geometry client |
| 获取上一次的GetTickSpaceGeometry |
constraints(): Readonly<UIConstraintAnchors> client |
| 获取控件的布局 |
desiredSize(): Vector2 client |
| 获取期望大小 |
enable(): boolean client |
| 是否可用 |
guid(): string client |
| 获取控件GUID |
isHovered(): boolean client |
| 是否是hovered |
mouseCursor(): MouseCursor client |
| 获取控件上光标类型 |
name(): string client |
| 获取名字 |
onFocusChange(): Delegate<(absolutionPosition: Vector2) => boolean> client |
| 焦点改变事件 |
onFoucsLost(): Delegate<(absolutionPosition: Vector2) => boolean> client |
| 丢失焦点事件 |
onKeyDownEvent(): Delegate<(absolutionPosition: Vector2, keyEvent: KeyEvent) => boolean> client |
| 按键按下事件 |
onKeyUpEvent(): Delegate<(absolutionPosition: Vector2, keyEvent: KeyEvent) => boolean> client |
| 按键抬起事件 |
onMouseButtonDoubleClick(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client |
| 鼠标双击事件 |
onMouseButtonDown(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client |
| 鼠标按下事件 |
onMouseButtonUp(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client |
| 鼠标抬起事件 |
onMouseEnter(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client |
| 鼠标进入控件事件 |
onMouseLeave(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client |
| 鼠标离开控件事件 |
onMouseMove(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client |
| 鼠标移动事件 |
onMouseWheel(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client |
| 鼠标滚轮滚动事件 |
onTouchEnded(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client |
| 触摸结束事件 |
onTouchMoved(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client |
| 触摸移动事件 |
onTouchStarted(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client |
| 触摸按下事件 |
paintSpaceGeometry(): Geometry client |
| 获取最后一次用于渲染Widget的几何信息 |
parent(): Widget client |
| 获取父节点 |
position(): Readonly<Vector2> client |
| 获取控件的位置 |
renderOpacity(): number client |
| 获取渲染透明度 |
renderScale(): Vector2 client |
| 获取渲染缩放 |
renderShear(): Vector2 client |
| 获取渲染错切形变 |
renderTransformAngle(): number client |
| 获取渲染的角度 |
renderTransformPivot(): Vector2 client |
| 获取渲染锚点 |
size(): Vector2 client |
| 获取大小 |
tickSpaceGeometry(): Geometry client |
| 获取最后一次用于驱动Widget Tick的几何信息 |
transform(): Readonly<UITransform> client |
| 得到控件的大小和位置 |
visibility(): SlateVisibility client |
| 获取可见性 |
visible(): boolean client |
| 是否可见 |
zOrder(): number client |
| 获取zorder |
Methods
addKey(key: Keys): void client |
|---|
| 同一按键同时只能操控一个UI控件,最新绑定的UI控件会覆盖之前的绑定;脚本中添加的绑定无法覆盖编辑器按键绑定菜单中绑定相同按键的UI控件,但当两个UI控件分别通过代码和菜单绑定到同一按键时,使用代码绑定的优先级更高 |
getKeys(): Keys[] client |
| 获取当前UI控件绑定的所有键盘按键,包括编辑器按键绑定菜单和用代码绑定的按键 |
isPressed(): boolean client |
| 是否按下 |
removeKey(key: Keys): void client |
| 此操作只会解绑动态绑定的按键无法解除编辑器按键绑定菜单中绑定的按键 |
setButtonDisableByFile(absPath: string, bRefreshCache?: boolean): void client |
| 设置不可用图片 |
setButtonNormalByFile(absPath: string, bRefreshCache?: boolean): void client |
| 设置正常图片 |
setButtonPressedByFile(absPath: string, bRefreshCache?: boolean): void client |
| 设置按下图片 |
setDisableImageColorByHex(inHexString: string): void client |
| 设置不可用颜色指定Hex的颜色文本设定颜色 #05050505 |
setDisableImageColorDecimal(R: number, G: number, B: number, A: number): void client |
| 设置不可用颜色 |
setFontColorByHex(inHexString: string): void client |
| 设置字体颜色,指定Hex的颜色文本设定颜色 #05050505 |
setFontColorDecimal(R: number, G: number, B: number, A: number): void client |
| 设置字体颜色 |
setNormalImageColorByHex(inHexString: string): void client |
| 设置正常颜色指定Hex的颜色文本设定颜色 #05050505 |
setNormalImageColorDecimal(R: number, G: number, B: number, A: number): void client |
| 设置正常颜色 |
setPressedImageColorByHex(inHexString: string): void client |
| 设置按下颜色指定Hex的颜色文本设定颜色 #05050505 |
setPressedImageColorDecimal(R: number, G: number, B: number, A: number): void client |
| 设置按下颜色 |
newObject(parent?: Canvas, inName?: string): StaleButton client |
| 创建 StaleButton 控件 |
click
Methods
addChild(child: Widget): void client |
|---|
| 添加子节点 |
destroyObject(): void client |
| 立刻移除并销毁 不可以在使用 |
equal(that: Widget): boolean client |
| 判断是不是同一个对象 |
findChildByPath(inPath: string): Widget client |
| 通过相对路径查找节点 |
getChildAt(index: number): Widget client |
| 获取第几位子节点 |
getChildByName<T: extends Widget<T>>(name: string): T: extends Widget<T> client |
| 通过名字查找节点 |
getChildrenCount(): number client |
| 获取子节点数量 |
invalidateLayoutAndVolatility(): void client |
| 立刻触发重新渲染的和排布计算 |
removeAllChildren(): void client |
| 清除所有子节点,会销毁UI无法再使用 |
removeChild(child: Widget): void client |
| 移除节点,会销毁UI无法在使用 |
removeChildAt(index: number): void client |
| 移除第几个节点,会销毁UI无法再使用 |
removeObject(): void client |
| 立刻移除并添加到根节点 可以再使用 |
Accessors
clickMethod
• | ||
|---|---|---|
设置点击模式 Parameters
点击模式选择 |
contentColor
• | • | ||||
|---|---|---|---|---|---|
设置字体内容颜色 Returns
| 设置字体内容颜色 Parameters
|
disableImageColor
• | • | ||||
|---|---|---|---|---|---|
获取禁用图片颜色 Returns
| 设置禁用图片颜色 Parameters
|
disableImageDrawType
• | • | ||||
|---|---|---|---|---|---|
获取禁用图片绘制类型 Returns
| 设置禁用图片绘制类型 Parameters
|
disableImageGuid
• | • | ||||
|---|---|---|---|---|---|
获取禁用图片ID Returns
| 设置不可用图片ID Parameters
|
disableImageInfo
• | ||
|---|---|---|
获取按钮Disable图片的ImageInfo Returns
|
disableImageMargin
• | • | ||||
|---|---|---|---|---|---|
获取禁用图片边距 Returns
| 设置禁用图片边距 Parameters
|
disableImageSize
• | • | ||||
|---|---|---|---|---|---|
获取禁用图片大小 Returns
| 设置禁用图片大小 Parameters
|
focusable
• | • | ||||
|---|---|---|---|---|---|
获取是否获取输入焦点 Returns
| 设置是否获取输入焦点 Parameters
|
fontColor
• | • | ||||
|---|---|---|---|---|---|
获取字体颜色 Returns
| 设置字体颜色 Parameters
|
fontLetterSpace
• | • | ||||
|---|---|---|---|---|---|
获取字体间距 Returns
| 设置字体间距 Parameters
|
fontSize
• | • | ||||
|---|---|---|---|---|---|
获取字体大小 Returns
| 设置字体大小 Parameters
|
glyph
• | • | ||||
|---|---|---|---|---|---|
获取字体字形 Returns
| 设置字体字形 Parameters
|
normalImageColor
• | • | ||||
|---|---|---|---|---|---|
获取普通图片颜色 Returns
| 设置普通图片颜色 Parameters
|
normalImageDrawType
• | • | ||||
|---|---|---|---|---|---|
获取普通图片绘制类型 Returns
| 设置普通图片绘制类型 Parameters
|
normalImageGuid
• | • | ||||
|---|---|---|---|---|---|
获取普通图片ID Returns
| 设置正常图片ID Parameters
|
normalImageInfo
• | ||
|---|---|---|
获取按钮normal图片的ImageInfo Returns
|
normalImageMargin
• | • | ||||
|---|---|---|---|---|---|
获取普通图片边距 Returns
| 设置普通图片边距 Parameters
|
normalImageSize
• | • | ||||
|---|---|---|---|---|---|
获取图片大小 Returns
| 设置图片大小 Parameters
|
onClicked
• | ||
|---|---|---|
点击事件 Returns
|
onHovered
• | ||
|---|---|---|
悬浮事件 Returns
|
onPressed
• | ||
|---|---|---|
按下事件 Returns
|
onReleased
• | ||
|---|---|---|
释放事件 Returns
|
onUnhovered
• | ||
|---|---|---|
未悬浮事件 Returns
|
outlineColor
• | • | ||||
|---|---|---|---|---|---|
获取字体描边颜色 Returns
| 设置字体描边颜色 Parameters
|
outlineSize
• | • | ||||
|---|---|---|---|---|---|
获取字体描边宽度 Returns
| 设置字体描边宽度 Parameters
|
pressMethod
• | ||
|---|---|---|
设置按压模式 Parameters
|
pressedImagColor
• | • | ||||
|---|---|---|---|---|---|
获取按压图片颜色 Returns
| 设置按压图片颜色 Parameters
|
pressedImageDrawType
• | • | ||||
|---|---|---|---|---|---|
获取按压图片绘制类型 Returns
| 设置按压图片绘制类型 Parameters
|
pressedImageGuid
• | • | ||||
|---|---|---|---|---|---|
获取按下图片ID Returns
| 设置按下图片ID Parameters
|
pressedImageInfo
• | ||
|---|---|---|
获取按钮Pressed图片的ImageInfo Returns
|
pressedImageMargin
• | • | ||||
|---|---|---|---|---|---|
获取按压图片边距 Returns
| 设置按压图片边距 Parameters
|
pressedImageSize
• | • | ||||
|---|---|---|---|---|---|
获取按压图片大小 Returns
| 设置按压图片大小 Parameters
|
shadowColor
• | • | ||||
|---|---|---|---|---|---|
获取字体阴影颜色 Returns
| 设置字体阴影颜色 Parameters
|
shadowOffset
• | • | ||||
|---|---|---|---|---|---|
获取字体阴影偏移 Returns
| 设置字体阴影偏移 Parameters
|
strikethroughEnable
• | • | ||||
|---|---|---|---|---|---|
获取是否开启字体删除线 Returns
| 设置是否开启字体删除线 Parameters
|
text
• | • | ||||
|---|---|---|---|---|---|
获取按钮文字 Returns
| 设置按钮文字 Parameters
新文本 |
textAlign
• | • | ||||
|---|---|---|---|---|---|
获取字体对齐方式 Returns
| 设置字体对齐方式 Parameters
|
textVerticalAlign
• | • | ||||
|---|---|---|---|---|---|
获取字体垂直对齐方式 Returns
| 设置字体垂直对齐方式 Parameters
|
touchMethod
• | ||
|---|---|---|
设置触摸模式 Parameters
|
transitionEnable
• | • | ||||
|---|---|---|---|---|---|
获取按钮是否启用过度模式,按下是否有效果 Returns
| 是否套用不同的按下方案 Parameters
|
underlineEnable
• | • | ||||
|---|---|---|---|---|---|
返回是否开启字体下划线 Returns
| 设置是否开启字体下划线 Parameters
|
Methods
addKey
• addKey(key): void client
同一按键同时只能操控一个UI控件,最新绑定的UI控件会覆盖之前的绑定;脚本中添加的绑定无法覆盖编辑器按键绑定菜单中绑定相同按键的UI控件,但当两个UI控件分别通过代码和菜单绑定到同一按键时,使用代码绑定的优先级更高
Parameters
key Keys | 按键 |
|---|
getKeys
• getKeys(): Keys[] client
获取当前UI控件绑定的所有键盘按键,包括编辑器按键绑定菜单和用代码绑定的按键
Returns
Keys[] | 返回当前控件绑定的按键,可能为空 |
|---|
isPressed
• isPressed(): boolean client
是否按下
Returns
boolean | 返回按钮是否按下 |
|---|
removeKey
• removeKey(key): void client
此操作只会解绑动态绑定的按键无法解除编辑器按键绑定菜单中绑定的按键
Parameters
key Keys | 按键 |
|---|
setButtonDisableByFile
• setButtonDisableByFile(absPath, bRefreshCache?): void client
设置不可用图片
Parameters
absPath string | 图片文件路径 range: 路径长度 |
|---|---|
bRefreshCache? boolean | 默认为 true 将重新创建并刷新缓存,为 false 则使用缓存 default: true |
Precautions
建议设置 bRefreshCache = false 以提升性能
setButtonNormalByFile
• setButtonNormalByFile(absPath, bRefreshCache?): void client
设置正常图片
Parameters
absPath string | 图片文件路径 range: 路径长度 |
|---|---|
bRefreshCache? boolean | 为 true 则重新创建并刷新缓存,为 false 则使用缓存。 default: true |
Precautions
建议设置 bRefreshCache = false 以提升性能
setButtonPressedByFile
• setButtonPressedByFile(absPath, bRefreshCache?): void client
设置按下图片
Parameters
absPath string | 图片文件路径 range: 路径长度 |
|---|---|
bRefreshCache? boolean | 默认为 true 将重新创建并刷新缓存,为 false 则使用缓存 default: true |
Precautions
建议设置 bRefreshCache = false 以提升性能
setDisableImageColorByHex
• setDisableImageColorByHex(inHexString): void client
设置不可用颜色指定Hex的颜色文本设定颜色 #05050505
Parameters
inHexString string | 颜色字符串 range: 符合 Hex 特点的字符串类型 |
|---|
setDisableImageColorDecimal
• setDisableImageColorDecimal(R, G, B, A): void client
设置不可用颜色
Parameters
R number | 颜色 R 值。 range:[0, 255] type: 整数 |
|---|---|
G number | 颜色 G 值。 range:[0, 255] type: 整数 |
B number | 颜色 B 值。 range:[0, 255] type: 整数 |
A number | 颜色 透明度。 range:[0, 255] type: 整数 |
setFontColorByHex
• setFontColorByHex(inHexString): void client
设置字体颜色,指定Hex的颜色文本设定颜色 #05050505
Parameters
inHexString string | Hex颜色字符串 range: 符合 Hex 特点的字符串类型 |
|---|
setFontColorDecimal
• setFontColorDecimal(R, G, B, A): void client
设置字体颜色
Parameters
R number | 字体 R 值。 range:[0, 255] type: 整数 |
|---|---|
G number | 字体 G 值。 range:[0, 255] type: 整数 |
B number | 字体 B 值。 range:[0, 255] type: 整数 |
A number | 字体 透明度。 range:[0, 255] type: 整数 |
setNormalImageColorByHex
• setNormalImageColorByHex(inHexString): void client
设置正常颜色指定Hex的颜色文本设定颜色 #05050505
Parameters
inHexString string | 颜色字符串 range: 符合 Hex 特点的字符串类型 |
|---|
setNormalImageColorDecimal
• setNormalImageColorDecimal(R, G, B, A): void client
设置正常颜色
Parameters
R number | 颜色 R 值。 range:[0, 255] type: 整数 |
|---|---|
G number | 颜色 G 值。 range:[0, 255] type: 整数 |
B number | 颜色 B 值。 range:[0, 255] type: 整数 |
A number | 颜色 透明度。 range:[0, 255] type: 整数 |
setPressedImageColorByHex
• setPressedImageColorByHex(inHexString): void client
设置按下颜色指定Hex的颜色文本设定颜色 #05050505
Parameters
inHexString string | 颜色字符串 range: 符合 Hex 特点的字符串类型 |
|---|
setPressedImageColorDecimal
• setPressedImageColorDecimal(R, G, B, A): void client
设置按下颜色
Parameters
R number | 颜色 R 值。 range:[0, 255] type: 整数 |
|---|---|
G number | 颜色 G 值。 range:[0, 255] type: 整数 |
B number | 颜色 B 值。 range:[0, 255] type: 整数 |
A number | 颜色 透明度。 range:[0, 255] type: 整数 |
newObject
• Static newObject(parent?, inName?): StaleButton client
创建 StaleButton 控件
Parameters
parent? Canvas | 创建控件的父级 Canvas 对象 default:null |
|---|---|
inName? string | 创建控件的名称 default:null range:设置合理的名称即可 |
Returns
StaleButton | 返回创建的对象 |
|---|
当 parent 和 inName 与已有的对象相同时,旧的对象会被销毁