一个 ImageLabel 渲染一个长方形,像 Frame 一样,带有图像素材。图像的显示可以通过 ImageColor3 和 ImageTransparency 属性进行操纵。要仅显示图像并隐藏长方形,将 GuiObject.BackgroundTransparency 设置为 1。
地砖图像可以通过设置 ScaleType 为 Enum.ScaleType.Tile 来创建,然后将 TileSize 调整为渲染地砖的大小。
通过设置 ScaleType 为 Enum.ScaleType.Slice 来创建 9 片图像,然后将 SliceCenter 设置为 9 片图像的中心区域。
Sprite 页面可以通过使用 ImageRectOffset 和 ImageRectSize 来实现。将多个图像包装到一个中并使用此属性可以使您的体验图像资产加载速度更快,尤其是如果您使用了许多小图标在您的用户界面上。
概要
属性
用户界面元素显示的图像内容。读写到 ImageContent 。
决定渲染图像将如何被着色。
用户界面元素显示的图像内容。支持资产 URI和EditableImage。
要显示的图像子区的像素偏移。
确定要显示的图像子区域的像素大小。
决定渲染图像的透明度。
指示图像是否已从 Roblox 完全加载。
选择标签的图像重新样本模式。
决定图像在源图像与显示尺寸不同的 UI 元素中显示时会缩放的方式。
设置 9 切片图像的切割边界。
将 9 片边按指定比率缩放。
设置 ImageLabel 的瓷砖尺寸。
决定这个 UI 元素是否沉没输入。
确定 GuiObject 的起始点,相对于其绝对尺寸。
决定是否基于子内容进行缩放。
决定 GuiObject 背景颜色。
决定 GuiObject 背景和边界的透明度。
决定 GuiObject 边框的颜色。
决定边界 GuiObject 是如何相对于其尺寸布置。
决定 GuiObject 边框的像素宽度。
决定是否描渲染父级 GUI 元素边界外的子元素 GuiObjects。
决定玩家的鼠标是否在 GuiObject 上被主动按下。
控制使用 GuiObject 与 UIGridStyleLayout 时的排序顺序。
设置当游戏手柄选择器向下移动时将选择的 GuiObject 。
设置当游戏手柄选择器移至左侧时将选择的 GuiObject 。
设置当游戏手柄选择器移至右侧时将选择的 GuiObject 。
设置当游戏手柄选择器向上移动时将选择的 GuiObject 。
确定 GuiObject 的像素和坐标位置。
决定旋转 GuiObject 的角度数。
确定是否可以由游戏手柄选择 GuiObject 。
覆盖用于游戏手柄的默认选择装饰。
游戏手柄 UI 选择选择的 GuiObjects 顺序。
决定 GuiObject 的像素和积分尺寸。
混合属性 BackgroundTransparency 和 TextTransparency 。
决定是否渲染 GuiObject 和其子孙。
决定 GuiObject 对其他人的相对渲染顺序。
方法
继承自GuiObject的方法- TweenPosition(endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
平滑地将图形用户界面移至新的 UDim2 。
- TweenSize(endSize : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
- TweenSizeAndPosition(endSize : UDim2,endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
平滑地将图形用户界面移至新的尺寸和位置。
活动
继承自GuiObject的活动当用户开始通过人机界面设备(鼠标按钮向下、触摸开始、键盘按钮向下等)进行交互时,发射。
当用户通过人机界面设备(鼠标按钮向下、触摸开始、键盘按钮向下等)更改他们的互动方式时,发射。
当用户停止通过人机界面设备(鼠标按钮向下、触摸开始、键盘按钮向下等)进行交互时,发射。
当用户将鼠标移至图形用户界面元素时发生火焰。
当用户将鼠标移出 GUI 元素时发生火焰。
在用户移动鼠标时,无论它在哪个 GUI 元素内,都会发生火焰。
当用户滚动鼠标轮返回时,火焰当鼠标悬停在图形用户界面元素上。
当用户滚动鼠标轮时向前移动时,触发当鼠标悬停在图形用户界面元素上时。
在使用游戏手柄选择器时将 GuiObject 聚焦时发射。
当游戏手柄选择器停止关注 GuiObject 时发射。
当玩家开始、继续和停止长按 UI 元素时,发生火焰。
- TouchPan(touchPositions : Array,totalTranslation : Vector2,velocity : Vector2,state : Enum.UserInputState):RBXScriptSignal
当玩家在 UI 元素上移动手指时发生火焰。
- TouchPinch(touchPositions : Array,scale : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
当玩家使用界面元素上的两个手指执行捏或拉动动作时,发生火焰。
- TouchRotate(touchPositions : Array,rotation : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
当玩家使用界面元素上的两个手指执行旋转动作时,发生火焰。
当玩家在 UI 元素上执行滑动动作时发生火焰。
当玩家在 UI 元素上执行了点击动作时发生火焰。
- SelectionChanged(amISelected : boolean,previousSelection : GuiObject,newSelection : GuiObject):RBXScriptSignal
当游戏手柄选择移动到、离开或在连接的 或任何子手柄中更改时,发生火焰。
属性
Image
该属性是一种内容类型属性,应该保存 Roblox 上上传的贴花或图像的资产 ID。它与 Roblox 中加载图像相关的功能与 Decal.Texture 相同。渲染的图像可以使用 ImageColor3 和 ImageTransparency 进行修改。
ImageColor3
该属性决定图像是如何被着色的。当设置为白色时,不会发生颜色化。该属性对于重复使用图像资产非常有用;如果源图像完全透明且完全白色,您可以一次设置图像的整个颜色与此属性。
ImageContent
该属性应持有 资产 URI 或对 EditableImage 对象的引用。
资产 URI 可以引用到 Roblox 上上传的图标或图像。它在加载图像方面与 Decal.Texture 相同。
渲染的图像将使用 ImageButton.ImageColor3 进行颜色化。通过调整 ImageButton.ScaleType 属性,可以使图像渲染为瓷砖、适应缩放或 9 切片来显示,从而实现图像叠加、缩放或切割。
ImageTransparency
该属性决定了 UI 元素渲染图像的阿尔法。一个值 0 是完全不透明的,而另一个值 1 是完全透明的(隐形)。
代码示例
This code sample oscillates the ImageTransparency of an ImageLabel/ImageButton from 0 to 1 using a sine wave.
local RunService = game:GetService("RunService")
local imageLabel = script.Parent
local function onRenderStep()
-- Oscillate ImageTransparency from 0 to 1 using a sine wave
imageLabel.ImageTransparency = math.sin(workspace.DistributedGameTime * math.pi) * 0.5 + 0.5
end
RunService.RenderStepped:Connect(onRenderStep)
IsLoaded
此属性表示 ImageLabel.Image 属性是否已从 Roblox 完全加载。被审核人拒绝的图像永远不会加载。
代码示例
This code sample measures how long an ImageLabel or ImageButton takes to load an image. If the image was already loaded, this will be 0.
local imageLabel = script.Parent
local startTime = workspace.DistributedGameTime
-- Wait for the image to load
while not imageLabel.IsLoaded do
task.wait()
end
-- Measure and display how long it took to load
local deltaTime = workspace.DistributedGameTime - startTime
print(("Image loaded in %.3f seconds"):format(deltaTime))
ResampleMode
决定图像在缩放时的外观。默认情况下,图像在显示在屏幕上时,会将纹理细节修平,使其与纹理记忆中的尺寸相似或更小。当设置为 Enum.ResamplerMode.Pixelated 时,图像保留像素的锋利边缘。
ScaleType
该属性决定在 UI 元素的绝对尺寸与源图像的尺寸不同时,ImageLabel.Image 是如何渲染的。
默认情况下,这个属性是 Enum.ScaleType.Stretch ,这将简单地伸展/压缩图像尺寸,使其完全适合 UI 元素的空间。因为透明像素在上传到 Roblox 时设置为黑色,透明图像应该应用阿尔法混合以避免缩放图像周围的黑色轮廓。
对于 Enum.ScaleType.Slice , SliceCenter 属性将在 属性窗口 中显示。这是为了九层分割用户界面:当缩放时,角仍然是源图像尺寸。图像的边缘将延伸到图像的宽度/高度。最后,图像中心将伸展以填充图像的中心区域。
最后,对于 Enum.ScaleType.Tile , TileSize 属性将在 属性窗口 中显示。这是用于地砖图像,其每个图像瓷砖的大小由 TileSize 属性决定。
SliceCenter
该属性设置 9 切割图像的边界时 ScaleType 设置为 Enum.ScaleType.Slice 。请注意,此属性只在此条件下才能在 属性 窗口中显示。
了解有关9片图像的更多信息,请参阅UI 9片设计。
SliceScale
将 9 片边按指定比率缩放。这意味着 9 片边缘会像你上传了新版本的纹理扩展一样增长。默认为 1.0 .
还见 ScaleType , SliceCenter , 以及 SliceScale 。
TileSize
此属性设置了 ImageLabel 的瓷砖尺寸默认为
代码示例
This code sample demonstrates the different ScaleType options - Stretch, Tile and Slice. It does this by resizing an ImageLabel/ImageButton in a circle.
local imageLabel = script.Parent
-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black
local function resizeInACircle()
for theta = 0, 2, 0.02 do
imageLabel.Size =
UDim2.new(0, 100 + math.cos(theta * 2 * math.pi) * 50, 0, 100 + math.sin(theta * 2 * math.pi) * 50)
task.wait()
end
end
while true do
-- Stretch simply stretches the source image to fit
-- the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Stretch
resizeInACircle()
-- Tile will render the source image multiple times
-- enough to fill the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Tile
imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
resizeInACircle()
-- Slice will turn the image into a nine-slice UI.
imageLabel.ScaleType = Enum.ScaleType.Slice
imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
resizeInACircle()
end