ImageButton

Veraltete anzeigen

*Dieser Inhalt wurde mit KI (Beta) übersetzt und kann Fehler enthalten. Um diese Seite auf Englisch zu sehen, klicke hier.

Ein ImageButton verhält sich ähnlich wie ein ImageLabel in Bezug auf das Rendern, mit den zusätzlichen Verhaltensweisen eines GuiButton.

Zusammenfassung

Eigenschaften

Eigenschaften von GuiButton übernommenEigenschaften von GuiObject übernommenEigenschaften von GuiBase2d übernommen
Alles Geerbte von Instance anzeigen
Alles Geerbte von Object anzeigen

Methoden

Methoden von GuiObject übernommen
Alles Geerbte von Instance anzeigen
Alles Geerbte von Object anzeigen

Ereignisse

Ereignisse von GuiButton übernommenEreignisse von GuiObject übernommenEreignisse von GuiBase2d übernommen
Alles Geerbte von Instance anzeigen
Alles Geerbte von Object anzeigen

Eigenschaften

HoverImage

ContentId
Parallel lesen

Eine Textur-ID, die verwendet wird, wenn die ImageButton überfahren wird.

HoverImageContent

Content
Parallel lesen

Image

ContentId
Parallel lesen

Diese Eigenschaft ist eine Inhaltsart-Eigenschaft, die die Asset-ID eines auf Roblox hochgeladenen Abzeichens oder Bildes enthalten sollte.Es funktioniert identisch zu Decal.Texture bei der Lädtung des Bildes von Roblox.Das gerendete Bild wird mit ImageColor3 koloriert.

Beachten Sie, dass es möglich ist, das Bild als gefliest, skaliert oder 9-geschnitten zu rendern, indem Sie die EigenschaftenScaleType anpassen.

Code-Beispiele

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
Parallel lesen

Diese Eigenschaft legt fest, wie ein Bild koloriert wird.Wenn auf Weiß eingestellt, findet keine Farbgebung statt.Diese Eigenschaft ist sehr nützlich für die Wiederverwendung von Bildern: Wenn die Quelle das Bild komplett weiß mit Transparenz ist, können Sie die gesamte Farbe des Bildes mit dieser Eigenschaftenauf einmal festlegen.

Code-Beispiele

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
Parallel lesen

Diese Eigenschaft sollte eine Asset-URI oder einen Verweis auf ein EditableImage enthalten.Die Asset-URI kann auf ein Abzeichen oder ein hochgeladenes Bild verweisen, das auf Roblox hochgeladen wurde.Es funktioniert identisch zu Decal.Texture bei der Lädtung des Bildes.

Das gerendete Bild wird mit ImageColor3 koloriert.Es ist möglich, das Bild so zu rendern, dass es gefliest, skaliert oder in 9 Stücke geschnitten wird, indem die EigenschaftenScaleType angepasst wird.

ImageRectOffset

Vector2
Parallel lesen

Diese Eigenschaft legt den Pixelfluss (von oben links) des Bildbereichs fest, der angezeigt werden soll, was die teilweise Anzeige eines Bildes in Verbindung mit ImageRectSize ermöglicht.

Code-Beispiele

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
Parallel lesen

Diese Eigenschaft legt die Pixelform des Bildbereichs fest, der angezeigt werden soll, was die teilweise Anzeige eines Bildes in Verbindung mit ImageRectOffset ermöglicht.Wenn eine der Dimensionen auf 0 festgelegt ist, wird stattdessen das gesamte Bild angezeigt.

Code-Beispiele

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
Parallel lesen

Diese Eigenschaft legt die Alpha des gerenderten Bildes des Elements fest.Ein Wert von 0 ist vollständig undurchsichtig und ein Wert von 1 ist vollständig durchsichtig (unsichtbar).Diese Eigenschaft verhält sich ähnlich wie GuiObject.BackgroundTransparency oder BasePart.Transparency.

Wenn du die Bildrendierung deaktivierst, indem du ImageTransparency auf 1 setzt, ergibt sich ein einfacher Rechteck, der als Button verwendet werden kann.Es kann jedoch besser sein, stattdessen eine leere TextButton zu verwenden.

IsLoaded

boolean
Schreibgeschützt
Nicht repliziert
Parallel lesen

Diese Eigenschaft zeigt an, ob die Image-Eigenschaft von Roblox fertig geladen wurde. Bilder, die von der Moderation abgelehnt wurden, werden nie geladen.

Code-Beispiele

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
Parallel lesen

Eine Textur-ID, die als ImageButton Eigenschaftenfestgelegt werden kann. Wenn der Knopf gedrückt wird, wird dieses Bild gerendert.

PressedImageContent

Content
Parallel lesen

ResampleMode

Enum.ResamplerMode
Parallel lesen

Bestimmt, wie das Bild aussieht, wenn es skaliert wird.Standardmäßig glättet das Bild die Textur, wenn sie größer oder kleiner als ihre Größe in der Texturspeicherung angezeigt wird.Im Gegensatz dazu bewahrt Enum.ResamplerMode.Pixelated die scharfen Kanten der Bildpixel.

ScaleType

Enum.ScaleType
Parallel lesen

Diese Eigenschaft bestimmt, auf welche Weise die Image-Eigenschaft gerendert wird, wenn die absoluten Größe des UI-Elements von der Größe des Quellbilds abweicht.

Standardmäßig ist diese Eigenschaft Enum.ScaleType.Stretch, die einfach die Bilddimensionen ausdehnt/kompaktiert, so dass sie genau zum Platz des UI-Elements passen.Da transparente Pixel beim Hochladen auf Roblox auf Schwarz eingestellt sind, sollten transparente Bilder eine Alpha-Mischung anwenden, um einen schwarzen Umriss um skalierte Bilder zu vermeiden.

Für Enum.ScaleType.Slice, wenn die Skalierung aufsteigt, bleiben die Ecken die Größe des Quellbildes.Die Ränder des Bildes werden auf die Breite/Höhe des Bildes ausgedehnt.Schließlich wird das Zentrum des Bildes ausgedehnt, um den mittleren Bereich des Bildes zu füllen.Um mehr über 9-geschnittene Bilder zu erfahren, siehe Benutzeroberfläche 9-Slice-Design.

Für Enum.ScaleType.Tile wird die Größe jeder Bildtilie durch das EigenschaftenTileSize bestimmt.

SliceCenter

Rect
Parallel lesen

Diese Eigenschaft legt die Schnittgrenzen eines 9-geschnittenen Bildes fest, wenn ScaleType auf Enum.ScaleType.Slice gesetzt ist.

Um mehr über 9-geschnittene Bilder zu erfahren, siehe Benutzeroberfläche 9-Slice-Design.

SliceScale

number
Parallel lesen

Skaliert die 9-Ecken-Kanten durch die angegebene Relation.Das bedeutet, dass die Ränder rund um die 9-Scheibe wachsen, als hättest du eine neue Version der Textur in vergrößerter Auflösung hochgeladen.Standard auf 1.0.

Als Multiplikator für die Grenzen einer 9-Scheibe ist es nützlich, ein gerundetes Eckbild für mehrere Radien wiederzuverwenden.

Siehe auch ScaleType, die festlegt, wie sich ein Bild skalieren wird, wenn es in einem UI-Element angezeigt wird, dessen Größe sich von dem Quellbild unterscheidet.

TileSize

UDim2
Parallel lesen

Legt die Kachelgröße des ImageButton fest, die an der oberen linken Ecke des Bildes beginnt.Die Standard-UDim2 -Werte sind 1, 0, 1, 0 ; die Skalierungskomponenten der UDim2 -Kachel werden basierend auf der Größe der ImageButton -Kachel skaliert, während die Versatzkomponenten in rohen Pixeln sind.Zum Beispiel bedeutet eine Skalierung von 0.5 , dass die Kachel die Hälfte der Größe der ImageButton in der entsprechenden Achse hat.

Diese Eigenschaft ist nur aktiv, wenn die Eigenschaft ScaleType auf Enum.ScaleType.Tile gesetzt ist.

Alles Geerbte von Instance anzeigen
Alles Geerbte von Object anzeigen

Methoden

Alles Geerbte von Instance anzeigen
Alles Geerbte von Object anzeigen

Ereignisse

Alles Geerbte von Instance anzeigen
Alles Geerbte von Object anzeigen