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.