1. Web Design & Development Lecture 19

2. Java Graphics 2

3. When to Paint? Understanding Repaint Cycle

4. Your Painting Strategy Steps –Subclass JPanel class MyPanel extends JPanel –Override the paintComponent(Graphics g) method Inside method do what ever you want to do by using graphics object. –Install that JPanel inside a JFrame When frame becomes visible and its paintChildren() gets called your panel will become visible. To become visible your panel calls paintComponent() method on itself which will do your custom drawing

5. Last Example Code: MyPanel.java import javax.swing.*; import java.awt.*; public class MyPanel extends JPanel { public void paintComponent(Graphics g){ super.paintComponent(g); // erasing behaviour Graphics2D g2 = (Graphics2D)g; g2.drawRect(20,20,20,20); g2.setColor(Color.blue); g2.fillOval(50,50,20,20); g2.drawString("Hello World", 120, 50); }

6. Last Example Code: Test.java import javax.swing.*; import java.awt.*; public class Test{ JFrame f; MyPanel p; public Test1(){ f = new JFrame(); Container c = f.getContentPane(); c.setLayout(new BorderLayout()); p = new MyPanel(); c.add(p); f.setSize(400,400); f.setVisible(true); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } // end constructor

7. Last Example Code: Test.java public static void main(String args[ ]){ Test1 = new Test(); } } // end class

8. How to Animate Constantly need to call paintComponent() and draw the shape at new place (new co-ordinates) Painting is managed by system and calling paintComponent() directly is not recommended at all Use Repaint() mechanism

9. Problem & Solution What to do to move the shapes present in previous code when a mouse is dragged First time painting is what we already have done When a mouse is clicked find the co-ordinates of that place and paint Rectangle at that place by requesting, using repaint() call Here instead of Hardcoding the position of co-ordinates use some variables e.g. mx, my –g.drawRect(20,20,20,20) (small anim here) g.drawRect(mx,my,20,20) (small anim here)

10. Yesterday we have shown you a tennis game. Problem, How to code the paddle movement ? We will do it using mouse. Try it using Keys

11. Coordinate System Upside-down Cartesian Y window = height - Y cartesian (0,0) (width,0) (0,height)(width, height) X-axis Y-axis

12. Live Output

13. Example Code: MyPanel.java import javax.swing.*; import java.awt.*; public class MyPanel extends JPanel { int mX = 20; int mY = 20; public void paintComponent(Graphics g){ super.paintComponent(g); // erasing behaviour Graphics2D g2 = (Graphics2D)g; g2.fillRect(mX, mY,10, 20); }

14. Example Code: Test.java import javax.swing.*; import java.awt.*; Import java.awt.event.*; public class Test{ JFrame f; MyPanel p; public Test(){ f = new JFrame(); Container c = f.getContentPane(); c.setLayout(new BorderLayout()); p = new MyPanel(); c.add(p);

15. Example Code: Test.java f.setSize(400,400); f.setVisible(true); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Handler h = new Handler (); p.addMouseMotionListener(h); } // end constructor public class Handler extends MouseMotionAdapter{ public void mouseDragged(MouseEvent me){ p.mX = me.getX() ; p.mY = me.getY() ; p.repaint() ; }

16. Example Code: Test.java public static void main(String args[ ]){ Test t = new Test( ); } } // end class

17. Example Code: MyPanel.java import javax.swing.*; import java.awt.*; public class MyPanel extends JPanel { int mX = 200; int mY = 0; public void paintComponent(Graphics g){ super.paintComponent(g); // erasing behaviour Graphics2D g2 = (Graphics2D)g; g2.setColor(Color.blue); g2.fillOval(mX, mY, 20, 20); } } // end class

18. Example Code: AnimTest.java import javax.swing.*; import java.awt.*; Import java.awt.event.*; public class AnimTest implements ActionListener { JFrame f; MyPanel p; int x, y; public Test(){ f = new JFrame(); Container c = f.getContentPane(); c.setLayout(new BorderLayout()); x = 5; y = 3;

19. Example Code: AnimTest.java p = new MyPanel(); c.add(p); f.setSize(400,400); f.setVisible(true); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Timer t = new Timer (5, this); t.start(); } // end constructor …..

20. Example Code: AnimTest.java public void actionPerformed(ActionEvent ae){ if (f.getWidth()-40 == p.mX) x= -5; if (f.getHeight()-40 == p.mY) y= -3; if (p.mX == 0 ) x = 5; if (p.mY == 0 ) y=3; p.mX+=x; p.mY+=y; p.repaint() ; }

21. Example Code: AnimTest.java public static void main(String args[ ]){ AnimTest at = new AnimTest( ); } } // end class

22. Live Output