javascript - 如何将页面状态和CSS保存到服务器？ (绘图应用程序)

Question

我有一个网页，用户可以在其中使用各种 block 创建简单的绘图，例如代表家具的形状被拖放到建筑平面图上。它使用 Interact.js。

block 本身可以由用户拖动/移动、调整大小、添加、插入、删除、合并、拆分、重新着色、字体等 - 作用于 HTML 和 CSS 的 JavaScript。

我计划将更改保存在本地(如果需要，用于离线)并返回到服务器以与有权访问此元素的其他人共享。撤消/重做也很不错。

如何保存修改后的图表(html & CSS)？

Answer 1

选项 1:

document.getElementById('foo').innerHTML对于 HTML。

对于 CSS，您必须递归遍历整个 DOM 和 match selectors每个元素上的每个 CSS 文件中定义的规则。

如上面的答案所述，这(大多数情况下)适用于类(class):

var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var x = 0; x < classes.length; x++) {
    if (classes[x].selectorText == className) {
        (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
    }
}

但这是一个糟糕的、容易出错的解决方案。

选项 2:

您需要做的是拥有一个您可以编辑的数据模型，将 JSON 想象成这样:

[
    {type: 'circle', color: 'blue', x: 10, y: 15, children: [
        {type: 'line', color: 'red', x: 100, y: 0, children: []}
    ]},
    {type: 'square', color: 'greed', x: 100, y: 15, children: []}
]

基于此，您将编写如下递归函数:

var foo = document.getElementById('foo'); // this is where you "draw" stuff

function draw(elements) {
    var i;
    for(i in elements) {
        drawElement(elements[i]);
        if(elements[i].children.length > 0) {
            draw(elements[i].children); 
        }  
    }
}

function drawElement(element) {
     var domElement = document.createElement("div");
     domElement.className = 'element ' + element.type + ' ' + element.color;
     domElement.style.left = element.x + 'px';
     domElement.style.top = element.y + 'px';
     foo.appendChild(domElement);
}

现在您需要定义一些 CSS:

#foo {
    position: relative;
}

#foo .element {
    position: absolute;
}

#foo .element.square {
  ...
}

#foo .element.blue {
  background-color: blue;
}

接下来是“交互”部分。每当您的用户向“ Canvas ”添加内容而不是直接操作 DOM 时，您只需向该 JSON 树添加内容，然后删除旧 DOM 并运行 draw再次。

您可以选择选项 1，但这会困难得多。阅读我附加的答案中的评论，您会发现浏览器存在很多不一致和限制。

选项 3:使用 <canvas> ，而不是 DOM 更易于管理。尝试查看 Fabric.js例如，它已经处理来自 JSON 的“保存”和“初始化”，并允许用户向其“绘制”内容。