Drawing a rectangle inside a rectangle

Drawing a Rectangle Inside Another Rectangle in Java AWT

Learn how to use Java's Abstract Window Toolkit (AWT) to draw nested rectangles, understanding coordinate systems and basic graphics operations.

Drawing shapes is a fundamental aspect of graphical user interface (GUI) programming. In Java, the Abstract Window Toolkit (AWT) provides the necessary classes and methods to perform 2D graphics operations, including drawing rectangles. This article will guide you through the process of drawing one rectangle inside another, focusing on the coordinate system and the Graphics object in AWT.

Understanding the AWT Coordinate System

Before diving into drawing, it's crucial to understand how AWT (and most 2D graphics systems) handles coordinates. The origin (0,0) is typically located at the top-left corner of the drawing area (e.g., a JFrame or JPanel). The X-axis extends horizontally to the right, and the Y-axis extends vertically downwards. This means that increasing Y values move you further down the screen.

When drawing a rectangle, you specify its top-left corner (x, y) and its width and height. The drawRect(x, y, width, height) method draws the outline, while fillRect(x, y, width, height) fills the rectangle.

flowchart TD
    A[Origin (0,0)] --> B{X-axis increases right}
    A --> C{Y-axis increases down}
    B --> D[Rectangle Top-Left (x,y)]
    C --> D
    D --> E[Width extends right from x]
    D --> F[Height extends down from y]

AWT Coordinate System Overview

Implementing Nested Rectangles

To draw a rectangle inside another, you'll typically extend a JPanel and override its paintComponent(Graphics g) method. This method is where all custom drawing logic should reside. The Graphics object g passed to this method is your drawing canvas. You can cast it to Graphics2D for more advanced features, but for basic rectangles, Graphics is sufficient.

To center the inner rectangle, you'll need to calculate its x and y coordinates based on the outer rectangle's dimensions and the desired size of the inner rectangle. The formula for centering an inner rectangle (inner_width, inner_height) within an outer rectangle (outer_x, outer_y, outer_width, outer_height) is:

inner_x = outer_x + (outer_width - inner_width) / 2 inner_y = outer_y + (outer_height - inner_height) / 2

import java.awt.Color;
import java.awt.Graphics;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class NestedRectangles extends JPanel {

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g); // Call superclass method

        // Define outer rectangle properties
        int outerX = 50;
        int outerY = 50;
        int outerWidth = 300;
        int outerHeight = 200;

        // Define inner rectangle properties
        int innerWidth = 150;
        int innerHeight = 100;

        // Calculate inner rectangle's position to center it
        int innerX = outerX + (outerWidth - innerWidth) / 2;
        int innerY = outerY + (outerHeight - innerHeight) / 2;

        // Draw the outer rectangle
        g.setColor(Color.BLUE);
        g.drawRect(outerX, outerY, outerWidth, outerHeight);
        g.drawString("Outer Rectangle", outerX + 5, outerY + 15);

        // Draw the inner rectangle
        g.setColor(Color.RED);
        g.drawRect(innerX, innerY, innerWidth, innerHeight);
        g.drawString("Inner Rectangle", innerX + 5, innerY + 15);
    }

    public static void main(String[] args) {
        JFrame frame = new JFrame("Nested Rectangles");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new NestedRectangles());
        frame.setSize(400, 300);
        frame.setLocationRelativeTo(null); // Center the frame
        frame.setVisible(true);
    }
}

Java AWT code to draw a centered rectangle inside another.

Customizing Appearance

You can easily customize the appearance of your rectangles by changing their color, fill status, and even stroke properties (though Graphics2D offers more control over stroke). The g.setColor(Color color) method sets the current drawing color for subsequent drawing operations. You can use predefined Color constants (e.g., Color.RED, Color.BLUE) or create custom colors using RGB values.

To fill a rectangle instead of just drawing its outline, use g.fillRect(x, y, width, height).

    // Inside paintComponent method
    // ... (outerX, outerY, etc. defined)

    // Fill the outer rectangle
    g.setColor(new Color(173, 216, 230)); // Light Blue
    g.fillRect(outerX, outerY, outerWidth, outerHeight);

    // Draw the outline of the outer rectangle
    g.setColor(Color.DARK_GRAY);
    g.drawRect(outerX, outerY, outerWidth, outerHeight);

    // Fill the inner rectangle
    g.setColor(new Color(255, 160, 122)); // Light Salmon
    g.fillRect(innerX, innerY, innerWidth, innerHeight);

    // Draw the outline of the inner rectangle
    g.setColor(Color.BLACK);
    g.drawRect(innerX, innerY, innerWidth, innerHeight);

Example of filling rectangles with custom colors.