Les Images dans JavaFX (partie 1)

Les images en JavaFX sont présentées en utilisant "javafx.scene.image.Image", Cette classe sert a charger une image à partir d'un URL. La variable "url" désigne le URL de l'image. Pour ajouter une image dans une Scene, il faut l'envelopper dans une classe "ImageView"

On peut :

• Modifier les dimensions d'une image en gardant ou non l'aspect ratio
• Utiliser un filtre, en privilégiant la vitesse ou la qualité
• Utiliser la même image dans différentes ImageView
• Charger l'image en arrière plan
• Afficher une vignette pendant le téléchargement

Note :
Dans une Scene on peut uniquement insérer des nœuds (nodes).
ImageView est un nœud, une sorte d'adaptateur, permettant d'insérer une image dans une Scene.

Note:
l'URL de image peut-être spécifier sous forme d'un URL complet, vers une ressource sur l'Internet, sur le disque dur, ou sous forme d'un chemin relatif. Il est pratique dans ce dernier cas d'utiliser la variable prédéfinie "__DIR__" pointant vers des classes compilées JavaFX, en mettant le/les images avec des classes compilées.

Attention !!!
En mettant le/les images avec des classes, il faut faire attention à ne pas les supprimer, en appelant "Clean Build Project". Pour éviter cela, il suffit de mettre le/les images avec les sources ".fx", NetBeans se charge de les transférer vers le dossier des classes compilées.


Insérer une image dans NetBeans
Un clic sur la palette -> Image (dans Basic Shapes) -> glissez tout en gardant le bouton de la souris vers un fichier .fx -> "Main.fx"



Des messages d'erreurs !

C'est normal. Un clic droit -> Fix Imports



Exemple :
L'url de image est un url local

/*
* Main.fx
*
* Created on Apr 9, 2009, 8:09:12 PM
*/

package javafximages;


import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.Scene;
import javafx.stage.Stage;


/**
* @author Kaesar ALNIJRES
*/

Stage {
title: "Tester des images"
width: 400
height: 400
scene: Scene {
content:
{
ImageView {
image: Image {
url: "file:///home/kas/java-logo.png"
}
}

}
}



}

Exemple :
L'URL de l'image est un chemin relatif (l'image est avec les classes compilées)

/*
* Main.fx
*
* Created on Apr 9, 2009, 8:09:12 PM
*/

package javafximages;


import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.Scene;
import javafx.stage.Stage;


/**
* @author Kaesar ALNIJRES
*/

Stage {
title: "Tester des images"
width: 400
height: 400
scene: Scene {
content:
{
ImageView {
image: Image {
url: "{__DIR__}java-logo.png"
}
}


}
}



}

Modifier les dimensions d'une image
Il est possible de redimensionner une image en changeant son hauteur, largeur, ou les deux en préservant ou non l'aspect ratio de l'image

Note :
Redimensionner une image en modifiant ses attributs width ou height ou les deux au niveau de la classe Image est une opération de "prescaling" effectuée pendant le téléchargement de l'image. En comparaison avec le changement de dimensions au niveau d'ImageView les calculs sont effectués une seul fois.



Exemple :
Modifier la largeur d'une image en demandant à JavaFX de modifier son hauteur pour garder le même aspect ratio de l'image

/*
* Main.fx
*
* Created on Apr 9, 2009, 8:09:12 PM
*/

package javafximages;


import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.Scene;
import javafx.stage.Stage;


/**
* @author Kaesar ALNIJRES
*/

Stage {
title: "Tester des images"
width: 400
height: 400
scene: Scene {
content:
{
ImageView {
image: Image {
url: "{__DIR__}java-logo.png"
width:100
preserveRatio: true

}
}


}
}



}

Privilégier la qualité ou la vitesse pour modifier les dimensions
smooth: true permet d'avoir une meilleure qualité en sacrifiant la vitesse et vice-versa

Exemple

package javafximages;

/*
* Main.fx
*
* Created on Apr 9, 2009, 8:09:12 PM
*/



import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.Scene;
import javafx.stage.Stage;


/**
* @author Kaesar ALNIJRES
*/

Stage {
title: "Tester des images"
width: 400
height: 400
scene: Scene {
content:
{
ImageView {
image: Image {
url: "{__DIR__}java-logo.png"
width:100
preserveRatio: true
smooth: true //meilleure qualité

}
}


}
}



}

Télécharger une image en arrière plan
Il est possible de télécharger une image en arrière plan, afficher une vignette pendant ce téléchargement et avoir le pourcentage de la progression du téléchargement.

Attention !!!
Apparemment un bug bloque tout avant le téléchargement complet de l'image sur les plateformes Linux. L'exemple ici se compile sans problème, mais n'affiche rien dans l'attente de l'image !!! (mon système Fedora 10)

backgroundLoading: true //oui télécharge l'image en arrière plan (par défaut false)
progress le pourcentage du téléchargement
placeholder l'image affichée pendant le téléchargement (si backgroundLoading: true)


Exemple :

/*
* test3.fx
*
* Created on Apr 18, 2009, 5:26:30 PM
*/

package javafximages;

import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.ext.swing.SwingSlider;

/**
* @author Kaesar ALNIJRES
*/


var img= Image {
url: "file:///home/kas/java-logo.png"
backgroundLoading: true
height:600
preserveRatio:true
placeholder: Image {
url: "file:///home/kas/clock_48.png"

}}

var iv=ImageView {
image: img
//fitHeight:600
}
Stage {
title: "Télécharger l'image en arrière plan"
width: 800
height: 800
scene: Scene {
content:
[
VBox{
content:[iv]


}
]
}




}
// Utiliser bind pour afficher le pourcentage du téléchargement
var progress = bind iv.image.progress on replace {
println("Téléchargement {progress}%");
}

ImageView
Cette classe permet d'incorporer une image dans la Scene. Elle permet aussi de redimensionner l'image, l'associer à une viewport, etc.

Positionnez une image
L'image étant à l'intérieur d'une ImageView (ImageView hérite de javafx.scene.Node). Il est possible d'utiliser ses coordonnées x et y pour positionner l'image, selon les axes x et y.


Exemple :

/*
* Main.fx
*
* Created on Apr 9, 2009, 8:09:12 PM
*/

package javafximages;


import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.Scene;
import javafx.stage.Stage;


/**
* @author Kaesar ALNIJRES
*/

Stage {
title: "Tester des images"
width: 400
height: 400
scene: Scene {
content:
{
ImageView {
x:200
y:100
image: Image {
url: "{__DIR__}java-logo.png"
width:100
preserveRatio: true


}
}


}
}


}



Afficher la même image par plusieurs ImageView
L'image est téléchargée une seule fois. Et si on utilise le prescaling elle est redimensionnée une seule fois.

Exemple :
Voyez plus loin un exemple optimisé

/*
* Main.fx
*
* Created on Apr 9, 2009, 8:09:12 PM
*/

package javafximages;


import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.Scene;
import javafx.stage.Stage;


/**
* @author Kaesar ALNIJRES
*/
var img=Image {
url: "{__DIR__}java-logo.png"
width:100
preserveRatio: true


}

var iv0=ImageView {

image:img
}

var iv1=ImageView {

image:img
}

var iv2=ImageView {

image:img
}

Stage {
title: "Tester des images"
width: 400
height: 400
scene: Scene {
content:
{
HBox{
content:
[iv0,iv1,iv2]
}



}
}



}



Exemple :

/*
* Main.fx
*
* Created on Apr 9, 2009, 8:09:12 PM
*/

package javafximages;


import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.Scene;
import javafx.stage.Stage;


/**
* @author Kaesar ALNIJRES
*/
var vignette=Image{
url:"{__DIR__}clock.png"
}

var img=Image {
url: "{__DIR__}java-logo.png"
width:100
preserveRatio: true
backgroundLoading:true
placeholder:vignette


}


def iv=for (i in [1..5])

ImageView
{
image:img
}

/*
=====ou========
var iv: ImageView[];

for(i in [1..5])
{
def imageView = ImageView
{
image:img
}
insert imageView into iv;
}
============
*/

Stage {
title: "Tester des images"
width: 400
height: 400
scene: Scene {
content:
[HBox{
content:
[iv]
}
]


}
}