Update a draw in a Java Canvas - java

I want to make an application in which I can draw a path on a canvas. The problem is that I have to update this canvas continuously.
Currently I'm able to do it, but I have to redraw all the path every time and so I have to store all the points in memory. I would prefer to simply update the draw by adding a new point.
Is it possible?
Currently my code is:
public class MyCanvas extends Canvas{
private static final long serialVersionUID = 1L;
public MyCanvas(){}
public void paint(Graphics graphics){
super.paint(graphics);
graphics.setColor(Color.green);
// points is an ArrayList of Point2D
for (Iterator iterator = points.iterator(); iterator.hasNext();) {
Point2D point2d = (Point2D) iterator.next();
graphics.fillOval((int)((canvas.getWidth()/2.0) + point2d.getX()), (int)((canvas.getHeight()/2.0) + point2d.getY()), 5, 5);
}
}
}
Thanks!
EDIT
This is the current solution:
PanelCanvas canvasPanel;
...
public void drawCircle(int x, int y){
Graphics2D g2d = bufferedImage.createGraphics();
g2d.setColor(Color.green);
g2d.setBackground(Color.white);
g2d.fillOval((int)((panelCanvas.getWidth() / 2.0) + x/10.0), (int)((panelCanvas.getHeight() / 2.0) + y/10.0), 5, 5);
panelCanvas.repaint();
}
public class CanvasPanel extends JPanel{
public void paintComponent(Graphics graphics){
super.paintComponents(graphics);
Graphics2D g2d = (Graphics2D)graphics;
g2d.setBackground(Color.white);
g2d.drawImage(bufferedImage, null, 0, 0);
}
}

Draw the points (whatever) to a BufferedImage. During paint(), draw the BufferedImage.
Note though, that the JRE can draw thousands of objects in paint without any visual artifacts or slow-down.
The canvas is embedded in a Swing GUI. What do you suggest for replacing AWT.Canvas?
JComponent for complete custom rendering, JPanel for custom rendering combined with components. It sounds like the JComponent would be better suited to this use-case.
For either of those, override paintComponent(Graphics) instead of paint(Graphics). The rest of the advice is the same.

Related

I'm trying to change the Rectangle colour to Black but its not working

I'm new to Java and don't know exactly what the cause.Let me explain the issue
I created a Rectangle Shape and its working, then i thought about changing its color to black for some testing but it seems not working below is my code.
When i call the method from paintComponent itself then its working but if i do the same from any other method then its not changing the color. I tried calling the method repaint also but still the same
public class Meme extends JPanel {
Rectangle2D.Float myRect = new Rectangle2D.Float(90, 90, 90, 90);
Graphics2D graphics2d;
public void DRAW() {
graphics2d.setColor(new Color(0, 0, 200));
graphics2d.fill(myRect);
}
public void ChangeColour() {
System.out.println("Called");
graphics2d.setPaint(Color.BLACK);
System.out.println("Called2");
graphics2d.fill(myRect);
System.out.println("Called3");
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
graphics2d = (Graphics2D) g;
graphics2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
graphics2d.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
DRAW();
}
}
Button click listener method
private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {
meme1.ChangeColour();
}
As far as I can remember, whenever you change some properties (color in this case), you have to call repaint. This will invoke a call to paintComponent and the frame will be drawn once again.
In your case, I am guessing even if you call repaint after changing color, the DRAW method gets called again in paintComponent which resets the changed color back to (0, 0, 200). Therefore, you don't see any change in the screen. But when you call changeColor in paintComponent method (assuming after the call to DRAW), the change of color persists and does not get overridden.
POSSIBLE SOLUTION
Just keep the color stored somewhere else. Like
Color myColor = new Color(0,0,200);
then in DRAW:
private void DRAW() {
graphics2d.setColor(myColor);
graphics2d.fill(myRect);
}
and in ChangeColor:
private void ChangeColour() {
myColor = Color.BLACK;
}
Hope it helps.
update your function like this
public void ChangeColour() {
System.out.println("Called");
graphics2d.setColor(new Color(1, 1, 200));
System.out.println("Called2");
graphics2d.fill(myRect);
System.out.println("Called3");
}
Painting in Swing is both passive and destructive. That is, a paint pass can occur at anytime for any number of reasons, many which you don't control. Destructive means, on each paint pass you are expected to repaint the entire component from scratch.
In Swing, you update the state you want change and then call repaint to trigger a new paint pass.
Painting should only ever paint the current state, it should never try and change it
public class Meme extends JPanel {
Rectangle2D.Float myRect = new Rectangle2D.Float(90, 90, 90, 90);
private Color color;
public void draw(Graphics2D graphics2d) {
graphics2d.setColor(color);
graphics2d.fill(myRect);
}
public Dimension getPreferredSize() {
return new Dimension(200, 200);
}
public void ChangeColour() {
color = Color.BLACK;
repaint();
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
graphics2d = (Graphics2D) g.create();
graphics2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
graphics2d.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
draw(graphics2d);
graphics2d.dispose();
}
}
Also, the graphics context passed to your component is shared with all the other components, so it's important that any significant changes you make to the context are undone before the method exists - in most cases, it's just a simple case of calling create on the Graphics context to snapshot it state and dispose (on the copy you created) when you're done

Cannot Rotate JPanel Image

I have been having trouble rotating one of my sprites in a game I'm working on. I have followed a tutorial about rotating images on JPanels about the center of the image (which was very well-done). I even created a simple project that works just fine.
However, when I tried to use the same technique on my game, my sprite will not rotate. I have determined that the problem is drawing the sprite, as I have checked in the paintComponent(Graphics g) method via a println() statement that the rotation value is updated properly and that the repaint() method is being called when appropriate.
Here is the relevant code to the issue (excludes unnecessary methods and such):
Highest-level class:
public abstract class GameObject extends JPanel {
protected BufferedImage image;
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
// Draw sprite
Graphics2D g2 = (Graphics2D) g;
g2.drawImage(image, 0, 0, null);
// Clean up
g.dispose();
g2.dispose();
}
}
Lowest-level class:
// Entity is a subclass of GameObject.
// It does not override paintComponent.
// All it does is add an update method that is called every game tick.
public abstract class MicroObject extends Entity {
protected Location location; // variable to store position and rotation
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
g2.translate(this.getWidth() / 2, this.getHeight() / 2);
g2.rotate(Math.toRadians(location.getRotation()));
// In the following two lines, image is inherited from GameObject
g2.translate(-image.getWidth(this) / 2, -image.getHeight(this) / 2);
g2.drawImage(image, 0, 0, null);
g2.dispose();
g.dispose();
}
}
I know this isn't necessarily a unique question, but I've looked at all of the "duplicate" threads, and they've all left me with similar answers, but the same problem in the end. I would appreciate it if someone took the time to look at my code and see where I went wrong.
Thank you all!
Don't dispose those Graphics objects! They're re-used by Swing to draw children components & borders.
The reason why it's not working is because GameObject is disposing the graphics object before MicroObject can use it.
Also, there's no reason to draw the image twice. Remove the code in GameObject's paintComponent().
Lastly, just use classes. There's no reason for those to be abstract.
So:
Highest-level class:
public class GameObject extends JPanel {
protected BufferedImage image;
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
// Don't draw sprite. Subclass will do that.
// Don't clean up. Swing does that for us.
}
}
Lowest-level class:
// Entity is a subclass of GameObject.
// It does not override paintComponent.
// All it does is add an update method that is called every game tick.
public class MicroObject extends Entity {
protected Location location; // variable to store position and rotation
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
g2.translate(this.getWidth() / 2, this.getHeight() / 2);
g2.rotate(Math.toRadians(location.getRotation()));
// In the following two lines, image is inherited from GameObject
g2.translate(-image.getWidth(this) / 2, -image.getHeight(this) / 2);
g2.drawImage(image, 0, 0, null);
}
}

Draw and move a circle in Java

I'm using Swing to create a small GUI in Java. All I am trying to get it to do is take an ArrayListof Circles and draw them. I've run into two problems:
1) I have to call my draw method repeatedly before it draws the circle. If I just call my draw method once nothing happens, I get a blank drawing. If I call it in a loop that runs for less than 30 milliseconds it only draws the first of two circles that I want to draw. Finally, if I call it for more than 30 milliseconds it draws both circles I am trying to draw.
and
2) When I move one of the circles, I get a "flicker" on the drawing.
I'm not too familiar with Swing programming. I've looked at sample code and watched a few videos - and what I have looks right to me. But I figure I must have messed something up, because it doesn't look like this in the videos I've watched.
Here is my GUI class:
package gui;
import draw.*;
import java.util.List;
import javax.swing.*;
public class GUI extends JFrame {
private CirclePainter drawingBoard = new CirclePainter();
public GUI()
{
setSize(500, 500);
this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
this.setVisible(true);
this.add(drawingBoard);
drawingBoard.setVisible(true);
}
public void draw(List<Circle> circles)
{
drawingBoard.paintComponent(drawingBoard.getGraphics(), circles);
}
}
my CirclePainter class
package gui;
import draw.Circle;
import javax.swing.*;
import java.awt.*;
import java.util.List;
class CirclePainter extends JPanel
{
public void paintComponent(Graphics graphics, List<Circle> circles)
{
super.paintComponent(graphics);
for(Circle circle : circles)
graphics.fillOval(circle.getX(), circle.getY(), circle.getRadius() * 2, circle.getRadius() * 2);
}
}
EDIT: redacted some code since this is for a school project. The remaining code should be enough for someone visiting in the future to still understand the question.
Never call paintComponent(...) directly as you're doing.
Instead suggest a draw by calling repaint() on a component when necessary.
Don't draw with a Graphics object obtained via a getGraphics() call on a component. Instead, draw with the Graphics object provided in the paintComponent method.
Avoid using while (true) loops in a Swing GUI as you risk tying up the Swing event thread and freezing the GUI. Use a Swing Timer for simple animations.
You probably don't even need a Swing Timer since your animation can be driven by your MouseListener/MouseMotionListener.
Most important -- do read the Swing painting and other tutorials, as most of this information can be found there. It looks like you're guessing how to do some of your coding and that's a dangerous thing to do when it comes to drawing or animating a GUI. You can find most tutorials in the Swing info link.
Consider using a Shape object to represent your Circle, such as an ellipse2D. The reason that this will help is that it has some very useful methods, including a contains(Point p) method that will help you determine if a mouse click lands inside of your circle.
You will want to decide where _x and _y represent the center point of your circle or not. If so, then you'll need to adjust your drawing some, by shifting it left and up by _radius amount.
Consider casting your Graphics object into a Graphics2D object in order to use its extra methods and properties.
One such property are the RenderingHings. Set your Graphics2D RenderingHints to allow for anti-aliasing to get rid of your image "jaggies". This can be done with: g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON); where g2 is your Graphics2D object.
Your paintComponent method is not a true paintComponent override and thus won't work correctly. It should be a protected method, not public, it should have one parameter, a Graphics object, and nto a second parameter, and you should place the #Override annotation above it.
For example, please have a look at this answer of mine to a similar problem.
An example of a paintComponent method that centers the circles on _x and _y and that uses rendering hints:
class CirclePainter extends JPanel implements Iterable<Circle> {
private static final int PREF_W = 500;
private static final int PREF_H = PREF_W;
private CircleList circleList = new CircleList();
#Override
protected void paintComponent(Graphics graphics) {
super.paintComponent(graphics);
Graphics2D g2 = (Graphics2D) graphics;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
for (Circle circle : circleList) {
// if x and y are the center points, then you must subtract the radius.
int x = circle.getX() - circle.getRadius();
int y = circle.getY() - circle.getRadius();
int width = circle.getRadius() * 2;
int height = width;
g2.fillOval(x, y, width, height);
}
}
Building on your code and the suggestions from Hovercraft Full Of Eels, a small step in the right direction could be taken with these modifications to the GUI and CirclePainter classes:
// GUI.draw
public void draw(List<Circle> circles)
{
// drawingBoard.paintComponent(drawingBoard.getGraphics(), circles);
drawingBoard.setCircles(circles);
drawingBoard.repaint();
}
class CirclePainter extends JPanel
{
// public void paintComponent(Graphics graphics, List<Circle> circles)
// {
// super.paintComponent(graphics);
// for(Circle circle : circles)
// graphics.fillOval(circle.getX(), circle.getY(), circle.getRadius() * 2, circle.getRadius() * 2);
// }
private List<Circle> circles;
public void setCircles(final List<Circle> circles) {
this.circles = circles;
}
#Override
protected void paintComponent(final Graphics graphics) {
super.paintComponent(graphics);
for (Circle circle : circles)
graphics.fillOval(circle.getX(), circle.getY(), circle.getRadius() * 2, circle.getRadius() * 2);
}
}
This way, you might not have fixed all the fundamental issues, but you get your program to work with only minor changes. And Swing is a very nice library that can be much fun to learn more about.

Flickering white on canvas

I figured out a solution minutes after posting, but due to low reputation I couldn't delete the post
For the fun of it I decided to start working on something which might turn into a game at some point.
I'm trying to draw some circles and move them in a given direction currently. This causes flickering. It's very likely that I oversee something very basic but I can't figure out why it doesn't render smoothly.
My board class looks something like (removed what I deemed unnecessary):
public class Board extends Canvas implements Runnable {
public static void main(String[] args) {
Board board = new Board();
board.setPreferredSize(new Dimension(WIDTH * SCALE, HEIGHT * SCALE));
JFrame frame = new JFrame("Circles");
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
frame.add(board);
frame.pack();
frame.setVisible(true);
board.start();
}
#Override
public void run() {
while (running) {
process();
repaint();
try {
Thread.sleep(15);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
The paint method:
public void paint(Graphics g1) {
super.paint(g1);
Graphics2D g = (Graphics2D) g1;
for (Ball ball : Ball.BALLS) {
g.drawOval((int) ball.getLocation().getX(), (int) ball.getLocation().getY(), ball.getRadius(), ball.getRadius());
}
}
My process method:
private void process() {
if (utilities.randInt(1, 100) < 10 && Ball.getBallCount() < 40) {
Ball.spawnNew(this);
}
for (Ball ball : Ball.BALLS) {
ball.move(this);
}
Ball.BALLS.removeAll(Ball.TO_REMOVE);
Ball.TO_REMOVE.clear();
}
The move method basically increments the x-value of the ball by a given value each time its called (moving it right).
Like I said, I'm unsure why it flickers so if you have any pointers please do tell.
Thanks!
This sounds like a case where you need to perform double-buffering, so that one copy of your canvas can remain shown while you are updating the other.
You're using AWT here, and I don't know how to implement double-buffering manually with AWT. However, if you're willing to use Swing here you can take advantage of automatic double-buffering. See the question about How to make canvas with Swing? as well as Oracle Technology Network's article on Painting in AWT and Swing.
The basic idea would be:
extend javax.swing.JPanel instead of Canvas (which means when you override paint(Graphics) you're now overriding it from javax.swing.JComponent instead of java.awt.Component)
create a constructor with super(true) to enable double-buffering.
Edit: Also, as iccthedral points out, you're better off overriding paintComponent(Graphics) and including a call to super.paintComponent(Graphics). See Difference between paint, paintComponent and paintComponents in Swing.
You need double buffering. To do this you need to create a BufferedImage and get the Graphics from it. Paint everything to the image, render the image on to the screen, then finally fill the image with a the background color or image to reset it.
Sample:
//one time instantiation
BufferedImage b = new BufferedImage(width, height, mode);
In paint(Graphics g):
Graphics buffer = b.getGraphics();
//render all of the stuff on to buffer
Graphics2D g = (Graphics2D) buffer;
for (Ball ball : Ball.BALLS) {
g.drawOval((int) ball.getLocation().getX(), (int) ball.getLocation().getY(), ball.getRadius(), ball.getRadius());
}
g1.drawImage(b, 0, 0, width, height, null);
g.setColor(Color.BLACK);
//reset the image
g.drawRect(0, 0, width, height);
g.dispose();

how to group graphic object

how to turn several graphics objects in to one?
(this part of code should generate tetris figure, where generate() create a figure)
public void paint(Graphics g){
Figure f = generate();
int length = f.getX()[0].length;
for(int j =0; j<f.getX().length;j++){
int xr=xs+10;
ys = 0;
for(int i=0;i<length;i++){
if (f.getX()[j][i] == 1){
int yr = ys+10;
Rectangle p = new Rectangle(xs,ys,xr,yr);
g.setColor(f.getY());
g.drawRect(p.x, p.y, p.width, p.height);
g.fillRect(p.x, p.y, p.width, p.height);
//g.translate(xs+40, ys+40);
}
ys+=10;
}
xs+=10;
}
xs=0;
ys=0;
//g.setColor(Color.white);
//g.drawRect(45, 95, 55, 105);
}
Well, I think you are starting with Java 2D, since your code has some problems.
First of all, you always need to call the paint version of the super class. This should be done because the component needs to have a chance to render itself properly. Take a look.
#Override
public void paint( Graphics g ) {
// you MUST do this
super.paint(g);
// continue here...
}
If you are dealing with a JFrame you will override the paint method. If you are working with some JComponent child, like JPanel, you need to override the paintComponent method, which has the same signature of paint, but it is protected, not public. You can override paint too, but in these cases (JComponent and its children), paint is a method that delegates the paint work to three methods (paintComponent, paintBorder, and paintChildren), so the best option is to override paintComponent.
Another detail. The best way to work with graphics is to create a new graphics context based in the current one and dispose of it after using it. Take a look:
#Override
public void paint( Graphics g ) {
// you MUST do this
super.paint(g);
Graphics newG = g.create();
// or Graphics2D newG2d = (Graphics2D) g.create();
// do your work here...
newG.dispose(); // disposes the graphics context
}
The graphics context that is created using the create method is a copy of the current graphics context (with the same states), but changing it does not affect the original one, so doing this, you will not mess with the state of the original graphics context.
To finish, I think that you need to have a draw method in your figure that receives the graphics context. So, the Figure instance will be responsible to draw itself. Something like:
public class Figure {
// figure's members...
public void drawMe( Graphics2D g2d ) {
// do the draw work here...
}
}
public class MyFrame extends JFrame {
#Override
public void paint( Graphics g ) {
super.paint(g);
Graphics2D g2d = (Graphics2D) g.create();
// let's suppose that figureList is a List<Figure> or a Figure[]
for ( Figure f : figureList ) {
f.drawMe( g2d );
}
g2d.dispose();
}
}
Of course, you can create a new graphics context for each Figure if its draw method changes the graphics context too "deeply", like doing translations and rotations. You just need to dispose the new ones after using them.
I assume you are trying to put multiple components inside of an enclosing component so that you can move/manipulate them together.
One suggestion would be to add each of your objects to a panel object, like JPanel.
However it is somewhat unclear what you are trying to achieve exactly.

Categories