# Whiteboard

> Captura de dibujo libre — firma, garabato — con color y grosor de lápiz.

Source: https://crossfly.dev/es/docs/ui/images-and-graphics/whiteboard — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# Whiteboard

`Whiteboard` es un área de **dibujo libre con el dedo/ratón** — el caso clásico es la **captura de
firma**. Ya gestiona los eventos táctiles y acumula los trazos internamente.

## Ejemplo completo (copiar, pegar y ejecutar)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.image.*;       // Image

/** Pantalla principal ejecutable. Apunta el launcher (classname) y corre: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // Área de firma ocupando el espacio restante (LAY_FILL).
      Whiteboard board = new Whiteboard();
      board.setPenColor(0xFF000000);   // lápiz negro
      board.thick = true;              // trazo grueso
      add(LAY_FILL, board);

      // Botón para borrar el dibujo.
      Button limpar = new Button("Limpar");
      limpar.onAction(c -> board.clear());
      add(LAY_AUTO, limpar);

      // Botón para capturar el dibujo como imagen (ej.: para persistir).
      Button salvar = new Button("Salvar");
      salvar.onAction(c -> {
         Image img = board.getImage();   // el dibujo actual como Image (puede ser null si está vacío)
         // … persistir img (ej.: PNG) …
      });
      add(LAY_AUTO, salvar);
   }
}
```
> Los fragmentos siguientes muestran **solo el núcleo** (lo que va dentro de `onShow()`). Para ejecutarlos, colócalos en el esqueleto `MainWindow` de arriba.

## Uso básico (firma)
```java
Whiteboard assinatura = new Whiteboard();
assinatura.setPenColor(0xFF000000);   // lápiz negro
assinatura.thick = true;              // trazo grueso
painel.add(0.5f, assinatura);         // 50% de la altura

Button limpar = new Button("Limpar");
limpar.onAction(c -> assinatura.clear());

Button salvar = new Button("Salvar");
salvar.onAction(c -> {
   Image img = assinatura.getImage();   // el dibujo como imagen
   // … persistir img (ej.: PNG) …
});
```

## API
| Miembro | Efecto |
|---|---|
| `setPenColor(int)` / `getPenColor()` | color del lápiz (ARGB) |
| `thick` (campo `boolean`) | `true` = trazo grueso |
| `clear()` | borra todo |
| `getImage()` | devuelve el dibujo actual como `Image` |
| `setImage(Image)` | carga una imagen base (lanza `ImageException`) |

## Buenas prácticas
- Da **altura generosa** (fracción del contenedor o `autoHeight`) — la firma necesita espacio.
- Ofrece siempre un botón **Limpiar**.
- Al guardar, usa `getImage()` y gestiona excepciones al convertir/persistir.

## Errores comunes
- Área demasiado pequeña → firma ilegible.
- Olvidar que `setImage(Image)` lanza `ImageException` (comprobada).
- Confundir con `ImageView` (solo muestra) — `Whiteboard` **captura** dibujo.

## Ver también
- [Imágenes](/docs/ui/images-and-graphics/images) · [Dibujo personalizado](/docs/ui/images-and-graphics/custom-drawing)
- Catálogo: [Whiteboard](/docs/ui/widgets/whiteboard) · Referencia: Capítulo 18 — Imágenes