| | |
Trying to draw text at an angle
Thread Solved
![]() |
•
•
Join Date: Jan 2008
Posts: 3,755
Reputation:
Solved Threads: 491
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
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.
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.
JAVA Syntax (Toggle Plain Text)
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); } }
a search i did i found this:
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
java Syntax (Toggle Plain Text)
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
Last edited by sciwizeh; Aug 22nd, 2008 at 8:48 pm.
My site, random PM's from people I haven't hear from before will be DELETED
"If people are good only because they fear punishment, and hope for reward, then we are a sorry lot indeed.",
"If we knew what it was we were doing, it would not be called research, would it? "-Albert Einstein
"If people are good only because they fear punishment, and hope for reward, then we are a sorry lot indeed.",
"If we knew what it was we were doing, it would not be called research, would it? "-Albert Einstein
•
•
Join Date: Jan 2008
Posts: 3,755
Reputation:
Solved Threads: 491
•
•
•
•
a search i did i found this:
java Syntax (Toggle Plain Text)
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
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.
My site, random PM's from people I haven't hear from before will be DELETED
"If people are good only because they fear punishment, and hope for reward, then we are a sorry lot indeed.",
"If we knew what it was we were doing, it would not be called research, would it? "-Albert Einstein
"If people are good only because they fear punishment, and hope for reward, then we are a sorry lot indeed.",
"If we knew what it was we were doing, it would not be called research, would it? "-Albert Einstein
•
•
Join Date: Jan 2008
Posts: 3,755
Reputation:
Solved Threads: 491
•
•
•
•
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.
•
•
Join Date: Jan 2008
Posts: 3,755
Reputation:
Solved Threads: 491
•
•
•
•
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.
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.
ok, I wrote these two classes CustomPane is the one that has the rotateImage() method.
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.
java Syntax (Toggle Plain Text)
//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 ; } }
java Syntax (Toggle Plain Text)
//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.
My site, random PM's from people I haven't hear from before will be DELETED
"If people are good only because they fear punishment, and hope for reward, then we are a sorry lot indeed.",
"If we knew what it was we were doing, it would not be called research, would it? "-Albert Einstein
"If people are good only because they fear punishment, and hope for reward, then we are a sorry lot indeed.",
"If we knew what it was we were doing, it would not be called research, would it? "-Albert Einstein
•
•
Join Date: Jan 2008
Posts: 3,755
Reputation:
Solved Threads: 491
•
•
•
•
ok, I wrote these two classes CustomPane is the one that has the rotateImage() method.
java Syntax (Toggle Plain Text)
//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 ; } }java Syntax (Toggle Plain Text)
//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.
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!
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.
My site, random PM's from people I haven't hear from before will be DELETED
"If people are good only because they fear punishment, and hope for reward, then we are a sorry lot indeed.",
"If we knew what it was we were doing, it would not be called research, would it? "-Albert Einstein
"If people are good only because they fear punishment, and hope for reward, then we are a sorry lot indeed.",
"If we knew what it was we were doing, it would not be called research, would it? "-Albert Einstein
![]() |
Similar Threads
- Turtle graph (Python)
- Graphical Barcode Control (C#)
- Tutorial: Photoshop: create a tabbed navigation bar (Graphics and Multimedia)
- URGENT!! - Constructive Criticism needed on www.giftday.co.za (Website Reviews)
- Identifying Drivers needed (Windows 95 / 98 / Me)
Other Threads in the Java Forum
- Previous Thread: Clean up my code
- Next Thread: Socket problems
| Thread Tools | Search this Thread |







