JAVA - emmanuel.adam.free.fremmanuel.adam.free.fr/site/IMG/pdf/APPGR6Java2DP.pdf · E. ADAM – ISTV - UVHC Transformations AffineTransform : appliquer une transformation affine sous

E. ADAM – ISTV - UVHC

JAVA

Applications Graphiques

E. ADAM

UVHC - ISTV


Graphique 2D● L'objet Graphics2D de Java Swing permet :

– la transformation affine ● (rotation, basculement, étirement, ...)

– la gestion de couleurs ● (contraste, luminosité, netteté, saturation...)

– La gestion du rendu ● (texture, dégradé de couleurs, ...)

– L'édition de texte améliorée

Applications graphiques en Java


Transformations●G2D permet :

– la rotation (rotate), le redimensionnement (scale), le basculement (shear), la translation (translate) de graphiques

– Il est possible de combiner les transformations :

● Utilisation de la classe de Transformation Affine : – AffineTransform



Transformations●AffineTransform : appliquer une transformation affine sous forme de matrice à chaque point (x, y) d'un graphique :


x 'y '=[a c tx

b d ty] . x

y=a.xc.ytx

b.xd.yty

[2 0 0 0 0.5 0

]

Redimensionnement


Transformations


[1 0 10 0 1 20

]

Translation

0 0

[1 0.5 0 0 1 0

]

Basculement

0 0

10

20


Transformations


[0 −1 0 1 0 0

]

Rotation PI/2

0 0

[costetha −sintetha 0 sintetha cos tetha 0

]

Rotation Téta

0 0


Transformations●Utilisation de TransformAffine :

– Dans la méthode paint ou paintComponent :

public void paintComponent(Graphics g){

super.paintComponent(g);if (!tracker.checkID(0)) return;

Graphics2D g2d = (Graphics2D) g;AffineTransform atOld = g2d.getTransform();AffineTransform atT = new AffineTransform();atT.rotate(Math.PI/6);

g2d.drawImage(imgFixe, atT, this);

}



Rendu : Qualité●Activer le mode Qualité et anti aliasing

Utilisation de la classe ColorSpaceGraphics2D g2d = (Graphics2D) g;

RenderingHints qualityHints = new RenderingHints(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);

qualityHints.put(RenderingHints.KEY_RENDERING,RenderingHints.VALUE_RENDER_QUALITY);

g2d.setRenderingHints(qualityHints);


Rendu : Qualité●Activer le mode Qualité et anti aliasing

Qualité par défaut Qualité activée


Rendu : Transparence●Activer la composante Alpha (transparence)

Utilisation de la classe AlphaComposite12 possibilités de mélange de couleurs : CLEAR, SRC, DST, SRC_OVER, DST_OVER, SRC_IN, DST_IN, SRC_OUT, DST_OUT, SRC_ATOP, DST_ATOP, or XOR

Gestion de transparence : ...// dessin en mode pleing2d.drawImage(img1, 0, 0, 480, 360, this);

// definition d'une transparence à 50% pour les prochains dessinsAlphaComposite ac =

AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.5f);g2d.setComposite(ac);g2d.drawImage(img2, 30, 30, 100, 100, this);...


Rendu : Qualité●Activer le mode transparence à 50%


Rendu d'images●Création d'un image N&B à partir d'une image couleur●Utilisation de tampons d'images : BufferedImage

– BufferedImage imgCouleur = new BufferedImage(largeur, hauteur, BufferedImage.TYPE_INT_RGB);– BufferedImage imgNB = new BufferedImage(largeur, hauteur, BufferedImage.TYPE_INT_RGB);

●Utilisation de la classe RenderingHints● Interpolation Alpha : défaut, rapide ou qualité● Antialiasing : défaut, activé, non activé● Rendu des couleurs : défaut, rapide ou qualité● Tramage : défaut, activé, non activé● Métriques partielles : défaut, activé, non activé● Interpolation : plus proche voisin, bi-linéaire, bi-cubique● Rendu : défaut, rapide ou qualité● Antialiasing du texte : défaut, activé, non activé

– Utilisation sous forme de table de hashage (cf doc)– Graphics2D srcG = imgCouleur.createGraphics();– RenderingHints rhs = g2d.getRenderingHints();– srcG.drawImage(img, 0, 0, this);


Rendu d'images : N & B●Création d'un image N&B à partir d'une image couleur

●Utilisation de la classe ColorSpace– Niveau de gris; 2, 3, .... couleurs; Mode HVS ; CMY;...

– ColorSpace cs = ColorSpace.getInstance(ColorSpace.CS_GRAY);

●Utilisation de la classe ColorConvertOp– Réalise une conversion pixel à pixel de l'image initiale

– ColorConvertOp theOp = new ColorConvertOp(cs, rhs);

– theOp.filter(imgCouleur, imgNB);


Rendu d'images : N & B


Rendu d'images : filtres●Package java.awt.image

●2 interfaces pour agir sur BufferedImage et Raster (rectangle de pixels) : – BufferedImageOp and RasterOp.

● Classes implementant ces interfaces : AffineTransformOp, BandCombineOp, ColorConvertOp, ConvolveOp, LookupOp, RescaleOp.

– Ces classes sont utilisées pour les tranformations géométriques, l'adoucissement, le renforcement, le constraste, la saturation, et la coloration d'images


Rendu d'images : filtres●Package java.awt.image

●La classe Kernel permet la définition de filtre : ●Un filtre est une transformation mathématique (appelée produit de convolution) modifiant la valeur de chaque pixel en fonction de sa valeur et de celle de ses voisins à partir d'une matrice (matrice de convolution)

Matrice=p i−1, j−1 p i , j−1 pi1, j−1

pi−1, j pi , j p i1, j

p i−1, j1 p i , j1 pi1, j1

coulp x , y=∑j=−1

1

∑i=−1

1

p i , j×coulpxi , y j


Rendu d'images : filtres●Exemple : Détection de bords

La matrice pour la détection de bord est : float[] elements = { 0.0f, -1.0f, 0.0f,

-1.0f, 4.f, -1.0f, 0.0f, -1.0f, 0.0f};

BufferedImage imgFiltree = newBufferedImage(largeur,hauteur,BufferedImage.TYPE_INT_RGB);

// définition de la matrice 3 x 3Kernel kernel = new Kernel(3, 3, elements);

ConvolveOp cop = new ConvolveOp(kernel, ConvolveOp.EDGE_NO_OP, null);

cop.filter(imageSource,imageFiltree);

g2d.drawImage(imageFiltree, 0, 0, largeur, hauteur, this);


Rendu d'images : filtres●Exemple : Détection de bords


Rendu d'images : filtres●Exemple : Inversion de couleurs

●Utilisation de LookupOp qui applique aux 3 couleurs et à la transparence (si elle est définie) des modifications données par des tableaux de type ByteLookupTable

byte reverse[] = new byte[256];for (int j=0; j<256; j++) reverse[j]=(byte)(256-j);

ByteLookupTable blut=new ByteLookupTable(0, reverse);

LookupOp lop = new LookupOp(blut, null);

lop.filter(imgCouleur, imgInverse);

g2d.drawImage(imgInverse, 0, 0, largeur, hauteur, this);


Rendu d'images : filtres●Exemple : Inversion de couleurs


Rendu d'images : filtres●Exemple : Luminosité - Contraste

Utilisation de RescaleOp qui applique aux 3 couleurs et à la transparence (si elle est définie) des modifications données par un coefficient et une constante

for each pixel from Source object { for each band/component of the pixel { destElement = (srcElement*coefficient) + constante }}

RescaleOp rop = new RescaleOp(2f, -10.0f, null);rop.filter(imgCouleur,bimg);

g2d.drawImage(bimg, 0, 0, largeur, hauteur, this);


Rendu d'images : filtres●Exemple : Luminosité - Contraste


Rendu d'images : filtres●Exercice : Flou

Donner selon vous la matrice 3 x 3 permettant de « flouter » une image

Indice, l'objectif est d'uniformiser les couleurs



Une matrice 3 x 3 permettant de « flouter » une image est la matrice : 1/9 1/9 1/91/9 1/9 1/91/9 1/9 1/9

float[] elements = new float[9];Arrays.fill(elements, 1.f/9.f);

Kernel kernel = new Kernel(3, 3, elements);ConvolveOp cop = new ConvolveOp(kernel, ConvolveOp.EDGE_NO_OP, null);cop.filter(imgCouleur,bimg);g2d.drawImage(bimg, 0, 0, largeur, hauteur, this);




Rendu d'images : filtres●Exercice : Plus Net

Donnez une matrice 3 x 3 permettant de rendre plus net une image

Indice, les points doivent se singulariser des voisins



Une matrice 3 x 3 permettant de « rendre » une image est la matrice : -1 -1 -1-1 9 -1-1 -1 -1

float[] elements = new float[9];Arrays.fill(elements, -1.f);elements[4] = 9.f;

Kernel kernel = new Kernel(3, 3, elements);ConvolveOp cop = new ConvolveOp(kernel, ConvolveOp.EDGE_NO_OP, null);cop.filter(imgCouleur,bimg);g2d.drawImage(bimg, 0, 0, largeur, hauteur, this);




