ImageLabel
*Este contenido se traduce usando la IA (Beta) y puede contener errores. Para ver esta página en inglés, haz clic en aquí.
Un ImageLabel renderiza un rectángulo, como lo hace un Frame con un recursode imagen.La visualización de la imagen se puede manipular a través de las propiedades ImageColor3 y ImageTransparency.Para mostrar solo la imagen y ocultar el rectángulo, establece GuiObject.BackgroundTransparency a 1.
El uso avanzado ImageLabel incluye:
Las imágenes con azulejos se pueden crear al establecer ScaleType a Enum.ScaleType.Tile , luego TileSize a la escala de los azulejos renderizados.
las imágenes de 9 capas se pueden crear al establecer ScaleType a Enum.ScaleType.Slice , luego SliceCenter a la zona central de la imagen de 9 capas.
Las hojas de sprites se pueden implementar mediante el uso de ImageRectOffset y ImageRectSize .Emborrar múltiples imágenes en una y usar esta propiedad puede acelerar mucho la carga de los recursos de imagen de tu experiencia, especialmente si usas muchas pequeñas iconos en tus interfaces de usuario.
Resumen
Propiedades
El contenido de imagen mostrado por el elemento de la interfaz de usuario. Lees y escribes a ImageContent .
Determina cómo se coloreará una imagen renderizada.
El contenido de imagen mostrado por el elemento de la interfaz de usuario. Soporta URI de activos y EditableImage.
El desplazamiento en píxeles de la subárea de una imagen para mostrar.
Determina el tamaño en píxeles de la subárea de una imagen para mostrar.
Determina la transparencia de la imagen renderizada.
Indica si la imagen se ha terminado de cargar de Roblox.
Selecciona el modo de reescalado de imagen para la etiqueta.
Determina cómo se escalará una imagen si se muestra en un elemento de interfaz de usuario cuyo tamaño difiere de la imagen de origen.
Establece los límites de una rebanada de una imagen de 9 rebanadas.
Escala los bordes de las 9 piezas por la relación especificada.
Establece el tamaño de la cuadrícula del ImageLabel .
Determina si este elemento de interfaz de usuario sienta la entrada.
Determina el punto de origen de un GuiObject , relativo a su tamaño absoluto.
Determina si se produce un redimensionamiento basado en el contenido de los hijos.
Determina el color de fondo GuiObject.
Determina la transparencia del fondo y del borde GuiObject.
Determina el color del borde GuiObject .
Determina de qué manera se coloca el borde GuiObject relativo a sus dimensiones.
Determina el ancho de píxel del borde 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á presionado activamente en el GuiObject o no.
Determina si el GuiButton se puede interactuar 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 selector de gamepad se mueva hacia abajo.
Establece el GuiObject que se seleccionará cuando el seleccionador de gamepad se mueva a la izquierda.
Establece el GuiObject que se seleccionará cuando el seleccionador de gamepad se mueva a la derecha.
Establece el GuiObject que se seleccionará cuando el seleccionador de gamepad se mueva hacia arriba.
Determina la posición píxel y escalar del GuiObject .
Determina el número de grados por los cuales se gira el GuiObject .
Determine si el GuiObject se puede seleccionar por un controlador para juego.
Anula el adorno de selección predeterminado utilizado para los gamepads.
El orden de GuiObjects seleccionado por la selección de la interfaz de usuario del gamepad.
Determina el tamaño píxel y escalar del GuiObject .
Establece los ejes Size que el GuiObject se basará, en relación con el tamaño de su padre.
Una propiedad mixta de BackgroundTransparency y TextTransparency.
Determina si se renderizarán los GuiObject y sus descendientes.
Determina el orden en que un GuiObject renderiza en relación con los demás.
Describe la posición actual de la pantalla de un elemento GuiBase2d , en píxeles.
Describe la rotación de la pantalla actual de un elemento GuiBase2d en grados.
Describe el tamaño de la pantalla actual de un elemento GuiBase2d , en píxeles.
Cuando se establece en true, la localización se aplicará a este GuiBase2d y a sus descendientes.
Una referencia a un LocalizationTable para usar para aplicar localización automatizada a este GuiBase2d y sus descendientes.
Personaliza el comportamiento de selección del gamepad en la dirección de abajo.
Personaliza el comportamiento de selección del gamepad en la dirección izquierda.
Personaliza el comportamiento de selección del gamepad en la dirección correcta.
Personaliza el comportamiento de selección del gamepad en la dirección de arriba.
Permite la personalización del movimiento de selección del gamepad.
Métodos
Métodos heredados de GuiObject- TweenPosition(endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
Mueve suavemente una GUI a una nueva UDim2.
- TweenSize(endSize : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
- TweenSizeAndPosition(endSize : UDim2,endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
Mueve suavemente una GUI a un nuevo tamaño y posición.
Eventos
Eventos heredados de GuiObjectDespedido cuando un usuario comienza a interactuar a través de un dispositivo de interfaz humana-computadora (botón del mouse hacia abajo, toque de inicio, botón de teclado hacia abajo, etc.).
Despedido cuando un usuario cambia la forma en que interactúa a través de un dispositivo de interfaz humana-computadora (botón del mouse hacia abajo, toque de inicio, botón de teclado hacia abajo, etc.).
Despedido cuando un usuario deja de interactuar a través de un dispositivo de interfaz humana-ordenador (botón del ratón hacia abajo, toque de inicio, botón de teclado hacia abajo, etc.).
Se activa cuando un usuario mueve el mouse a un elemento de interfaz gráfica.
Se activa cuando un usuario mueve el mouse fuera de un elemento de interfaz gráfica.
Se activa cada vez que un usuario mueve el mouse mientras está dentro de un elemento de interfaz gráfica.
Se activa cuando un usuario desplaza la rueda del ratón hacia atrás cuando el ratón está sobre un elemento de interfaz gráfica.
Se activa cuando un usuario desplaza la rueda del ratón hacia adelante cuando el ratón está sobre un elemento de interfaz gráfica.
Se desfija cuando el GuiObject se está enfocando con el seleccionador de Gamepad.
Despedido cuando el seleccionador de Gamepad deja de centrarse en el GuiObject.
Se enciende cuando el jugador comienza, continúa y detiene presionando largamente el elemento de la interfaz de usuario.
- TouchPan(touchPositions : Array,totalTranslation : Vector2,velocity : Vector2,state : Enum.UserInputState):RBXScriptSignal
Se activa cuando el jugador mueve el dedo en el elemento de la interfaz de usuario.
- TouchPinch(touchPositions : Array,scale : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
Se activa cuando el jugador realiza un gesto de pinzamiento 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
Se activa 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 deslizamiento 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 : boolean,previousSelection : GuiObject,newSelection : GuiObject):RBXScriptSignal
Se enciende cuando la selección del gamepad se mueve a, deja o cambia dentro del conectado GuiBase2d o cualquier descendiente GuiObjects .
Propiedades
Image
Esta propiedad es una propiedad de tipo de contenido que debe contener el ID del activo de una etiqueta o imagen subida a Roblox.Funciona de manera idéntica a Decal.Texture con respecto a la carga de la imagen de Roblox.La imagen renderizada se puede modificar usando ImageColor3 y ImageTransparency.
ImageColor3
Esta propiedad determina cómo se colorea una imagen.Cuando se establece en blanco, no ocurre colorización.Esta propiedad es muy útil para reutilizar recursos de imagen; si la imagen de origen es completamente blanca con transparencia, puedes establecer todo el color de la imagen a la vez con esta propiedad.
ImageContent
Esta propiedad debe contener un URI de activo o una referencia a un objeto EditableImage.
La URI de activo puede referenciar una calcomanía o imagen subida a Roblox. Funciona de manera idéntica a Decal.Texture con respecto a la carga de la imagen.
La imagen renderizada se coloreará usando ImageButton.ImageColor3 .Es posible hacer que la imagen se renderice como azulejada, escalada para encajar o de 9 slices, ajustando la propiedad ImageButton.ScaleType.
ImageRectOffset
Permite la visualización parcial de una imagen en conjunción con ImageRectSize .Esta propiedad determina el desplazamiento píxel (desde la parte superior izquierda) de la zona de imagen a mostrar.
ImageRectSize
Permite la visualización parcial de una imagen en conjunción con ImageRectOffset .Esta propiedad determina el tamaño de píxel de la área de imagen que se mostrará.Si ambas dimensiones se establecen en 0, se muestra la imagen completa en su lugar.
ImageTransparency
Esta propiedad determina el alfa de la imagen renderizada de un elemento de interfaz de usuario.Un valor de 0 es completamente opaco y un valor de 1 es completamente transparente (invisible).
Muestras de código
This code sample oscillates the ImageTransparency of an ImageLabel/ImageButton from 0 to 1 using a sine wave.
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
Esta propiedad indica si la propiedad ImageLabel.Image ha terminado de cargarse desde Roblox. Las imágenes rechazadas por la moderación nunca se cargarán.
Muestras de código
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.
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))ResampleMode
Determina cómo se ve la imagen cuando se escala.Por defecto, la imagen suaviza la textura cuando se muestra en la pantalla más grande o más pequeña que su tamaño en la memoria de textura.Cuando se establece en Enum.ResamplerMode.Pixelated, la imagen preserva los bordes afilados de los píxeles.
ScaleType
Esta propiedad determina de qué manera se renderiza un ImageLabel.Image cuando el tamaño absoluto del elemento de la interfaz de usuario difiere del tamaño de la imagen fuente.
Por defecto, esta propiedad es Enum.ScaleType.Stretch la cual simplemente estirará/compactará las dimensiones de la imagen para que encaje exactamente en el espacio del elemento de la interfaz de usuario.Dado que los píxeles transparentes se establecen en negro al subir a Roblox, las imágenes transparentes deberían aplicar mezcla alfa para evitar un contorno negro alrededor de imágenes escaladas.
Para Enum.ScaleType.Slice , la propiedad SliceCenter se revelará en la ventana Propiedades.Esto es para la interfaz de usuario de nueve páginas: al aumentar el tamaño, las esquinas seguirán siendo el tamaño de imagen de origen.Los bordes de la imagen se extenderán a la anchura/altura de la imagen.Por último, el centro de la imagen se estirará para llenar el área central de la imagen.
Por último, para Enum.ScaleType.Tile , la propiedad TileSize se revelará en la ventana Propiedades.Esto es para imágenes con azulejos, donde el tamaño de cada azulejo de imagen se determina por la propiedad TileSize.
SliceCenter
Esta propiedad establece los límites de la porción de una imagen de 9 rebanadas cuando ScaleType se establece en Enum.ScaleType.Slice .Tenga en cuenta que esta propiedad solo es visible en la ventana Propiedades bajo esta condición.
Para aprender más sobre imágenes de 9 capas, vea Diseño de interfaz de usuario de 9 capas.
SliceScale
Escala los bordes de las 9 piezas por la relación especificada.Esto significa que los bordes alrededor de la rebanada 9 crecerán como si hubieras subido una nueva versión de la textura escalada.Por defecto a 1.0.
Vea también ScaleType , SliceCenter , y SliceScale .
TileSize
Esta propiedad establece el tamaño de la cuadrícula del ImageLabel con un valor predeterminado de
Muestras de código
This code sample demonstrates the different ScaleType options - Stretch, Tile and Slice. It does this by resizing an ImageLabel/ImageButton in a circle.
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