Trying to draw text at an angle
 

I want to draw some text on a JFrame (later it'll change to a JPanel), but not have the text necessarily be horizontal. I've found some decent examples online that have worked well, but they've all been 500+ lines long. I'm hoping it can be done in a way that's shorter.

My understanding is that I can't use plain old

drawString

directly onto the JFrame if I don't want the text to be horizontal. Instead I need to create an image, then tilt the image, then draw the image onto the the JFrame. My attempt so far creates an image and draws it onto the JFrame, but it's horizontal.

Does anyone know a way to tilt the image to get sideways text or how to get sideways text some other way that doesn't require several hundred more lines of code? I'm pretty much of a noob when it comes to images. Thanks. Here's my attempt so far that makes the text horizontal.

import javax.swing.*;

import java.awt.*;

import java.awt.image.*;

import java.awt.font.*;



public class RotateDemo extends JFrame

{

    Font font;

    Font font2;

    String title;

    String title2;

    Image image;

    Image image2;

    RotatorCanvas rotator;



    public static void main(String args[])

    {

        new RotateDemo();

    }



    public RotateDemo()

    {

        setVisible(true);

        setSize(400, 400);

        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        font = new Font("Helvetica", Font.BOLD, 20);

        font2 = new Font("Courier", Font.BOLD, 35);

        title = "Hello";

        title2 = "Hi";

        image = this.createRotatedImage(Color.black, font, title);

        image2 = this.createRotatedImage(Color.red, font2, title2);

        rotator = new RotatorCanvas(image, image2);

        add(rotator);

        validate();

    }



    private Image createRotatedImage(Color c, Font afont, String theText)

    {

        FontMetrics fm = Toolkit.getDefaultToolkit().getFontMetrics(afont);

        int width = fm.stringWidth(theText);

        int height = fm.getHeight();

        int ascent = fm.getMaxAscent();

        int leading = fm.getLeading();



        Image animage = this.createImage (width + 8, height);



        Graphics gr = animage.getGraphics();

        gr.setColor(Color.white);

        gr.fillRect(0, 0, animage.getWidth(this), animage.getHeight (this));

        gr.setFont(afont);

        gr.setColor(c);

        gr.drawString(theText, 4, ascent + leading);

        ImageFilter filter = new ImageFilter();

        ImageProducer producer = new FilteredImageSource (animage.getSource(),  filter);

        animage = createImage(producer);

        return animage;

    }

}







class RotatorCanvas extends Canvas

{

    Image image;

    Image image2;



    

    public RotatorCanvas(Image im1, Image im2)

    {

        super();

        this.image = im1;

        this.image2 = im2;

    }



    

    public void paint(Graphics g)

    {

        g.setColor(Color.BLACK);

        g.drawRect(19, 19, image.getWidth(this) + 2, image.getHeight(this) + 2);

        g.drawImage(image, 20, 20, this);

        g.drawRect(99, 99, image2.getWidth(this) + 2, image2.getHeight(this) + 2);

        g.drawImage(image2, 100, 100, this);

    }

}

Re: Trying to draw text at an angle
 

a search i did i found this:

public static BufferedImage rotate(Image image, double angle, int cx, int cy){

                int width = image.getWidth(null);

                int height = image.getHeight(null);

 

                //The bounds of the image

                int minX, minY, maxX, maxY;

                minX = minY = maxX = maxY = 0;

 

                //create an array containing the corners of the image

                //In the order TL,TR,BR,BL

                int[] corners = { 0, 0, width, 0, width, height, 0, height };

 

                double theta = Math.toRadians(angle);

                for(int i=0;i<corners.length;i+=2){

                        //Rotates the given point theta radians around (cx,cy)

                        int x = (int)(Math.cos(theta)*(corners[i]-cx) -

                                Math.sin(theta)*(corners[i+1]-cy)+cx);

                        int y = (int)(Math.sin(theta)*(corners[i]-cx) +

                                Math.cos(theta)*(corners[i+1]-cy)+cy);

 

                        //Update our bounds

                        if(x>maxX) maxX = x;

                        if(x<minX) minX = x;

                        if(y>maxY) maxY = y;

                        if(y<minY) minY = y;

                }

 

                //Where the center of the old image should be on the image we are

                //just about to create so that the image is all in viewable space.

                cx = (int)(cx-minX);

                cy = (int)(cy-minY);

 

                //Create a new image such that when we roate the old image, no pixels

                //will have a negative x or y coordinate.

                BufferedImage bi = createBufferedImage(maxX-minX, maxY-minY, true);

                Graphics2D g2 = bi.createGraphics();

 

 

                //Finally start the rotation process

                AffineTransform at = new AffineTransform();

                at.rotate(theta,cx,cy);

                g2.setTransform(at);

 

                g2.drawImage(image,-minX,-minY,null);

 

                g2.dispose();

 

                return toBufferedImage(bi);

        }

it rotates an entire image, so you could make an image write a line on it and pass it to this method, it's likely to be slow, i don't know much about afflinetransform

Re: Trying to draw text at an angle
 

Line 35 has a call to a function called createBufferedImage. Line 48 has a call to a function called toBufferedImage. Are these are from the same source that you got this function from? Do you have them? Thanks.

Re: Trying to draw text at an angle
 

Do you want to draw an image from a file, or do you want to be able to "rotate" a set of pixels such that they emulate a rotating String?

This can be either really simple or hard depending on where you want to rotate. If you have variable rotation points, this sill be incredibly hard.

Re: Trying to draw text at an angle
 

i didn't notice it had these calls... i'll write a method like this myself, that doesn't use afflinetransform.. but it will be slow, i should be able to post one before midnight, but likely in the next hour.

Re: Trying to draw text at an angle
 

I'll eventually be turning the JPanel into a GIF, but no, nothing to do with files in this part of the program. I'm hoping not to have to try to mess with the pixels myself. I just want to be able to specify the text, the font, and the angle, and have the program display that text in that font onto the JPanel/JFrame or whatever, at that angle. If possible, I'd like to do it just like drawString does it, but at an angle.

Re: Trying to draw text at an angle
 

Cool, right on. Thank you. I'm not familiar enough yet with what is required and what transformations are needed, so I don't know what a fast method is or a slow method. Maybe I'll have to solve it first with a slow solution, then optimize. I've seen a lot of Java applets with spinning text, so it's definitely been done many times, but I've never had occasion till now to investigate how to do it. Thanks again.

Re: Trying to draw text at an angle
 

ok, I wrote these two classes CustomPane is the one that has the rotateImage() method.

//CustomPane.java

import javax.swing.* ;

import java.awt.* ;

import java.awt.image.* ;



public class CustomPane extends JPanel {

        String str ;

        BufferedImage original = new BufferedImage ( 200 , 50 ,

                        BufferedImage.TYPE_INT_ARGB ) ;

        BufferedImage after ;

        double A = 0 ;

        double dA = 2 * Math.PI / 180 ;



        public CustomPane ( ) {

                this ( "Hello World" ) ;

        }



        public CustomPane ( String s ) {

                str = s ;

                Graphics g = original.getGraphics ( ) ;

                g.setColor ( new Color ( 0 , 0 , 0 , 1 ) ) ;

                g.fillRect ( 0 , 0 , original.getWidth ( ) , original.getHeight ( ) ) ;

                g.setColor ( new Color ( 0 , 0 , 0 , 255 ) ) ;

                g.drawString ( str , 10 , 10 ) ;

        }



        @ Override public void paint ( Graphics g ) {

                A += dA ;

                if ( A >= Math.PI/2 ) {

                        A -= Math.PI/2 ;

                }

                g.setColor(new Color(255,255,255));

                after = rotateImage ( original , A );

                g.fillRect ( 0 , 0 , original.getWidth ( ) , after.getHeight ( ) ) ;

                g.drawImage (after  , 10 , 10 , null ) ;

        }



        public static BufferedImage rotateImage ( BufferedImage bi ,

                        double angleRads ) {

                double cosA = Math.cos ( angleRads ) ;

                double sinA = Math.sin ( angleRads ) ;

                BufferedImage nbi = new BufferedImage ( ( int ) Math.abs ( ( bi

                                .getWidth ( )

                                * cosA + bi.getHeight ( ) * sinA ) ) , ( int ) Math.abs ( ( bi

                                .getHeight ( )

                                * cosA + bi.getWidth ( ) * sinA ) ) ,

                                BufferedImage.TYPE_INT_ARGB ) ;

                Graphics g = nbi.getGraphics ( ) ;

                g.setColor ( new Color ( 0 , 0 , 0 , 0 ) ) ;

                g.fillRect ( 0 , 0 , nbi.getWidth ( ) , nbi.getHeight ( ) ) ;

                for ( int x = 0 ; x < nbi.getWidth ( ) ; x ++ ) {

                        for ( int y = 0 ; y < nbi.getHeight ( ) ; y ++ ) {

                                try {

                                        nbi.setRGB ( ( int ) x , ( int ) y , bi.getRGB (

                                                        ( int ) ( x * cosA + y * sinA ) , ( int ) ( y

                                                                        * cosA - x * sinA ) ) ) ;

                                } catch ( Exception e ) {}

                        }

                }

                return nbi ;

        }

}

//RotateText.java

import java.awt.*;

import java.awt.event.*;

import java.awt.geom.*;

import javax.swing.*;

import javax.swing.event.*;

import java.util.concurrent.*;

public class RotateText extends JFrame implements Runnable

{

    CustomPane c = new CustomPane("This text will be rotated");

    public RotateText()

    {

        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        setSize(200,200);

        this.add(c);

        c.repaint();

        setVisible(true);

        ScheduledThreadPoolExecutor exec = new ScheduledThreadPoolExecutor(3);

        exec.scheduleAtFixedRate(this,0L,33L,TimeUnit.MILLISECONDS);

    }

    public static void main(String[] args){

        new RotateText();

    }

    public void run(){

        c.repaint();

    }

}

this example is of an animated rotating sentence, as i said this method is very slow, and inaccurate i hope that it is clear what i did. mostly basic trig.

Re: Trying to draw text at an angle
 

Hey thanks! I think I get he idea a little better now. I've changed the math to make the calculation a bit faster, but the idea is the same. You have a pixel that is at location (x1,y1) at angle 1 and you have to find the corresponding (x2, y2) point at angle 2 that corresponds to it. It's not a completely brute force method, but I'm still assigning a color to the buffered image on a pixel by pixel basis. I wonder whether there's a way where you don't have to go pixel by pixel like that? I've been getting decent results except sometimes for no obvious reason, I'm getting little dots in my letters instead of nice contiguous color patterns. The characters tend to look the best when they are close to horizontal or close to vertical. I'm thinking I've got some slight round-off error. But I'm a lot more on the right track now, so thank you again!

Re: Trying to draw text at an angle
 

yes, the blurry text is because of int rounding error. a better way to do it would be affinetransform, but i haven't used it much, and the sun tutorial confused me a bit, i think that this may also help.

Re: Trying to draw text at an angle
 

Great. Thank you. I will check those links out.

Re: Trying to draw text at an angle
 

You have made this a bit more complex than need be. For simple transformations, the Graphics2D methods rotate() and translate() will suffice (they additively modify the current AffineTransform of the graphics context) without any need to obtain or work with an AffineTransform object directly.

I wrote this small example that might help

import java.awt.BorderLayout;

import java.awt.Color;

import java.awt.EventQueue;

import java.awt.FontMetrics;

import java.awt.Graphics;

import java.awt.Graphics2D;

import javax.swing.JFrame;

import javax.swing.JPanel;



public class TextExample extends JFrame {



    GraphicPanel gPanel;



    public TextExample() {

        setDefaultCloseOperation(EXIT_ON_CLOSE);

        setLayout(new BorderLayout());

        gPanel = new GraphicPanel();

        getContentPane().add(gPanel, BorderLayout.CENTER);

        setBounds(100, 100, 200, 200);

        setVisible(true);

    }



    class GraphicPanel extends JPanel {

        protected void paintComponent(Graphics g) {

            Graphics2D g2 = (Graphics2D)g;

            g2.setBackground(Color.BLACK);

            g2.clearRect(0, 0, getWidth(), getHeight());

            g2.setColor(Color.WHITE);

            String msg = "Hi Vernon";

            FontMetrics metrics = g2.getFontMetrics();

            // translate context to center of panel

            // the point 0,0 now resides here

            g2.translate(getWidth() / 2, getHeight() / 2);

            g2.drawString(msg, -metrics.stringWidth(msg) / 2, 

              metrics.getMaxAscent() / 2);

            // rotate 45 deg

            g2.rotate(-Math.PI / 4);

            g2.setColor(Color.YELLOW);

            g2.drawString(msg, -metrics.stringWidth(msg) / 2, 

              metrics.getMaxAscent() / 2);

            // rotate 45 deg again - these transforms are additive

            g2.rotate(-Math.PI / 4);

            g2.setColor(Color.ORANGE);

            g2.drawString(msg, -metrics.stringWidth(msg) / 2, 

              metrics.getMaxAscent() / 2);

        }

    }



    public static void main(String... args) {

        EventQueue.invokeLater(new Runnable() {

            public void run() {

                new TextExample();

            }

        });

    }

}

Re: Trying to draw text at an angle
 

Thank you. I will try that out. I sort of stumbled onto the knowledge that it wasn't nearly as difficult as I thought when I spent about two and a half hours going through the Java tutorial. I kept deleting things from their code till I got to the bare minimum, then finally realized that the bare minimum was only a couple of lines. But it took a while for me to keep deleting stuff from Sun's super cool example till I got to the part of it that I cared about. Thanks.

Re: Trying to draw text at an angle
 

Yes, some of their examples can be more complex than need be and obscure the usage they are trying to demonstrate. :(

One more thing worth noting with respect to AffineTransforms is that they represent the current state of the coordinate system within the graphics context. Since you can store references to as many AffineTransforms as you want, you can effectively "save" any state (translation, orientation, scale, and sheer) you wish and restore it at will. If you have many objects that render themselves independently, each can maintain it's own transform that it uses for rendering. When that object's turn to be rendered comes, you can save the current transform of your graphics context, apply that object's transform, render it, and then restore the original transform.

Here's an example of that:

import java.awt.BorderLayout;

import java.awt.Color;

import java.awt.EventQueue;

import java.awt.FontMetrics;

import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.Point;

import java.awt.geom.AffineTransform;

import javax.swing.JFrame;

import javax.swing.JPanel;



public class TransformExample extends JFrame {



    GraphicPanel gPanel;



    public TransformExample() {

        setDefaultCloseOperation(EXIT_ON_CLOSE);

        gPanel = new GraphicPanel();

        getContentPane().add(gPanel);

        setBounds(100, 100, 200, 200);

        setVisible(true);

    }



    class GraphicPanel extends JPanel {

        TextLabel label1;

        TextLabel label2;

        TextLabel label3;



        protected void paintComponent(Graphics g) {

            if (label1 == null) {

                // lazy initilization so I have dimensions to work with

                FontMetrics fm = g.getFontMetrics();

                int width = getWidth();

                int height = getHeight();

                

                label1 = new TextLabel("Hi Vernon", Color.YELLOW, 

                  20, height/2, -Math.PI/2);

                

                String labelText = "I'm over here";

                int labelLen = fm.stringWidth(labelText);

                label2 = new TextLabel(labelText, Color.CYAN, 

                  width-labelLen, height/2, -Math.PI/4);

                

                labelText = "Standing on my head";

                labelLen = fm.stringWidth(labelText);

                label3 = new TextLabel(labelText, Color.ORANGE, 

                  (width+labelLen)/2, height-20, Math.PI);

            }

            

            Graphics2D g2 = (Graphics2D)g;

            g2.setBackground(Color.BLACK);

            g2.clearRect(0, 0, getWidth(), getHeight());

            

            label1.draw(g2);

            label2.draw(g2);

            label3.draw(g2);

        }

    }

    

    class TextLabel {

        private AffineTransform transform;

        private Point location;

        private double rotation;

        private String text;

        private Color color;

        

        public TextLabel(String text, Color color, int x, int y, 

          double rotation) {



            this.text = text;

            this.color = color;

            this.location = new Point(x, y);

            this.rotation = rotation;

            transform = new AffineTransform();

            transform.translate(location.x, location.y);

            transform.rotate(rotation);

        }

        

        public void draw(Graphics2D g){

            // save current color and transform

            AffineTransform currentTransform = g.getTransform();

            Color currentColor = g.getColor();



            // apply my own color and transform

            g.setTransform(transform);

            g.setColor(color);

            // this will be left aligned at the origin

            // a parameter for left/center/right alignment

            // could be added easily

            g.drawString(text, 0, 0);

            

            // restore the original state

            g.setColor(currentColor);

            g.setTransform(currentTransform);

        }

    }



    public static void main(String... args) {

        EventQueue.invokeLater(new Runnable() {

            public void run() {

                new TransformExample();

            }

        });

    }

}

Re: Trying to draw text at an angle
 

Perfect! My project is a type of ColorForms/CAD program where the user can draw pentagons, ovals, rectangles, text, etc., on the screen and they can all be different sizes and different angles and I'm going to try to give the option where a user can spin one shape and/or piece of text and leave the others the same or spin them all or spin some but not others or change one or more sizes, etc. Potentially you could have hundreds or even thousands of objects on the screen, all with different sizes and different angles. To rotate a polygon, I was doing the math and changing the polygon coordinates myself, but the idea of keeping the same points and having a different AffineTransformation for each of them is very appealing and seems like less calculation for me. Plus the goal is to be able to tilt images too eventually. This method has fantastic potential compared to my earlier approach. Thanks again. As usual, you gave great sample code.