Question

In my app, the client user can draw some shape or lines, then these shape data should be send to server and be saved to database. The shape should can be redraw on the client again.

My problem is how to design one effective data structure to represent the shape, the data structure should be easy to transfer and save to database.

Thanks!

EDTION: those shapes include the regular shapes(like circle) and the irregular shapes which user can draw it freely.

Answer 1

I think it depends on how you are letting the user draw shapes. Are they simply moving their cursor around a canvas? If that’s the case, there isn’t much mathematical to it, so cbranch’s solution is probably a good way to go. It just needs to be an array of on/off bits. You could even optimize it by using some sort of compression technique.

However, if you’re giving them specific ways to draw, for instance — a square tool, a circle tool, a bezier tool, then each of those could be stored more efficiently than pixel data. A square could be stored as a simple structure like:

struct square {
    int x;
    int y;
    int length;
}

A circle:

struct circle {
    int x;
    int y;
    int radius;
}

A Bezier curve:

struct bezier {
    int x1;
    int y1;
    int x2;
    int y2;
}

Then, just recreate the appropriate type of shape from the data when you’re drawing it back on screen.