Java Drawing: Use Graphics Class to Draw Line Segments, Rectangles, Ellipses/Arcs/Sectors, Pictures, Texts

1. Graphics Drawing Canvas

The Graphics class is equivalent to a canvas, and each Swing component draws its display through a Graphics object. The origin of the drawing is in the upper left corner of the component, as shown in the following figure:

Graphics class commonly used drawing correlation methods:

0 Parameters/Settings:

// Create a copy of Graphics
Graphics create()
// Recycling Graphics
void dispose()

// Set the brush color
void setColor(Color c)
// Erase an area (display background color after erasure)
void clearRect(int x, int y, int width, int height)

1. Line segment/broken line:

// Draw a line segment (if two points are the same point, draw points)
void drawLine(int x1, int y1, int x2, int y2)
// Drawing polygons according to given coordinates of multiple points
void drawPolyline(int xPoints[], int yPoints[], int nPoints)

2. Rectangles/Polygons:

// Draw a rectangle (hollow)
void drawRect(int x, int y, int width, int height)
// Fill a rectangle (solid)
void fillRect(int x, int y, int width, int height)

// Draw a rounded rectangle
void drawRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)
// Fill in a rounded rectangle
void fillRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)

// Draw a 3D rectangle
void draw3DRect(int x, int y, int width, int height, boolean raised)
// Fill in a 3D rectangle
void fill3DRect(int x, int y, int width, int height, boolean raised)

// Draw a polygon (end to end) based on a given number of points coordinates.
void drawPolygon(int xPoints[], int yPoints[], int nPoints)
// Fill a polygon (end to end) according to a given number of points coordinates.
void fillPolygon(int xPoints[], int yPoints[], int nPoints)

3. Arc/sector:

// Draw an arc (arc)
void drawArc(int x, int y, int width, int height, int startAngle, int arcAngle)
// Fill in an arc (sector)
void fillArc(int x, int y, int width, int height, int startAngle, int arcAngle)

4, ellipse:

// Draw an ellipse
void drawOval(int x, int y, int width, int height)
// Fill in an ellipse
void fillOval(int x, int y, int width, int height)

5, picture

/*
 * Read the picture first
 */
// Method 1: Read pictures in local, network or memory (support GIF, JPEG or PNG) through the java.awt.Toolkit toolkit class
Image image = Toolkit.getDefaultToolkit().getImage(String filename);
Image image = Toolkit.getDefaultToolkit().getImage(URL url);
Image image = Toolkit.getDefaultToolkit().createImage(byte[] imageData);

// Method 2: Read pictures in local, network or memory through javax.imageio.ImageIO toolkit class (Buffered Image inherits from Image)
BufferedImage bufImage = ImageIO.read(File input);
BufferedImage bufImage = ImageIO.read(URL input);
BufferedImage bufImage = ImageIO.read(InputStream input);

/*
 * PS_01: Picture width and height: BufferedImage can get the image width directly by bufImage.getWidth() and bufImage.getHeight().
 *                 Image Getting width and height requires an additional ImageObserver parameter to be passed in.
 *
 * PS_02: Picture clipping: BufferedImage can intercept pictures by bufImage.getSubimage(int x, int y, int w, int h)
 *                 In any part, return a new BufferedImage instance.
 *
 * PS_03: Image scaling: Image can do pictures through image.getScaledInstance(int width, int height, int hints).
 *                 Zoom in to return a new instance of Image.
 */

// Draw a picture (all component classes implement the ImageObserver interface, that is, the component instance is ImageObserver)
boolean drawImage(Image image, int x, int y, int width, int height, ImageObserver observer)

6, text

// Set fonts (fonts, styles, sizes)
void setFont(Font font)
// Draw a paragraph of text, where (x, y) coordinates refer to the position of the lower left corner of the text sequence
void drawString(String str, int x, int y)

2. Graphics2D

In the actual rendering of Swing components, a subclass of Graphics ** Graphics 2D ** is commonly used, which provides a richer interface to draw more complex requirements.

Some methods in the Graphics 2D class:

1. Parameters/Settings

// Set the background (display the background after erasing)
void setBackground(Color color)
// Set the outline characteristics of the strokes (such as brush width, solid lines, dashed lines, etc.)
void setStroke(Stroke s)

