943,708 Members | Top Members by Rank

Software Development > Java > Trying to draw text at an angle
Ad:
  • Java Discussion Thread
  • Marked Solved
  • Views: 5852
  • Java RSS
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Aug 22nd, 2008
0

Trying to draw text at an angle

Expand Post »
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.

JAVA Syntax (Toggle Plain Text)
  1. import javax.swing.*;
  2. import java.awt.*;
  3. import java.awt.image.*;
  4. import java.awt.font.*;
  5.  
  6. public class RotateDemo extends JFrame
  7. {
  8.     Font font;
  9.     Font font2;
  10.     String title;
  11.     String title2;
  12.     Image image;
  13.     Image image2;
  14.     RotatorCanvas rotator;
  15.  
  16.     public static void main(String args[])
  17.     {
  18.         new RotateDemo();
  19.     }
  20.  
  21.     public RotateDemo()
  22.     {
  23.         setVisible(true);
  24.         setSize(400, 400);
  25.         setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  26.         font = new Font("Helvetica", Font.BOLD, 20);
  27.         font2 = new Font("Courier", Font.BOLD, 35);
  28.         title = "Hello";
  29.         title2 = "Hi";
  30.         image = this.createRotatedImage(Color.black, font, title);
  31.         image2 = this.createRotatedImage(Color.red, font2, title2);
  32.         rotator = new RotatorCanvas(image, image2);
  33.         add(rotator);
  34.         validate();
  35.     }
  36.  
  37.     private Image createRotatedImage(Color c, Font afont, String theText)
  38.     {
  39.         FontMetrics fm = Toolkit.getDefaultToolkit().getFontMetrics(afont);
  40.         int width = fm.stringWidth(theText);
  41.         int height = fm.getHeight();
  42.         int ascent = fm.getMaxAscent();
  43.         int leading = fm.getLeading();
  44.  
  45.         Image animage = this.createImage (width + 8, height);
  46.  
  47.         Graphics gr = animage.getGraphics();
  48.         gr.setColor(Color.white);
  49.         gr.fillRect(0, 0, animage.getWidth(this), animage.getHeight (this));
  50.         gr.setFont(afont);
  51.         gr.setColor(c);
  52.         gr.drawString(theText, 4, ascent + leading);
  53.         ImageFilter filter = new ImageFilter();
  54.         ImageProducer producer = new FilteredImageSource (animage.getSource(),  filter);
  55.         animage = createImage(producer);
  56.         return animage;
  57.     }
  58. }
  59.  
  60.  
  61.  
  62. class RotatorCanvas extends Canvas
  63. {
  64.     Image image;
  65.     Image image2;
  66.  
  67.  
  68.     public RotatorCanvas(Image im1, Image im2)
  69.     {
  70.         super();
  71.         this.image = im1;
  72.         this.image2 = im2;
  73.     }
  74.  
  75.  
  76.     public void paint(Graphics g)
  77.     {
  78.         g.setColor(Color.BLACK);
  79.         g.drawRect(19, 19, image.getWidth(this) + 2, image.getHeight(this) + 2);
  80.         g.drawImage(image, 20, 20, this);
  81.         g.drawRect(99, 99, image2.getWidth(this) + 2, image2.getHeight(this) + 2);
  82.         g.drawImage(image2, 100, 100, this);
  83.     }
  84. }
Similar Threads
Featured Poster
Reputation Points: 2614
Solved Threads: 687
Posting Expert
VernonDozier is offline Offline
5,372 posts
since Jan 2008
Permalink
Aug 22nd, 2008
0

Re: Trying to draw text at an angle

