ImageButton

顯示已棄用項目

*此內容是使用 AI（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 切割來將圖像切割為 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
平行讀取

此屬性決定元素渲染圖像的 alpha。值 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
平行讀取

一個紋理ID，可以設為ImageButton屬性。當按下按鈕時，它會渲染此圖像。

PressedImageContent

Content
平行讀取

ResampleMode

Enum.ResamplerMode
平行讀取

決定縮放圖像時的外觀。預設情況下，圖像會在顯示時將紋理磨平，使紋理記憶中的紋理尺寸大於或小於紋理記憶中的紋理尺寸。相反, Enum.ResamplerMode.Pixelated 保留圖像畫素的鋒利邊緣。

ScaleType

Enum.ScaleType
平行讀取

此屬性決定在使用者介面元素的絕對尺寸與來源圖像的尺寸不同時，Image屬性以何種方式渲染時。

預設情況下，此屬性為 Enum.ScaleType.Stretch ，它會簡單地伸展/縮小圖像尺寸，以便它完全符合 UI 元素的空間。透明畫素在上傳到 Roblox 時設為黑色，透明圖像應該應用Alpha混合以避免縮放後的圖像周圍有黑色邊緣。

對於 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，該方法會決定如果顯示在用戶介面元素的尺寸與來源圖像不同的情況下，圖像會以何種方式縮放。

TileSize

UDim2
平行讀取

設置從圖像左上角開始的 ImageButton 瓷磚大小。預設值 值是 ; 縮放組件的縮放將基於 的大小來縮放瓷磚，而偏移組件則位於原始像素。例如， 的比例意味著瓷磚的尺寸將是相應軸的一半。

此屬性只有在 ScaleType 屬性設為 Enum.ScaleType.Tile 時才會啟用。

檢視繼承自Instance的所有項目
檢視繼承自Object的所有項目

方法

檢視繼承自Instance的所有項目
檢視繼承自Object的所有項目

活動

檢視繼承自Instance的所有項目
檢視繼承自Object的所有項目