Drawing in java with JPanel

Question

I'm making a program where you have a server and a client, and the idea is that you draw on the client jpanel, and the coordinates will then be sent to the server, which will sort of mimic the drawing. I've done that, but the problem is now, that my drawing mechanism is pretty bad. Right now I'm just using an oval that gets drawn over and over again on the coordinate of the mouse, which sometimes leaves spaces between the ovals if you move the mouse too fast.

To better illustrate, here's an SS: http://gyazo.com/6ed1017e9efd6beaa4b5d56052fda260

As you can see, it's only consistent when you move the mouse relatively slow, but as soon as you move it a bit fast, it leaves spaces.

How do I prevent this from happening?

Right now the client just sends x and y coordinates, so here's the server side code:

package com.company;

import javax.swing.*;
import java.awt.*;
import java.io.IOException;
import java.io.ObjectInputStream;
import java.net.ServerSocket;
import java.net.Socket;

public class Server extends JPanel{
    static MouseData mouseReceive;
    static Draw draw;
    static int x;
    static int y;




    public static void main(String[] args) throws IOException, ClassNotFoundException, InterruptedException {
        Server server = new Server();
        JFrame frame = new JFrame("Server");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(server);
        frame.setSize(1024, 600);
        frame.setVisible(true);
        draw = new Draw(x,y);


        ServerSocket serverSock = new ServerSocket(1234);
        Socket s = serverSock.accept();
        ObjectInputStream in = new ObjectInputStream(s.getInputStream());



        while(true) {
            mouseReceive = (MouseData) in.readObject();
            draw = new Draw(mouseReceive.mouseX,mouseReceive.mouseY);
        }
    }





    public void paint(Graphics g){
        Graphics2D g2 = (Graphics2D) g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        draw.display(g);
        repaint();

    }
}

And here's my draw class:

package com.company;

import java.awt.*;

/**
 * Created by John on 21/04/2015.
 */
public class Draw {
    int xLoc;
    int yLoc;


    Draw(int x, int y){
        xLoc = x;
        yLoc = y;
    }

    public void display(Graphics g){
        Graphics2D g2 = (Graphics2D) g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        g.fillOval(xLoc,yLoc,7,7);
    }


}

I tried finding someone else having the same problem on this site through the search function, but I had no luck in doing so :( If I missed it however, please direct me to that topic! If anyone could help me out, I'd appreciate it a whole lot! Have a nice day :)

Answer 1

Presuming the Client is using a MouseListener (or MouseMotionListener): the MouseListener can only fire as fast as a certain interval. For example when the mouse is constantly moved your listener will receive a MouseEvent for every interval rather than every pixel. As a result, moving the mouse fast may result in drawing items that are not adjacent to each other. AFAIK, you cannot increase the speed, but you can draw lines between two sequential points making them look continuous (eg by using a List of each event location and using g.drawLine on each two adjacent points in the List).

Other notes:

1. You should override paintComponent rather than the paint method.
2. I would recommend calling super.paintComponent in this method. This will clear the component (hence your code will then only draw the last point - see (3))
3. I would recommend keeping a List of locations to use for drawing, which you can iterate over and draw each circle (or draw a line between adjacent points)
4. Do NOT call repaint within your painting methods. The idea here is that when a new item is received from the Client, add it to the List in (3) and then call repaint.