界面 / 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
Properties
click
Properties
onCustomPropertyChange: Readonly <MulticastDelegate <(path : string , value : unknown , oldValue : unknown ) => void >> client |
---|
监听自定义属性同步事件 |
Accessors
clickMethod(inClickMethod : ButtonClickMethod ): void client |
---|
设置点击模式 |
contentColor(): LinearColor client |
设置字体内容颜色 |
defaultFont(): string UIFontFamily 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 |
获取禁用图片大小 |
fallbackFont(): string UIFontFamily 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
alignPosition(): Readonly <Vector2 > client |
---|
获取控件的对齐位置,在对齐方式为靠右对齐、靠下对齐、中心对齐时,alignPosition的值与positon不同; |
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 |
获取名字 |
paintSpaceGeometry(): Geometry client |
获取最后一次用于渲染Widget的几何信息 |
parent(): Widget client |
获取父节点 |
pivot(): Vector2 client |
获取控件锚点位置,这个属性决定了控件图形与锚点的相对位置;(0,0)时,锚点位于控件左上角;(0.5,0.5)时,锚点位于控件正中心 |
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 |
---|
添加子节点 |
clone(position : Vector2 , Parent? : Widget ): Widget client |
克隆UI控件及其子节点到指定父控件位置(默认到其父节点) |
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 |
获取子节点数量 |
getCustomProperties(): string [] client |
获取所有自定义属性 |
getCustomProperty<T : extends CustomPropertyType >(propertyName : string ): T : extends CustomPropertyType client |
获取自定义属性 |
getCustomPropertyChangeDelegate(property ): Readonly <MulticastDelegate <(path : string , value : unknown , oldValue : unknown ) => void >> client |
给定对象属性修改时触发的事件代理 |
invalidateLayoutAndVolatility(): void client |
立刻触发重新渲染的和排布计算 |
removeAllChildren(): void client |
清除所有子节点,会销毁UI无法再使用 |
removeChild(child : Widget ): void client |
移除节点,会销毁UI无法在使用 |
removeChildAt(index : number ): void client |
移除第几个节点,会销毁UI无法再使用 |
removeObject(): void client |
立刻移除并添加到根节点 可以再使用 |
serialize(): string client |
序列化UI控件 |
setCustomProperty(propertyName : string , value : undefined CustomPropertyType ): void client |
设置自定义属性 |
deserialize(Data : string , Parent? : Widget ): Widget client |
反序列化UI |
Properties
Accessors
clickMethod
• | ||
---|---|---|
设置点击模式 Parameters
点击模式选择 |
contentColor
• | • | ||||
---|---|---|---|---|---|
设置字体内容颜色 Returns
| 设置字体内容颜色 Parameters
|
defaultFont
• | • | ||||
---|---|---|---|---|---|
获取默认字体 Returns
| 设置默认字体 Parameters
|
disableImageColor
• | • | ||||
---|---|---|---|---|---|
获取禁用图片颜色 Returns
| 设置禁用图片颜色 Parameters
|
disableImageDrawType
• | • | ||||
---|---|---|---|---|---|
获取禁用图片绘制类型 Returns
| 设置禁用图片绘制类型 Parameters
|
disableImageGuid
• | • | ||||
---|---|---|---|---|---|
获取禁用图片ID Returns
| 设置不可用图片ID Parameters
|
disableImageInfo
• | ||
---|---|---|
获取按钮Disable图片的ImageInfo Returns
|
disableImageMargin
• | • | ||||
---|---|---|---|---|---|
获取禁用图片边距 Returns
| 设置禁用图片边距 Parameters
|
disableImageSize
• | • | ||||
---|---|---|---|---|---|
获取禁用图片大小 Returns
| 设置禁用图片大小 Parameters
|
fallbackFont
• | • | ||||
---|---|---|---|---|---|
获取退却字体 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 与已有的对象相同时,旧的对象会被销毁