introduction

La dernière fois que j'ai utilisé JFrame / Canvas, c'était pendant mes recherches de fin d'études universitaires. Après un long moment d'utilisation de Java, j'ai du mal à entendre ce que je dis ...: sweat_drops:

J'oublie comment utiliser Java, alors Je voudrais écrire sur JFrame / Canvas comme un mémorandum au lieu de la réhabilitation: writing_hand:

Choses à faire cette fois

Je voudrais créer une application de dessin simple en utilisant la classe Jframe / Canvas. Le produit fini ressemblera à l'image. : art: Screenshot 2018-11-27 at 10.06.48.png

Étape 1: Préparez JFrame

Commençons par créer une fenêtre pour afficher l'application. Ici, JFrame est utilisé. Comment l'utiliser, c'est comme ça.

`Step1.java`


package paintApp;

import javax.swing.JFrame;

public class Step1 {
	static int w = 800, h = 600;

	public static void main(String[] args) {
		run();
	}

	public static void run() {
		//Créer une instance de JFrame
		JFrame frame = new JFrame("Application de dessin");
		//Quittez le programme lorsque la fenêtre est fermée
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		//Taille de la fenêtre / position initiale
		frame.setSize(w, h);
		frame.setLocationRelativeTo(null);
		// setBounds(x, y, w, h);

		//Afficher la fenêtre
		frame.setVisible(true);
	}

}

Je pourrais facilement faire un cadre: v: Screenshot 2018-11-27 at 09.49.39.png

Étape 2: préparer le canevas

Ensuite, préparez une toile pour dessiner une image. Java fournit une classe pratique appelée classe Canvas. Ajoutons-le au cadre.

`Step2.java`


package paintApp;

import java.awt.Canvas;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;

import javax.swing.JFrame;
import javax.swing.JPanel;

public class Step2 {
	static int w = 800, h = 600;

	public static void main(String[] args) {
		run();
	}

	public static void run() {
		//Créer une instance de JFrame
		JFrame frame = new JFrame("Application de dessin");
		//Quittez le programme lorsque la fenêtre est fermée
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		//Taille de la fenêtre / position initiale
		frame.setSize(w, h);
		frame.setLocationRelativeTo(null);
		// setBounds(x, y, w, h);

		//Créer une instance de PaintCanvas
		PaintCanvas canvas = new PaintCanvas();

		//Ajouter au cadre
		JPanel pane = new JPanel();
		frame.getContentPane().add(pane);

		canvas.setPreferredSize(new Dimension(w, h));
		pane.add(canvas);

		//Afficher la fenêtre
		frame.setVisible(true);
	}

	//Classe de toile
	static class PaintCanvas extends Canvas {

		public PaintCanvas() {
			//Définir l'arrière-plan de la toile sur blanc
			setBackground(Color.white);
		}

		public void paint(Graphics g) {
		}

	}

}

Une toile d'un blanc pur est apparue. Screenshot 2018-11-27 at 09.50.11.png Soyons capables de faire un dessin ici.

Étape 3: détecter le fonctionnement de la souris

Les événements tels que «clic de souris» ou «glisser» sont appelés «événements». Il existe une classe pratique qui vous permet d'obtenir cet événement. MouseListener et MouseMotionListener /jp/8/docs/api/java/awt/event/MouseMotionListener.html). La différence entre MouseListener et MouseMotionListener réside dans le type d'événements que vous pouvez obtenir. Utilisons-le correctement en fonction du type d'événement que vous souhaitez utiliser. Cette fois, je veux utiliser le clic, le glisser et le déplacement, donc je vais utiliser les deux.
** Événements que vous pouvez obtenir **

MouseListener	MouseMotionListener
mouseClicked	mouseDragged
mouseEntered	mouseDragged
mouseExited
mousePressed
mouseReleased

Ajoutons-les à la toile.

`Step3.java`


package paintApp;

import java.awt.Canvas;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;

import javax.swing.JFrame;
import javax.swing.JPanel;

public class Step3 {
	static int w = 800, h = 600;

	public static void main(String[] args) {
		run();
	}

	public static void run() {
		//Créer une instance de JFrame
		JFrame frame = new JFrame("Application de dessin");
		//Quittez le programme lorsque la fenêtre est fermée
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		//Taille de la fenêtre / position initiale
		frame.setSize(w, h);
		frame.setLocationRelativeTo(null);
		// setBounds(x, y, w, h);

		//Créer une instance de PaintCanvas
		PaintCanvas canvas = new PaintCanvas();

		//Ajouter au cadre
		JPanel pane = new JPanel();
		frame.getContentPane().add(pane);

		canvas.setPreferredSize(new Dimension(w, h));
		pane.add(canvas);

		//Afficher la fenêtre
		frame.setVisible(true);
	}

	//Classe de toile
	static class PaintCanvas extends Canvas implements MouseListener,
			MouseMotionListener {

		public PaintCanvas() {
			//Définir MouseListener / MouseMotionListener
			addMouseListener(this);
			addMouseMotionListener(this);
			//Définir l'arrière-plan de la toile sur blanc
			setBackground(Color.white);
		}

		public void paint(Graphics g) {
		}

		@Override
		public void mouseDragged(MouseEvent e) {
			System.out.println(e);
		}

		@Override
		public void mouseMoved(MouseEvent e) {
		}

		@Override
		public void mouseClicked(MouseEvent e) {
		}

		@Override
		public void mousePressed(MouseEvent e) {
		}

		@Override
		public void mouseReleased(MouseEvent e) {
		}

		@Override
		public void mouseEntered(MouseEvent e) {
		}

		@Override
		public void mouseExited(MouseEvent e) {
		}

	}

}

De cette façon, vous pouvez voir qu'il répond aux opérations de la souris. : mouse_three_button: Screenshot 2018-11-27 at 09.51.09.png

Étape 4: Dessinez une image avec la souris

… Le décor est maintenant planté. À partir de là, créons un processus pour dessiner une image en utilisant l'événement de souris acquis.

Le contenu obtient les coordonnées du point de départ et du point final lorsqu'il est glissé avec la souris, et les relie avec une ligne ... C'est ça: ok_hand:

Pour expliquer un peu plus en détail, lorsque l'événement MouseDragged se produit, enregistrez les coordonnées de la souris à ce moment-là dans une variable. Lorsque le même événement se reproduit, les coordonnées enregistrées dans le processus précédent sont enregistrées dans une autre variable comme point de départ, écrasant les coordonnées actuelles. De cette façon, je trace une ligne tout en mettant à jour le point de départ et le point final.

Avec cela, à chaque fois que la souris est tirée, la ligne grossit petit à petit et il semble que la trajectoire de la souris soit affichée telle quelle.

À propos, lors du dessin de cette ligne, le style de chaque ligne est défini sur «rond» aux deux extrémités. Si vous ne le faites pas, les deux extrémités seront des lignes carrées et les joints entre les lignes seront irréguliers, ce qui donnera une image disgracieuse.

`Step4.java`


package paintApp;

import java.awt.BasicStroke;
import java.awt.Canvas;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.awt.image.BufferedImage;

import javax.swing.JFrame;
import javax.swing.JPanel;

public class Step4 {
	static int w = 800, h = 600;

	public static void main(String[] args) {
		run();
	}

	public static void run() {
		//Créer une instance de JFrame
		JFrame frame = new JFrame("Application de dessin");
		//Quittez le programme lorsque la fenêtre est fermée
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		//Taille de la fenêtre / position initiale
		frame.setSize(w, h);
		frame.setLocationRelativeTo(null);
		// setBounds(x, y, w, h);

		//Créer une instance de PaintCanvas
		PaintCanvas canvas = new PaintCanvas();

		//Ajouter au cadre
		JPanel pane = new JPanel();
		frame.getContentPane().add(pane);

		canvas.setPreferredSize(new Dimension(w, h));
		pane.add(canvas);

		//Afficher la fenêtre
		frame.setVisible(true);
	}

	//Classe de toile
	static class PaintCanvas extends Canvas implements MouseListener,
			MouseMotionListener {

		//BufferedImage qui contient le contenu du dessin
		private BufferedImage cImage = null;
		//Instance de dessin sur cImage
		private Graphics2D g2d;

		//Coordonnées de début et de fin de ligne
		private int x, y, xx, yy;
		//Mode dessin OU mode gomme
		private int type;
		//Épaisseur de ligne
		public int width = 1;
		//Couleur de la ligne
		public Color c = Color.black;

		public PaintCanvas() {
			//Initialiser les coordonnées
			x = -1;
			y = -1;
			xx = -1;
			yy = -1;
			type = 0;

			//Définir MouseListener / MouseMotionListener
			addMouseListener(this);
			addMouseMotionListener(this);

			//Définir l'arrière-plan de la toile sur blanc
			setBackground(Color.white);

			//Générer une BufferedImage qui contient le contenu du dessin
			cImage = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
			g2d = (Graphics2D) cImage.getGraphics();
			//Rendre l'arrière-plan de BufferedImage blanc
			g2d.setColor(Color.WHITE);
			g2d.fillRect(0, 0, w, h);

			//dessin
			repaint();
		}

		public void paint(Graphics g) {
			//Mode de dessin (dessiner une ligne)
			if (type == 1) {
				if (x >= 0 && y >= 0 && xx >= 0 && yy >= 0) {
					BasicStroke stroke = new BasicStroke(width,
							BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND);
					g2d.setStroke(stroke);
					g2d.setColor(c);
					g2d.drawLine(xx, yy, x, y);
				}
				//Mode gomme
			} else if (type == 2) {
				if (x >= 0 && y >= 0 && xx >= 0 && yy >= 0) {
					//Définir une ligne aux extrémités arrondies
					BasicStroke stroke = new BasicStroke(50.0f,
							BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND);
					g2d.setStroke(stroke);
					g2d.setColor(Color.white);
					g2d.drawLine(xx, yy, x, y);
				}
			}

			//Refléter le contenu du dessin sur la toile
			g.drawImage(cImage, 0, 0, null);
		}

		@Override
		public void mouseDragged(MouseEvent e) {
			//Détecte le bouton enfoncé
			if ((e.getModifiers() & MouseEvent.BUTTON1_MASK) != 0) {
				//Clic du bouton gauche (mode dessin)
				type = 1;
			}
			if ((e.getModifiers() & MouseEvent.BUTTON2_MASK) != 0) {
				//Cliquez sur le bouton du milieu
			}
			if ((e.getModifiers() & MouseEvent.BUTTON3_MASK) != 0) {
				//Clic droit (mode effacement)
				type = 2;
			}

			//Définir les coordonnées passées comme coordonnées de départ
			xx = x;
			yy = y;

			//Définir de nouvelles coordonnées comme coordonnées de fin
			Point point = e.getPoint();
			x = point.x;
			y = point.y;

			//redessiner
			repaint();
		}

		@Override
		public void mouseMoved(MouseEvent e) {
			//Initialiser les coordonnées une fois le glissement terminé
			x = -1;
			y = -1;
			xx = -1;
			yy = -1;
			type = 0;
		}

		@Override
		public void mouseClicked(MouseEvent e) {
		}

		@Override
		public void mousePressed(MouseEvent e) {
			Point point = e.getPoint();
			x = point.x;
			y = point.y;
		}

		@Override
		public void mouseReleased(MouseEvent e) {
		}

		@Override
		public void mouseEntered(MouseEvent e) {
		}

		@Override
		public void mouseExited(MouseEvent e) {
		}

	}

}

Faites glisser avec la souris pour y tracer une ligne. C'est devenu comme ça à la fois! Screenshot 2018-11-27 at 09.52.19.png

Achevée!

L'application de dessin est terminée!

Dans l'image, trois fonctions ont été ajoutées: effacer le canevas, changer l'épaisseur de la ligne et changer la couleur de la ligne. Cela seul suffit à dessiner.

Il s'agit d'une version simplifiée, donc si vous ajoutez des fonctionnalités ici, vous pouvez en faire une application de dessin plus authentique: smiley: Screenshot 2018-11-27 at 10.06.48.png Le code final est ici.

`PaintApp.java`


package paintApp;

import java.awt.BasicStroke;
import java.awt.BorderLayout;
import java.awt.Canvas;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.awt.image.BufferedImage;

import javax.swing.JButton;
import javax.swing.JComboBox;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JSlider;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;

public class PaintApp {
	static int w = 800, h = 600;

	public static void main(String[] args) {
		run();
	}

	public static void run() {
		//Créer une instance de JFrame
		JFrame frame = new JFrame("Application de dessin");
		//Quittez le programme lorsque la fenêtre est fermée
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		//Taille de la fenêtre / position initiale
		frame.setSize(w, h);
		frame.setLocationRelativeTo(null);
		// setBounds(x, y, w, h);

		//Créer une instance de PaintCanvas
		PaintCanvas canvas = new PaintCanvas();

		//Ajouter au cadre
		JPanel pane = new JPanel();
		frame.getContentPane().add(pane, BorderLayout.CENTER);
		JPanel paneB = new JPanel();
		frame.getContentPane().add(paneB, BorderLayout.NORTH);

		canvas.setPreferredSize(new Dimension(w, h));
		pane.add(canvas);

		/*Caractéristiques supplémentaires*/
		//Tout effacer
		JButton clear = new JButton("CLEAR");
		clear.addActionListener(new ClearListener(canvas));
		paneB.add(clear);

		//Ajuster l'épaisseur du trait
		JSlider slider = new JSlider(1, 50, 1); //Valeur minimale, valeur maximale, valeur initiale
		slider.addChangeListener(new SliderListener(canvas)); //Pour le traitement des interruptions
		paneB.add(slider);

		//Changement de couleur de ligne
		String[] combodata = { "BLACK", "RED", "BLUE", "GREEN" };
		JComboBox combo = new JComboBox(combodata);
		combo.addActionListener(new ComboListener(canvas));
		paneB.add(combo);

		//Afficher la fenêtre
		frame.setVisible(true);
	}