Gestion de lignes●Attributs du pinceau : Largeur

●Utilisation de BasicStroke : pinceau de base

pinceau de 12 pixel : (dans la méthode paint par exemple)....BasicStroke pinceauLarge = new BasicStroke(12.0f);g2.setStroke(pinceauLarge);g2.drawLine(0, 0, 400, 300);....


Gestion de lignes●Attributs du pinceau : jointure

●Définition de l'angle à partir duquel commence la jointure

pinceau à bords et jointures ronds : (dans la méthode paint par exemple)....BasicStroke pinceauRond = new BasicStroke(12.0f,

BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND, 10f);g2.setStroke(pinceauRond);g2.drawPolyline( new int[]{0, 10, 20, 30},

new int[]{0, 10, 0, 10},4);

....

Programmer’s Guide to the Java 2D™ APIEnhanced Graphics and Imaging for JavaJavaTM 2 SDK, Standard Edition, 1.4 VersionApril 24, 2001

10°


Gestion de lignes●Attributs du pinceau : pointillés

Définition du pointillé par tableau : {10} --> espacement tous les 10 pixels{10, 20} --> espacement de 20 pixels tous les 10 pixels{10, 20, 5, 2} --> trait de 10 pixels, séparation de 20 pixels, trait de 5 pixels, séparation de 2 pixels, ...

(dans la méthode paint par exemple)....BasicStroke pinceauPointille = new BasicStroke(12.0f,

BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND, 10f,new float[]{10, 20, 5, 2}, 0f);

g2.setStroke(pinceauPointille);g2.drawLine( 0, 0, 300, 400);.... début des pointillés


Gestion de lignes●Attributs du pinceau : pointillés


Remplissage de formes●Dégradé linéaire de couleurs

●Utilisation de GradientPaint

●Définition – de la couleur d'origine et de sa position– de la couleur de destination et de sa position– du bouclage

(dans la méthode paint par exemple)....GradientPaint gp = new GradientPaint(0f, 0f, Color.White,

0f, (float)hauteur/2f, Color.RED, true);g2d.setPaint(gp);g2d.fillRect(0, 0, larg2, haut2);....

Cycle activé

O (Blanc)

D (Destination)

cycle


Remplissage de formes●Dégradé linéaire de couleurs


Remplissage de formes●Dégradé de couleurs

● Point1: Couleur1 (R1, G1, B1) --> Point2: Couleur2 (R2, G2, B2)

● Distance entre les 2 points = d

● « Distances » de couleurs dR = (R2 – R1), dG = (G2 – G1), dB = (B2 – B1)

● Incréments de couleurs pour i allant de P1 à P2 : – incR = dR/d ; incG = dG/d ; incB = dB/d ;


Remplissage de formes●Application de Textures dessinées●Utilisation de TexturePaint

●Etapes – Définir une image tampon (BufferedImage)– Dessiner le motif (par son objet Graphics2D)– Définir les dimensions de la texture (Rectangle)– Créer la texture (TexturePaint)


Remplissage de formes●Application de Textures dessinées//////////////////////////////////////////////////Dessin de textureint taille = 20;

BufferedImage bi = new BufferedImage(taille, taille, BufferedImage.TYPE_INT_RGB);Graphics2D g2dBi = bi.createGraphics();g2dBi.setColor(Color.MAGENTA);g2dBi.fillRect(0,0,taille,taille);g2dBi.setColor(Color.red);g2dBi.fillOval(0,0,taille,taille);


Remplissage de formes●Application de Textures dessinées////////////////////////////////////////////////// textureRectangle r = new Rectangle(0,0,taille,taille);TexturePaint tp = new TexturePaint(bi, r);

//////////////////////////////////////////////////mise en place de la textureg2d.setPaint(tp);

//////////////////////////////////////////////////dessin texturiseg2d.fillRect(0,0,largeur,hauteur);


Remplissage de formes●Application de Textures dessinées


Remplissage de formes●Application de Textures jpg●Utilisation de TexturePaint

●Etapes – Récupérer l'image source (Image et Toolkit)– Redimensionner l'image (AffineTransform)– Définir une image tampon (BufferedImage)– Dessiner l'image – Définir les dimensions de la texture (Rectangle)– Créer la texture (TexturePaint)


Remplissage de formes●Application de Textures jpg...int taille = 100;int largeurImg = img.getWidth(this);int hauteurImg =img.getHeight(this);// recup de la dimension maximaleint maxi=(largeurImg>hauteurImg?largeurImg:hauteurImg);// définition du ratio (largeur/hauteur)double coefLargeur = (double)largeurImg/(double)maxi;double coefHauteur = (double)hauteurImg/(double)maxi;// definition de l'image tampon base sur la taille de la texture et le ratioBufferedImage bi = new BufferedImage((int)(taille*coefLargeur),

