Web Design

1
Web Design DevelopmentLecture 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)

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
• Ywindow height - Ycartesian

(0,0)
(width,0)
X-axis
Y-axis
(0,height)
(width, height)
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_CL
  OSE)
• 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_CL
  OSE)
• 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 )
• y3
• p.mXx
• p.mYy
• p.repaint()

21
Example Code AnimTest.java

• public static void main(String args )
• AnimTest at new AnimTest( )
• // end class

22
Live Output