a search i did i found this:
java Syntax (Toggle Plain Text)
  1. public static BufferedImage rotate(Image image, double angle, int cx, int cy){
  2. 		int width = image.getWidth(null);
  3. 		int height = image.getHeight(null);
  4.  
  5. 		//The bounds of the image
  6. 		int minX, minY, maxX, maxY;
  7. 		minX = minY = maxX = maxY = 0;
  8.  
  9. 		//create an array containing the corners of the image
  10. 		//In the order TL,TR,BR,BL
  11. 		int[] corners = { 0, 0, width, 0, width, height, 0, height };
  12.  
  13. 		double theta = Math.toRadians(angle);
  14. 		for(int i=0;i<corners.length;i+=2){
  15. 			//Rotates the given point theta radians around (cx,cy)
  16. 			int x = (int)(Math.cos(theta)*(corners[i]-cx) -
  17. 				Math.sin(theta)*(corners[i+1]-cy)+cx);
  18. 			int y = (int)(Math.sin(theta)*(corners[i]-cx) +
  19. 				Math.cos(theta)*(corners[i+1]-cy)+cy);
  20.  
  21. 			//Update our bounds
  22. 			if(x>maxX) maxX = x;
  23. 			if(x<minX) minX = x;
  24. 			if(y>maxY) maxY = y;
  25. 			if(y<minY) minY = y;
  26. 		}
  27.  
  28. 		//Where the center of the old image should be on the image we are
  29. 		//just about to create so that the image is all in viewable space.
  30. 		cx = (int)(cx-minX);
  31. 		cy = (int)(cy-minY);
  32.  
  33. 		//Create a new image such that when we roate the old image, no pixels
  34. 		//will have a negative x or y coordinate.
  35. 		BufferedImage bi = createBufferedImage(maxX-minX, maxY-minY, true);
  36. 		Graphics2D g2 = bi.createGraphics();
  37.  
  38.  
  39. 		//Finally start the rotation process
  40. 		AffineTransform at = new AffineTransform();
  41. 		at.rotate(theta,cx,cy);
  42. 		g2.setTransform(at);
  43.  
  44. 		g2.drawImage(image,-minX,-minY,null);
  45.  
  46. 		g2.dispose();
  47.  
  48. 		return toBufferedImage(bi);
  49. 	}

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.
Reputation Points: 73
Solved Threads: 22
Posting Pro in Training
sciwizeh is offline Offline
423 posts
since Jun 2008
Permalink
Aug 22nd, 2008
0

Re: Trying to draw text at an angle

Click to Expand / Collapse  Quote originally posted by sciwizeh ...
a search i did i found this:
java Syntax (Toggle Plain Text)
  1. public static BufferedImage rotate(Image image, double angle, int cx, int cy){
  2. 		int width = image.getWidth(null);
  3. 		int height = image.getHeight(null);
  4.  
  5. 		//The bounds of the image
  6. 		int minX, minY, maxX, maxY;
  7. 		minX = minY = maxX = maxY = 0;
  8.  
  9. 		//create an array containing the corners of the image
  10. 		//In the order TL,TR,BR,BL
  11. 		int[] corners = { 0, 0, width, 0, width, height, 0, height };
  12.  
  13. 		double theta = Math.toRadians(angle);
  14. 		for(int i=0;i<corners.length;i+=2){
  15. 			//Rotates the given point theta radians around (cx,cy)
  16. 			int x = (int)(Math.cos(theta)*(corners[i]-cx) -
  17. 				Math.sin(theta)*(corners[i+1]-cy)+cx);
  18. 			int y = (int)(Math.sin(theta)*(corners[i]-cx) +
  19. 				Math.cos(theta)*(corners[i+1]-cy)+cy);
  20.  
  21. 			//Update our bounds
  22. 			if(x>maxX) maxX = x;
  23. 			if(x<minX) minX = x;
  24. 			if(y>maxY) maxY = y;
  25. 			if(y<minY) minY = y;
  26. 		}
  27.  
  28. 		//Where the center of the old image should be on the image we are
  29. 		//just about to create so that the image is all in viewable space.
  30. 		cx = (int)(cx-minX);
  31. 		cy = (int)(cy-minY);
  32.  
  33. 		//Create a new image such that when we roate the old image, no pixels
  34. 		//will have a negative x or y coordinate.
  35. 		BufferedImage bi = createBufferedImage(maxX-minX, maxY-minY, true);
  36. 		Graphics2D g2 = bi.createGraphics();
  37.  
  38.  
  39. 		//Finally start the rotation process
  40. 		AffineTransform at = new AffineTransform();
  41. 		at.rotate(theta,cx,cy);
  42. 		g2.setTransform(at);
  43.  
  44. 		g2.drawImage(image,-minX,-minY,null);
  45.  
  46. 		g2.dispose();
  47.  
  48. 		return toBufferedImage(bi);
  49. 	}

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
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.
Featured Poster
Reputation Points: 2614
Solved Threads: 687
Posting Expert
VernonDozier is offline Offline
5,372 posts
since Jan 2008
Permalink
Aug 22nd, 2008
0

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.
Reputation Points: 392
Solved Threads: 108
Posting Shark
Alex Edwards is offline Offline
971 posts
since Jun 2008
Permalink
Aug 22nd, 2008
0

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.
Reputation Points: 73
Solved Threads: 22
Posting Pro in Training
sciwizeh is offline Offline
423 posts
since Jun 2008
Permalink
Aug 22nd, 2008
0

Re: Trying to draw text at an angle

Click to Expand / Collapse  Quote originally posted by Alex Edwards ...
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.
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.
Featured Poster
Reputation Points: 2614
Solved Threads: 687
Posting Expert
VernonDozier is offline Offline
5,372 posts
since Jan 2008
Permalink
Aug 22nd, 2008
0

Re: Trying to draw text at an angle

Click to Expand / Collapse  Quote originally posted by sciwizeh ...
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.
Featured Poster
Reputation Points: 2614
Solved Threads: 687
Posting Expert
VernonDozier is offline Offline
5,372 posts
since Jan 2008
Permalink
Aug 23rd, 2008
1

Re: Trying to draw text at an angle

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

java Syntax (Toggle Plain Text)
  1. //CustomPane.java
  2. import javax.swing.* ;
  3. import java.awt.* ;
  4. import java.awt.image.* ;
  5.  
  6. public class CustomPane extends JPanel {
  7. 	String str ;
  8. 	BufferedImage original = new BufferedImage ( 200 , 50 ,
  9. 			BufferedImage.TYPE_INT_ARGB ) ;
  10. 	BufferedImage after ;
  11. 	double A = 0 ;
  12. 	double dA = 2 * Math.PI / 180 ;
  13.  
  14. 	public CustomPane ( ) {
  15. 		this ( "Hello World" ) ;
  16. 	}
  17.  
  18. 	public CustomPane ( String s ) {
  19. 		str = s ;
  20. 		Graphics g = original.getGraphics ( ) ;
  21. 		g.setColor ( new Color ( 0 , 0 , 0 , 1 ) ) ;
  22. 		g.fillRect ( 0 , 0 , original.getWidth ( ) , original.getHeight ( ) ) ;
  23. 		g.setColor ( new Color ( 0 , 0 , 0 , 255 ) ) ;
  24. 		g.drawString ( str , 10 , 10 ) ;
  25. 	}
  26.  
  27. 	@ Override public void paint ( Graphics g ) {
  28. 		A += dA ;
  29. 		if ( A >= Math.PI/2 ) {
  30. 			A -= Math.PI/2 ;
  31. 		}
  32. 		g.setColor(new Color(255,255,255));
  33. 		after = rotateImage ( original , A );
  34. 		g.fillRect ( 0 , 0 , original.getWidth ( ) , after.getHeight ( ) ) ;
  35. 		g.drawImage (after  , 10 , 10 , null ) ;
  36. 	}
  37.  
  38. 	public static BufferedImage rotateImage ( BufferedImage bi ,
  39. 			double angleRads ) {
  40. 		double cosA = Math.cos ( angleRads ) ;
  41. 		double sinA = Math.sin ( angleRads ) ;
  42. 		BufferedImage nbi = new BufferedImage ( ( int ) Math.abs ( ( bi
  43. 				.getWidth ( )
  44. 				* cosA + bi.getHeight ( ) * sinA ) ) , ( int ) Math.abs ( ( bi
  45. 				.getHeight ( )
  46. 				* cosA + bi.getWidth ( ) * sinA ) ) ,
  47. 				BufferedImage.TYPE_INT_ARGB ) ;
  48. 		Graphics g = nbi.getGraphics ( ) ;
  49. 		g.setColor ( new Color ( 0 , 0 , 0 , 0 ) ) ;
  50. 		g.fillRect ( 0 , 0 , nbi.getWidth ( ) , nbi.getHeight ( ) ) ;
  51. 		for ( int x = 0 ; x < nbi.getWidth ( ) ; x ++ ) {
  52. 			for ( int y = 0 ; y < nbi.getHeight ( ) ; y ++ ) {
  53. 				try {
  54. 					nbi.setRGB ( ( int ) x , ( int ) y , bi.getRGB (
  55. 							( int ) ( x * cosA + y * sinA ) , ( int ) ( y
  56. 									* cosA - x * sinA ) ) ) ;
  57. 				} catch ( Exception e ) {}
  58. 			}
  59. 		}
  60. 		return nbi ;
  61. 	}
  62. }
java Syntax (Toggle Plain Text)
  1. //RotateText.java
  2. import java.awt.*;
  3. import java.awt.event.*;
  4. import java.awt.geom.*;
  5. import javax.swing.*;
  6. import javax.swing.event.*;
  7. import java.util.concurrent.*;
  8. public class RotateText extends JFrame implements Runnable
  9. {
  10.     CustomPane c = new CustomPane("This text will be rotated");
  11.     public RotateText()
  12.     {
  13.         setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  14.         setSize(200,200);
  15.         this.add(c);
  16.         c.repaint();
  17.         setVisible(true);
  18.         ScheduledThreadPoolExecutor exec = new ScheduledThreadPoolExecutor(3);
  19.         exec.scheduleAtFixedRate(this,0L,33L,TimeUnit.MILLISECONDS);
  20.     }
  21.     public static void main(String[] args){
  22.         new RotateText();
  23.     }
  24.     public void run(){
  25.         c.repaint();
  26.     }
  27. }

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.
Reputation Points: 73
Solved Threads: 22
Posting Pro in Training
sciwizeh is offline Offline
423 posts
since Jun 2008
Permalink
Aug 23rd, 2008
0

Re: Trying to draw text at an angle

Click to Expand / Collapse  Quote originally posted by sciwizeh ...
ok, I wrote these two classes CustomPane is the one that has the rotateImage() method.

java Syntax (Toggle Plain Text)
  1. //CustomPane.java
  2. import javax.swing.* ;
  3. import java.awt.* ;
  4. import java.awt.image.* ;
  5.  
  6. public class CustomPane extends JPanel {
  7. 	String str ;
  8. 	BufferedImage original = new BufferedImage ( 200 , 50 ,
  9. 			BufferedImage.TYPE_INT_ARGB ) ;
  10. 	BufferedImage after ;
  11. 	double A = 0 ;
  12. 	double dA = 2 * Math.PI / 180 ;
  13.  
  14. 	public CustomPane ( ) {
  15. 		this ( "Hello World" ) ;
  16. 	}
  17.  
  18. 	public CustomPane ( String s ) {
  19. 		str = s ;
  20. 		Graphics g = original.getGraphics ( ) ;
  21. 		g.setColor ( new Color ( 0 , 0 , 0 , 1 ) ) ;
  22. 		g.fillRect ( 0 , 0 , original.getWidth ( ) , original.getHeight ( ) ) ;
  23. 		g.setColor ( new Color ( 0 , 0 , 0 , 255 ) ) ;
  24. 		g.drawString ( str , 10 , 10 ) ;
  25. 	}
  26.  
  27. 	@ Override public void paint ( Graphics g ) {
  28. 		A += dA ;
  29. 		if ( A >= Math.PI/2 ) {
  30. 			A -= Math.PI/2 ;
  31. 		}
  32. 		g.setColor(new Color(255,255,255));
  33. 		after = rotateImage ( original , A );
  34. 		g.fillRect ( 0 , 0 , original.getWidth ( ) , after.getHeight ( ) ) ;
  35. 		g.drawImage (after  , 10 , 10 , null ) ;
  36. 	}
  37.  
  38. 	public static BufferedImage rotateImage ( BufferedImage bi ,
  39. 			double angleRads ) {
  40. 		double cosA = Math.cos ( angleRads ) ;
  41. 		double sinA = Math.sin ( angleRads ) ;
  42. 		BufferedImage nbi = new BufferedImage ( ( int ) Math.abs ( ( bi
  43. 				.getWidth ( )
  44. 				* cosA + bi.getHeight ( ) * sinA ) ) , ( int ) Math.abs ( ( bi
  45. 				.getHeight ( )
  46. 				* cosA + bi.getWidth ( ) * sinA ) ) ,
  47. 				BufferedImage.TYPE_INT_ARGB ) ;
  48. 		Graphics g = nbi.getGraphics ( ) ;
  49. 		g.setColor ( new Color ( 0 , 0 , 0 , 0 ) ) ;
  50. 		g.fillRect ( 0 , 0 , nbi.getWidth ( ) , nbi.getHeight ( ) ) ;
  51. 		for ( int x = 0 ; x < nbi.getWidth ( ) ; x ++ ) {
  52. 			for ( int y = 0 ; y < nbi.getHeight ( ) ; y ++ ) {
  53. 				try {
  54. 					nbi.setRGB ( ( int ) x , ( int ) y , bi.getRGB (
  55. 							( int ) ( x * cosA + y * sinA ) , ( int ) ( y
  56. 									* cosA - x * sinA ) ) ) ;
  57. 				} catch ( Exception e ) {}
  58. 			}
  59. 		}
  60. 		return nbi ;
  61. 	}
  62. }
java Syntax (Toggle Plain Text)
  1. //RotateText.java
  2. import java.awt.*;
  3. import java.awt.event.*;
  4. import java.awt.geom.*;
  5. import javax.swing.*;
  6. import javax.swing.event.*;
  7. import java.util.concurrent.*;
  8. public class RotateText extends JFrame implements Runnable
  9. {
  10.     CustomPane c = new CustomPane("This text will be rotated");
  11.     public RotateText()
  12.     {
  13.         setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  14.         setSize(200,200);
  15.         this.add(c);
  16.         c.repaint();
  17.         setVisible(true);
  18.         ScheduledThreadPoolExecutor exec = new ScheduledThreadPoolExecutor(3);
  19.         exec.scheduleAtFixedRate(this,0L,33L,TimeUnit.MILLISECONDS);
  20.     }
  21.     public static void main(String[] args){
  22.         new RotateText();
  23.     }
  24.     public void run(){
  25.         c.repaint();
  26.     }
  27. }

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!
Featured Poster
Reputation Points: 2614
Solved Threads: 687
Posting Expert
VernonDozier is offline Offline
5,372 posts
since Jan 2008
Permalink
Aug 23rd, 2008
0

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.
Reputation Points: 73
Solved Threads: 22
Posting Pro in Training
sciwizeh is offline Offline
423 posts
since Jun 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in Java Forum Timeline: Clean up my code
Next Thread in Java Forum Timeline: Socket problems


Tags
affinetransform, graphics, rotatetext



About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC