---
title: roCanvasWidget
slug: develop/es/rocanvaswidget
docTags: 
createdAt: 2025-03-11T07:07:18.732Z
---

Este objeto compone color de fondo, texto e imágenes en un único rectángulo, lo que le permite superponer imágenes en un eje z.

Creación de objetos: Al igual que otros widgets, *roCanvasWidget* se crea con un *roRectangle* para establecer su tamaño y posición en la pantalla.

```text
CreateObject ("roCanvasWidget", r As roRectangle) As Object
```

## ifCanvasWidget

### Hide() As Boolean

Oculta el widget.

### Show() As Boolean

Muestra el widget.

### Raise() As Void

Envía el widget a la parte superior del orden z en el plano gráfico (es decir, delante de todas las demás superficies que implementan la interfaz *ifWidget*). De forma predeterminada, los nuevos widgets se colocan en la parte superior del orden z gráfico.

:::hint{type="info"}
Algunas superficies siempre se dibujan en la parte superior del orden z gráfico, incluido el cursor del mouse, los subtítulos y [teletipos desplazables](docId:2PWSmk6GFbdKC8rtFzKfj).
:::

:::hint{type="success"}
**Consejo**
Puede usar los métodos `PauseGraphics()`/ `ResumeGraphics()` en el objeto [roVideoMode](docId\:f0DvNrbDpvGOzlRVB29gd) para garantizar que múltiples cambios en el orden z gráfico ocurran simultáneamente.
:::

### Lower() As Void

Envía el widget a la parte inferior del orden z en el plano gráfico (es decir, detrás de todas las demás superficies que implementan la interfaz *ifWidget*). De forma predeterminada, los nuevos widgets se colocan en la parte superior del orden z gráfico.

### SetRectangle(r As roRectangle) As Boolean

Cambia el tamaño y la posición del rectángulo del widget utilizando el objeto *roRectangle*.

### SetLayer(content As Object, z-level As Integer) As Boolean

Establece el contenido de una capa dentro del widget. El nivel z más bajo se dibuja primero y el nivel z más alto se dibuja al final. El contenido del objeto se describe a continuación.

### ClearLayer(z-level As Integer) As Boolean

Borra la capa especificada.

### Clear() As Boolean

Borra todas las capas

### EnableAutoRedraw(enable As Boolean) As Boolean

Habilita o deshabilita el redibujado automático del widget.

- Cuando esta función está habilitada, cada llamada a SetLayer, ClearLayer o Clear produce un redibujado. Si necesita cambiar múltiples capas, entonces debe deshabilitar el redibujado automático mientras llama a la función SetLayer.
- SetLayer habilita o deshabilita el redibujado del widget cuando cambia el contenido de la capa. Cuando el redibujado automático está habilitado, cada llamada a SetLayer, ClearLayer o Clear produce un redibujado. Para agrupar múltiples actualizaciones, primero debe suspender el dibujo usando EnableAutoRedraw(false), luego realizar los cambios en el contenido y finalmente volver a habilitar el dibujo usando EnableAutoRedraw(true). El redibujado ocurre en un hilo separado, por lo que EnableAutoRedraw retorna casi inmediatamente.

## Contenido del objeto

El contenido especificado en cada capa puede consistir en uno o más objetos. Cada objeto se define mediante un roAssociativeArray. Si hay más de un objeto, entonces cada uno se coloca en un roArray antes de pasarlo al método `SetLayer()` Actualmente, hay cuatro tipos de objetos. 

### Color de fondo

- `color`: El valor hexadecimal #\[aa]rrggbb del color de fondo
- `targetRect`: Un rectángulo de destino, que es otro *roAssociativeArray* compuesto por valores x, y, w y h. Estos valores son relativos a la esquina superior izquierda del widget.

### Texto

- `texto`: Una cadena de texto para mostrar
- `targetRect`: El rectángulo en el que se muestra el texto
- `textAttrs`: Un *roAssociativeArray* que contiene atributos para aplicar al texto. Los atributos pueden ser cualquiera de los siguientes:
  - `fuente`: Una cadena que indica si el texto debe mostrarse como "small"/"medium"/"large"/"huge"
  - `tamaño de fuente`: Un tamaño en puntos que se utiliza directamente al crear la fuente. Si el valor se establece en 0, la fuente cambia automáticamente de tamaño para ajustarse al targetRect.
  - `archivo de fuente`: El nombre de archivo de una fuente no perteneciente al sistema para usar
  - `hAlign`: Una cadena que indica la alineación "left"/"center"/"right" del texto en una línea
  - `vAlign`: Una cadena que indica la alineación "top"/"center"/"bottom" del texto perpendicular a la línea
  - `rotación`: Una cadena que indica la rotación de "0"/'90"/"180"/"270" grados del texto
  - `color`: El valor hexadecimal #\[aa]rrggbb del texto

### Imagen

- `nombre de archivo`: El nombre de archivo de la imagen
- `encryptionalgorithm`: El algoritmo de cifrado del archivo. Actualmente las opciones son "AesCtr" y "AesCtrHmac".
- `encryptionkey`: La clave para descifrar el archivo de imagen. Esta es una matriz de bytes compuesta por 128 bits de clave, seguidos de 128 bits de IV.

:::hint{type="info"}
Consulte [Descifrado de imágenes](docId\:z65qEZ0xwq9C70OBEgcYI) para obtener detalles sobre cómo mostrar imágenes cifradas.
:::

- `targetRect`: El rectángulo en el que se muestra la imagen. La imagen cambiará automáticamente de tamaño para ajustarse al área de destino.
- `sourceRect`: El rectángulo de origen para recortar desde una imagen fuente
- `modo de composición`: Introduzca source o source\_over. Este último mezcla alfa con los objetos subyacentes. El primero reemplaza completamente los valores subyacentes.
- `imgAttrs`: Un *roAssociativeArray* que contiene atributos para aplicar a la imagen:
  - `rotación`: Una cadena que indica la rotación de "0"/'90"/"180"/"270" grados de la imagen

### Códigos QR

Los códigos QR (quick response) aparecen como cuadrados de puntos negros sobre un fondo blanco. Se utilizan para codificar URL, direcciones de correo electrónico, etc., y pueden escanearse utilizando software fácilmente disponible para teléfonos inteligentes. Aunque los códigos normalmente aparecen como negro sobre blanco, en teoría puede utilizar cualquier par de colores contrastantes.

- `targetRect`: El rectángulo en el que se muestra el código QR. Independientemente de la relación de aspecto de este rectángulo, el propio código QR siempre será cuadrado con el color de fondo que rellena los espacios.
- `Código QR` (forma simple): Contiene la cadena que se codificará en el código QR.
- `Código QR` (forma compleja): Contiene una matriz de parámetros para el código QR. Los parámetros pueden ser cualquiera de los siguientes:
  - `color`: El color de primer plano en el código QR (el valor predeterminado es negro)
  - `backgroundColor`: El color de fondo en el código QR (el valor predeterminado es blanco)
  - `rotación`: Una cadena que indica la rotación del código en grados "0"/"90"/"180"/"270". El código se escaneará independientemente de la rotación.
  - `qrText`: Contiene el texto que se codificará en el código QR.

## Ejemplo

Este código contiene la mayoría de las funciones de *roCanvasWidget* descritas anteriormente:

```text
rect=CreateObject("roRectangle", 0, 0, 1920, 1080)
cw=CreateObject("roCanvasWidget", rect)

aa=CreateObject("roAssociativeArray")
aa["text"] = "Primal Scream"
aa["targetRect"] = { x: 280, y: 180, w: 500, h: 30 }
aa["textAttrs"] = { Color:"#AAAAAA", font:"Medium", HAlign:"Left", VAlign:"Top"}

aa1=CreateObject("roAssociativeArray")
aa1["text"] = "Movin' on up, followed by something else, followed by something else, followed by something else, followed by something else"
aa1["targetRect"] = { x: 282, y: 215, w: 80, h: 500 }
aa1["textAttrs"] = { Color:"#ffffff", font:"Large", fontfile:"usb1:/GiddyupStd.otf", HAlign:"Left", VAlign:"Top", rotation:"90"}

array=CreateObject("roArray", 10, false)
array.Push({ color: "5c5d5f" })
array.Push({ filename: "transparent-balls.png" })
array.Push(aa)

aa2=CreateObject("roAssociativeArray")
aa2["filename"] = "transparent-balls.png"
aa2["CompositionMode"] = "source_over"
aa2["targetRect"] = { x: 400, y: 200, w: 200, h: 200 }

aa3=CreateObject("roAssociativeArray")
aa3["QrCode"] = "www.brightsign.biz"
aa3["targetRect"] = { x: 100,  y: 100,  w: 400, h: 400  }

aa4=CreateObject("roAssociativeArray")
aa4["QrCode"] = { qrText:"www.brightsign.biz", rotation:"90" }
aa4["targetRect"] = { x: 1200,  y: 100,  w: 400, h: 600  }

aa5=CreateObject("roAssociativeArray")
aa5["QrCode"] = { color:"#964969", backgroundColor:"#FFFF77", qrText:"www.brightsign.biz", rotation:"180" }
aa5["targetRect"] = { x: 100,  y: 600,  w: 400, h: 400  }

cw.Show()
cw.EnableAutoRedraw(0)
cw.SetLayer(array, 0)
cw.SetLayer(aa1, 1)
cw.SetLayer(aa1, 2)
cw.SetLayer(aa3, 3)
cw.SetLayer(aa4, 4)
cw.SetLayer(aa5, 5)
cw.EnableAutoRedraw(1)

cw.ClearLayer(0) 
```

##