UD02A02 - Lienzo

Enunciado de la tarea: “Lienzo de pintar”

Objetivo:
Desarrollar una aplicación en JavaFX que permita pintar sobre una cuadrícula utilizando uno de los cuatro colores disponibles. La interfaz tendrá dos zonas:

1. Zona superior
• Un título: “lienzo de pintar”.
• Cuatro botones de color (rojo, verde, azul, amarillo).
• Al seleccionar un color:
• El botón seleccionado mostrará un borde gris.
• El resto de botones perderán su borde (si lo tenían).
• Ese color pasa a ser el color activo de pintura.
2. Zona inferior
• Una cuadrícula de 100 x 100 celdas.
• Al mantener pulsado el ratón y pasar por encima de las celdas, estas se pintarán con el color seleccionado.

Requisitos técnicos:

• Usar JavaFX con un layout que permita estructurar la interfaz del siguinte modo:
•  

• La cuadrícula puede implementarse con GridPane y celdas como Rectangle.
• Controlar el estado de “pintando” con eventos de ratón (pressed / released / entered).
• Reflejar visualmente el color seleccionado con un borde gris solo en el botón activo.

Características visuales y de disposición:

• Título de la ventana: "Lienzo de pintar".
• Tamaño de la escena: 820 × 760 píxeles.
• Contenedor raíz:
• Alignment: Pos.TOP_CENTER (hijos centrados horizontalmente y pegados arriba)
• Spacing: 12 px
• Padding: Insets(16, 16, 16, 16)
• Background: #f7f9fc con esquinas redondeadas CornerRadii(8)
• Título:
• Texto: "lienzo de pintar"
• Font size: 20px
• Font weight: bold
• Color de texto: #1f3a5f
• Margen: No se define
• Barra de colores
• Alignment: Pos.CENTER
• Spacing: 10 px
• Padding: No definido
• Background / Border: No definido
• Botones de color
• Tamaño preferido: 90 × 32 px.
• Tipografía: bold.
• Borde visible solo en el seleccionado (gris, 3px, radio 6). Los no seleccionados: borde transparente.
• Background: el color representado
• Text fill: blanco o negro (el que proporcione más contraste)
• Lienzo
• Espacio entre columnas: 0
• Espacio entre filas: 0
• Padding: Insets(10, 10, 10, 10)
• Grid lines: false (no se muestran)
• Background: No definido
• Border: No definido
• Celdas
• Tipo: Rectangle
• Width / Height: 6 × 6 px
• Fill (color inicial): Color.WHITE
• Stroke (borde): null

Extra (opcional):

• Añadir un botón “Borrar” que ponga todas las celdas en blanco.