MaskRenderer
MaskRenderer
El componente MaskRenderer
renderiza formas sólidas como rectángulos, círculos o polígonos.
Admite diferentes tipos de formas con dimensiones configurables, colores, posicionamiento y rotación.
Las formas pueden renderizarse con opacidad variable y asignarse a capas de renderizado específicas.
Este componente es útil para crear elementos de interfaz de usuario (UI), efectos visuales o máscaras para otros contenidos renderizados.
Propiedades
Propiedad | Tipo | Descripción |
---|---|---|
shape |
MaskShape |
Tipo de forma: Rectangle , Circumference o Polygon . |
width |
number |
Ancho de la máscara en píxeles (solo para rectángulo). |
height |
number |
Alto de la máscara en píxeles (solo para rectángulo). |
radius |
number |
Radio de la máscara en píxeles (solo para circunferencia). |
vertexModel |
Vector2[] |
Vértices del polígono (solo para polígono). |
color |
string |
Color de la máscara. |
offset |
Vector2 |
Desplazamiento en los ejes X e Y respecto al centro de la entidad. |
rotation |
number |
Rotación de la máscara en radianes. |
opacity |
number |
Opacidad de la máscara (valor entre 0 y 1). |
layer |
string |
Capa de renderizado donde se dibujará la máscara. |
Ejemplo con rectángulo
const maskRenderer = new MaskRenderer({
shape: MaskShape.Rectangle,
width: 32,
height: 32,
color: "#000000",
offset: new Vector2(0, 0),
rotation: 0,
opacity: 1,
layer: "Default",
});
Ejemplo con circunferencia
const maskRenderer = new MaskRenderer({
shape: MaskShape.Circumference,
radius: 16,
color: "#000000",
offset: new Vector2(0, 0),
opacity: 1,
layer: "Default",
});
Ejemplo con polígono
const maskRenderer = new MaskRenderer({
shape: MaskShape.Polygon,
vertexModel: [new Vector2(0, 0), new Vector2(32, 0), new Vector2(32, 32), new Vector2(0, 32)],
color: "#000000",
offset: new Vector2(0, 0),
opacity: 1,
layer: "Default",
});
Notas
- Cada forma requiere diferentes propiedades:
Rectangle
: necesitawidth
yheight
.Circumference
: necesitaradius
.Polygon
: necesitavertexModel
.
- La rotación (
rotation
) solo afecta a las formas rectángulo y polígono. - El valor de
opacity
permite crear máscaras semitransparentes si es menor a 1. - El sistema encargado de renderizar el componente aplicará las propiedades visuales y posicionamiento. El componente solo define los atributos de la máscara.