web design & development lecture 19

22
Web Design & Development Lecture 19

Upload: winter-zamora

Post on 02-Jan-2016

19 views

Category:

Documents


3 download

DESCRIPTION

Web Design & Development Lecture 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. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Web Design & Development Lecture 19

Web Design & DevelopmentLecture 19

Page 2: Web Design & Development Lecture 19

Java Graphics 2

Page 3: Web Design & Development Lecture 19

When to Paint?Understanding Repaint Cycle

Page 4: Web Design & Development Lecture 19

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

Page 5: Web Design & Development Lecture 19

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

} }

Page 6: Web Design & Development Lecture 19

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

Page 7: Web Design & Development Lecture 19

Last Example Code: Test.java public static void main(String args[ ]){

Test1 = new Test();

}

} // end class

Page 8: Web Design & Development Lecture 19

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

Page 9: Web Design & Development Lecture 19

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)

Page 10: Web Design & Development Lecture 19

• 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

Page 11: Web Design & Development Lecture 19

Coordinate System

• Upside-down Cartesian

• Ywindow = height - Ycartesian

(0,0) (width,0)

(0,height) (width, height)

X-axis

Y-axis

Page 12: Web Design & Development Lecture 19

Live Output

Page 13: Web Design & Development Lecture 19

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

}

Page 14: Web Design & Development Lecture 19

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

Page 15: Web Design & Development Lecture 19

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

}

Page 16: Web Design & Development Lecture 19

Example Code: Test.java public static void main(String args[ ]){

Test t = new Test( );

}

} // end class

Page 17: Web Design & Development Lecture 19

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

Page 18: Web Design & Development Lecture 19

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;

Page 19: Web Design & Development Lecture 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

…..

Page 20: Web Design & Development Lecture 19

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

}

Page 21: Web Design & Development Lecture 19

Example Code: AnimTest.java public static void main(String args[ ]){

AnimTest at = new AnimTest( );

}

} // end class

Page 22: Web Design & Development Lecture 19

Live Output