Shapes and fills in Java 2D

Shapes and fills

In this part of the Java 2D tutorial, we will create some basic and more advanced shapes. Then we will fill shapes with solid colors, gradients and textures.

Basic shapes

First we draw some basic Java 2D shapes.

BasicShapes.java

package com.zetcode;

import java.awt.Color;
import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.RenderingHints;
import java.awt.geom.Ellipse2D;

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

public class BasicShapes extends JPanel {

    public void paint(Graphics g) {

        Graphics2D g2d = (Graphics2D) g;

        g2d.setColor(new Color(150, 150, 150));

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


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

        g2d.setRenderingHints(rh);

        g2d.fillRect(20, 20, 50, 50);
        g2d.fillRect(120, 20, 90, 60);
        g2d.fillRoundRect(250, 20, 70, 60, 25, 25);

        g2d.fill(new Ellipse2D.Double(10, 100, 80, 100));
        g2d.fillArc(120, 130, 110, 100, 5, 150);
        g2d.fillOval(270, 130, 50, 50);   
    }

    public static void main(String[] args) {

        JFrame frame = new JFrame("Basic Shapes");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new BasicShapes());
        frame.setSize(350, 250);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}

In this example, we draw six basic shapes of the Java 2D on the panel. A square, a rectangle, a rounded rectangle, an ellipse, an arc and a circle.

g2d.fillRect(20, 20, 50, 50);
g2d.fillRect(120, 20, 90, 60);

The fillRect() method is used to draw both a rectangle and a square. The first two parameters are x, y coordinates of a shape to be drawn. The last two parameters are the width and the height of the shape.

g2d.fillRoundRect(250, 20, 70, 60, 25, 25);

Here we create a rounded rectangle. The last two parameters are the horizontal and vertical diameters of the arc at the four corners.

Figure: Basic shapes

General path

More complex shapes can be constructed with a GeneralPath class. It represents a geometric path constructed from straight lines, and quadratic and cubic Bézier curves.
In the next example, we will create a star with this class.

Star.java

package com.zetcode;

import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.geom.GeneralPath;

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

public class Star extends JPanel {

    double points[][] = { 
        { 0, 85 }, { 75, 75 }, { 100, 10 }, { 125, 75 }, 
        { 200, 85 }, { 150, 125 }, { 160, 190 }, { 100, 150 }, 
        { 40, 190 }, { 50, 125 }, { 0, 85 } 
    };


    public void paint(Graphics g) {
        super.paint(g);

        int h = getHeight();
        int w = getWidth();


        Graphics2D g2d = (Graphics2D)g;

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

        g2d.setRenderingHint(RenderingHints.KEY_RENDERING,
                             RenderingHints.VALUE_RENDER_QUALITY);

        g2d.translate(25, 5);

        GeneralPath star = new GeneralPath();

        star.moveTo(points[0][0], points[0][1]);

        for (int k = 1; k < points.length; k++)
            star.lineTo(points[k][0], points[k][1]);

        star.closePath();
        g2d.fill(star);
    }

    public static void main(String[] args) {

        JFrame frame = new JFrame("Star");
        frame.add(new Star());
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(350, 250);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}

We will create a star from a series of points.

double points[][] = { 
    { 0, 85 }, { 75, 75 }, { 100, 10 }, { 125, 75 }, 
    { 200, 85 }, { 150, 125 }, { 160, 190 }, { 100, 150 }, 
    { 40, 190 }, { 50, 125 }, { 0, 85 } 
};

These are the coordinates of the star.

GeneralPath star = new GeneralPath();

Here we instantiate the GeneralPath class.

star.moveTo(points[0][0], points[0][1]);

We move to the initial coordinate of the GeneralPath.

for (int k = 1; k < points.length; k++)
    star.lineTo(points[k][0], points[k][1]);

Here we connect all the coordinates of the star.

star.closePath();
g2d.fill(star);

We close the path and fill the interior of the star. A new star is born.

Figure: Star

Colors

The Color class is used to work with colors in Java 2D. To fill rectangles with the current color, we use the fillRect() method.

Colors.java

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;

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


public class Colors extends JPanel {

    public void paintComponent(Graphics g) {
        super.paintComponent(g); 

        Graphics2D g2d = (Graphics2D) g;

        g2d.setColor(new Color(125, 167, 116));
        g2d.fillRect(10, 15, 90, 60);

        g2d.setColor(new Color(42, 179, 231));
        g2d.fillRect(130, 15, 90, 60);

        g2d.setColor(new Color(70, 67, 123));
        g2d.fillRect(250, 15, 90, 60);

        g2d.setColor(new Color(130, 100, 84));
        g2d.fillRect(10, 105, 90, 60);

        g2d.setColor(new Color(252, 211, 61));
        g2d.fillRect(130, 105, 90, 60);

        g2d.setColor(new Color(241, 98, 69));
        g2d.fillRect(250, 105, 90, 60);

        g2d.setColor(new Color(217, 146, 54));
        g2d.fillRect(10, 195, 90, 60);

        g2d.setColor(new Color(63, 121, 186));
        g2d.fillRect(130, 195, 90, 60);

        g2d.setColor(new Color(31, 21, 1));
        g2d.fillRect(250, 195, 90, 60);

    }

    public static void main(String[] args) {

        JFrame frame = new JFrame("Colors");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new Colors());
        frame.setSize(360, 300);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}

In the example we draw nine colored rectangles.

g2d.fillRect(10, 15, 90, 60);

To fill the rectangle with a color, we use the fillRect() method.

Figure: Colors

Gradients

In computer graphics, gradient is a smooth blending of shades from light to dark or from one color to another. In 2D drawing programs and paint programs, gradients are used to create colorful backgrounds and special effects as well as to simulate lights and shadows. (answers.com)

Star.java

package com.zetcode;

import java.awt.Color;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;

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


public class Gradients extends JPanel {

    public void paint(Graphics g) {
        super.paint(g); 

        Graphics2D g2d = (Graphics2D) g;

        GradientPaint gp1 = new GradientPaint(5, 5, 
            Color.red, 20, 20, Color.black, true);

        g2d.setPaint(gp1);
        g2d.fillRect(20, 20, 300, 40);

        GradientPaint gp2 = new GradientPaint(5, 25, 
            Color.yellow, 20, 2, Color.black, true);

        g2d.setPaint(gp2);
        g2d.fillRect(20, 80, 300, 40);

        GradientPaint gp3 = new GradientPaint(5, 25, 
     	    Color.green, 2, 2, Color.black, true);

        g2d.setPaint(gp3);
        g2d.fillRect(20, 140, 300, 40);

        GradientPaint gp4 = new GradientPaint(25, 25, 
  	    Color.blue, 15, 25, Color.black, true);

        g2d.setPaint(gp4);
        g2d.fillRect(20, 200, 300, 40);

        GradientPaint gp5 = new GradientPaint(0, 0, 
   	     Color.orange, 0, 20, Color.black, true);

        g2d.setPaint(gp5);
        g2d.fillRect(20, 260, 300, 40);
    }

    public static void main(String[] args) {

        JFrame frame = new JFrame("Gradients");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new Gradients());
        frame.setSize(350, 350);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}

Our code example presents five rectangles with gradients.

GradientPaint gp4 = new GradientPaint(25, 25, Color.blue, 15, 25, Color.black, true);

To work with gradients, we use the GradientPaint class. By manipulating the color values and the starting end ending points, we can get interesting results.

g2d.setPaint(gp5);

The gradient is activated calling the setPaint() method.

Figure: Gradients

Textures

A texture is a bitmap image applied to a shape. To work with textures in Java 2D, we use the TexturePaint class.

Textures.java

package com.zetcode;

import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import java.awt.TexturePaint;
import java.awt.image.BufferedImage;

import java.io.IOException;

import javax.imageio.ImageIO;

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


public class Textures extends JPanel {

    BufferedImage slate;
    BufferedImage java;
    BufferedImage pane;

    TexturePaint slatetp;
    TexturePaint javatp;
    TexturePaint panetp;


    public Textures() {

        try {
            slate = ImageIO.read(this.getClass().getResource("slate.png"));
            java = ImageIO.read(this.getClass().getResource("java.png"));
            pane = ImageIO.read(this.getClass().getResource("pane.png"));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public void paintComponent(Graphics g) {
            super.paintComponent(g); 

            Graphics2D g2d = (Graphics2D) g;

            slatetp = new TexturePaint(slate, new Rectangle(0, 0, 90, 60));
            javatp = new TexturePaint(java, new Rectangle(0, 0, 90, 60));
            panetp = new TexturePaint(pane, new Rectangle(0, 0, 90, 60));

            g2d.setPaint(slatetp);
            g2d.fillRect(10, 15, 90, 60);

            g2d.setPaint(javatp);
            g2d.fillRect(130, 15, 90, 60);

            g2d.setPaint(panetp);
            g2d.fillRect(250, 15, 90, 60);

    }

    public static void main(String[] args) {

        JFrame frame = new JFrame("Textures");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new Textures());
        frame.setSize(360, 120);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}

In the code example, we fill three rectangles with three different textures.

slate = ImageIO.read(this.getClass().getResource("slate.png"));

Here we read the image into the buffered image.

slatetp = new TexturePaint(slate, new Rectangle(0, 0, 90, 60));

We create a TexturePaint class out of the buffered image.

g2d.setPaint(slatetp);
g2d.fillRect(10, 15, 90, 60);

We fill a rectangle with a texture.

Figure: Textures

In this part of the Java 2D tutorial, we have covered some basic and more advanced shapes of the Java 2D library.