Embed Size (px)
Citation preview
Web Design & DevelopmentLecture 19
Java Graphics 2
When to Paint?Understanding Repaint Cycle
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
Last Example Code: MyPanel.javaimport 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);
} }
Last Example Code: Test.javaimport 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
Last Example Code: Test.java public static void main(String args[ ]){
Test1 = new Test();
}
} // end class
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
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)
• 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
Coordinate System
• Upside-down Cartesian
• Ywindow = height - Ycartesian
(0,0) (width,0)
(0,height) (width, height)
X-axis
Y-axis
Live Output
Example Code: MyPanel.javaimport 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); }
}
Example Code: Test.javaimport 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);
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() ; }
}
Example Code: Test.java public static void main(String args[ ]){
Test t = new Test( );
}
} // end class
Example Code: MyPanel.javaimport 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
Example Code: AnimTest.javaimport 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;
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
…..
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() ;
}
Example Code: AnimTest.java public static void main(String args[ ]){
AnimTest at = new AnimTest( );
}
} // end class
Live Output
