一个图像按钮与一个 ImageLabel 在渲染时使用额外的行为相同。它定义了与 GuiButton 的渲染相同的图像渲染属性。
您可以通过将 ImageButton.ImageTransparency 设置为 1 来禁用图像渲染。这将使您留下一个可以用作按钮的平方。 但是，您可以使用一个空白 TextButton 为此。
代码示例
This code sample gives custom colors to an ImageButton of a backpack while it is hovered and pressed.
-- Place this code in a LocalScript in an ImageButton
local imageButton = script.Parent
local colorNormal = Color3.new(1, 1, 1) -- white
local colorHover = Color3.new(0, 1, 0) -- green
local colorPress = Color3.new(1, 0, 0) -- red
-- This is a 32x32 image of a backpack
imageButton.Image = "rbxassetid://787458668"
imageButton.BackgroundTransparency = 1
local function onActivated()
print("open the inventory")
end
local function onPressed()
imageButton.ImageColor3 = colorPress
end
local function onReleased()
imageButton.ImageColor3 = colorHover
end
local function onEntered()
imageButton.ImageColor3 = colorHover
end
local function onLeft()
imageButton.ImageColor3 = colorNormal
end
imageButton.MouseEnter:Connect(onEntered)
imageButton.MouseLeave:Connect(onLeft)
imageButton.MouseButton1Down:Connect(onPressed)
imageButton.MouseButton1Up:Connect(onReleased)
imageButton.Activated:Connect(onActivated)
-- Start with the default, non-hovered state
onLeft()概要
属性
用于当 ImageButton 被悬停时使用的材质 ID。
显示 UI 元素的图像内容。
确定图像的颜色化方式。
显示子区域的像素 Offset。
确定显示子区域的图像的像素大小。
确定渲染图像的透明度。
指示图像从 Roblox 网站已加载完毕。
一个用于 ImageButton 按钮被按时使用的 textureId。
选择按钮的图像重置模式。
决定图像在源图像和用户界面元素中显示时的尺寸。
设置 9 个切割的图像的边界。
按指定比例缩放 9 个边。
设置图像按钮的地砖大小。
确定是否在鼠标悬停或单击时自动更改按钮的颜色。
如果 GUI 元素可见，鼠标不会锁定，除非右键点按。
一个Boolean属性，表示对象是否已选择。
根据预定义风格列设置图形按钮的风格。
确定是否同时输入。
对 GuiObject 的起始位置，相对于其绝对大小。
决定是否按照子内容进行调整。
确定 GuiObject 背景颜色。
确定 GuiObject 背景和边框的透明度。
确定 GuiObject 边框的颜色。
确定GuiObject边界的方式是与其尺寸相对于其他方式。
确定 GuiObject 边框的像素宽度。
决定是否在父 GUI 元素外的子元素 GuiObjects 会渲染。
确定玩家是否在 GuiObject 上主动按着。
确定 GuiButton 是否可以与或不可以与之交互，或 GuiState 的 GuiObject 是否正在变更或不变更。
控制使用 GuiObject 与 UIGridStyleLayout 时的排序顺序。
设置 GuiObject 将在游戏手柄选择器向下移动时选择。
设置 GuiObject 将在游戏手柄选择器移动到左侧时选择。
设置 GuiObject ，该选项卡将在游戏手柄选择器移动到右侧时被选中。
设置 GuiObject ，该选项卡将在游戏手柄选择器上移动时选择。
确定 GuiObject 的像素和向量位置。
确定GuiObject的旋转角度。
确定游戏手柄是否可以选择GUI。
覆盖游戏手柄的默认装饰。
游戏手柄选择 GuiObjects 的顺序。
确定 GuiObject 的像素和浮点大小。
设置 Size 轴，其父元素对象的大小将对应于其大小。
Class.GuiObject.BackgroundTransparency|BackgroundTransparency 和 TextTransparency 的混合属性。
确定 GuiObject 和它的子代是否会被渲染。
确定GuiObject 在其他人的相对位置上渲染的顺序。
描述 UI 元素的实际屏幕位置，以像素计。
描述 UI 元素的实际屏幕旋转度。
描述 UI 元素的实际屏幕大小，以像素计。
设置为“真”时，本地化将被应用到此 GuiBase2d 和它的子代。
一个引用 LocalizationTable 用于应用自动本地化到此 GuiBase2d 和它的子代。
在下向方向中自定义游戏手柄选择行为。
在左向向选择游戏手柄的行为进行自定义。
自定义游戏手柄选择行为在正确的方向。
在上向方向中自定义游戏手柄选择行为。
允许自定义游戏手柄选择移动。
方法
继承自GuiObject的方法- TweenPosition(endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
顺滑地将一个 GUI 移到一个新的 UDim2 。
- TweenSize(endSize : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
无缝地将 GUI 重新 UDim2 。
- TweenSizeAndPosition(endSize : UDim2,endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
无缝地将 GUI 移到新的大小和位置。
活动
继承自GuiButton的活动按钮激活时发射。
当鼠标完全离开时，发射 GUI 按钮。
发生在 GUI 对象上的鼠标左键下状态时。
发生在左键点按释放 GUI 对象时。
当鼠标完全点击 GUI 按钮时，发射。
当鼠标处于 GUI 对象上的右键下状态时，发射。
发生在 GUI 对象上释放右键时。
发生在用户开始通过人类-计算机界面设备（鼠标按钮，触摸开始，键盘按钮，等等）进行交互时。
发生在用户改变通过人类-计算机界面设备（鼠标按钮向下，触摸开始，键盘按钮向下等）的交互方式时。
发生在用户停止通过人类-计算机界面设备（鼠标按钮向下，触摸开始，键盘按钮向下等）的交互。
当用户将鼠标移动到 GUI 元素时，它会发生。
当用户移动鼠标时，发生。
在用户移动鼠标时，每当它在 GUI 元素内时，它就会发生。
当用户回到鼠标轮时，火焰会在鼠标上方的 GUI 元素上燃烧。
当鼠标位于 GUI 元素上时，用户会滚动鼠标轮。
当 Gamepad 选择器对 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
在玩家使用两个手指在 UI 元素上执行叠捏或拉动动作时触发。
- TouchRotate(touchPositions : Array,rotation : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
在玩家使用两个手指在 UI 元素上执行旋转动作时触发。
在玩家在 UI 元素上执行滑动手势时触发。
当玩家在 UI 元素上执行点击手势时触发。
- SelectionChanged(amISelected : bool,previousSelection : GuiObject,newSelection : GuiObject):RBXScriptSignal
在游戏手柄选择移动到，离开或更改连接的 GuiBase2d 或任何子对象。
属性
Image
图像属性是一个内容类型属性，该装饰或图像的资产 ID 在 Roblox 网站上装载。它与 Decal.Texture 有关于从 Roblox 网站上加载图像的方式。图像会使用 ImageButton.ImageColor3 来着色
代码示例
This code sample causes an ImageLabel/ImageButton to display a red padlock. When the mouse is hovered, it changes to a green unlocked padlock.
local imageLabel = script.Parent
-- The images in this example are 64x64
imageLabel.Size = UDim2.new(0, 64, 0, 64)
local function unlock()
imageLabel.Image = "rbxassetid://284402785" -- Unlocked padlock (64x64)
imageLabel.ImageColor3 = Color3.new(0, 0.5, 0) -- Dark green
end
local function lock()
imageLabel.Image = "rbxassetid://284402752" -- Locked padlock (64x64)
imageLabel.ImageColor3 = Color3.new(0.5, 0, 0) -- Dark red
end
-- Connect events; our default state is locked
imageLabel.MouseEnter:Connect(unlock)
imageLabel.MouseLeave:Connect(lock)
lock()ImageColor3
颜色颜色3 属性确定图像的颜色化方式。设置为白色，无需颜色化。 此属性对于重用图像资产非常有用：如果源图像完全为白色透明，您可以使用此属性设置整个图像的颜色。
代码示例
This code sample causes an ImageLabel/ImageButton to display a red padlock. When the mouse is hovered, it changes to a green unlocked padlock.
local imageLabel = script.Parent
-- The images in this example are 64x64
imageLabel.Size = UDim2.new(0, 64, 0, 64)
local function unlock()
imageLabel.Image = "rbxassetid://284402785" -- Unlocked padlock (64x64)
imageLabel.ImageColor3 = Color3.new(0, 0.5, 0) -- Dark green
end
local function lock()
imageLabel.Image = "rbxassetid://284402752" -- Locked padlock (64x64)
imageLabel.ImageColor3 = Color3.new(0.5, 0, 0) -- Dark red
end
-- Connect events; our default state is locked
imageLabel.MouseEnter:Connect(unlock)
imageLabel.MouseLeave:Connect(lock)
lock()This code sample loops an ImageLabel or ImageButton's ImageColor3 through the entire rainbow using RunService's RenderStepped.
local RunService = game:GetService("RunService")
local imageLabel = script.Parent
local function onRenderStep()
imageLabel.ImageColor3 = Color3.fromHSV(workspace.DistributedGameTime / 8 % 1, 1, 1)
end
RunService.RenderStepped:Connect(onRenderStep)ImageContent
ImageRectOffset
允许与 ImageButton.ImageRectSize 一起显示图像的部分显示。 此属性确定显示区域的像素 Offset (从左上角) 。
这个属性与 ImageLabel.ImageRectSize 相同。
代码示例
This code sample uses ImageRectOffset/ImageRectSize in order to play an animation of a man throwing a punch
-- Place this in an ImageLabel/ImageButton with size 256x256
local imageLabel = script.Parent
-- The following image is 1024x1024 with 12 frames (256x256)
-- The frames play an animation of a man throwing a punch
imageLabel.Image = "rbxassetid://848623155"
imageLabel.ImageRectSize = Vector2.new(256, 256)
-- The order of the frames to be displayed (left-to-right, then top-to-bottom)
local frames = {
Vector2.new(0, 0),
Vector2.new(1, 0),
Vector2.new(2, 0),
Vector2.new(3, 0),
Vector2.new(0, 1),
Vector2.new(1, 1),
Vector2.new(2, 1),
Vector2.new(3, 1),
Vector2.new(0, 2),
Vector2.new(1, 2),
Vector2.new(2, 2),
Vector2.new(3, 2),
}
-- Animate the frames one at a time in a loop
while true do
for _, frame in ipairs(frames) do
imageLabel.ImageRectOffset = frame * imageLabel.ImageRectSize
task.wait(0.1)
end
endThis 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()
endImageRectSize
允许在 ImageButton.ImageRectOffset 与图像的部分显示。 此属性确定显示的图像区域的像素大小。如果两个尺寸都设置为 0，整个图像将在显示。
这个属性与 ImageLabel.ImageRectOffset 相同。
代码示例
This code sample uses ImageRectOffset/ImageRectSize in order to play an animation of a man throwing a punch
-- Place this in an ImageLabel/ImageButton with size 256x256
local imageLabel = script.Parent
-- The following image is 1024x1024 with 12 frames (256x256)
-- The frames play an animation of a man throwing a punch
imageLabel.Image = "rbxassetid://848623155"
imageLabel.ImageRectSize = Vector2.new(256, 256)
-- The order of the frames to be displayed (left-to-right, then top-to-bottom)
local frames = {
Vector2.new(0, 0),
Vector2.new(1, 0),
Vector2.new(2, 0),
Vector2.new(3, 0),
Vector2.new(0, 1),
Vector2.new(1, 1),
Vector2.new(2, 1),
Vector2.new(3, 1),
Vector2.new(0, 2),
Vector2.new(1, 2),
Vector2.new(2, 2),
Vector2.new(3, 2),
}
-- Animate the frames one at a time in a loop
while true do
for _, frame in ipairs(frames) do
imageLabel.ImageRectOffset = frame * imageLabel.ImageRectSize
task.wait(0.1)
end
endThis 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()
endImageTransparency
图像透明度决定 UI 元素的渲染图像的 alpha 。 一个值为 0 是完全不透明的，而一个值为 1 是完全透明的（隐形）。 此属性与 GuiObject.BackgroundTransparency 或 BasePart.Transparency 相同。
代码示例
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
Class.ImageButton.Image 属性表示 是否从 Roblox 网站加载完成。 图像由 moderation 拒绝的话，就永远不会加载。
代码示例
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
Class.ImageButton.Image 的尺寸类型决定在 UI 元素的相对大小与源图像的大小之间的显示方式。
默认情况下，此属性是 Enum.ScaleType.Stretch ，它将简单地伸展/压缩图像尺寸以确保它正确地包含UI元素的空间。随着透明像素在上传到 Roblox 网站时设置为黑色，因此透明图像应该使用 alpha 渐变来避免在缩放图像周围形成黑色边缘。
对于 Enum.ScaleType.Slice， ImageButton.SliceCenter 属性将在属性窗口中显示。 这是为 9 枚图形界面： 缩放时，角落将保持源图像大小。 图像边缘将渐变为图像的宽度/高度。 最后，中心图形将渐变为填充图形区域
最后，对于 Enum.ScaleType.Tile， ImageButton.TileSize 属性将在 属性窗口中显示。 这是对于地砖图像，其每个图像块的大小由 1> Class.ImageButton.TileSize1> 属性决定。
代码示例
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()
endSliceCenter
SliceCenter 属性将 9 个切割的图像的边界设置为 ImageButton.ScaleType 设置为 Enum.ScaleType.Slice 时。 请注意，此属性仅在 Studio 属性窗口
要了解更多关于 9 个切割图像的信息，请查看此教程：UI 9 Slice Design。
代码示例
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()
endSliceScale
按照指定比例缩放 9 个边。这意味着边缘在 9 个边上长大，就像你上传了一个新版本的材质一样。默认为 1.0。
作为 9 个片的边的倍增器，它对于在多个 ради度上重用一个回合角图像有用
还请参阅：
- ImageButton.ScaleType ，决定显示在源图像和用户界面元素之间的大小差异的图像的尺寸
- ImageLabel.ScaleCenter，确定 9 个片子图像的中心
- ImageButton.SliceScale，同样的功能性属性，但为ImageButtons
TileSize
TileSize 设置图像按钮的地砖大小。默认值 UDim2 为 1,0,1,0。 纹理 UDim2 的缩放部件将根据图像按钮的大小缩放地砖。 零点是在原始像素上。 拐角是在原始像素上。 例如， 0.5 的缩放将意味着地�
这个属性只有在将 ScaleType 设置为 Tile 而不是 Slice 或 Stretch 时才会生效。
代码示例
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