Skip to content

UIComponent

继承自:

描述

UI约束和布局类别的基类。提供UI组件的基础功能,包括位置、大小、旋转、布局关系等核心属性。UI的屏幕坐标系最小尺寸为1280x720,实际坐标系大小=(max(设备分辨率宽度,1280),max(设备分辨率高度,720)),坐标原点(0,0)位于屏幕左上角,X轴向右为正,Y轴向下为正

属性

Vector2Size
UI节点尺寸大小。控制UI组件的宽度和高度
Vector2Scale
UI节点缩放比例。控制UI组件在X轴和Y轴上的缩放倍数,默认值为(1,1)
floatRotation
UI节点旋转角度。控制UI组件绕Z轴旋转的角度,单位为度(°)
Vector2Position
UI节点位置。控制UI组件相对于父节点的位置坐标
Vector2Pivot
UI节点轴点。控制UI组件变换(旋转、缩放、位置)的基准点,取值范围为(0,0)到(1,1),其中(0,0)表示左上角,(0.5,0.5)表示中心,(1,1)表示右下角。默认值为(0.5,0.5)表示中心点
boolIsKeepPosWhenPivotChange
改变轴点时是否保持UI组件的位置属性变化。默认值为false,改变轴点后UI组件的位置属性保持不变
ColorQuadLineColor
UI节点边框颜色。RGBA格式,控制UI组件边框的颜色和透明度
ColorQuadFillColor
UI节点填充颜色。RGBA格式,控制UI组件背景的填充颜色和透明度
intLineSize
UI节点边框宽度。控制UI组件边框的粗细,单位为屏幕坐标,默认值为0
boolClickPass
是否将点击事件穿透给场景。默认值为false,不将点击事件穿透给场景
EnumLayoutHRelationLayoutHRelation
水平布局关联方式。包括左关联、中线关联和右关联。设置后,当父节点(若父节点为UIRoot则为屏幕)变化时,UI与关联位置的相对距离将保持不变
EnumLayoutVRelationLayoutVRelation
垂直布局关联方式。包括上关联、中线关联和下关联。设置后,当父节点(若父节点为UIRoot则为屏幕)变化时,UI与关联位置的相对距离将保持不变
EnumLayoutSizeRelationLayoutSizeRelation
尺寸布局关联方式。包括宽度关联、高度关联和全尺寸关联。当父节点尺寸改变时,UI组件尺寸会相应变化
boolActive
是否激活UI组件响应触摸事件。默认值为true,UI组件会响应触摸事件
boolGrayed
是否灰化。当为true时,UI组件会显示为灰化状态,通常用于表示禁用状态
boolIsTouchEventBlocked
是否阻止触摸、点击事件向父节点传递。默认值为true,触摸、点击事件不会传递给父节点

成员函数

获取UI组件的屏幕坐标

事件

当鼠标进入UI组件范围时触发的事件
当鼠标离开UI组件范围时触发的事件
SBXSignalTouchBegin (SandboxNode node, int int, Vector2 vector2)
当开始触摸UI组件时触发的事件
SBXSignalTouchEnd (SandboxNode node, int int, Vector2 vector2)
当结束触摸UI组件时触发的事件
SBXSignalTouchMove (SandboxNode node, int int, Vector2 vector2)
当在UI组件上移动触摸时触发的事件
SBXSignalClick (SandboxNode node, int int, Vector2 vector2)
当点击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)