Salvando imagens com JavaFX

For english readers: Sorry, i don’t have an english version. The original idiom is Portuguese.


Rakesh Menon postou em seu blog hoje(22/07) sobre como salvar imagens no computador por causa de uma dúvida em fórum da Sun sobre JavaFX.

Com um código em torno de 10 linhas, com direito a JFileChooser😀, ele mostrava como salvar uma imagem mostrada em um… Applet!
Mas a surpresa maior não é essa. O que mais surpreende é o fato da função criada salvar elementos do tipo Node, uma classe semelhante a Component de java.awt.
Lembrando que o Node não representa só elementos de Interface(botões, campos de texto), mas qualquer coisa que estiver em um Scene(Semelhante a JFrame do JavaSwing…).
Após conhecer esta funcionalidade, é normal que você queria colocar em prática.
Bem, vou falar do Sketch.
O Sketch é um aplicativo semelhante ao paint do Windows, que permite que você faça desenhos, escolhendo a cor. Ainda pode ser visto em Full Screen, além de permitir a escolha da grossura da linha de desenho.
Também tem uma funcionalidade visual que é o “replay”, onde ele refaz tudo que você tinha desenhado, nos mesmo passos que você…
Mas ele não permite salvar, você desenha, fecha o navegador e acabou!
O Sketch:

Sketch

Sketch

Unindo o útil ao agradável:
A idéia foi salvar o que era desenhado no Sketch como imagem no seu HD.
Precisavamos alterar o Sketch, fizemos isso adicionando um novo botão:

Sketch com o botão Salvar

Sketch com o botão Salvar

Depois adaptamos a função de salvar que Rakesh Menon implementou para ser usada no Sketch.

Falando de código!
O primeiro passo foi entender o código do Sketch para verificar se era viável a alteração, e era!
Perceba que as linhas desenhadas ficam em um Node, chamado Lines, ele contém tudo que é desenhado, observe que simplesmente temos que salvar esse Node para conseguir o que queremos.
Vamos ao que foi feito:
Primeiro, colocar o novo botão:
Foi trivial! Se observar o código, você verá que na barra de botões ele usa uma dupla retangulo + texto, ou seja, ele monta botões. Como todo mundo ae é Node(herda de node), logo ele tem os mesmo listeners que um Node, então podemos utilizar como botão!
Observe a inclusão:
Group {
content: [
Rectangle {
width: 79 height: 30
fill: Color.web("#CCCCCC")
stroke: Color.web("#BBBBBB")
}
Text {
translateX: 8
translateY: 20
content: bind if (stage.fullScreen) then " Normal " else "Full Screen"
}
]
onMouseClicked: toggleFullscreen
}
/*
Inclusion
@William Antônio
Adding a button to save the Sketch
*/
Group {
content: [
Rectangle {
width: 43 height: 30
fill: Color.web("#CCCCCC")
stroke: Color.web("#BBBBBB")
}
Text {
translateX: 8
translateY: 20
content: "Save"
}
]
onMouseClicked: save
}

Mas agora precisamos dar a ação de salvar para nosso botão, para isso usamos as funções de Utilities, propostas por Rakesh.

Então, utilizamos importamos o Utilities e fazemos uma função que irá salvar nossas linha como uma imagem. A função ficou assim:

function save(e:MouseEvent):Void{
if (jFileChooser.showSaveDialog(Utilities.getContainer()) == JFileChooser.APPROVE_OPTION) {
Utilities.saveAsImage(lines, jFileChooser.getSelectedFile());
}
}

Lembrando que você deverá ter ma variável do tipo JFileChooser, assim o usuário pode escolher onde Salvar a imagem.

Temos um problema, o JFileChooser não está filtrado, então ele salvará a imagem sem extensão, para visualizar você deve editar no nome da imagem e colocar a extensão “.png”.

2 Respostas

  1. Pergunta Noob: Já viu aquela app de orkut chamada Ortist?? Creio que seja feita assim. abraço

  2. muito intereçante este artigo anterior ao jfx2 =)

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: