We Keep Coding

MouseListener on a graphics object

I'm feeling quite stupid. But what is the reason why this simple piece of code doesn't change the ellipse's color?
Basically I want to add a mouse listener to the oval - a graphic object. when the mouse cursor is in oval, the oval changes its color. But this code doesn't change at all... This code is for testing only.
public class Help extends JFrame{
public static void main(String [] agrs){
Help h = new Help();
h.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
h.add(new Help_Option());
h.setSize(2000, 1000);
h.setVisible(true);
}
}
class Help_Option extends JComponent implements MouseListener{
Ellipse2D ellipse = new Ellipse2D.Double(0, 0, 1000, 500);
Color c = Color.BLACK;
public Help_Option(){
this.addMouseListener(this);
}
public void paintComponent(Graphics g){
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
g2d.setColor(Color.BLUE);
g2d.draw(ellipse);
g2d.setColor(c);
g2d.fill(ellipse);
}
public void setColor(Color c){
this.c = c;
}
#Override
public void mouseClicked(MouseEvent e) {
}
#Override
public void mousePressed(MouseEvent e) {}
#Override
public void mouseReleased(MouseEvent e) {}
#Override
public void mouseEntered(MouseEvent e) {
if (ellipse.contains(e.getX(), e.getY()) ) {
setColor(Color.GREEN);
repaint();
}
}
#Override
public void mouseExited(MouseEvent e) {
}
}

you are adding a MouseListener and waiting for mouseEntered events. These are fired when the mouse enters a Component, not a region of it. Try entering the component's boundary where the ellipse is shown and observe.
What you need is a MouseMotionListener, so that you can observe the mouse pixel by pixel; use the mouseMoved or mouseDragged events.
You might still need to listen for mouseEntered or mouseExited events, as MouseMotionEvents are only fired while inside the component's boundary, so you might miss the mouse exiting the component while still inside the ellipse.
A good and simple way for debugging this is adding prints inside the event handler. You would then see that the handler was called, but only once or a few times, and not when you move the mouse within the component.
class Help_Option extends JComponent implements MouseListener, MouseMotionListener {
Ellipse2D ellipse = ...;
public Help_Option() {
this.addMouseListener(this);
this.addMouseMotionListener(this);
}
public void mouseMoved(MouseEvent e) {
if (ellipse.contains(e.getX(), e.getY()) ) {
//mouse is inside the ellipse
} else {
//mouse is outside the ellipse
}
}
public void mouseExited(MouseEvent e) {
//mouse is outside the ellipse
}
//more method stubs
}

..if i use the boundary of the ellipse, it would be a rectangle, so whenever my mouse enter the rectangle-but-not-in-ellipse, the color will change
See:
Shape.contains(x,y): Tests if the specified coordinates are inside the boundary of the Shape, as described by the definition of insideness.
Shape.contains(Point2D): Tests if a specified Point2D is inside the boundary of the Shape, as described by the definition of insideness.
See also this answer for a demo showing collisions between 2 shapes.

Trouble using mouse to click on JComponent

Hey Everyone I am trying to create a somewhat dynamic program in which you can add shapes or images to a JPanel and then select and move the shapes after you have added them. The problem is that when I click on the specific JComponent nothing happens. In fact clicking on any of the components I have created to test the project returns false for all JComponents. However it seems that if I click inside the bounds of my JComponent in the top left corner I will get returned true for all JComponents, ie click in the area bounded by (0,0,50,68).
The idea is that if I click one of the JComponents it will set that specific JComponent to be movable however I cannot get past the part of actually selecting a specific JComponent.
Here is a basic SSCE that I built to recreate the problem:
import java.awt.*;
import java.awt.event.*;
import java.util.*;
import javax.swing.*;
public class SSCE1 extends JPanel {
private ArrayList<Shape> shapeList = new ArrayList<Shape>();
SSCE1() {
setLayout(null);
/* Debug Stuff */
System.out.println("Debug:");
/* Add The First Shape To The List */
shapeList.add(0, new Shape(100, 100));
add(shapeList.get(0));
shapeList.add(1, new Shape(610, 0));
add(shapeList.get(1));
shapeList.add(2, new Shape(500, 900));
add(shapeList.get(2));
addMouseListener(new MouseAdapter() {
public void mouseClicked(MouseEvent e) {
for (Shape shape : shapeList) {
if (shape.contains(e.getPoint())) {
System.out.println("Hello");
} else {
System.out.println("Goodbye");
}
}
}
});
}
}
class Shape extends JComponent {
int xLocation, yLocation, xBounds1, yBounds1;
Shape(int xLocation, int yLocation) {
this.xLocation = xLocation;
this.yLocation = yLocation;
this.xBounds1 = 50;
this.yBounds1 = 68;
setBounds(xLocation, yLocation, xBounds1, yBounds1);
setLocation(xLocation, yLocation);
}
public void paintComponent(Graphics g) {
super.paintComponent(g);
g.setColor(Color.blue);
g.fillRect(0, 0, 100, 100);
}
}
class Run {
public static void main(String[] args) {
JFrame main = new JFrame();
SSCE1 p1 = new SSCE1();
main.setSize(new Dimension(1000, 1000));
main.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
main.setLocation(new Point(0, 0));
main.setVisible(true);
main.add(p1);
}
}

Basically, the problem is, Shape is expecting any mouse coordinates you pass it to be defined within the context of the Shape. That is, the top, left corner of Shape is always 0x0
The mouse point you are processing is within the context of the parent container, therefore, unless Shape is positioned at 0x0 within the parent container, Shape will never contain the mouse point.
You need to translate the mouse point to the context of the Shape before checking it
For example...
addMouseListener(new MouseAdapter() {
public void mouseClicked(MouseEvent e) {
for (Shape shape : shapeList) {
Point shapePoint = SwingUtilities.convertPoint(e.getComponent(), e.getPoint(), shape);
if (shape.contains(shapePoint) {
System.out.println("Hello");
} else {
System.out.println("Goodbye");
}
}
}
});

Use next mouseListener it works:
addMouseListener(new MouseAdapter() {
public void mouseClicked(MouseEvent e) {
for (Shape shape : shapeList) {
Point convertPoint = SwingUtilities.convertPoint(SSCE1.this, e.getPoint(), shape);
if (shape.contains(convertPoint)) {
System.out.println("Hello");
} else {
System.out.println("Goodbye");
}
}
}
});
The reason is next according docs in contains method the point's x and y coordinates are defined to be relative to the coordinate system of this component. because of that works for (0,0,50,68). All what you need convert point from JPanel to Shape with help of SwingUtilities.convertPoint(...)

Calling repaint from another class JFrame

I'm trying to call repaint from another class. But it does not work. I have to draw on a frame.
public class Tester extends JFrame{
public static dtest d ;
public static void main(String[] args) {
Tester t = new Tester();
d = new dtest();
test tnew = new test();
}
public static class dtest extends JFrame implements MouseMotionListener{
public static int x,y;
dtest()
{
super("title");
setSize(500,500);
setVisible(true);
addMouseMotionListener(this);
}
#Override
public void mouseDragged(MouseEvent e) {
x = e.getX();
y = e.getY();
repaint();
}
#Override
public void mouseMoved(MouseEvent e) {
// TODO Auto-generated method stub
}
public void paint(Graphics g)
{
System.out.println("I am called");
}
}
public static class test {
public test()
{
for(int i = 0 ; i < 5 ; i++)
{
System.out.println("I am called from run");
d.repaint();
}
}
}
}
this prints
I am called from run
I am called from run
I am called from run
I am called from run
I am called from run
so it does not executing the paint() portion. d.repaint() is not working. why?

Take a look at this page and look at the first answer. It's a similar if not exact question to yours.
JFrame's paint() method has been deprecated. The compiler, or your IDE, should be complaining a bit, especially if you place the #Override tag directly above the method (use this to test if this method can be rewritten... aka what you're trying to do).
This means that its use has been discouraged and some functionality may have been removed. When using javax.swing, you'll want to learn the system completely about JPanels and JComponents. To paint something on a screen, you'll want to add a custom class that extends JPanel with the add(Component c) method. Then, override the paintComponent(Graphics g) method in that class. Make sure to have the first line in that method be super.paintComponent(g); so that the window can refresh itself.
For completeness:
public class MyWindow extends JFrame {
MyPanel thePanel;
public MyWindow(int x, int y) {
setSize(x, y);
thePanel = new MyPanel(x, y);
this.add(thePanel);
}
}
public class MyPanel extends JPanel {
public MyPanel(int x, int y)
setSize(x, y);
}
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
g.drawImage(ImageManager.getImage("Cute Puppy"), 40, 40, null); // Or whatever
}
}
So, when the repaint() or revalidate() method is called on the MyWindow, the Panel will recieve a paintComponent call.
Please let me know in the comments if you need any additional help.
Edited:
Since you need to use MouseMotionListener, and I'm still not quite understanding the context and trouble of "I need to call repaint from another class"... I will try my best.
Firstly, check out this tutorial on the Oracle pages. Also, check out the others on GUI's. You'll learn a lot about organization and displaying that will make you realize how their system can work with yours.
Now, for your questions:
i have to use MouseMotionListener.
Not quite... it is a good way for set up but you can run a Thread (something that constantly runs methods over and over) to check the Mouse coordinates. You'll want to start doing this when you get into games and other miscellaneous applications.
new Thread() {
public void run() {
Point mouse;
int mousex;
int mousey;
while (true) {
mouse = MouseInfo.getPointerInfo().getLocation();
mousex = mouse.x - theWindow.getLocationOnScreen().x - 3; // You'll need to get the
// x coordinate, subtract the window's x coordinate, and subtract 3 because of
// the blue border around a standard pc window.
mousey = mouse.y - theWindow.getLocationOnScreen().y - 29; // 29 is top bar height
SomeOtherClass.processMove(mousex, mousey);
}
}
}.start();
Next: I tried that with JPanel but i could not do that. If you read the tutorial at the top of my edit, you see they implement MouseMotionListener with ease.
Next: I prefer to do it with JFrame. If you wish to process the mouse in the JFrame, do the following: Have your JFrame the listener, but the JPanel be where the mouse data comes from. As follows:
public class MyWindow extends JFrame implements MouseMotionListener {
public MyPanel thePanel;
public int x;
public int y;
public MyWindow() {
thePanel = new MyPanel();
thePanel.addMouseMotionListener(this);
// Make this JFrame get called when the mouse
// moves across the panel.
}
#Override
public void mouseDragged(MouseEvent e) {
x = e.getX();
y = e.getY();
thePanel.repaint();
}
#Override
public void mouseMoved(MouseEvent e) {
// TODO Auto-generated method stub
}
}
public class MyPanel extends JPanel {
public void paintComponent(Graphics g) {
super.paintComponent(g);
// Other painting stuff
}
}
Next: Now i have to update the frame from another class. I could not find a way to update the GUI(the frame) from another class.
Simple. Since the JPanel is what needs to be updated, add the following method to the MyWindow class:
public void repaintWindow() {
thePanel.repaint();
}
And add this to whenever you need to update it:
MyWindow theWindow = new MyWindow();
theWindow.repaintWindow();
Next: all the answers here extended JPanel. So i could not find my answer.
I apologize, but you NEED a panel. It is possible to do with JFrames, but if you want to start doing things raw and low-level, you need to learn how these things work by learning to read the oracle tutorials and the oracle documentation. For now, use JPanels in any ways I've shown you.
Next: from another class I have to draw something on JFrame.Is that possible?
Yes, indeed! Whenever you want to draw something:
MyWindow theWindow = new MyWindow();
Graphics g = theWindow.thePanel.getGraphics();
BufferedImage someRandomImage = SomeRandomClass.getRandomImage();
g.drawImage(someRandomImage, 200, 481, null);
theWindow.repaintWindow();
I really hope I've helped but to program in java you need to use the tools they give you, especially when it comes to high level things like Swing. There are tutorials everywhere for this stuff. Please read them before asking for specific help in the future.

Java MouseEvent position is inaccurate

I've got a problem in Java using a "canvas" class I created, which is an extended JPanel, to draw an animated ring chart. This chart is using a MouseListener to fetch click events.
The problem is that the mouse position does not seem to be accurate, meaning it does not seem to be relative to the "canvas" but instead relative to the window (in the left, upper corner I got about 30px for y coord).
This is my code:
I created a class, that extends JPanel and does have a BufferedImage as member.
public class Canvas extends JPanel {
public BufferedImage buf;
private RingChart _parent;
public Canvas(int width, int height, RingChart parent){
buf = new BufferedImage(width, height, 1);
...
In the paint component method I just draw the buffered image, so I am able to paint on the canvas from 'outside' by painting on the buffered image, which is public.
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D)g;
g2.drawImage(buf, null, 0, 0);
}
Now there's a class RingChart which contains a "canvas":
public class RingChart extends JFrame{
public Canvas c;
...
And I create a Graphics2D from the bufferedImage in the canvas class. This g2d is used for painting:
public RingChart(){
c = new Canvas(1500,980,this);
add(c);
setSize(1500, 1000);
setTitle("Hans");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
g2d = (Graphics2D)c.buf.createGraphics();
...
What I now was trying to achieve, was a mouse listener that listened to mouse events happening on the canvas. So when the user clicks on the canvas I could retrieve the position he clicked on, upon the canvas, through the event variable.
So I created a mouse listener:
class MouseHandler implements MouseListener {
#Override
public void mouseClicked(MouseEvent e){
RingChart r = ((Canvas)e.getSource()).getParent();
r.mouseClick(e);
}
...
...and added this mouse listener to the canvas of the RingChart class (myChart is an instance of RingChart and c is the canvas it contains):
...
MouseHandler mouse = new MouseHandler();
myChart.c.addMouseListener(mouse);
...
But as I mentioned above, the mouse position, that's returned when the click event is called, does not seem to be accurate. I think the mistake must be somehow in the way I created that mouseListener or maybe assigned it to the wrong element or something like that. But I've tried quite a couple of things and it didn't change. Can maybe someone tell me, what I've done wrong?
UPDATE:
The code of the function "mouseClick" that is a member of RingChart and is called in the mouse listener:
public void mouseClick(MouseEvent evt){
//evt = SwingUtilities.convertMouseEvent(this, evt, c);
if(evt.getButton() == MouseEvent.BUTTON1 && animation == null){
for(Element e : elements){
if(e.getShape() != null && e.getShape().contains(evt.getPoint())){
//do some stuff
}
}
}
}
Again, the hierarchy of my classes:
RingChart --contains a--> Canvas --got a--> MouseListener.
The shapes in this function are shapes that have been painted on the canvas c. Now I want to check, if the user has clicked on one of them. So as I thought, the shapes should be in canvas-coordinates and the event position should be in canvas-coordinates and everything should fit together. But it doesn't.
Now user MadProgrammer told me, to use the ConvertMouseEvent function. But I currently don't see which exact way I should use this sensibly.
UPDATE:
I found a solution: All I had to do is adding the canvas not directly to the JFrame but to the ContentPane of the JFrame instead:
So instead:
public RingChart(){
c = new Canvas(1500,980,this);
add(c);
...
I do:
public RingChart(){
c = new Canvas(1500,980,this);
getContentPane().add(c);
...
Then I give the MouseListener to the ContentPane.
getContentPane().addMouseListener(new MouseHandler());
getContentPane().addMouseMotionListener(new MouseMoveHandler());
I don't know, if this is an elegant solution, but it works.

The mouse event is automatically converted to be relative to the component that it occurred in that is, point 0x0 is always the top left corner of the component.
By using RingChart r = ((Canvas)e.getSource()).getParent(), you've effectively changed the reference, which now means the location is no longer valid.
You need to convert the location so that its coordinates are in the context of the parent component. Take a look at SwingUtilities.convertMouseEvent(Component, MouseEvent, Component)
UPDATE with PICTURES
Lets take this example...
The blue box has a relative position of 50px x 50px to the red box. If you click in the blue box, lets say at 25x25, the mouse coordinates will be relative to the blue box (0x0 will be the top left of the blue box).
If you then pass this event to the red box and try and use the coordinates from it, you will find that the coordinates will now be half way between the top left of the red box and the blue box, because the coordinates are context sensitive.
In order to get it to work, you need to translate the mouse events location from the blue box to the red box, which would make it 75x75
Now, I don't know what you're doing when you pass the mouse event to the RingChart so I'm only guessing that this is the issue you're facing.
UPDATED with Click Code
Okay, lets say, you have a Canvas at 100x100. You click on that Canvas at 50x50. You then pass that value back up the chain.
public void mouseClick(MouseEvent evt){
//evt = SwingUtilities.convertMouseEvent(this, evt, c);
if(evt.getButton() == MouseEvent.BUTTON1 && animation == null){
for(Element e : elements){
// Here, we are asking the shape if it contains the point 50x50...
// Not 150x150 which would be the relative position of the click
// in the context to the RingChart, which is where all your objects
// are laid out.
// So even the original Canvas you clicked on will return
// false because it's position + size (100x100x width x height)
// does not contain the specified point of 50x50...
if(e.getShape() != null && e.getShape().contains(evt.getPoint())){
//do some stuff
}
}
}
}
UPDATED
I think you have your references around the wrong way...
public static MouseEvent convertMouseEvent(Component source,
MouseEvent sourceEvent,
Component destination)
I think it should read something like
evt = SwingUtilities.convertMouseEvent(evt.getComponent(), evt, this);
UPDATE with Code Example
Okay, so, I put this little example together...
public class TestMouseClickPoint extends JFrame {
private ContentPane content;
public TestMouseClickPoint() throws HeadlessException {
setSize(600, 600);
setDefaultCloseOperation(EXIT_ON_CLOSE);
setLocationRelativeTo(null);
setLayout(new BorderLayout());
content = new ContentPane();
add(content);
}
protected void updateClickPoint(MouseEvent evt) {
content.updateClickPoint(evt);
}
protected class ContentPane extends JPanel {
private Point relativePoint;
private Point absolutePoint;
public ContentPane() {
setPreferredSize(new Dimension(600, 600));
setLayout(null); // For testing purpose only...
MousePane mousePane = new MousePane();
mousePane.setBounds(100, 100, 400, 400);
add(mousePane);
}
protected void updateClickPoint(MouseEvent evt) {
absolutePoint = new Point(evt.getPoint());
evt = SwingUtilities.convertMouseEvent(evt.getComponent(), evt, this);
relativePoint = new Point(evt.getPoint());
System.out.println(absolutePoint);
System.out.println(relativePoint);
repaint();
}
protected void paintCross(Graphics2D g2d, Point p) {
g2d.drawLine(p.x - 5, p.y - 5, p.x + 5, p.y + 5);
g2d.drawLine(p.x - 5, p.y + 5, p.x + 5, p.y - 5);
}
/*
* This is not recommended, but I want to paint ontop of everything...
*/
#Override
public void paint(Graphics g) {
super.paint(g);
Graphics2D g2d = (Graphics2D) g;
if (relativePoint != null) {
g2d.setColor(Color.BLACK);
paintCross(g2d, relativePoint);
}
if (absolutePoint != null) {
g2d.setColor(Color.RED);
paintCross(g2d, absolutePoint);
}
}
}
protected class MousePane extends JPanel {
private Point clickPoint;
public MousePane() {
addMouseListener(new MouseAdapter() {
#Override
public void mouseClicked(MouseEvent e) {
clickPoint = e.getPoint();
TestMouseClickPoint.this.updateClickPoint(e);
repaint();
}
});
setBorder(new LineBorder(Color.RED));
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
g2d.setColor(Color.BLUE);
if (clickPoint != null) {
g2d.drawLine(clickPoint.x, clickPoint.y - 5, clickPoint.x, clickPoint.y + 5);
g2d.drawLine(clickPoint.x - 5, clickPoint.y, clickPoint.x + 5, clickPoint.y);
}
}
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException ex) {
} catch (InstantiationException ex) {
} catch (IllegalAccessException ex) {
} catch (UnsupportedLookAndFeelException ex) {
}
new TestMouseClickPoint().setVisible(true);
}
}
Basically, it will paint three points. The point that the mouse was clicked (relative to the source of the event), the unconverted point in the parent container and the converted point with the parent container.
The next thing you need to do is determine the mouse location is actually been converted, failing that. I'd probably need to see a working example of your code to determine what it is you're actually doing.

Drawing problem in java

I am a new in java, and I need to implement a paint application, and I'm kinda stuck at the beggining, I managed to draw lines to a JPanel which I added to a JFrame, but each line drawn resets the entire drawing, and in the draw area remains only the last line drawn. I hope I made myself understood, here his the code:
class Shapes extends JFrame {
public JFrame mf = new JFrame("Paint");
DrawArea da = new DrawArea();
JToggleButton lineButton = new JToggleButton(new ImageIcon("line.gif"));
JToggleButton brushButton = new JToggleButton();
JToggleButton pencilButton = new JToggleButton();
JToggleButton eraserButton = new JToggleButton(new ImageIcon("eraser_icon.png"));
JToggleButton rectangleButton = new JToggleButton();
JToggleButton ovalButton = new JToggleButton();
Shapes() {
da.setBounds(120, 50, 500, 350);
da.setBackground(Color.YELLOW);
mf.setSize(700, 500);
mf.setLayout(null);
lineButton.setBounds(0, 50, 40, 40);
brushButton.setBounds(40, 50, 40, 40);
eraserButton.setBounds(0, 90, 40, 40);
pencilButton.setBounds(40, 90, 40, 40);
rectangleButton.setBounds(0, 130, 40, 40);
ovalButton.setBounds(40, 130, 40, 40);
mf.setBackground(Color.red);
mf.add(lineButton);
mf.add(brushButton);
mf.add(pencilButton);
mf.add(eraserButton);
mf.add(rectangleButton);
mf.add(ovalButton);
mf.add(da);
mf.show();
mf.addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {
System.exit(0);
}
});
mf.addMouseListener(new MouseAdapter() {
public void mouseClicked(MouseEvent e) {
System.out.println("x:" + e.getX() + "y:" + e.getY() + "\n" + "x2:" + e.getXOnScreen() + "y2:" + e.getYOnScreen());
}
});
eraserButton.addMouseListener(new MouseAdapter() {
public void mouseClicked(MouseEvent e)
{
eraserButton.setSelectedIcon(new ImageIcon("eraser_icon_selected.png"));
}
});
lineButton.addMouseListener(new MouseAdapter() {
public void mouseClicked(MouseEvent e)
{
lineButton.setSelectedIcon(new ImageIcon("line_selected.png"));
}
});
da.addMouseListener(new MouseAdapter() {
public void mousePressed(MouseEvent e) {
da.setXvalue(e.getX());
da.setYvalue(e.getY());
}
public void mouseReleased(MouseEvent e) {
da.setX2value(e.getX());
da.setY2value(e.getY());
da.repaint();
}
});
da.addMouseMotionListener(new MouseAdapter() {
public void mouseDragged(MouseEvent e) {
da.repaint();
da.setX2value(e.getX());
da.setY2value(e.getY());
}
});
}
}
public class DrawArea extends JPanel {
int x1value,y1value,x2value,y2value;
public int getX2value() {
return x2value;
}
public void setX2value(int x2value) {
this.x2value = x2value;
}
public int getY2value() {
return y2value;
}
public void setY2value(int y2value) {
this.y2value = y2value;
}
public JPanel dra=new JPanel();
public int getXvalue() {
return x1value;
}
public void setXvalue(int xvalue) {
this.x1value = xvalue;
}
public int getYvalue() {
return y1value;
}
public void setYvalue(int yvalue) {
this.y1value = yvalue;
}
public void paint(Graphics g)
{
super.paint(g);
g.setColor(Color.red);
g.drawLine(getXvalue(),getYvalue(),getX2value(),getY2value());
}
}
class Paint extends JPanel
{
public static void main(String args[])
{
Shapes s=new Shapes();
}
}

See Custom Painting Approaches for two solutions. The examples draw rectangles, but the concept is the same for lines.

Override paintComponent(), not paint(). Read this tutorial. When a panel needs to be redrawn, you call that panels repaint() method.

Paint is called by the window manager any time it considers that area 'unfresh'. If you do it the way you're doing it right now, you will draw the last line drawn every time.
The proper way to do this would be to make a BufferedImage in memory and draw on that. Then, in the paint method, blit the BufferedImage onto the surface. This also makes scrolling and zooming quite easy to do.
Whenever you perform such an action, invalidate the surface so that the window manager will call the paint method for you.

You are only storing one line, and overwriting it each time, so when the component is repainted, the old one is erased and the new one is redrawn.
The expectation of paintComponent and the like is that your implementation will draw EVERY graphical element that you want to appear, each time it is called.
Instead of storing x1, y1, x2, y2, you should make a LineSegment class or similar that stores those values. Then, when you paint, you call g.drawLine() for each LineSegment object that you've stored (presumably in an ArrayList or similar). Then, when the component is redrawn, all of your line segments should appear on the screen.

A little bit off topic, but I had a few uncomfortable minutes cause I used update() instead of repaint(). I advice to everyone working with SWING to spend some time checking which methods should handled as thread safe and which ones has to be on EDT (Event Dispatcher Thread) to make sure you won't get some unexpected errors.
This is a good article about this.
Also, at the beginning think through if you want to have an undo/redo system in your app...
If so, than how many steps you want to allow being withdrawn. If you want to allow this feature than you cannot just draw and forget about what you draw last time.
Also it would be not memory efficient to store all the images you draw so far. I'm not an expert and I'm not saying this is the best practice but I would go this way:
I would make two lists.
One of them would store the applied drawing actions,
the other would contain the withdrawn drawing actions.
Drawing action would be an interface and some class would implement it for each specific kind of drawing action (LineDrawAction, CirceDrawAction...).
When you draw a new line or whatever you would empty the withdrawn actions list and add it to the applied action list. When someone undo the last action, than I would just remove the last drawing actions from the applied list and would add to the withdrawn list (etc...). Depending on if you want to allow only the last x action to be undone when a list reaches this x limit I would remove the first drawing action from the list or queue and would finally draw to the picture - this means permanent drawing and this cannot be undone.
I hope it's clear and useful even if not a direct answer to your question.