ImageButton

显示已弃用

*此内容使用人工智能（Beta）翻译，可能包含错误。若要查看英文页面，请点按 此处。

一个 ImageButton 与渲染相关的行为类似于一个 ImageLabel ，加上一个 GuiButton 的额外行为。

概要

属性

继承自GuiButton的属性继承自GuiObject的属性继承自GuiBase2d的属性
查看继承自 Instance 的全部
查看继承自 Object 的全部

方法

继承自GuiObject的方法
查看继承自 Instance 的全部
查看继承自 Object 的全部

活动

继承自GuiButton的活动继承自GuiObject的活动继承自GuiBase2d的活动
查看继承自 Instance 的全部
查看继承自 Object 的全部

属性

HoverImage

ContentId
读取并联

当 ImageButton 被悬停时使用的纹理ID。

HoverImageContent

Content
读取并联

Image

ContentId
读取并联

该属性是一种内容类型属性，应该保存 Roblox 上上传的贴花或图像的资产 ID。它与 Roblox 中加载图像相关的功能与 Decal.Texture 相同。渲染的图像将使用 ImageColor3 进行颜色化。

请注意，通过调整 ScaleType 属性可以使图像渲染为瓷砖、缩放适合或 9 切割来实现。

代码示例

This code sample causes an ImageLabel/ImageButton to display a red padlock. When the mouse is hovered, it changes to a green unlocked padlock.

Image Hover Lock
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

Color3
读取并联

该属性决定图像是如何被着色的。当设置为白色时，不会发生颜色化。该属性对于重复使用图像资产非常有用：如果源图像完全白色透明，您可以一次设置图像的整个颜色与此属性。

代码示例

This code sample causes an ImageLabel/ImageButton to display a red padlock. When the mouse is hovered, it changes to a green unlocked padlock.

Image Hover Lock
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()

ImageContent

Content
读取并联

该属性应持有 资产 URI 或对 EditableImage 对象的引用。资产 URI 可以引用到 Roblox 上传的图标或图像。它与加载图像相关的功能与 Decal.Texture 相同。

渲染的图像将使用 ImageColor3 进行颜色化。通过调整 ScaleType 属性，可以使图像渲染为瓷砖状、适应缩放或 9 切片来显示。

ImageRectOffset

Vector2
读取并联

该属性决定图像区域（从左上角）要显示的像素偏移量，可以与 ImageRectSize 一起显示图像的部分。

代码示例

This code sample uses ImageRectOffset/ImageRectSize in order to play an animation of a man throwing a punch

Image Animation using Spritesheet
-- 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

end

ImageRectSize

Vector2
读取并联

该属性决定要显示的图像区域的像素大小，可以与 ImageRectOffset 一起部分显示图像。如果任何维度设置为 0，整个图像将显示而不是设置为 。

代码示例

This code sample uses ImageRectOffset/ImageRectSize in order to play an animation of a man throwing a punch

Image Animation using Spritesheet
-- 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

end

ImageTransparency

number
读取并联

该属性决定元素渲染图像的阿尔法。一个值 0 是完全不透明的，而另一个值 1 是完全透明的（隐形）。该属性的行为类似于 GuiObject.BackgroundTransparency 或 BasePart.Transparency 。

如果您通过设置 ImageTransparency 为 1 来禁用图像渲染，将导致一个简单的长方形，可用作按钮。然而，使用空白 TextButton 可能会更好。

IsLoaded

boolean
只读
未复制
读取并联

此属性表示 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.

Image Load Time
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))

PressedImage

ContentId
读取并联

可以设置为 ImageButton 属性的纹理 ID。当按钮被按下时，将渲染此图像。

PressedImageContent

Content
读取并联

ResampleMode

Enum.ResamplerMode
读取并联

决定图像在缩放时的外观。默认情况下，图像会在显示时将纹理的粗糙度调整为纹理记忆中粗糙度大于或小于其尺寸的水平。相反，Enum.ResamplerMode.Pixelated 保留图像像素的锋利边缘。

ScaleType

Enum.ScaleType
读取并联

该属性决定在 UI 元素的绝对尺寸与源图像的尺寸不同时，Image 属性以何种方式渲染时。

默认情况下，这个属性是 Enum.ScaleType.Stretch ，这将简单地伸展/压缩图像尺寸，使其完全适合 UI 元素的空间。因为透明像素在上传到 Roblox 时设置为黑色，透明图像应该应用阿尔法混合以避免缩放图像周围的黑色轮廓。

对于 Enum.ScaleType.Slice , 在缩放时，角仍然是源图像尺寸。图像的边缘将延伸到图像的宽度/高度。最后，图像中心将伸展以填充图像的中心区域。要了解更多关于 9 切片图像的信息，请参阅 UI 9 切片设计。

对于 Enum.ScaleType.Tile ,每个图像瓷砖的大小由 TileSize 属性决定。

SliceCenter

Rect
读取并联

该属性设置 9 切割图像的边界时 ScaleType 设置为 Enum.ScaleType.Slice 。

要了解更多关于 9 切片图像的信息，请参阅 UI 9 切片设计。

SliceScale

number
读取并联

将 9 片边按指定比率缩放。这意味着 9 片的边缘会像你上传了新版本的纹理扩展一样增长。默认为 1.0 .

作为 9 片边界的乘数，它对于重复使用一个圆角图像以多个半径有用。

还看到 ScaleType ，它决定如果图像在源图像与显示元素的大小不同的 UI 元素中显示，图像将以何种方式缩放。

TileSize

UDim2
读取并联

设置图像的开始位置左上角的 ImageButton 瓷砖大小。默认值 值是 ； 的缩放组件将根据 的大小缩放地砖，而偏移组件是在原始像素中。例如， 的比例意味着瓷砖的尺寸将是相应轴的一半。

此属性只有如果 ScaleType 属性设置为 Enum.ScaleType.Tile 才会激活。

查看继承自 Instance 的全部
查看继承自 Object 的全部

方法

查看继承自 Instance 的全部
查看继承自 Object 的全部

活动

查看继承自 Instance 的全部
查看继承自 Object 的全部