Welcome to the Java Programming Forums


The professional, friendly Java community. 21,500 members and growing!


The Java Programming Forums are a community of Java programmers from all around the World. Our members have a wide range of skills and they all have one thing in common: A passion to learn and code Java. We invite beginner Java programmers right through to Java professionals to post here and share your knowledge. Become a part of the community, help others, expand your knowledge of Java and enjoy talking with like minded people. Registration is quick and best of all free. We look forward to meeting you.


>> REGISTER NOW TO START POSTING


Members have full access to the forums. Advertisements are removed for registered users.

Results 1 to 25 of 25

Thread: Drawing images with different angles

  1. #1
    Member
    Join Date
    Sep 2011
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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);
     
     
        }


  2. #2
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Drawing images with different angles

    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

  3. #3
    Member
    Join Date
    Sep 2011
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Drawing images with different angles

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

  4. #4
    Crazy Cat Lady KevinWorkman's Avatar
    Join Date
    Oct 2010
    Location
    Washington, DC
    Posts
    5,424
    My Mood
    Hungover
    Thanks
    144
    Thanked 636 Times in 540 Posts

    Default Re: Drawing images with different angles

    A quick google of "java advanced tranforming" from Norm's hint yielded this: Transforming Shapes, Text, and Images (The Java™ Tutorials > 2D Graphics > Advanced Topics in Java2D)
    Useful links: How to Ask Questions the Smart Way | Use Code Tags | Java Tutorials
    Static Void Games - Play indie games, learn from game tutorials and source code, upload your own games!

  5. The Following User Says Thank You to KevinWorkman For This Useful Post:

    Norm (September 8th, 2011)

  6. #5
    Member
    Join Date
    Sep 2011
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Drawing images with different angles

    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.

  7. #6
    Crazy Cat Lady KevinWorkman's Avatar
    Join Date
    Oct 2010
    Location
    Washington, DC
    Posts
    5,424
    My Mood
    Hungover
    Thanks
    144
    Thanked 636 Times in 540 Posts

    Default Re: Drawing images with different angles

    Quote Originally Posted by gargamel7 View Post
    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.
    Why not just put all your transformations in a method that takes a Graphics parameter and an Image parameter, and do with it what you will? Then just call that method from paintComponent() with whatever images you want. You might have to make a copy of the original Graphics for each image, or reverse the translations or something though.
    Useful links: How to Ask Questions the Smart Way | Use Code Tags | Java Tutorials
    Static Void Games - Play indie games, learn from game tutorials and source code, upload your own games!

  8. #7
    Member
    Join Date
    Sep 2011
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Drawing images with different angles

    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);?

  9. #8
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Drawing images with different angles

    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

  10. #9
    Member
    Join Date
    Sep 2011
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Drawing images with different angles

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

  11. #10
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Drawing images with different angles

    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.

  12. #11
    Crazy Cat Lady KevinWorkman's Avatar
    Join Date
    Oct 2010
    Location
    Washington, DC
    Posts
    5,424
    My Mood
    Hungover
    Thanks
    144
    Thanked 636 Times in 540 Posts

    Default Re: Drawing images with different angles

    If you want more help, you're going to have to provide an SSCCE that demonstrates what you're doing. You've received the same advice from a couple people now.
    Useful links: How to Ask Questions the Smart Way | Use Code Tags | Java Tutorials
    Static Void Games - Play indie games, learn from game tutorials and source code, upload your own games!

  13. #12
    Member
    Join Date
    Sep 2011
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Drawing images with different angles

    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);
    }



    }

  14. #13
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Drawing images with different angles

    they are now depending on the seconds-timer)
    Can you explain what is happening and what you see that is different.

  15. #14
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Drawing images with different angles

    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.

  16. #15
    Member
    Join Date
    Sep 2011
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Drawing images with different angles

    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.

  17. #16
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Drawing images with different angles

    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);
    }

  18. #17
    Member
    Join Date
    Sep 2011
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Drawing images with different angles

    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.

  19. #18
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Drawing images with different angles

    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.

  20. #19
    Member
    Join Date
    Sep 2011
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Drawing images with different angles

    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.

  21. #20
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Drawing images with different angles

    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.

  22. #21
    Member
    Join Date
    Sep 2011
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Drawing images with different angles

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

  23. #22
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Drawing images with different angles

    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

  24. #23
    Member
    Join Date
    Sep 2011
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Drawing images with different angles

    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.

  25. #24
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    25,042
    Thanks
    63
    Thanked 2,708 Times in 2,658 Posts

    Default Re: Drawing images with different angles

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

  26. #25
    Member
    Join Date
    Sep 2011
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Drawing images with different angles

    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.

Similar Threads

  1. Images (read/write, drawing)
    By helloworld922 in forum File Input/Output Tutorials
    Replies: 1
    Last Post: September 5th, 2011, 09:11 AM
  2. Drawing 2 images of a the same Sprite
    By risen375 in forum What's Wrong With My Code?
    Replies: 1
    Last Post: June 15th, 2011, 10:25 AM
  3. problem with drawing images on JPanel
    By Asido in forum What's Wrong With My Code?
    Replies: 13
    Last Post: July 19th, 2010, 03:07 PM
  4. Images (read/write, drawing)
    By helloworld922 in forum Java Code Snippets and Tutorials
    Replies: 0
    Last Post: May 29th, 2010, 11:32 AM
  5. Images (read/write, drawing)
    By helloworld922 in forum File I/O & Other I/O Streams
    Replies: 0
    Last Post: May 29th, 2010, 11:32 AM

Tags for this Thread