Web Design & Development Lecture 19. Java Graphics 2

Preview:

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

Recommended