UIComponent
继承自:
描述
UI约束和布局类别的基类。提供UI组件的基础功能,包括位置、大小、旋转、布局关系等核心属性。UI的屏幕坐标系最小尺寸为1280x720,实际坐标系大小=(max(设备分辨率宽度,1280),max(设备分辨率高度,720)),坐标原点(0,0)位于屏幕左上角,X轴向右为正,Y轴向下为正
属性
Vector2 Size |
|---|
| UI节点尺寸大小。控制UI组件的宽度和高度 |
Vector2 Scale |
|---|
| UI节点缩放比例。控制UI组件在X轴和Y轴上的缩放倍数,默认值为(1,1) |
float Rotation |
|---|
| UI节点旋转角度。控制UI组件绕Z轴旋转的角度,单位为度(°) |
Vector2 Position |
|---|
| UI节点位置。控制UI组件相对于父节点的位置坐标 |
Vector2 Pivot |
|---|
| UI节点轴点。控制UI组件变换(旋转、缩放、位置)的基准点,取值范围为(0,0)到(1,1),其中(0,0)表示左上角,(0.5,0.5)表示中心,(1,1)表示右下角。默认值为(0.5,0.5)表示中心点 |
bool IsKeepPosWhenPivotChange |
|---|
| 改变轴点时是否保持UI组件的位置属性变化。默认值为false,改变轴点后UI组件的位置属性保持不变 |
ColorQuad LineColor |
|---|
| UI节点边框颜色。RGBA格式,控制UI组件边框的颜色和透明度 |
ColorQuad FillColor |
|---|
| UI节点填充颜色。RGBA格式,控制UI组件背景的填充颜色和透明度 |
int LineSize |
|---|
| UI节点边框宽度。控制UI组件边框的粗细,单位为屏幕坐标,默认值为0 |
bool ClickPass |
|---|
| 是否将点击事件穿透给场景。默认值为false,不将点击事件穿透给场景 |
EnumLayoutHRelation LayoutHRelation |
|---|
| 水平布局关联方式。包括左关联、中线关联和右关联。设置后,当父节点(若父节点为UIRoot则为屏幕)变化时,UI与关联位置的相对距离将保持不变 |
EnumLayoutVRelation LayoutVRelation |
|---|
| 垂直布局关联方式。包括上关联、中线关联和下关联。设置后,当父节点(若父节点为UIRoot则为屏幕)变化时,UI与关联位置的相对距离将保持不变 |
EnumLayoutSizeRelation LayoutSizeRelation |
|---|
| 尺寸布局关联方式。包括宽度关联、高度关联和全尺寸关联。当父节点尺寸改变时,UI组件尺寸会相应变化 |
bool Active |
|---|
| 是否激活UI组件响应触摸事件。默认值为true,UI组件会响应触摸事件 |
bool Grayed |
|---|
| 是否灰化。当为true时,UI组件会显示为灰化状态,通常用于表示禁用状态 |
bool IsTouchEventBlocked |
|---|
| 是否阻止触摸、点击事件向父节点传递。默认值为true,触摸、点击事件不会传递给父节点 |
成员函数
| 获取UI组件的屏幕坐标 |
事件
| 当鼠标进入UI组件范围时触发的事件 |
| 当鼠标离开UI组件范围时触发的事件 |
| 当开始触摸UI组件时触发的事件 |
| 当结束触摸UI组件时触发的事件 |
| 当在UI组件上移动触摸时触发的事件 |
| 当点击UI组件时触发的事件 |
代码示例
lua
--创建ui根节点
local root = SandboxNode.new("UIRoot", game.WorkSpace)
root.Name = "uiroot"
--创建图片
local image1 = SandboxNode.new("UIImage", root)
image1.Name = "image"
image1.Visible = true
image1.Size = Vector2.new(500, 200)
image1.Pivot= Vector2.new(0, 0)
image1.Icon = "sandboxSysId://ui/icon_default_image.png"
image1.LayoutHRelation = Enum.LayoutHRelation.Left
image1.LayoutVRelation= Enum.LayoutVRelation.Top
image1.LayoutSizeRelation= Enum.LayoutSizeRelation.Both
-- 绑定事件
image1.RollOver:connect(function(node,mousepos)
print("you RollOver me,RollOver pos:"..mousepos.x..' '..mousepos.y)
end)
image1.RollOut:connect(function(node,mousepos)
print("you RollOut me,RollOut pos:"..mousepos.x..' '..mousepos.y)
end)
image1.TouchBegin:connect(function(node,button,mousepos)
print("you TouchBegin me,TouchBegin pos:"..mousepos.x..' '..mousepos.y.." button:"..button)
end)
image1.TouchMove:connect(function(node,button,mousepos)
print("you TouchMove me,TouchMove pos:"..mousepos.x..' '..mousepos.y.." button:"..button)
end)
image1.TouchEnd:connect(function(node,button,mousepos)
print("you TouchEnd me,TouchEnd pos:"..mousepos.x..' '..mousepos.y.." button:"..button)
end)
image1.Click:connect(function(node,button,mousepos)
print("you Click me,Click pos:"..mousepos.x..' '..mousepos.y.." button:"..button)
end)