How to draw text vertically with Java Graphics2D

Details
Written by  
Last Updated on 10 August 2019   |   Print  Email


This article shows you how to draw a String vertically on a graphics context. In the default coordinate system, a String is drawn from left to right. The following picture illustrates how the “Hello World” string is drawn in the default coordinate system (under the graphics context of a JFrame container):

drawing string in default coordinate system

To draw the String vertically, the coordinate system needs to be rotated either by 90o degree (clockwise) or by -90o degree (counterclockwise). The following picture illustrates the coordinate system rotated by 90o degree clockwise:

drawing string in rorated coordinate system clockwise

Here, the X’OY’ coordinate system is the result of rotating the XOY coordinate system by 90o degree clockwise (or one quadrant). In Java, the following code snippet is used to make such rotation:

Graphics2D g2d = ...; // obtain the graphics context

AffineTransform at = new AffineTransform();
at.rotate(Math.PI / 2);

g2d.setTransform(at);

That’s also equivalent to the following code (rotating by one quadrant):

AffineTransform at = AffineTransform.getQuadrantRotateInstance(1);
g2d.setTransform(at);

Then draw the text “Hello World” as follows:

g2d.drawString("Hello World", 100, -250);

NOTES: As shown in the above picture, the (x, y) position of the String must be relative to the new coordinate system. Thus, to draw the String to the visible area of the frame, the Y position must be negative, and the X position is equivalent to Y position in the original coordinate system.

Similarly, to draw the String vertically in counterclockwise direction, the coordinate system needs be rotated by -90o degree (or by 3 quadrants). The following picture illustrates such rotation:

drawing string in default coordinate system couterclockwise

Here, the X’OY’ coordinate system is the result of rotating the XOY coordinate system by 90o degree counterclockwise (or three quadrants). In Java code:

Graphics2D g2d = ...; // obtain the graphics context

AffineTransform at = new AffineTransform();
at.rotate(-Math.PI / 2);

g2d.setTransform(at);

Or rotate by 3 quadrants:

AffineTransform at = AffineTransform.getQuadrantRotateInstance(3);
g2d.setTransform(at);

Then draw the String as follows:

g2d.drawString("Hello World", -200, 50);

 

NOTES: In the new coordinate system, the X position must be negative in order to have the text visible. Refer to the above picture for better understanding.

It’s recommended to keep a reference of the default affine transform before making the rotation and drawing on the new coordinate system. Then restore the original coordinate system to draw normally. Here’s the code snippet:

// get a reference of the affine transform of the original coordinate system
AffineTransform defaultAt = g2d.getTransform();

// make new affine transform for rotation
// draw on the new coordinate system

// restore the original coordinate system
g2d.setTransform(defaultAt);

The following code is a demo program that draws two Strings “Hello World” vertically in two directions:

package net.codejava.graphics;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.AffineTransform;

import javax.swing.JFrame;
import javax.swing.SwingUtilities;

/**
 * This program demonstrates how to draw text vertically 
 * on a graphics context.
 * @author www.codejava.net
 *
 */
public class VerticalTextDrawingExample extends JFrame {
	
	public VerticalTextDrawingExample() {
		super("Vertical Text Drawing Example");
		
		setSize(320, 280);
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setLocationRelativeTo(null);
	}
	
	public void paint(Graphics g) {
		super.paint(g);
		
		g.setFont(new Font("Arial", Font.BOLD, 16));
		g.setColor(Color.BLUE);
		g.drawString("Hello World", 100, 100);
		
		Graphics2D g2d = (Graphics2D) g;
		AffineTransform defaultAt = g2d.getTransform();
		
		// rotates the coordinate by 90 degree counterclockwise
		AffineTransform at = new AffineTransform();
		at.rotate(- Math.PI / 2);
		g2d.setTransform(at);
		g2d.drawString("Hello World", -200, 50);
		
		
		AffineTransform at2 = AffineTransform.getQuadrantRotateInstance(1);
		g2d.setTransform(at2);
		
		g2d.drawString("Hello World", 100, -250);
		
		g2d.setTransform(defaultAt);
		
	}

	public static void main(String[] args) {
		SwingUtilities.invokeLater(new Runnable() {
			
			@Override
			public void run() {
				new VerticalTextDrawingExample().setVisible(true);
			}
		});
	}

}

Output of the program:

Vertical text drawing sample program

 

Other Java Graphics Tutorials:


About the Author:

is certified Java programmer (SCJP and SCWCD). He began programming with Java back in the days of Java 1.4 and has been passionate about it ever since. You can connect with him on Facebook and watch his Java videos on YouTube.



Add comment