Desenhando livremente com Canvas e o ColorPicker

Mostramos como desenhar formas geométricas com as classes que herdam de Shape. Essas formas, no entanto, ficam como nós separados no JavaFX. Como faremos se quisermos somente desenhar formas geométricas, textos e outras coisas livremente? Para isso temos o Canvas, uma classe muito interessante para desenharmos livremente!

Canvas

O canvas é simplesmente um nó que representa uma área para desenhar. Isso mesmo, nada mais do que isso. A mágica acontece com  a class GraphicContext, que pode ser adquirida assim que criamos um Canvas. Com o GraphicContext você pode desenhar formas geométricas, textos, imagens, mudar cor, aplicar efeito, etc. Veja um exemplo:



E para gerar isso usamos o seguinte código:

// O construtor do Canvas recebe a largura e a altura
Canvas canvas = new Canvas(300, 300);
// O objeto principal do Canvas é o GraphicsContext, que usamos para desenhar
GraphicsContext ctx = canvas.getGraphicsContext2D();
// estamos prontos para desenhar coisas! Vamos começar mudando a cor
ctx.setFill(Color.RED);
// podemos configurar uma fonte para os textos
ctx.setFont(Font.font("Serif", FontWeight.BOLD, 25));
// desenhando um texto, o primeiro param é o texto, os seguintes são a pos X e Y
ctx.fillText("Olá Mundo Canvas", 15, 30);
// podemos configurar efeitos e novamente trocar a cor
ctx.setFill(Color.BLUE);
ctx.setEffect(new BoxBlur());
ctx.fillText("Olá Mundo Canvas", 15, 60);
// agora vamos trocar o efeito, cor e desenhar um retângulo(x,y, largura, altura)
ctx.setEffect(new Reflection());
ctx.setFill(Color.AQUA);
ctx.fillRect(15, 90, 240, 20);
// ou um retângulo sem preenchimento
ctx.setStroke(Color.GREEN);
ctx.strokeRect(15, 135, 240, 30);
// ou circulos (forma oval)
ctx.setEffect(null);
ctx.setFill(Color.BROWN);
ctx.fillOval(15, 175, 90, 25);
ctx.setStroke(Color.YELLOWGREEN);
// ou formas ovais sem preenchimento
ctx.strokeOval(160, 175, 90, 25);
// ou até desenhar uns poligonos locos, usando diversos pontos X e Y
double xs[] = {15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180, 195, 210, 225, 240, 255, 270};
double ys[] = {205, 235, 250, 265, 205, 235, 205, 205, 235, 250, 265, 205, 235, 205, 205, 235, 250, 205};
ctx.setFill(Color.MAGENTA);
ctx.setEffect(new Reflection());
ctx.fillPolygon(xs, ys, 18);

Nesse momento, você deve estar se perguntando qual é a diferença do Canvas para uma aplicação JavaFX comum, já que podemos fazer tudo isso no JavaFX. Bem, o Canvas é uma tela de desenho, é ótimo para animações, jogos ou visualizações fantásticas. Já uma aplicação JavaFX, temos como maior objetivo objetos que se aninham hierarquicamente e são, no geral, estáticos, como essa página WEB. Desenhar essa página com o Canvas seria um buta dor de cabeça, já usar controles e outras características do JavaFX torna o serviço muito mais fácil.

Um mini paint com canvas

Nesse momento, já temos nossa missão cumprida! Pois apresentamos o componente que queríamos... No entanto, criamos uma aplicação um pouco mais complexa para demonstrar o poder desse componente: um micro paint. Vejam abaixo como é o nosso "paint":

Trocando de cor

Um controle até agora não abordado, mas que foi adicionado no Java 8, é o ColorPicker. Ele é um controle que herda de nó e pode ser adicionada à cena da aplicação e o objetivo é permitir o usuário escolher uma cor em uma paleta de cores! Assim, quando o usuário escolhe a cor, temos a chamada de um método onAction com e o valor do componente muda, podemos assim saber a cor escolhida. Veja o código completo no github.

Conclusão

Não julgue o Canvas só por essa postagem, ele é um dos componentes mais poderosos do JavaFX!
* Código no Github