2. Transform of Drawing Result

// translation
void translate(int x, int y)
// rotate
void rotate(double theta, double originX, double originY)
// zoom
void scale(double sx, double sy)

// Drawing and displaying pictures after specified transformation
boolean drawImage(Image image, AffineTransform xform, ImageObserver obs)

3. Custom Components, Drawing Demonstration

package com.xiets.drawdemo;

import javax.swing.*;
import java.awt.*;

public class Main {

    public static void main(String[] args) {
        /*
         * Create windows and components in AWT event queue threads to ensure thread safety.
         * That is, component creation, drawing and event response need to be in the same thread.
         */
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                // Create window objects
                MyFrame frame = new MyFrame();
                // Display window
                frame.setVisible(true);
            }
        });
    }

    /**
     * window
     */
    public static class MyFrame extends JFrame {

        public static final String TITLE = "Java Graph drawing";

        public static final int WIDTH = 250;
        public static final int HEIGHT = 300;

        public MyFrame() {
            super();
            initFrame();
        }

        private void initFrame() {
            // Setting window title and window size
            setTitle(TITLE);
            setSize(WIDTH, HEIGHT);

            // Set the default action of the window closure button (click Close to exit the process)
            setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);

            // Set the window position to the center of the screen
            setLocationRelativeTo(null);

            // Setting the Content Panel of the Window
            MyPanel panel = new MyPanel(this);
            setContentPane(panel);
        }

    }

    /**
     * Content panel
     */
    public static class MyPanel extends JPanel {

        private MyFrame frame;

        public MyPanel(MyFrame frame) {
            super();
            this.frame = frame;
        }

        /**
         * Drawing the content of the panel: Once the JPanel is created, the method is called to draw the content.
         * Then, if the data changes need to be redrawn, the updateUI() method can be called to trigger
         * The system calls this method again to draw and update the contents of JPanel.
         */
        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);

            // Re-invoking Graphics drawing method automatically erases old content when drawing

            /* Open the following comments to see the effect of each drawing */

            // 1. Line segment/broken line
            drawLine(g);

            // 2. Rectangles/Polygons
            // drawRect(g);

            // 3. Arc/sector
            // drawArc(g);

            // 4. ellipses
            // drawOval(g);

            // 5. pictures
            // drawImage(g);

            // 6. text
            // drawString(g);
        }

        /**
         * 1. Line segment/broken line
         */
        private void drawLine(Graphics g) {
            frame.setTitle("1. line segment / Broken line");

            // To create a copy of Graphics, you need to change the parameters of Graphics.
            // Copies must be used here to avoid affecting the original settings of Graphics
            Graphics2D g2d = (Graphics2D) g.create();

            // Anti-Aliasing
            g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
            // Set the brush color
            g2d.setColor(Color.RED);

            // 1. Draw line segments with two points: point (20, 50), point (200, 50)
            g2d.drawLine(50, 50, 200, 50);

            // 2. Multipoint drawing polyline: point (50, 100), point (100, 130), point (150, 70), point (200, 100)
            int[] xPoints = new int[] { 50, 100, 150, 200 };
            int[] yPoints = new int[] { 100, 120, 80, 100 };
            int nPoints = 4;
            g2d.drawPolyline(xPoints, yPoints, nPoints);

            // 3. Draw line segments at two points (set line width to 5px): points (50, 150), points (200, 150)
            BasicStroke bs1 = new BasicStroke(5);       // The outline of the stroke (brush width/line width 5px)
            g2d.setStroke(bs1);
            g2d.drawLine(50, 150, 200, 150);

            // 4. Drawing dotted lines: divide dotted lines into several segments (both solid and blank segments are considered as one segment), and alternately draw solid and blank segments.
            //             The length of each drawn segment (including solid and blank segments) is taken from the dash dash dotted pattern array (from the beginning)
            //             The following array indicates that the length of each segment is: 5px, 10px, 5px, 10px,...
            float[] dash = new float[] { 5, 10 };
            BasicStroke bs2 = new BasicStroke(
                    1,                      // Brush Width/Linewidth
                    BasicStroke.CAP_SQUARE,
                    BasicStroke.JOIN_MITER,
                    10.0f,
                    dash,                   // Dashed pattern array
                    0.0f
            );
            g2d.setStroke(bs2);
            g2d.drawLine(50, 200, 200, 200);

            // When you run out of copies you create, destroy them.
            g2d.dispose();
        }

        /**
         * 2. Rectangle/Polygon
         */
        private void drawRect(Graphics g) {
            frame.setTitle("2. rectangle / polygon");
            Graphics2D g2d = (Graphics2D) g.create();

            g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
            g2d.setColor(Color.GRAY);

            // 1. draw a rectangle: starting point (30, 20), width 80, height 100.
            g2d.drawRect(30, 20, 80, 100);

            // 2. Fill in a rectangle
            g2d.fillRect(140, 20, 80, 100);

            // 3. draw a rounded rectangle: starting point (30, 150), width 80, height 100, fillet width 30, rounded height 30
            g2d.drawRoundRect(30, 150, 80, 100, 30, 30);

            // 4. Draw a polygon (end connected): point (140, 150), point (180, 250), point (220, 200)
            int[] xPoints = new int[] { 140, 180, 220};
            int[] yPoints = new int[] { 150,  250, 200};
            int nPoints = 3;
            g2d.drawPolygon(xPoints, yPoints, nPoints);

            g2d.dispose();
        }

        /**
         * 3. Arc/sector
         */
        private void drawArc(Graphics g) {
            frame.setTitle("3. Arc / Sector");
            Graphics2D g2d = (Graphics2D) g.create();

            g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
            g2d.setColor(Color.RED);

            // 1. Draw an arc: the upper left corner coordinates of the tangential rectangle of the ellipse are (0, 0), 100 wide and 100 high.
            //                The starting angle of the arc is 0 degrees, and the angle to be drawn is -90 degrees.
            //                On the right side of the ellipse, the horizontal line is 0 degrees, the counter-clockwise angle is positive, and the clockwise angle is negative.
            g2d.drawArc(0, 0, 100, 100, 0, -90);

            // 2. Draw a circle: the upper left corner coordinates of the tangential rectangle of the circle are (120, 20) and the width and height are 100.
            g2d.drawArc(120, 20, 100, 100, 0, 360);

            g2d.setColor(Color.GRAY);

            // 3. Fill in a sector
            g2d.fillArc(80, 150, 100, 100, 90, 270);

            g2d.dispose();
        }

        /**
         * 4. Ellipses (in fact, circles/ellipses can also be drawn by drawing 360-degree arcs/sectors)
         */
        private void drawOval(Graphics g) {
            frame.setTitle("4. Ellipse");
            Graphics2D g2d = (Graphics2D) g.create();

            g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
            g2d.setColor(Color.RED);

            // 1. Draw a circle: the upper left corner coordinates of the tangential rectangle of the circle are (0, 0), and the width and height are 100.
            g2d.drawOval(0, 0, 100, 100);

            g2d.setColor(Color.GRAY);

            // 2. Fill in an ellipse
            g2d.fillOval(120, 100, 100, 150);

            g2d.dispose();
        }

        /**
         * 5. picture
         */
        private void drawImage(Graphics g) {
            frame.setTitle("5. picture");
            Graphics2D g2d = (Graphics2D) g.create();

            // Read a picture locally
            String filepath = "demo.jpg";
            Image image = Toolkit.getDefaultToolkit().getImage(filepath);

            // Drawing pictures (if the width is not the width of the original image, the picture will be appropriately scaled and drawn).
            g2d.drawImage(image, 50, 50, image.getWidth(this), image.getHeight(this), this);

            g2d.dispose();
        }

        /**
         * 6. text
         */
        private void drawString(Graphics g) {
            frame.setTitle("6. text");
            Graphics2D g2d = (Graphics2D) g.create();

            g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

            // Set font style, null means using default font, Font.PLAIN is normal style, size 25 PX
            g2d.setFont(new Font(null, Font.PLAIN, 25));

            // Drawing text, where coordinate parameters refer to the position of the lower left corner of the text after drawing
            // Initialization of fonts is required for first rendering, which may be time-consuming
            g2d.drawString("Hello World!", 20, 60);
            g2d.drawString("Hello, world!", 20, 120);

            g2d.dispose();
        }

    }

}

The results show that:

Tags: Java network Windows

Posted on Wed, 09 Oct 2019 03:54:25 -0700 by cainy1982