PaintComponant Drawing help?

[Jcbconway]

Hello, my program is for printing multiple dots on the screen, i want, everytime i click the mouse a new dot is drawn. The problem is that it draws on first click, then Re-draws the dot wherever you click again, rather simple just adding a new dot like i would like. Her is my code.

Main:

package drawingtest;
import javax.swing.*;
class Main extends JFrame{

    public void frameSetup(){
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        Gui g = new Gui();
        g.PanelOneSetup();
        add(g);
        setSize(200, 200);
        setResizable(true);
        setLocationRelativeTo(null);
        setVisible(true);
    }
    public static void main(String[] args) {
        Main m = new Main();
        m.frameSetup();
    }

}

Gui

package drawingtest;
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;


public class Gui extends JPanel{

    int px;
    int py;


    public void PanelOneSetup(){
        addMouseListener(new mlAdapter());
        setBackground(Color.LIGHT_GRAY);
    }
    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2d = (Graphics2D) g;
        System.out.println("Painted");
        g2d.setColor(Color.BLACK);
        g2d.drawOval(px, py, 3, 3);
        g2d.fillOval(px,py,3,3);
        }
     private class mlAdapter extends MouseAdapter {

        public void mousePressed(MouseEvent e) {
            px = e.getX();
            py = e.getY();
            repaint();
        }
    }
}

Please help! haha.

[eRaaaa]

you could remove the line super.paintComponent(g); :D
or:
use a list and store points in it. in your paintcomponent iterate over the list and draw the points.

or:
dont draw directly on the panel, but draw on a e.g. bufferedimage and draw only that image in your paintcomponent !

[Jcbconway]

Oh wow fail on my part! I see, i understand the super.paintComponent(g); and the iterating over the list, but i dont understand the buffered image.

[Jcbconway]

How do i clear the canvas if i do not iterate it over a list or make a buffered image?

[eRaaaa]

For example, like:

package drawingtest;

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;

public class Gui extends JPanel {

	int px;
	int py;
	private BufferedImage image;

	public void PanelOneSetup() {
		addMouseListener(new mlAdapter());
		setBackground(Color.LIGHT_GRAY);
	}

	public void paintComponent(Graphics g) {
		super.paintComponent(g);
		if (image == null) {
			image = new BufferedImage(getWidth(), getHeight(), BufferedImage.TYPE_INT_RGB);
			Graphics2D g2d = image.createGraphics();
			g2d.setColor(Color.WHITE);
			g2d.fillRect(0, 0, getWidth(), getHeight()); //clear
		}
		System.out.println("Painted");
		g.drawImage(image, 0, 0, null);
	}

	private class mlAdapter extends MouseAdapter {

		public void mousePressed(MouseEvent e) {
			px = e.getX();
			py = e.getY();
			Graphics2D g2d = image.createGraphics();
			g2d.setColor(Color.BLACK);
			g2d.drawOval(px, py, 3, 3);
			g2d.fillOval(px, py, 3, 3);
			repaint();
		}
	}
}

the image/canvas size is equal to the panels first size! if you don`t want that, think about it :p

[Fubarable]

Also, if you create a Graphics or Graphics2D object from the BufferedImage, don't forget to call dispose() on it when you're done with it to save on system resources.

[Jcbconway]

Now im wondering how too draw a grid, i would normally do something like this

int x = 0;
        int y = 0;

        for (int i = 0; i < getWidth(); i += 5) {
            g2d.drawLine((getWidth() / 2) - x, 5, (getWidth() / 2) - x, getHeight() - 5);
            g2d.drawLine((getWidth() / 2) + x, 5, (getWidth() / 2) + x, getHeight() - 5);
            g2d.drawLine((getWidth() / 2) - 1, 5, (getWidth() / 2) - 1, getHeight() - 5);
            g2d.drawLine((getWidth() / 2) + 1, 5, (getWidth() / 2) + 1, getHeight() - 5);
            x = x + 10;
        }
        for (int i = 0; i < getHeight(); i += 5) {
            g2d.drawLine(5, (getHeight() / 2) - y, getWidth() - 5, (getHeight() / 2) - y);
            g2d.drawLine(5, (getHeight() / 2) + y, getWidth() - 5, (getHeight() / 2) + y);
            g2d.drawLine(5, (getHeight() / 2) - 1, getWidth() - 5, (getHeight() / 2) - 1);
            g2d.drawLine(5, (getHeight() / 2) + 1, getWidth() - 5, (getHeight() / 2) + 1);
            y = y + 10;
        }

Please help!

[pbrockway2]

So what happens when you do that? And what is the code now?

[Jcbconway]

Nothing happens, no mather where i pute that snipped, nothing happens.

[Jcbconway]

Oooops! haha sorry, it does work! I have a bit of a problem, i can draw a grid and click point to that grid, but, is there a way to make 0,0 the center of the JPanel? rather then just the upper left corner?

[pbrockway2]

is there a way to make 0,0 the center of the JPanel?

I'm not sure I understand what this means. The graphics commands work in coordinates with the origin at the top left corner. You can't change that: it's just the way the Graphics class works. However your application is free to use any coordinate system it likes - although when it wants to use the graphics drawing methods it will have to use the width and height of the component to convert into something suitable for the Graphics class.

---------------------

Actually that's not quite true: you can apply a transform to the graphics instance so that application coordinates are interpreted correctly. But that is conceptually more complicated. The most straightforward thing is to add/subtract half a width/height as required.

[Jcbconway]

What im saying is, to size of of the JPanel is in this example 100,100. If i wanted to draw something, i would have to keep in mind, that 100,100 is the lower right corner, and 0,0 is the upper left. But, if you have ever used a graphing calculator, it uses 0,0 as the center, and the four quadrant around it, the +,+ quadrant is the upper right, the -,+ quadrant is the upper left quarter, -,- is the lower left, and +,- is the lower right. I would like to be able to draw according to the quadrant based grid.

[pbrockway2]

As I said you (A) either do the conversion from app coords to Graphics coords yourself, possibly with some helper methods:

    /**
     * Draws oval based on (px,py) given in app coords with (0,0) in the center
     * and increasing x/y being right/up.
     */
static drawOval(Graphics2D g2d, int px, int py, int w, int h) {
    int x = px - w / 2;
    int y = w / 2 - py;  // I *think* these two are right...
    g2d.drawOval(x, y, 3, 3);
}

Or (B) look at the Graphics2D method transform() and the associated AffineTransform class. In your case you want to apply a glide reflection to the graphics context.

[Jcbconway]

So, i use px,py to determine x,y and draw my oval by x,y...that through selected math determins the position radiating from the center?

[pbrockway2]

Yes. I meant x and y to be coordinates that Graphics would understand and px and py to be your application coordinates with (0,0) at the center.

So you would use the helper method instead of the Graphics one:

g2d.setColor(Color.BLACK);
//g2d.drawOval(px, py, 3, 3);
drawOval(g2d, px, py); // px and py will get converted and the oval drawn

I think I did make a mistake and it should say "int x=px+w/2". Shameful to admit, but my approach is to throw my "best guess" at the maths at the Java runtime and see if things move backwards or whatever.