HTML5将状态保存和恢复到数据库

Question

I am trying to build an application using HTML5 that will allow user to add objects like: triangles, circles, squares, etc...and have ability to save these objects on the canvas for the user to return to and continue. For example, if user adds 2 triangles and 1 circle and saves, he can return to that session or start new one.

I was thinking of saving the data to db for persistence.

The problem is that I can't implement ability to save state without saving it to image.

I don't want to save it to image because I want the user to continue working on the same session and able to remove or add more figures to it.

Any help?

Thanks, Al

Answer 1

A possible solution could me to store the coordinates / properties of the shapes in a object. For example:

var shapes = [
    [
        // a rectangle
        [10, 10],
        [40, 10],
        [40, 40],
        [10, 40]
    ],
    [
        // a triangle
        [100, 20],
        [200, 100],
        [0, 100]
    ]
];

Which is an array with all the shapes. And per shape, and array with [x, y] coordinates. You could easily convert it to JSON to store in your database.

But a circle would be more complicated, since it's made up of endless points. In that case, a solution could be to store the type of shape:

var shapes = [
    {
        type: 'rectangle',
        properties: {
            x: 10,
            y: 10,
            width: 100,
            height: 100
        }
    },

    {
        type: 'arc',
        properties: {
            x: 200,
            y: 100,
            radius: 50
        }
    },
    {
        type: 'custom', // triangle
        properties: {
            coords: [
                [100, 20],
                [200, 100],
                [0, 100]
            ]
        }
    }
];

With the 2nd solution you would be able to store more stuff, like strokeColor, fill, etc.