	//Classe de toile
	static class PaintCanvas extends Canvas implements MouseListener,
			MouseMotionListener {

		//BufferedImage qui contient le contenu du dessin
		private BufferedImage cImage = null;
		//Instance de dessin sur cImage
		private Graphics2D g2d;

		//Coordonnées de début et de fin de ligne
		private int x, y, xx, yy;
		//Mode dessin OU mode gomme
		private int type;
		//Épaisseur de ligne
		public int width = 1;
		//Couleur de la ligne
		public Color c = Color.black;

		public PaintCanvas() {
			//Initialiser les coordonnées
			x = -1;
			y = -1;
			xx = -1;
			yy = -1;
			type = 0;

			//Définir MouseListener / MouseMotionListener
			addMouseListener(this);
			addMouseMotionListener(this);

			//Définir l'arrière-plan de la toile sur blanc
			setBackground(Color.white);
			//Générer une BufferedImage qui contient le contenu du dessin
			cImage = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
			g2d = (Graphics2D) cImage.getGraphics();
			//Rendre l'arrière-plan de BufferedImage blanc
			g2d.setColor(Color.WHITE);
			g2d.fillRect(0, 0, w, h);

			//dessin
			repaint();
		}

		//Effacer la toile
		public void clear() {
			g2d.setColor(Color.WHITE);
			g2d.fillRect(0, 0, w, h);
			repaint();
		}

		//Modifier l'épaisseur de la ligne
		public void setStroke(int n) {
			width = n;
		}

		//Changement de couleur de ligne
		public void setColorCombo(String color) {
			if (color.equals("BLACK")) {
				c = Color.black;
			} else if (color.equals("RED")) {
				c = Color.red;
			} else if (color.equals("BLUE")) {
				c = Color.blue;
			} else if (color.equals("GREEN")) {
				c = Color.green;
			}
		}

		public void paint(Graphics g) {
			//Mode de dessin (dessiner une ligne)
			if (type == 1) {
				if (x >= 0 && y >= 0 && xx >= 0 && yy >= 0) {
					BasicStroke stroke = new BasicStroke(width,
							BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND);
					g2d.setStroke(stroke);
					g2d.setColor(c);
					g2d.drawLine(xx, yy, x, y);
				}
				//Mode gomme
			} else if (type == 2) {
				if (x >= 0 && y >= 0 && xx >= 0 && yy >= 0) {
					//Définir une ligne aux extrémités arrondies
					BasicStroke stroke = new BasicStroke(50.0f,
							BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND);
					g2d.setStroke(stroke);
					g2d.setColor(Color.white);
					g2d.drawLine(xx, yy, x, y);
				}
			}

			//Refléter le contenu du dessin sur la toile
			g.drawImage(cImage, 0, 0, null);
		}

		@Override
		public void mouseDragged(MouseEvent e) {
			//Détecte le bouton enfoncé
			if ((e.getModifiers() & MouseEvent.BUTTON1_MASK) != 0) {
				//Clic du bouton gauche (mode dessin)
				type = 1;
			}
			if ((e.getModifiers() & MouseEvent.BUTTON2_MASK) != 0) {
				//Cliquez sur le bouton du milieu
			}
			if ((e.getModifiers() & MouseEvent.BUTTON3_MASK) != 0) {
				//Clic droit (mode effacement)
				type = 2;
			}

			//Définir les coordonnées passées comme coordonnées de départ
			xx = x;
			yy = y;

			//Définir de nouvelles coordonnées comme coordonnées de fin
			Point point = e.getPoint();
			x = point.x;
			y = point.y;

			//redessiner
			repaint();
		}

		@Override
		public void mouseMoved(MouseEvent e) {
			//Initialiser les coordonnées une fois le glissement terminé
			x = -1;
			y = -1;
			xx = -1;
			yy = -1;
			type = 0;
		}

		@Override
		public void mouseClicked(MouseEvent e) {
		}

		@Override
		public void mousePressed(MouseEvent e) {
			Point point = e.getPoint();
			x = point.x;
			y = point.y;
		}

		@Override
		public void mouseReleased(MouseEvent e) {
		}

		@Override
		public void mouseEntered(MouseEvent e) {
		}

		@Override
		public void mouseExited(MouseEvent e) {
		}

	}

	//Pour le bouton clair
	static class ClearListener implements ActionListener {

		PaintCanvas canvas;

		public ClearListener(PaintCanvas canvas) {
			super();
			this.canvas = canvas;
		}

		@Override
		public void actionPerformed(ActionEvent e) {
			canvas.clear();
		}

	}

	//Pour les curseurs
	static class SliderListener implements ChangeListener {

		PaintCanvas canvas;

		public SliderListener(PaintCanvas canvas) {
			super();
			this.canvas = canvas;
		}

		@Override
		public void stateChanged(ChangeEvent e) {
			JSlider source = (JSlider) e.getSource();
			int fps = (int) source.getValue();
			canvas.setStroke(fps);
		}

	}

	//Pour combo box
	static class ComboListener implements ActionListener {

		PaintCanvas canvas;

		public ComboListener(PaintCanvas canvas) {
			super();
			this.canvas = canvas;
		}

		@Override
		public void actionPerformed(ActionEvent e) {
			JComboBox source = (JComboBox) e.getSource();
			String color = (String) source.getSelectedItem();
			canvas.setColorCombo(color);
		}

	}

}

# à la fin Depuis que j'ai posté dans un tel endroit pour la première fois cette fois, je pense qu'il y a beaucoup de parties qui ne peuvent pas être atteintes, Nous espérons qu'il vous sera utile.

Merci d'avoir lu jusqu'au bout!

Comment utiliser et appliquer la classe JFrame / Canvas de Java