Thread: Drawing images with different angles

Hello!

I´ve got a problem when I try to paint my clock which consists of a wheel and three pointers in the shapes of different flowers (pink, weird, rose). The wheel is drawn as I want. And the pPink (pink flower pointer) is also drawn as I want. The window is 400 * 400. As you see I don´t really understand how the g2d.translate() works (although, I got the first pointer right, and yes I´ve read the API but I don´t really get it). And I´ve also trouble making the pointers angle different.

Very thankful for an answer!

public void paint(Graphics g) {
       Graphics2D g2d = (Graphics2D) g;
       super.paint(g2d);
 
       ImageIcon i = new ImageIcon(this.getClass().getResource("wheel.png"));
       back = i.getImage();
       g.drawImage(back,50,50, null);
 
       g2d.translate( 200, 200);
       g2d.rotate(pPink.getAngle()*(3.1415/180));
       g2d.drawImage(pPink.getImg(), -44 ,-140, null);
 
       g2d.translate( 200, 200);
       g2d.rotate(pRose.getAngle()*(3.1415/180));
       g2d.drawImage(pRose.getImg(), -44 ,-140, null);
 
       g2d.translate( 200, 200);
       g2d.rotate(pWeird.getAngle()*(3.1415/180));
       g2d.drawImage(pWeird.getImg(), -44 ,-140, null);
 
 
    }

I just found some code in the Java tutorial that does rotation.
The tutorial is on my disk but the path should be similiar to that online.
file:///E:/Java/Tutorial_1.6/2d/advanced/transforming.html

What tutorial? I don´t find it...

Thanks, but that´s with just one image. I´ve managed to modify one picture myself but I´m struggling modifying more than one pic in the same paint() method.

I don´t know how to do what you wanted me to try Kevin, but here is a try: (I know it wont compile, and I know it´s all wrong probably, but please tell me how to do it correctly).

public void paint(Graphics g) {
Graphics2D g2d = (Graphics2D) g;
super.paint(g2d);


ImageIcon i = new ImageIcon(this.getClass().getResource("wheel.png") );
back = i.getImage();
g.drawImage(back,50,50, null);

g2d.translate( 200, 200);

paintExtra(g,"pPink");
paintExtra(g,"pWeird");
paintExtra(g,"pRose");

}

private void paintExtra(Graphics g, String string) {
Graphics2D g2d = (Graphics2D) g;
g2d.rotate(string.getAngle()*(3.14159265/180));
g2d.drawImage(string.getImg(), -44 ,-140, this);
}

And also! What´s the difference between null and this in the case of drawing an image like g2d.drawImage(string.getImg(), -44 ,-140, this);?

Here's some code that will rotate an image. It needs a bit of work.

       int x = 100;    // Try various values here
       int y = 10;
       currentAngle += 10;
 
       System.out.println("cA=" + currentAngle);   // Debug
      AffineTransform origXform=g2d.getTransform();    // Save
      AffineTransform newXform=(AffineTransform)(origXform.clone());
 
      newXform.rotate(Math.toRadians(currentAngle),x,y);
 
      g2d.setTransform(newXform);
 
      g2d.drawImage(theImage, x, y,this);
 
      g2d.setTransform(origXform);   // restore

The code I have is also rotating an image just the way I want, the problem is when painting multiple images with different getAngle()...

Sounds like you need to save and restore the settings of the Graphics2D context. The code I posted did that for the transform. I don't know what code you are using.

Thanks for all the help and tips you have given me. I´ve managed to fix it now, but there´s one thing I really don´t understand.

Everything works fine as it is coded now, but if I change the order of the calling of the three paintTIME(g); methods it wont work as I want.

Now the order is:
Hour
Minute
Second

But if I change it to;
Seconds
Minute
Hour

The Minute- and Hour-pointers will have their own start angles as they should, but everytime they are updated, they are moving just as the seconds-pointer (they are now depending on the seconds-timer). Very strange.

Here is the code:

public void paint(Graphics g) {
Graphics2D g2d = (Graphics2D) g;
super.paint(g2d);


ImageIcon i = new ImageIcon(this.getClass().getResource("wheel.png") );
back = i.getImage();
g.drawImage(back,50,50, null);
g2d.translate( 200, 200);


paintHour(g);
paintMinute(g);
paintSecond(g);

}

public void paintSecond(Graphics g1){
Graphics2D g2d1 = (Graphics2D) g1;
g2d1.rotate(pPink.getAngle()*(3.14159265/180));
g2d1.drawImage(pPink.getImg(), -44 ,-140, this);
}

public void paintMinute(Graphics g2){
Graphics2D g2d2 = (Graphics2D) g2;
g2d2.rotate(pWeird.getAngle()*(3.14159265/180));
g2d2.drawImage(pWeird.getImg(), -44 ,-140, this);
}

public void paintHour(Graphics g3){
Graphics2D g2d3 = (Graphics2D) g3;
g2d3.rotate(pRose.getAngle()*(3.14159265/180));
g2d3.drawImage(pRose.getImg(), -44 ,-140, this);
}



}

they are now depending on the seconds-timer)

Can you explain what is happening and what you see that is different.

Since the three methods you call do the same thing, you should change them to one method and pass it a reference to the object that has the angle and image. There should only be one method that is called three times.

You should not get the wheel.png image on EVERY call to the paint method. Move that code outside of the method and only do it once.

Since the three methods you call do the same thing, you should change them to one method and pass it a reference to the object that has the angle and image. There should only be one method that is called three times.

Could you please help me with how to code this, I´m not sure how.

public void paintHand(Graphics g, Pointer ptr){
  Graphics2D g2d = (Graphics2D) g;
  g2d.rotate(ptr.getAngle() * (Math.PI/180));
  g2d.drawImage(ptr.getImg(), -44 ,-140, this);
}

Ok, thanks!

Can you explain what is happening and what you see that is different.

What I see is that all the pointers get their initial angle. After 1 second when the second-pointer's position updates, all of the three pointers are updated just as the second-pointer (they all move 6 degrees). But if I order the method calls in the correct way as I mentioned earlier, the pointers are updated just as a real clock, as they should.

The order of the method calls shouldn't change the position of where the hand is drawn. It would change which hand was drawn on top.

The order of the method calls shouldn't change the position of where the hand is drawn. It would change which hand was drawn on top.

Yes, that sounds true.

Actually, (I noticed this now when running) the clock is not alright when the order of the calls is "correct", the minute-pointer's angle is not right (the other pointer's angles right). Their positions are updated as often as they should (as a real clock) in contrast with the opposite order in which every pointer's position is updated like the second-pointer.

When I remove the:

paintHand(g,pRose);
paintHand(g,pWeird);
paintHand(g,pPink);

The minute-pointer's angle suddenly becomes correct... (but now there are no hour-pointer, of course).


If I call the methods in this order:

paintHand(g,pWeird);
paintHand(g,pPink);
paintHand(g,pRose);

The hour-pointer is acting just as the second-pointer. The second-pointer and the minute-pointer is correct, though.

The names you have for the different hands makes it hard to know which is which.
Could you rename them to represent which hand they are?

I can not understand what your problem is other than the hands are not moving correctly sometimes.

You mean that I change the pRose to pHour for example? And why do you call them hands in the first place?

why do you call them hands

I don't really know. That was what I was taught. I suppose its like when you point at something you use your hand to do it. Pointer would be another good name. They do need to be associated with the hours, minutes and seconds

Ok so here´s a modified repost to clearify!

Actually, (I noticed this now when running) the clock is not alright when the order of the calls is "correct", the minute-pointer's angle is not right (the other pointer's angles right). Their positions are updated as often as they should (as a real clock) in contrast with the opposite order in which every pointer's position is updated like the second-pointer.

When I remove the:

paintHand(g,pHour);
paintHand(g,pMinute);
paintHand(g,pSecond);

The minute-pointer's angle suddenly becomes correct... (but now there are no hour-pointer, of course).


If I call the methods in this order:

paintHand(g,pMinute);
paintHand(g,pSecond);
paintHand(g,pHour);

The hour-pointer is acting just as the second-pointer. The second-pointer and the minute-pointer is correct, though.

All the hands should move every second, but by different amounts.

As it is now, the hour-pointer is updated 1 degree every 120 s, the minute-pointer is updated 6 degrees every 60 s, and the second-pointer is updated 6 degrees every second.

It should be able to work it out correctly.