How to Draw on the Java Canvas
We'll will draw a circle - our body - using the fillOval method of the Graphics object.
Animating a Body
To make the circle appear to move across the canvas, i.e., animate the circle, we'll simply draw the circle repeatedly, changing its position progressively as well as clearing the previous image.
Create 2 new class files; File, New.
Call them PanselsMovingBody and MovingBody.
Type out the adjoining Java code for animating an image body across the canvas component.
Note: The code module for our Facet class will remain the
same for the rest of the demonstrations in this category.
Hence it will be left out hence forth.
Window Display
package dymetric;
import java.awt.*;
import javax.swing.*;
/**
* This class just creates a display window to attach our canvas to.
*/
public class Facet extends JFrame {
public Container face;
public ButtonandCanvasPanels components;
public ImageIcon logo;
public Facet() {
// Give our window a title
super("A window that will hold a Canvas and Button");
// set window start points and dimensions
setSize(780,400);
// close the window when told to
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setResizable(true); // should this window be resizable?
// It'll be nice to have our own logo (feel free to use yours)
logo = new ImageIcon(getClass().getResource("studyingPays.png"));
this.setIconImage(logo.getImage());
face = this.getContentPane();
// background colour - may not be necessay since our canvas will have a colour of its own
face.setBackground(Color.PINK);
components = new ButtonandCanvasPanels();
// using the default layout manager
face.add(components.button_panel, BorderLayout.NORTH);
// attach appropriate drawing component
face.add(components.canvas_panel, BorderLayout.CENTER);
}
}
import java.awt.*;
import javax.swing.*;
/**
* This class just creates a display window to attach our canvas to.
*/
public class Facet extends JFrame {
public Container face;
public ButtonandCanvasPanels components;
public ImageIcon logo;
public Facet() {
// Give our window a title
super("A window that will hold a Canvas and Button");
// set window start points and dimensions
setSize(780,400);
// close the window when told to
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setResizable(true); // should this window be resizable?
// It'll be nice to have our own logo (feel free to use yours)
logo = new ImageIcon(getClass().getResource("studyingPays.png"));
this.setIconImage(logo.getImage());
face = this.getContentPane();
// background colour - may not be necessay since our canvas will have a colour of its own
face.setBackground(Color.PINK);
components = new ButtonandCanvasPanels();
// using the default layout manager
face.add(components.button_panel, BorderLayout.NORTH);
// attach appropriate drawing component
face.add(components.canvas_panel, BorderLayout.CENTER);
}
}
Canvas/Button class
package dymetric;
import java.awt.event.*;
import java.awt.*;
import javax.swing.*;
public class ButtonandCanvasPanels implements ActionListener {
public JPanel button_panel, canvas_panel;
public JButton motion_bttn;
public MovingBody traction;
public ButtonandCanvasPanels() {
button_panel = new JPanel();
// pick a background colour
button_panel.setBackground(Color.PINK);
button_panel.setLayout(new FlowLayout(FlowLayout.CENTER, 0, 0));
// O my; but for convenience sake let's add our control button here
motion_bttn = new JButton("Glide");
motion_bttn.setBackground(new Color(255, 0, 255));
motion_bttn.addActionListener(this);
// using the default layout manager
button_panel.add(motion_bttn);
canvas_panel = new JPanel();
canvas_panel.setLayout(new BorderLayout());
traction = new MovingBody();
// attach appropriate drawing component
canvas_panel.add(traction, BorderLayout.CENTER);
}
/**
* Respond to the button click event
*/
public void actionPerformed(ActionEvent evt) {
traction.doGlide();
}
}
import java.awt.event.*;
import java.awt.*;
import javax.swing.*;
public class ButtonandCanvasPanels implements ActionListener {
public JPanel button_panel, canvas_panel;
public JButton motion_bttn;
public MovingBody traction;
public ButtonandCanvasPanels() {
button_panel = new JPanel();
// pick a background colour
button_panel.setBackground(Color.PINK);
button_panel.setLayout(new FlowLayout(FlowLayout.CENTER, 0, 0));
// O my; but for convenience sake let's add our control button here
motion_bttn = new JButton("Glide");
motion_bttn.setBackground(new Color(255, 0, 255));
motion_bttn.addActionListener(this);
// using the default layout manager
button_panel.add(motion_bttn);
canvas_panel = new JPanel();
canvas_panel.setLayout(new BorderLayout());
traction = new MovingBody();
// attach appropriate drawing component
canvas_panel.add(traction, BorderLayout.CENTER);
}
/**
* Respond to the button click event
*/
public void actionPerformed(ActionEvent evt) {
traction.doGlide();
}
}
Java code for MovingBody class
package dymetric;
import java.awt.*;
public class MovingBody extends Canvas {
protected Color ball_colour;
protected int x = 10;
protected int y = 110;
protected final int aWIDTH, aHEIGHT;
public MovingBody() {
setBackground(Color.LIGHT_GRAY); // canvas color
ball_colour = Color.RED;
aWIDTH = aHEIGHT = 80;
}
public void paint(Graphics g) {
// erase previous circle
g.clearRect(x - 10, y, aWIDTH, aHEIGHT);
g.setColor(ball_colour);
// draw a circle
g.fillOval(x, y, aWIDTH, aHEIGHT);
}
public void doGlide() {
// condition for continuing motion
while (x <= 670) {
paint(this.getGraphics());
x += 10;
// introduce a delay between renderings
try {
Thread.sleep(50);
} catch (InterruptedException e) {
}
}
}
}
import java.awt.*;
public class MovingBody extends Canvas {
protected Color ball_colour;
protected int x = 10;
protected int y = 110;
protected final int aWIDTH, aHEIGHT;
public MovingBody() {
setBackground(Color.LIGHT_GRAY); // canvas color
ball_colour = Color.RED;
aWIDTH = aHEIGHT = 80;
}
public void paint(Graphics g) {
// erase previous circle
g.clearRect(x - 10, y, aWIDTH, aHEIGHT);
g.setColor(ball_colour);
// draw a circle
g.fillOval(x, y, aWIDTH, aHEIGHT);
}
public void doGlide() {
// condition for continuing motion
while (x <= 670) {
paint(this.getGraphics());
x += 10;
// introduce a delay between renderings
try {
Thread.sleep(50);
} catch (InterruptedException e) {
}
}
}
}