Question

我正在尝试使用HTML5构建一个应用程序，允许用户添加如下三角形，圆形，正方形等对象......并且能够在画布上保存这些对象，以便用户返回并继续。例如，如果用户添加2个三角形和1个圆并保存，则可以返回该会话或启动新会话。

我正在考虑将数据保存到db以保持持久性。

问题是我无法保存状态而不将其保存到图像中。

我不想将其保存到图片中，因为我希望用户继续处理同一会话并能够删除或添加更多数据。

任何帮助？

谢谢，人

Answer 1

一种可能的解决方案是我可以将形状的坐标/属性存储在对象中。例如：

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

这是一个包含所有形状的数组。每个形状和带[x, y]坐标的数组。您可以轻松地将其转换为JSON以存储在数据库中。

但是一个圆圈会更复杂，因为它由无穷无尽的点组成。在这种情况下，解决方案可能是存储形状类型：

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]
            ]
        }
    }
];

使用第二种解决方案，您可以存储更多内容，例如strokeColor，fill等。

HTML5保存并恢复到数据库的状态

1 个答案: