ImageButton
*Este conteúdo é traduzido por IA (Beta) e pode conter erros. Para ver a página em inglês, clique aqui.
Un ImageButton se comporta similarmente a un ImageLabel en lo que se refiere a la renderización con los comportamientos adicionales de un GuiButton . Defina las mismas propiedades de renderizado que lo hace un ImageLabel .
Puede desactivar la renderización de imágenes estableciendo ImageButton.ImageTransparency a 1. Esto le dejará con un rectángulo simple que se puede usar como un botón. Sin embargo, puede ser mejor usar un TextButton vacío para esto.
Amostras de código
-- 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()Resumo
Propriedades
Una ID de textura que se usará cuando el ImageButton esté siendo pasado el cursor.
El contenido de la imagen que se muestra por el elemento de la interfaz de usuario.
Determina cómo se coloreará una imagen renderizada.
El desplazamiento en píxeles de la subárea de una imagen para mostrarla.
Determina el tamaño en píxeles de la subárea de una imagen para mostrarla.
Determina la transparencia de la imagen renderizada.
Indica si la Imagen ha finalizado de cargar desde el sitio web de Roblox.
Un ID de textura que se usará cuando se presione un ImageButton .
Selecciona el modo de reescritura de la imagen para el botón.
Determina cómo se escalará una imagen si se muestra en un elemento de UI cuyo tamaño difiere de la imagen de origen.
Establece los límites de la capa de un imagen de 9 capas.
Escala las 9 esquinas por el radio especificado.
Establece el tamaño de escalado de la imagen.
Determina se o botão muda de cor automaticamente quando o mouse passa por cima ou clica nele.
Se verdadeiro, enquanto o elemento GUI estiver visível, o mouse não será bloqueado a menos que o botão direito do mouse esteja abaixo.
Uma propriedade boolean que indica se o objeto foi selecionado.
Define o estilo do GuiButton com base em uma lista de estilos pré-definidos.
Determina si este elemento de la interfaz de usuario acepta la entrada.
Determina el punto de origen de un GuiObject , relativo a su tamaño absoluto.
Determina si se produce el escalado en función del contenido de los hijos.
Determina el color de fondo de GuiObject
Determina la transparencia de la capa de fondo y el borde de GuiObject
Determina el color de la frontera de GuiObject .
Determina de qué manera se coloca el límite de GuiObject en relación con sus dimensiones.
Determina el ancho de píxel de la frontera GuiObject .
Determina si el descendiente GuiObjects fuera de los límites de un elemento GUI padre debe Renderizar.
Determina si el mouse del jugador está siendo presionado activamente en el GuiObject o no.
Determina si el GuiButton se puede interactuar con o no, o si el GuiState del GuiObject está cambiando o no.
Controla el orden de clasificación del GuiObject cuando se usa con un UIGridStyleLayout .
Establece el GuiObject que se seleccionará cuando el seleccionador de plataforma de juego se mueva hacia abajo.
Establece el GuiObject que se seleccionará cuando el seleccionador de plataforma se mueva a la izquierda.
Establece el GuiObject que se seleccionará cuando el seleccionador de plataforma de juegos se mueva a la derecha.
Establece el GuiObject que se seleccionará cuando el seleccionador de plataforma de juego se mueva hacia arriba.
Determina la posición de píxeles y escalares de GuiObject .
Determina el número de grados en los que se gira el GuiObject .
Determine si el GUI puede ser seleccionado por un controlador para juego.
Sobrecarga el adorno de selección predeterminado utilizado para las plataformas de juegos.
El orden de GuiObjects seleccionado por la interfaz de usuario del gamepad.
Determina el tamaño de píxeles y escalares del GuiObject .
Establece los ejes Size en los que se basará el GuiObject relativos al tamaño de su padre.
Una propiedad mixta de BackgroundTransparency y TextTransparency .
Determina si el GuiObject y sus descendientes serán renderizados.
Determina el orden en que se renderiza un GuiObject en relación con los demás.
Descreve a posição real da tela de um elemento da interface, em pixels.
Descreve a rotação de tela real de um elemento da interface, em graus.
Descreve o tamanho real da tela de um elemento da interface, em pixels.
Quando definido como verdadeiro, a localização será aplicada a este GuiBase2d e aos seus descendentes.
Uma referência a um LocalizationTable para ser usado para aplicar localização automatizada a este GuiBase2d e seus descendentes.
Personaliza o comportamento de seleção do gamepad na direção de baixo.
Personaliza o comportamento de seleção do gamepad na direção esquerda.
Personaliza o comportamento de seleção do gamepad na direção certa.
Personaliza o comportamento de seleção do gamepad na direção de cima.
Permite personalizar o movimento da almofada de jogo.
Métodos
Métodos herdados de GuiObject- TweenPosition(endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
Mueve con suavidad un GUI a un nuevo UDim2 .
- TweenSize(endSize : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
Escala con suavidad un GUI a un nuevo UDim2 .
- TweenSizeAndPosition(endSize : UDim2,endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
Mueve con suavidad una GUI a un nuevo tamaño y posición.
Eventos
Eventos herdados de GuiButtonDispara quando o botão é ativado.
Iniciado quando o mouse estiver totalmente clicado no botão GUI.
Ativado quando o mouse está no estado mínimo esquerdo do mouse na ObjetoGUI.
Iniciado quando o mouse esquerdo liberou o ObjetoGUI.
Iniciado quando o mouse clicou duas vezes no botão GUI.
Ativado quando o mouse está no estado correto do mouse para baixo na ObjetoGUI.
Iniciado quando o botão direito do mouse foi liberado em um Objeto GUI.
Se ha disparado cuando un usuario comienza a interactuar a través de un dispositivo de interfaz humana-ordenador (botón de ratón, toque para comenzar, botón de teclado, etc).
Se activa cuando un usuario cambia cómo interactúa a través de un dispositivo de interfaz humana-ordenador (botón de ratón, toque para comenzar, botón de teclado, etc).
Se ha disparado cuando un usuario deja de interactuar a través de un dispositivo de interfaz humana-ordenador (botón de ratón, toque para empezar, botón de teclado, etc).
Dispara cuando un usuario mueve su mouse hacia un elemento GUI.
Se activa cuando un usuario mueve el mouse fuera de un elemento de la GUI.
Dispara cuando un usuario mueve el mouse mientras está dentro de un elemento GUI.
Dispara cuando un usuario desplaza su rueda de ratón cuando el ratón está sobre un elemento de GUI.
Se activa cuando un usuario desplaza su rueda de ratón hacia delante cuando el ratón está sobre un elemento de GUI.
Se activa cuando el GuiObject está siendo enfocado con el GamepadSelector.
Se activa cuando el GamepadSelector deja de enfocarse en el GuiObject.
Se activa cuando el jugador comienza, continúa y termina presionando el elemento de la interfaz de usuario.
- TouchPan(touchPositions : Array,totalTranslation : Vector2,velocity : Vector2,state : Enum.UserInputState):RBXScriptSignal
Dispara cuando el jugador mueve su dedo en el elemento de la interfaz de usuario.
- TouchPinch(touchPositions : Array,scale : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
Dispara cuando el jugador realiza un gesto de pinchazo o de tiro usando dos dedos en el elemento de la interfaz de usuario.
- TouchRotate(touchPositions : Array,rotation : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
Dispara cuando el jugador realiza un gesto de rotación usando dos dedos en el elemento de la interfaz de usuario.
Se activa cuando el jugador realiza un gesto de desplazamiento en el elemento de la interfaz de usuario.
Se activa cuando el jugador realiza un gesto de toque en el elemento de la interfaz de usuario.
- SelectionChanged(amISelected : bool,previousSelection : GuiObject,newSelection : GuiObject):RBXScriptSignal
Ativado quando a seleção do gamepad se move para, sai ou muda dentro da GuiBase2d conectada ou de qualquer descendente GuiObjects.
Propriedades
HoverImage
Una ID de textura que se usará cuando el ImageButton esté siendo pasado el cursor.
Image
La propiedad de imagen es una propiedad de tipo de contenido que debe contener el ID de la imagen de un Decal o Image en el sitio web de Roblox. Funciona idénticamente a Decal.Texture con respecto a la carga de la imagen desde el sitio web de Roblox. La imagen renderizada se colorear
Amostras de código
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
La propiedad Color3 de la imagen determina cómo se colorea una imagen. Cuando se establece en blanco, no ocurre ningún colorado. Esta propiedad es muy útil para reutilizar los recursos de la imagen: si la imagen de origen es completamente blanca con transparencia, puede establecer el color de la imagen entero con esta propiedad.
Amostras de código
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()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
ImageRectOffset
Permite la presentación parcial de una imagen en conjunción con ImageButton.ImageRectSize . Esta propiedad determina el desplazamiento de píxeles (desde la parte superior izquierda) de la área de la imagen para mostrarse.
Esta propiedad se comporta idénticamente a ImageLabel.ImageRectSize .
Amostras de código
-- 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
endlocal 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()
endImageRectSize
Permite la presentación parcial de una imagen en conjunción con ImageButton.ImageRectOffset . Esta propiedad determina el tamaño de los píxeles de la área de la imagen para mostrarse. Si se establece cualquiera de las dimensiones, se muestra el área de la imagen completa en su lugar.
Esta propiedad se comporta idénticamente a ImageLabel.ImageRectOffset .
Amostras de código
-- 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
endlocal 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()
endImageTransparency
Transparencia de imagen determina la alfa de la imagen de renderizado de un elemento de UI. Un valor de 0 es completamente opaco, y un valor de 1 es completamente transparente (invisible). Esta propiedad se comporta similarmente a GuiObject.BackgroundTransparency o BasePart.Transparency .
Amostras de código
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
La propiedad IsLoaded indica si la propiedad ImageButton.Image se ha cargado del sitio web de Roblox. Las imágenes rechazadas por la moderación nunca se cargarán.
Amostras de código
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
Un ID de textura que se puede establecer como propiedad de ImageButton. Cuando se presiona el botón, se renderizará esta imagen.
ResampleMode
Determina cómo se ve la imagen cuando se escala.
Por defecto, la imagen suaviza la textura cuando se muestra más grande o más pequeña que su tamaño en el almacenamiento de textura. En contraste, Enum.ResamplerMode.Pixelated preserva los bordes afilados de los píxeles de la imagen.
ScaleType
La propiedad ScaleType determina de qué manera se renderiza un ImageButton.Image cuando el tamaño de elemento de la interfaz de usuario difiere del tamaño de la imagen de origen.
Por defecto, esta propiedad es Enum.ScaleType.Stretch , lo que simplemente estirará / compactará las dimensiones de la imagen para que encaje exactamente con el espacio del elemento de la interfaz de usuario. Dado que los píxeles transparentes están configurados para negro al cargar en el sitio web de Roblox, las imágenes transparentes deberían aplicar el efecto de mezcla de alfa para evitar un contorno de color negro
Para Enum.ScaleType.Slice , la propiedad ImageButton.SliceCenter se revelará en la ventana Propiedades. Esto es para la interfaz de usuario de 9 pares: cuando se escala, las esquinas se mantendrán el tamaño de la imagen de origen. Las esquinas de la imagen se extenderán hasta la altura / ancho de la imagen. Final
Finalmente, para Enum.ScaleType.Tile, la propiedad ImageButton.TileSize se revelará en la ventana Propiedades. Esto es para las imágenes de azulejos, donde el tamaño de cada azulejo de imagen se determina por la propiedad ImageButton.TileSize.
Amostras de código
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()
endSliceCenter
La propiedad SliceCenter establece los límites de los márgenes de un 9-sliced image cuando ImageButton.ScaleType está configurado para Enum.ScaleType.Slice . Por favor, teng
Para aprender más sobre las imágenes de 9 espírritos, consulta este tutorial: Diseño de UI 9 Slice.
Amostras de código
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()
endSliceScale
Aumenta los lados de 9 píldoras por el modo de escalado especificado. Esto significa que los lados alrededor de las 9 píldoras crecerán como si hubieras subido una nueva versión de la textura escalada. Por defecto, 1.0.
Como multiplicador de las esquinas de un 9-Slice, es útil para reutilizar una imagen de esquina redondeada para varios radios
Véase también:
- ImageButton.ScaleType , determina cómo se escalará una imagen si se muestra en un elemento de UI cuyo tamaño difiere de la imagen de origen
- ImageLabel.ScaleCenter, determina el centro de una imagen de 9 espacios
- ImageButton.SliceScale , la misma propiedad en términos de funcionalidad pero para ImageButtons
TileSize
TileSize establece el tamaño de azulejo de la ImagenBotón. El valor predeterminado UDim2 es 1,0,1,0. El componente de escala de UDim2 escalará el azulejo en función del tamaño del ImageButton. El desplazamiento está en píxeles. El azulejo comienza en la esquina superior izquierda de la imagen. Por ejemplo, un
Esta propiedad solo está activa si el ScaleType para el ImageButton se ha establecido como Tile en lugar de Slice o Stretch.
Amostras de código
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