ImageButton

Afficher les obsolètes

*Ce contenu est traduit en utilisant l'IA (Beta) et peut contenir des erreurs. Pour consulter cette page en anglais, clique ici.

Un ImageButton se comporte de manière similaire à un ImageLabel en matière de rendu, avec les comportements supplémentaires d'un GuiButton.

Résumé

Propriétés

Propriétés hérités de GuiButtonPropriétés hérités de GuiObjectPropriétés hérités de GuiBase2d
Afficher tous les hérités de Instance
Afficher tous les hérités de Object

Méthodes

Méthodes hérités de GuiObject
Afficher tous les hérités de Instance
Afficher tous les hérités de Object

Évènements

Évènements hérités de GuiButtonÉvènements hérités de GuiObjectÉvènements hérités de GuiBase2d
Afficher tous les hérités de Instance
Afficher tous les hérités de Object

Propriétés

HoverImage

ContentId
Lecture parallèle

Un ID de texture qui sera utilisé lorsque le ImageButton est survolé.

HoverImageContent

Content
Lecture parallèle

Image

ContentId
Lecture parallèle

Cette propriété est une propriété de type contenu qui doit contenir l'ID de la ressource d'une décalcomanie ou d'une image téléchargée sur Roblox.Il fonctionne identiquement à Decal.Texture en ce qui concerne le chargement de l'image à partir de Roblox.L'image rendue sera colorée en utilisant ImageColor3 .

Notez qu'il est possible de rendre l'image à carreaux, redimensionnée pour s'adapter ou découpée en 9 parties en ajustant la propriété ScaleType.

Échantillons de code

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
Lecture parallèle

Cette propriété détermine comment une image est colorée.Lorsqu'il est réglé sur blanc, aucune coloration n'a lieu.Cette propriété est très utile pour réutiliser des ressources d'image : si l'image source est complètement blanche avec de la transparence, vous pouvez définir toute la couleur de l'image en une fois avec cette propriété.

Échantillons de code

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
Lecture parallèle

Cette propriété doit contenir une URI d'actif ou une référence à un objet EditableImage.L' URI de la ressource peut faire référence à une décalcomanie ou à une image téléchargée sur Roblox.Il fonctionne identiquement à Decal.Texture en ce qui concerne le chargement de l'image.

L'image rendue sera colorée en utilisant ImageColor3 .Il est possible de rendre l'image à l'échelle comme tuilée, redimensionnée pour s'adapter ou découpée en 9 parties en ajustant la propriété ScaleType.

ImageRectOffset

Vector2
Lecture parallèle

Cette propriété détermine le décalage des pixels (de la gauche supérieure) de la zone d'image à afficher, ce qui permet le affichage partiel d'une image en conjonction avec ImageRectSize .

Échantillons de code

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
Lecture parallèle

Cette propriété détermine la taille des pixels de la zone d'image à afficher, ce qui permet le affichage partiel d'une image en conjonction avec ImageRectOffset .Si l'une des dimensions est définie à 0, l'image entière est affichée à la place.

Échantillons de code

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
Lecture parallèle

Cette propriété détermine l'alpha de l'image rendue de l'élément.Une valeur de 0 est complètement opaque et une valeur de 1 est complètement transparente (invisible).Cette propriété se comporte de manière similaire à GuiObject.BackgroundTransparency ou BasePart.Transparency .

Si vous désactivez la rendu d'image en définissant ImageTransparency à 1, cela entraînera un simple rectangle qui peut être utilisé comme bouton.Cependant, il peut être préférable d'utiliser un blanc TextButton à la place.

IsLoaded

boolean
Lecture uniquement
Non répliqué
Lecture parallèle

Cette propriété indique si la propriété Image a terminé le chargement auprès de Roblox. Les images rejetées par la modération ne seront jamais charger.

Échantillons de code

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
Lecture parallèle

Un ID de texture qui peut être défini comme une propriété ImageButton. Lorsque le bouton est pressé, il rendra cette image.

PressedImageContent

Content
Lecture parallèle

ResampleMode

Enum.ResamplerMode
Lecture parallèle

Détermine comment l'image apparaît lorsqu'elle est redimensionnée.Par défaut, l'image lisse la texture lorsqu'elle est affichée plus grande ou plus petite que sa taille dans la mémoire de texture.En revanche, Enum.ResamplerMode.Pixelated préserve les bords aiguisés des pixels d'image.

ScaleType

Enum.ScaleType
Lecture parallèle

Cette propriété détermine de quelle manière la propriété Image est rendue lorsque la taille absolue de l'élément d'interface utilisateur diffère de la taille de l'image source.

Par défaut, cette propriété est Enum.ScaleType.Stretch ce qui étirera/compactera simplement les dimensions de l'image pour qu'elle s'adapte exactement à l'espace de l'élément d'interface utilisateur.Puisque les pixels transparents sont définis sur noir lors de l'importation dans Roblox, les images transparentes devraient appliquer un mélange alpha pour éviter un contour noir autour des images à l'échelle.

Pour Enum.ScaleType.Slice , lors de l'augmentation de la taille, les coins resteront la taille de l'image source.Les bords de l'image s'étendront à la largeur/hauteur de l'image.Enfin, le centre de l'image s'étendra pour remplir la zone centrale de l'image.Pour en savoir plus sur les images tranchées en 9, voir conception de l'interface utilisateur 9 tranches.

Pour Enum.ScaleType.Tile , la taille de chaque tuile d'image est déterminée par la propriété TileSize.

SliceCenter

Rect
Lecture parallèle

Cette propriété définit les limites de tranche d'une image à 9 tranches lorsque ScaleType est réglé sur Enum.ScaleType.Slice .

Pour en savoir plus sur les images tranchées en 9, voir conception de l'interface utilisateur 9 tranches.

SliceScale

number
Lecture parallèle

Échelle les bords de 9 tranches par la proportion spécifiée.Cela signifie que les bords autour du 9‑slice grandiront comme si vous aviez téléchargé une nouvelle version de la texture en haute résolution.Par défaut à 1.0.

En tant que multiplicateur pour les bords d'une tranche de 9, il est utile de réutiliser une image d'angle arrondi pour plusieurs rayons.

Voir aussi ScaleType qui détermine comment une image sera redimensionnée si elle est affichée dans un élément d'interface utilisateur dont la taille diffère de l'image source.

TileSize

UDim2
Lecture parallèle

Définit la taille des tuiles de la ImageButton à partir du coin supérieur gauche de l'image.Les valeurs par défaut UDim2 sont 1, 0, 1, 0 ; les composants d'échelle des UDim2 vont écheler la tuile en fonction de la taille du ImageButton alors que les composants d'écartement sont en pixels bruts.Par exemple, une échelle de 0.5 signifie que la tuile aura la moitié de la taille de la ImageButton dans l'axe correspondant.

Cette propriété n'est active que si la propriété ScaleType est définie sur Enum.ScaleType.Tile.

Afficher tous les hérités de Instance
Afficher tous les hérités de Object

Méthodes

Afficher tous les hérités de Instance
Afficher tous les hérités de Object

Évènements

Afficher tous les hérités de Instance
Afficher tous les hérités de Object