Drawing with Swing

Hello everyone. This page is an English translation of a Japanese page. (The original Japanese has been slightly rewritten to make it easier to translate into English.)

In Java, a GUI library called Swing is provided. It is possible to draw a window with the JFrame class. This time, we checked the process of drawing text and graphics on the displayed window.

Sample program template

The following is a template program.

Source
import java.awt.Graphics;

import javax.swing.JFrame;

public class Test extends JFrame {

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

    public Test() {
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setSize(350, 250);
        setVisible(true);
    }

    @Override
    public void paint(Graphics g) {
        super.paint(g);
        Graphics graphics = getContentPane().getGraphics();

        // drawing process

    }

}

JFrame has a getContentPane() method. According to the API specification, it is possible to get something called a contentPane object. The return value of this method itself is defined in the Container class. The return value of this method itself is defined in the Container class. By using the Graphics object method of this method, you can draw on any part of the frame except the title bar.

In the source of the template, describe the drawing process in the form of graphics.[drawing method] in the “// drawing process" section.

The coordinate system used for drawing is the origin (0, 0) in the upper left corner, with the x-axis increasing from left to right and the y-axis increasing from top to bottom.

Drawing a string

To draw the string “Hello.", use the graphics#drawString method. The arguments are (String str, int x, int y). The roles of each are as follows.

Arguments Role
str The string to be drawn.
x x-coordinate of the lower left corner of the drawing area.
y y-coordinate of the lower left corner of the drawing area.

For example, you can write the following

Source
graphics.drawString("Hello.", 10, 30);

The string “Hello." will be drawn with the point (10, 30) at the lower left of the drawing area.

swing_day002001_drawstring

Drawing a straight line

The following methods are introduced here.

  • drawLine(int x1, int y1, int x2, int y2)
  • drawPolyline(int[] xPoints, int[] yPoints, int nPoints)
  • drawPolygon(int[] xPoints, int[] yPoints, int nPoints)

The drawLine method draws a line segment connecting two points. The argument specifies the two points (x1, y1) and (x2, y2). The line segment is the part of the line connecting the two points between the two points.

The drawPolyline method draws a line segment at the coordinates specified in the argument. The arguments xPoints and yPoints must have the same number of elements. The argument nPoints is the number of those elements. If the argument nPoints is 2 or more, draw a line segment connecting two points (xPoints[i-1], yPoints[i-1]) and (xPoints[i], yPoints[i]), where the symbol i is a natural number between 1 and nPoints-1.

In the drawPolygon method, the method of specifying the argument is the same as drawPolyline, but the line connecting the last point represented by the array and the first point will also be drawn.

For example, you can use the following.

Source
graphics.drawString("drawLine", 10, 30);
graphics.drawLine(10, 150, 30, 50);

int[] xPoints1 = { 80, 120, 160 };
int[] yPoints1 = { 150, 50, 150 };
graphics.drawString("drawPolyline", 80, 30);
graphics.drawPolyline(xPoints1, yPoints1, xPoints1.length);

int[] xPoints2 = { 180, 220, 260 };
int[] yPoints2 = { 150, 50, 150 };
graphics.drawString("drawPolygon", 180, 30);
graphics.drawPolygon(xPoints2, yPoints2, xPoints2.length);
swing_day002002_drawline

There is a method called fillPolygon that corresponds to drawPolygon. It fills a closed polygon.

Drawing the outline of a shape

The following methods are introduced here.

  • drawRect(int x, int y, int width, int height)
  • drawRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)
  • drawOval(int x, int y, int width, int height)
  • drawArc(int x, int y, int width, int height, int startAngle, int arcAngle)

The first and second arguments of drawRect specify the upper left point (x, y). The remaining arguments specify the width and height.

The drawRoundRect method also uses arcWidth and arcHeight to specify the horizontal and vertical diameters of the arcs in the four corners.

In the case of the drawOval method, the drawn shape will be an ellipse. drawArc can be used to draw an arc by specifying startAngle and arcAngle.

For example, you can use the following

Source
graphics.drawString("drawRect", 10, 30);
graphics.drawRect(20, 50, 40, 100);

graphics.drawString("drawRoundRect", 70, 30);
graphics.drawRoundRect(100, 50, 40, 100, 40, 20);

graphics.drawString("drawOval", 180, 30);
graphics.drawOval(190, 50, 40, 100);

graphics.drawString("drawArc", 250, 30);
graphics.drawArc(260, 50, 40, 100, 30, 250);
swing_day002003_drawrect

For each of the above methods, there are fillRect, fillRoundRect, fillOval, and fillArc methods to fill the shape.

Other

If you look at the API specification, you will see that there are other methods. For example, there is a drawImage method that draws an image.

That’s all. I hope this is helpful to you.

Articles next and previous in the same category