Java2D

JAVA 2D

A. DAAIFENSET Université Hassan II

Mohammedia-Casablanca

aziz@daaif.net

Java 2D C’est quoi ?

API Java qui permet aux application :De créer ou d’ouvrir des images

existantes.D’appliquer une ou plusieurs

transformations aux images. D’afficher, imprimer ou enregistrer

les images.

Java 2D C’est quoi ?

Tracer des lignes, des rectangles et toute autre forme géométrique.

Remplir les formes avec des couleurs ou des dégradés et des textures.

Dessiner le texte avec des options pour un contrôle précis de la police et le processus de rendu.

Dessiner des images, éventuellement en appliquant des opérations de filtrage.

Appliquer des opérations telles que la composition et la transformation.

Java 2D – Coordonnées

Java 2D Maintient deux systèmes de coordonnées : Coordonnées Utilisateur Coordonnées du Périphérique (Ecran,

imprimante)

Les coordonnées utilisateur sont indépendantes du périphérique utilisé.

Java 2D – Rendu graphique

Modèle de rendu uniforme quelque soit la cible.

Un composant qui veut s’afficher appelle sa méthode « paint() » ou « update » qui utilise selon le contexte un objet « Graphics » approprié.

« Graphics » ou « Graphics2D » présentent des méthodes de deux familles : Méthodes pour dessiner des figures (drawLine,

drawImage, fill…) Méthodes qui affectent le rendu du dessin.

(Configuration du contexte, transformations, …)

Java 2D – Dessiner sur quoi ?

On peut dessiner sur la plupart des composants de l’interface graphique.

Il suffit d’étendre la classe du composant, puis de redéfinir la méthode « paint() »

Par exemple : JFrame JPanel JButton Canvas

Java 2D - Utilisation

Le composant doit redéfinir la méthode « paint() » et caster l’objet « Graphics » :

public void paint (Graphics g) { Graphics2D g2 = (Graphics2D) g; // utiliser les méthodes de l’objet// g2 pour configurer le contexte// puis dessiner.

}

Java 2D – Méthodes de dessin

Pour les contours :drawLine()drawRect()drawRoundRect()drawOval()drawPolyLine()drawPolygon()drawArc()drawString()…

Java 2D – Méthodes de dessin

Pour le remplissage, au lieu de « draw », remplacer par « fill »

Pour dessiner une image, on utilise la méthode « drawImage() »Dans toutes les surcharge de

cette méthode, un paramètre de type « Image » ou un de ses descendants est requis. En général « BufferedImage ».

Java 2D – Avant de dessiner

Régler d’abord le contexte du rendu. Il existe plusieurs options :

Le contour (Stroke) Le remplissage (Fill) Superposition d’objets (Compositing) Les transformations (Transform) Les masques (Clipping) Les fonts (police, taille, …) La qualité du rendu (Antialiasing)

Java 2D – Contexte de rendu

Attributs du Contour (Stroke) :Epaisseur Couleur Style (motifs de tirets)Style de jointure de lignesStyle d’extrémité

Java 2D – Contexte de rendu

Attributs du Contour (Stroke) :public void paint (Graphics g)

{ Graphics2D g2 = (Graphics2D) g; // Régler la couleur du crayon

g2d.setColor(Color.RED);// Régler l’épaisseur du crayon g2d.setStroke(new BasicStroke(6f));// dessiner un rectangleg2d.drawRect(10,10,160,120);

}

Voici un crayon plus complexe :static final float dash[] = { 2f, 2f, 8f, 2f };

static final BasicStroke dashed =

new BasicStroke(1.0f, BasicStroke.CAP_BUTT,

BasicStroke.JOIN_MITER, 10.0f, dash, 0.0f);

Java 2D – Contexte de rendu

Les attributs du remplissage (Fill) : Couleur uniforme

Même couleur que celle du contour ! Dégradé de couleur

Dégradé linéaire de deux couleurs Motif de remplissage

On utilise une image comme motif de remplissage

Le remplissage est assuré par les méthodes « fillXxx() » Ex. g2g.fillRect(20,20,60,60);

Java 2D – Contexte de rendu Remplissage uniforme :

public void paint (Graphics g) { Graphics2D g2 = (Graphics2D) g;

// Régler la couleur de crayong2d.setColor(Color.RED);// Régler l’épaisseur du crayon g2d.setStroke(new BasicStroke(6f));// dessiner un rectangleg2d.drawRect(10,10,160,120);// Régler la couleur de remplissageg2d.setColor(new Color(1f,1f,0f));// Remplir le rectangleg2d.fillRect(10,10,160,120); // Inverser l’appel de fill et

// draw donnera ???}

Java 2D – Contexte de rendu Remplissage avec dégradé :

public void paint (Graphics g) { Graphics2D g2 = (Graphics2D) g;// Création du dégradé

GradientPaint gp = new GradientPaint (60f,0f, Color.GREEN, 160f,0f,

Color.YELLOW); // Configuration du pinceau g2d.setPaint(gp);

// Remplir le rectangleg2d.fillRect(10,10,160,120);g2d.setColor(Color.BLACK); g2d.setStroke(new BasicStroke(1f));g2d.drawRect(10,10,160,120);

}

Java 2D – Contexte de rendu Attribut de superposition

(Compositing) Détermine comment les nouveaux pixels

sont combinés avec les anciens. On utilise la méthode « setComposite() »

avec 1 paramètre de type « AlphaComposite »

A chaque fois qu’on dessine dans l’image, les pixels du nouveau objet sont combinés avec ceux déjà existant.

L’objet passé à la méthode « setComposite() » est obtenu par :

AlphaComposite.getInstance(int rule)

Java 2D – Contexte de rendu

Compositing. Valeurs de « rule »

AlphaComposite.SRC_OVER

AlphaComposite.SRC_IN

AlphaComposite.SRC_OUT

AlphaComposite.DST_OVER

AlphaComposite.DST_OUT

…

Java 2D – Contexte de rendu

Attributs de Transformations Les transformation sont appliquées

durant le passage des coordonnées Utilisateur aux coordonnées du Périphérique.

Elles sont de quatre de types : Translation Rotation Mise à l’échelle (Scaling) Cisaillement (Shearing)

Java 2D – Contexte de rendu

Attributs de TransformationsAffineTransform exAt = g2d.getTransform();g2d.setColor(Color.BLACK);g2d.drawRect(60, 60, 100, 80);AffineTransform at =

AffineTransform.getTranslateInstance(20,20);g2d.setTransform(at);g2d.drawRect(60, 60, 100, 80);at = AffineTransform.getRotateInstance(Math.PI/4,

110, 100);g2d.setTransform(at);g2d.drawRect(60, 60, 100, 80);at = AffineTransform.getScaleInstance(1.2, 1.2);g2d.setTransform(at);g2d.drawRect(60, 60, 100, 80);G2d.setTransform(exAt);

Java 2D – Contexte de rendu

Attributs de « Clipping » Permet de définir à l’aide d’une figure la

zone qui sera touchée par le rendu. L’inverse de cette zone constitue le

masque.

Rectangle rect = new Rectangle(100,50,100,50);g2d.setClip(rect);g2d.setColor(Color.ORANGE);g2d.fillOval(50, 50, 100, 100);g2d.setColor(Color.BLACK);g2d.setClip(null);g2d.drawOval(50, 50, 100, 100);

Java 2D – Contexte de rendu

Améliorer la qualité du rendu en supprimant le crénelage.

public void paint (graphics g){ Graphics2D g2 = (Graphics2D)g; RenderingHints rh = new RenderingHints(

RenderingHints.KEY_TEXT_ANTIALIASING,

RenderingHints.VALUE_TEXT_ANTIALIAS_ON);g2.setRenderingHints(rh); // ...

}

Java 2D – Dessin avancé

Permet de créer des chemins (paths) à base de lignes, de quadratique et cubiques de Bezier.

Créer d’abord un objet de type « GeneralPath » Utiliser ses méthodes pour créer le chemin :

moveTo() // déplacer le crayon lineTo() // tracer une ligne jusqu’à quadTo() // courbe quadratique (2 pts et 1 pt de contrôle) curveTo() // courbe de Bezier ( 2 pts et 2 pts de contrôle) closePath() // fermer le chemin

Dessiner le chemin g2d.draw(path)

Remplir le chemin g2d.fill(path)

Le chemin peut être utilisé pour d’autres opérations comme le « clipping » par exemple

setClip(path)

Java 2D – Dessin avancé

Exemple de chemin libre :

GeneralPath gp = new GeneralPath();gp.moveTo(60, 60);gp.lineTo(160, 60);gp.quadTo(320, 120, 160, 160);gp.closePath();g2d.setColor(Color.CYAN);g2d.fill(gp);g2d.setClip(gp);g2d.setColor(Color.ORANGE);g2d.fillRect(0, 90, 400, 20);g2d.setColor(Color.BLACK);g2d.draw(gp);

Java 2D – Les images

Les opérations de base sur les images consistent en :1. Chargement d’images à partir

des fichiers (Jpg, gif, png, bmp)

2. Création d’image en mémoire

3. Manipulations et affichage d’une image sur une surface

4. Enregistrement des images dans des fichiers.

Java 2D – Les images

Pour l’ouverture et l’enregistrement (1-4) des images, on utilise la classe « ImageIO ».

Pour la création et la manipulation (2-3) des images, on utilise les classes « Image » et sa sous-classe « BufferedImage » Pour dessiner, transformer, …, on utilise

l’objet « Graphics » associé à l’une de ces classes.

Java 2D – Les images

Charger une image :

BufferedImage img = null; try {

img = ImageIO.read(new File("image.jpg")

); } catch (IOException e) {

e.printStackTrace();}

Java 2D – Les images

Afficher une image :

public void paint (graphics g){ Graphics2D g2 = (Graphics2D)g; // bi est de type BufferedImage// x=0, y=0, width=400, height=400g2.drawImage(bi, 0, 0, 400, 400, null); // ...

}

Java 2D – Les images

Manipuler avant affichage :g2d.drawImage(bi1, 0, 0, getWidth(), getHeight(), null);GeneralPath gp = new GeneralPath();gp.moveTo(getWidth()/2, 0);gp.lineTo(getWidth(), getHeight());gp.lineTo(0, getHeight());gp.closePath();g2d.setClip(gp);AlphaComposite ac = AlphaComposite.getInstance(

AlphaComposite.SRC_OVER, 0.65f);g2d.setComposite(ac);g2d.drawImage(bi2, 0, 0, getWidth(), getHeight(), null);

Java 2D – Les images Enregistrement :BufferedImage biDst = new BufferedImage(bi2.getWidth(),

bi2.getHeight(), BufferedImage.TYPE_INT_BGR);Graphics2D g2d = biDst.createGraphics();AlphaComposite ac =

AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.5f);g2d.setComposite(ac);g2d.drawImage(bi2, 0, 0, bi2.getWidth(), bi2.getHeight(), null);g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER

, 1f));g2d.setClip(10, 94, 60, 80);g2d.drawImage(bi2, 0, 0, bi2.getWidth(),bi2.getHeight(), null);g2d.drawRect(10, 94, 59, 79);try {

ImageIO.write(biDst, "jpg", new File("images/dst.jpg"));} catch (IOException e) {

e.printStackTrace();}

Java 2D – Les images Enregistrement :g2d.drawImage(bi1, 0, 0, getWidth(), getHeight(), null);GeneralPath gp = new GeneralPath();gp.moveTo(getWidth()/2, 0);gp.lineTo(getWidth(), getHeight());gp.lineTo(0, getHeight());gp.closePath();g2d.setClip(gp);AlphaComposite ac = AlphaComposite.getInstance(

AlphaComposite.SRC_OVER, 0.65f);g2d.setComposite(ac);g2d.drawImage(bi2, 0, 0, getWidth(), getHeight(), null);

Java 2D – Les images

Extraction des données d’une image On peut extraire tout ou partie des

données d’une imageint w = bi.getWidth();int h = bi.getHeight();int[] data = new int[w*h];bi.getRGB(0, 0, w, h, data, 0, w); Le tableau data va contenir l’intégralité

des données de l’image Selon le type d’image, les composantes

du pixel sont concaténées dans las 4 octets dans un ordre donnée.

Java 2D – Les images

Modification des données d’une image. On peut modifier tout ou partie des

données d’une image:

bi.setRGB(0, 0, w, h, data, 0, w);

Ici « data » représente les données de l’image.

« w » et « h » respectivement, la largeur et la hauteur.

Java 2D – Les images

Extraction des données d’une image On peut aussi extraire les données sous

la forme d’un tableau de bytes.byte[] pixels = ((DataBufferByte) bi.getRaster().getDataBuffer()).getData();

Les données dans ce cas sont brutes La succession des bytes dépond du

modèle colorimétrique de l’image. ARGB, RGB, …

Cette méthode est beaucoup plus rapide que la précédente. (à tester)

Java 2D - Exemple

Nous voulons créer une application qui java qui permet de charger une image de la décomposer et permettre d’afficher les couches RGB avec leur histogramme respectif.

Voici un aperçu de ce que peut être cette application.

Java 2D - ExempleCliquer pour charger une image

L’image s’affiche ici

Java 2D - Exemple

Java 2D – Exemple

Structure du projet :

Java 2D - Exemple

Classe ImagePanel :public class ImagePanel extends JPanel{

private BufferedImage bi;

public ImagePanel() {

setBorder(BorderFactory.createBevelBorder(BevelBorder.LOWERED));}

public BufferedImage getBi() {return bi;

}

public void setBi(BufferedImage bi) {this.bi = bi;

}

@Overridepublic void paint(Graphics g) {

super.paint(g); if(bi != null)

g.drawImage(bi, 40, 40, getWidth()-80, getHeight()-80, null);}

}

Java 2D - Exemple

MainFrame etends JFrame:// Constructeur MainFrame

public MainFrame() {

setBounds(0, 0, 600, 460);

setLayout(new BorderLayout());

setTitle("Java Image 2D API");

setDefaultCloseOperation(EXIT_ON_CLOSE);

// getToolbar() retourne un Jpanel contenant les boutons

this.add(getToolbar(), BorderLayout.NORTH);

imagePanel = new ImagePanel();

imagePanel.setBorder(BorderFactory.createLineBorder(Color.black.b

righter().brighter(), 35));

this.add(imagePanel, BorderLayout.CENTER);

this.setVisible(true);

}

// Entrée de l’applicationpublic static void main(String[] args) {

new MainFrame();}