4 ms·
The drawing is basically a list of strokes, and a stroke is a list of points - that is, (x, y) coordinates. So the database is mostly a huge table of (x,y) coo
by MarkMc 12y ago
The drawing is basically a list of strokes, and a stroke is a list of points - that is, (x, y) coordinates. So the database is mostly a huge table of (x,y) coordinates.
Uploading the entire canvas would far too inefficient - I simply upload the points.
The transfer between two clients uses a technique called 'long polling'. That is, the client sends an HTTP request to the server, and the server doesn't respond until it has received a message (ie. stroke) from another client.
- dceddia 12y agoDid you end up using any libraries for the communication, such as socket.io? (http://socket.io/ http://socket.io/)
- MarkMc 12y agoNo just the standard async Java servlet calls. To be honest I didn't find out about socket.io until half way through the project.
- henningo 12y agoDid you consider doing spline fits to the x,y coordinates and then just saving the spline coefficients instead? The fit process could likely be done client-side, and could offer some subtle smoothing if wanted? Anyhow, really nice execution!
- byoung2 12y agopaper.js has a nice method to do this. I actually used it in a whiteboard app I made as a proof of concept. Rather than saving every X,Y coordinate, it uses a configurable number of points and handles and makes bezier curves. http://paperjs.org/examples/path-simplification/ http://paperjs.org/examples/path-simplification/