(int)(taille*coefHauteur), BufferedImage.TYPE_INT_RGB);

Graphics2D g2dImg = bi.createGraphics();


Remplissage de formes●Application de Textures jpg// definition de la reduction de l'imageAffineTransform at = new AffineTransform();double reducX =((double)taille/(double)largeurImg)*coefLargeur; double reducY =((double)taille/(double)hauteurImg)*coefHauteur; at.setToScale(reducX, reducY);g2dImg.setTransform(at);// dessin de l'image dans l'image tampong2dImg.drawImage(img, 0, 0, this);

//////////////////////////////////////////////////Dessin de textureRectangle r = new Rectangle(0,0,taille,taille);TexturePaint tp = new TexturePaint(bi, r);g2d.setPaint(tp);g2d.fillOval(0,0,largeur,hauteur);


Remplissage de formes●Application de Textures jpg


Zone de dessin : Clipage● Zone de clipping = zone délimitant l'affichage du graphique

● Définition de zone géométriques issues de :– Arc2D, Ellipse2D, Rectangle2D, RoundRectangle2D

●Exemple:● Arc2D : xo, yo, largeur, hauteur, °départ, °arrivée, type

– (xo, yo) = coordonnées haut gauche du rectangle contenant l'arc

– ° depart et ° arrivée : origines le centre du rectangle– type : corde (CHORD), camembert (PIE), ouvert (OPEN)


Zone de dessin : Clipage

...// Créer un arc de type corde de 240°Arc2D arc = new Arc2D.Float(0f, 0f, largeur, hauteur, 0f, 240f, Arc2D.CHORD);

// Définir la zone de dessing2d.setClip(arc);

g2d.drawImage(img, 0, 0, largeur, hauteur, this);

// Créer un rectangle Rectangle r = new Rectangle(0, 0, largeur/3, hauteur);// modifier la zone de dessin = intersection de l'ancienne avec le rectangleg2d.clip(arc);

g2d.drawImage(img2, 0, 0, largeur, hauteur, this);


Zone de dessin : Clipage


Objets graphiques complexes● Utilisation de Shape et de GeneralPath●Un objet Shape = chemin géométrique de : lignes; courbes quadratiques; courbes de Bézier

– + Rectangles, ellipses, ....

// Créer un shape avec courbe de Bezierp = new GeneralPath(GeneralPath.WIND_NON_ZERO);p.moveTo(- 100, 0);p.curveTo(-50, -100, 50, 50, 100, 0);p.lineTo(0, 100);p.closePath();// translater l'origine vers le centre de la position du diagrammeg2d.translate(largeur/2, hauteur/2);//dessiner le diagramme en le remplissantg2d.fill(p);//rétablir l'origineg2d.translate(-largeur/2, -hauteur/2);

x0, y0 x2, y2

x1, y1

Courbe quadratique


Objets graphiques complexes


Objets graphiques complexes● Utilisation de Area

●Une aire Area = intersection, union, disjonction, différence de Shape :

///////////////union d'une étoile et d'un arcArea aire = new Area(etoile);aire.add(new Area(arc));///////////////mise en place d'un degradeGradientPaint gp = new GradientPaint(0f, 0f, Color.RED, 0f, (float)haut2, Color.BLUE);g2d.setPaint(gp);

///////////////dessin de l'aireg2d.fill(aire);


Objets graphiques complexes

Unionaire.add(new Area(arc));

Intersectionaire.intersect(new Area(arc));

Disjonctionaire.exclusiveOr(new Area(arc));

Différenceaire.substract(new Area(arc));


Textes● Utilisation de polices dérivées

●Utilisation : – Définir une police de caractère– Définir une transformation affine– Créer une police dérivée– Appliquer cette police

●Exemple : // créer une policeFont police = new Font("Helvetica", Font.BOLD, largeur/6);// définir la transformation (ici rotation de PI/8)AffineTransform atFont = new AffineTransform();atFont.setToRotation(-Math.PI/8);// crée et mettre en place la police dérivéeFont policeDerivee = police.deriveFont(atFont);g2d.setFont(policeDerivee);// dessiner le texteg2d.drawString("J'adore JAVA !!!", larg4, haut2);


Textes● Utilisation de polices dérivées

Documents

JAVA - emmanuel.adam.free.fremmanuel.adam.free.fr/site/IMG/pdf/APPGR6Java2DP.pdf · E. ADAM – ISTV - UVHC Transformations AffineTransform : appliquer une transformation affine sous