Java Tips Weblog

  • Blog Stats

    • 1,474,803 hits
  • Categories

  • Archives

Rotated Icon

Posted by Rob Camick on April 6, 2009

Icons are painted on a component in the orientation in which they where created. That is, the text in the TextIcon is painted in a left-to-right order. Image icons are painted as the image was created in the image editor. If we could change the orientation of the icon, then maybe we could create some interesting effects.

The RotatedIcon class will allow you to change the orientation of an icon by rotating it before doing the painting. RotatedIcon acts as a wrapper class. There are two ways to create a RotatedIcon:

1) You create the class by specifying the Icon and the type of rotation desired:

  • down – the icon is rotated 90 degrees
  • up (default) – the icon is rotated -90 degrees
  • upside down – the icon is rotated 180 degrees

2) You can create the class by specifying the Icon and an angle of rotation. In this case the Icon will be rotated “about its center“. The size of the Icon will be recalculated based on the angle of rotation. The angle of rotation can be changed by using the setDegrees(…) method. The setCircularIcon( true ) method is used to prevent the size of the Icon from changing as it is rotated. Note: I recommend you make your Icons size an even square, otherwise you may notice a shifting of the image by 1 pixel as it is painted at various degrees of rotation.

Thats all there is to say about the class. So lets take a look at examples of rotated icons:

rotated-icon

The first two examples show a JButton with a rotated TextIcon. So in effect, not only have we create a rotated icon, but we have also created a “rotated” button. Or, you may want to call this a “vertical” button.

JButton button = new JButton();
TextIcon t1 = new TextIcon(button, "Rotated Down", TextIcon.Layout.HORIZONTAL);
RotatedIcon r1 = new RotatedIcon(t1, RotatedIcon.Rotate.DOWN);
button.setIcon( r1 );

Note, to give the buttons a proper looking border I also altered the margins on each button using:

Insets bm = UIManager.getInsets("Button.margin");
Insets margin = new Insets(bm.left, bm.top, bm.left, bm.top);
button.setMargin( margin );

The last example shows another usage of the CompoundIcon to rotate the text and image at the same time. The code to create this icon uses all the icon classes presented in this series:

JButton button = new JButton();
TextIcon ti = new TextIcon(button, "Upside Down");
ImageIcon ii = new ImageIcon(...);
CompoundIcon ci = new CompoundIcon(ii, ti);
RotatedIcon ri = new RotatedIcon(ci, RotatedIcon.Rotate.UPSIDE_DOWN);
button.setIcon( ri );

To create an Icon rotated about its center you would use code something like:

ImageIcon ii = new ImageIcon(...);
RotatedIcon ri = new RotatedIcon(ii, 45.0);
JButton button = new JButton( ri );

The degrees of rotation can be dynamically changed, but the Icon will not repaint itself, so you are responsible for invoking repaint() on any component using the Icon.

Of course you can add a RotatedIcon to a label, check box or radio button just as easy. Your challenge is to play with these Icon classes to see what other interesting effects you can achieve.

Get The Code

RotatedIcon.java

See Also

Compound Icon
Text Icon

Related Reading

Java Tutorials: How to Use Icons

6 Responses to “Rotated Icon”

  1. very useful…! great thanks

    i used your java class properly… but it got me flickering if i used
    a big icon… do u hv a clue for it? :D

  2. Dusan said

    Thank you, you saved my day!

  3. If I rotate, say, 45 degrees, will the area of the button which is clickable also rotate 45 degrees, or will only the icon rotate?

  4. Arie said

    Many thanks for this useful code.

    FYI: I got better rendering results by replacing

    g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

    by

    g2.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BICUBIC);

  5. Laure said

    Awesome, very straightforeward ! Thank you and thanks for the source code. :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 103 other followers

%d bloggers like this: