ImageButton

Pokaż przestarzałe

*Ta zawartość została przetłumaczona przy użyciu narzędzi AI (w wersji beta) i może zawierać błędy. Aby wyświetlić tę stronę w języku angielskim, kliknij tutaj.

An ImageButton behaves similarly to an ImageLabel in relation to rendering with the additional comportament of a GuiButton . It defines the same image-rendering properties as a ImageLabel does.

Możesz wyłączyć renderowanie obrazu ustawiając ImageButton.ImageTransparency na 1. To pozostawi ci prostokąt, który można użyć jako przycisku. Jest to jednak lepsze użycie pustego TextButton dla tego.

Przykłady kodu

ImageButton Press Color

-- 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()

Podsumowanie

Właściwości

  • HoverImage:ContentId
    Odczyt równoległy

    ID tekstury, która zostanie używana, gdy ImageButton jest w ręczniku.

  • Image:ContentId
    Odczyt równoległy

    Treść obrazu wyświetlana przez element UI. Czytuje i zapisuje do ImageContent .

  • Odczyt równoległy

    Określa, jak kolorowana będzie renderowana obraz.

  • Ukryte
    Odczyt równoległy

    Treść obrazu wyświetlana przez element UI. Wspiera urły zasobów i EditableImage .

  • Odczyt równoległy

    Odległość w pikselach podobszaru obszaru obrazu do wyświetlenia.

  • Odczyt równoległy

    Określa rozmiar w pikselach podobszaru obrazu do wyświetlenia.

  • Odczyt równoległy

    Określa przejrzystość renderowanego obrazu.

  • Tylko do odczytu
    Bez replikacji
    Odczyt równoległy

    Wskazuje, czy Obraz zakończył się ładowaniem z witryny Roblox.

  • PressedImage:ContentId
    Odczyt równoległy

    TextureId, który będzie używany, gdy ImageButton będzie naciskany.

  • Odczyt równoległy

    Wybiera tryb szybkowania obrazu dla przycisku.

  • Odczyt równoległy

    Określa, jak skala się obraz, jeśli zostanie wyświetlony w elementze interfejsu, który różni się od źródłowego obrazu.

  • Odczyt równoległy

    Ustawia granice poziomu dla obrazu 9-sliced.

  • Odczyt równoległy

    Skala 9-stopniowe krawędzie według określonego proporcjonalnego stosunku.

  • Odczyt równoległy

    Ustawia skalę płytki ImageButton.

Właściwości odziedziczeni z: GuiButton
  • Odczyt równoległy

    Określa, czy przycisk automatycznie zmienia kolor, gdy myszka jest na nim lub klikać na niego.

  • Odczyt równoległy

    Jeśli jest prawy, a element GUI jest widoczny, myszka nie zostanie zablokowana, chyba że prawe przyciski myszy są naciśnięte.

  • Odczyt równoległy

    Booleanowa wartość, która wskazuje, czy obiekt został wybrany.

  • Odczyt równoległy

    Zdefiniowuje styl GuiButton na podstawie listy uprzednio zdefiniowanych stylów.

Właściwości odziedziczeni z: GuiObjectWłaściwości odziedziczeni z: GuiBase2d

Metody

Metody odziedziczeni z: GuiObject

Zdarzenia

Zdarzenia odziedziczeni z: GuiButtonZdarzenia odziedziczeni z: GuiObjectZdarzenia odziedziczeni z: GuiBase2d

Właściwości

HoverImage

ContentId
Odczyt równoległy

ID tekstury, która zostanie używana, gdy ImageButton jest w ręczniku.

Image

ContentId
Odczyt równoległy

Ten właściwość jest właściwością typu treści, która powinna zawierać ID zasobu decalu lub obrazu wysłanego na Roblox. Funkcjonuje identycznie do Decal.Texture w odniesieniu do ładowania obrazu z witryny Roblox. W renderow

Przykłady kodu

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

Odczyt równoległy

Właściwość ImageColor3 określa, jak koloruje się obraz. Gdy jest ustawiony na biały, nie ma kolorzenia. Ta właściwość jest bardzo przydatna do ponownego używania zasobów obrazu: jeśli źródłowy obraz jest całkowicie biały z przejrzystością, można ustawić cały kolor obrazu natychmiastowo za pomocą tej właściwości.

Przykłady kodu

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()
Rainbow Image

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

Ukryte
Odczyt równoległy

Ta właściwość powinna zawierać URL zasobu lub odniesienie do obiektu EditableImage.

Urządzenie Url może zeskanować naklejkę lub obraz przesłany na Roblox. Funkcjonuje identycznie z Decal.Texture w odniesieniu do ładowania obrazu.

Wygenerowane obrazy zostaną pokolorowane przy użyciu ImageButton.ImageColor3. Możliwe jest ustawienie koloru obrazu jako płytki, skalowania do wymiaru lub 9-slicowania poprzez dostosowanie właściwości ImageButton.ScaleType.

ImageRectOffset

Odczyt równoległy

Pozwala na częściowe wyświetlanie obrazu wraz z ImageButton.ImageRectSize . Ta właściwość określa odległość pikseli (z góry lewej) obszaru obrazu do wyświetlenia.

To właściwość zachowuje się identycznie do ImageLabel.ImageRectSize .

Przykłady kodu

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
Image ScaleType Demo

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

ImageRectSize

Odczyt równoległy

Pozwala na częściowe wyświetlanie obrazu wraz z ImageButton.ImageRectOffset . Ta właściwość określa rozmiar pikseli obszaru obrazu do wyświetlenia. Jeśli jedna z tych wymiarów jest ustawiona na 0, cały obszar obrazu zostanie wyświetlony zamiast tego.

Zachowuje się identycznie do ImageLabel.ImageRectOffset .

Przykłady kodu

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
Image ScaleType Demo

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

ImageTransparency

Odczyt równoległy

Przezroczystość obrazu określa alfę renderowanego obrazu elementu UI. Wartość 0 jest całkowicie niewidoczna, a wartość 1 jest całkowicie przejrzysta (niewidoczna). Ta właściwość zachowuje się podobnie do GuiObject.BackgroundTransparency lub BasePart.Transparency .

Przykłady kodu

Oscillate ImageTransparency

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

Tylko do odczytu
Bez replikacji
Odczyt równoległy

Właściwość IsLoaded wskazuje, czy własność ImageButton.Image zakończyła się ładowaniem z witryny Roblox. Obrazy odrzucone przez moderację nigdy się nie wczytywać.

Przykłady kodu

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
Odczyt równoległy

ID tekstury, które można ustawić jako własność ImageButton. Gdy przycisk jest naciśnięty, wyświetli to obraz.

ResampleMode

Odczyt równoległy

Określa, jak wygląda obraz, gdy jest skalowany.

Domyślnie obraz płynnie wyostnia teksturę, gdy jest wyświetlony większy lub mniejszy niż jego rozmiar w pamięci tekstury. Z drugiej strony, Enum.ResamplerMode.Pixelated zachowujeostrzone krawędzie pikseli obrazu.

Odczyt równoległy

Właściwość ScaleType określa, w jaki sposób renderuje się ImageButton.Image , gdy rozmiar elementu UI różni się od rozmiaru źródłowego obrazu.

Domyślnie, ta właściwość jest Enum.ScaleType.Stretch, która po prostu rozciągnie rozmiary obrazu, aby dokładnie pasowały do przestrzeni elementu UI. Ponieważ przejrzyste pikseli są ustawione na czarny podczas wstawiania na stronę Roblox, przejrzyste obrazy powinny zastosować alfę blending, aby uniknąć czarnej ramy wokół

Dla Enum.ScaleType.Slice , właściwość ImageButton.SliceCenter zostanie ujawniona w oknie Właściwości. Jest to dla 9-śladowej interfejsu użytkownika: skalowanie powoduje, że kąty pozostaną rozmiarem źródła obrazu. Krawędzie obrazu będą się rozcią

W końcu właściwość Enum.ScaleType.Tile dla ImageButton.TileSize będzie wyświetlona w oknie Właściwości. Jest to dla płytkowych obrazów, w których rozmiar każdego płytkowego obrazu jest ustalany przez właściwość ImageButton.TileSize.

Przykłady kodu

Image ScaleType Demo

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

SliceCenter

Odczyt równoległy

Właściwość SliceCenter ustawia granice kawałku 9-sliced image kiedy ImageButton.ScaleType jest ustawiony na Enum.ScaleType.Slice . Proszę zauważyć,

Aby dowiedzieć się więcej o 9-sliced images, zobacz ten samouczek: Projekt 9-sliced Images .

Przykłady kodu

Image ScaleType Demo

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

SliceScale

Odczyt równoległy

Skaluje 9-klapowe krawędzie według określonego proporcjonalnego stosunku. To oznacza, że krawędzi wokół 9-klapowych będą rosły, jakbyś wstawił nową wersję tekstury. Domyślnie ustawione na 1.0.

Jako mnożnik dla krawędzi 9-слоjowego, jest użyteczny do ponownego użycia jednego obrazu kątowego dla wielu promieni

Zobacz również:

TileSize

Odczyt równoległy

TileSize ustawia rozmiar kafelkowania ImageButton. Domyślne wartości UDim2 są 1,0,1,0. Skomponent skalowania UDim2 będzie skalować kafelkowanie w zależności od rozmiaru ImageButton. Odległość jest w pikselach. Tile rozpoczyna się w górnym lewym rogu obrazu. Na przykład sk

Właściwość ta jest aktywna tylko w przypadku ustawienia ScaleType dla ImageButton na Kachel instead of Slice lub Stretch.

Przykłady kodu

Image ScaleType Demo

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

Metody

Zdarzenia