1

我不是在寻找特定的代码，而是在寻找处理以下情况的整体方法：用户可以通过单击和拖动来创建一个新的 div 包装文本（我们称之为文本节点）。我想以某种方式保存用户修改 DOM 的状态。

检查我的JSBin 示例以了解我的意思。

代码是从我的 Ember 项目中提取的，但这就是它的作用：

  1. 点击编辑区域只是一个 Ember视图
  2. 当你将它拖到工作区时，Click to edit被克隆并且所有 Ember 绑定都丢失了（这完全没问题）

因此，在用户向工作区添加一个或多个文本节点后，我最终会得到如下内容：

<div class="workspace">
  <div class="text" style="top: 86px; left: 141px;">Text Node 1</div>
  <div class="text" style="top: 99px; left: 100px;">Text Node 2</div>
  <div class="text" style="top: 10px; left: 44px;">Text Node 3</div>
</div>

tl；博士（已经解决了 **cking 问题）

我将如何保存这些信息，以便可以忠实地在另一个页面上重新创建用户更改？

一些想法

  1. 在路由更改时，使用类遍历每个 DOM 元素.text并创建一个存储 DOM 文本和样式属性的对象？然后，我必须创建一个“构建”类型的函数，该函数循环遍历对象并在给定页面上重新创建那些 DOM 元素。
  2. 在路由更改时，循环遍历每个 DOM 元素并将每个元素作为 jQuery 对象保存到数组中。“重建”只是循环数组中的每个项目并附加到 DOM 的问题。

最后，你怎么看？非常欢迎提出想法、批评和过去的经验。

4

1 回答 1

2

循环遍历 DOM 以提取状态对于尝试一些事情很有用，但一旦您开始拥有多种类型的对象、可选属性等，就会变得混乱。

你所拥有的本质上是一个Canvas包含不同类型的对象。每个对象都根据其属性以不同的 UI 显示。

上的对象Canvas是具有某种多态性的形状。例如：- 矩形 > 形状、注释 > 形状等。

AShape将是一种基本数据结构，用于保存形状的通用数据，例如 x、y 坐标、尺寸等。

像这样的子类Note将有一个label属性来存储该注释的文本。类似地，其他形状将存储他们需要的额外数据。

每个都Shape需要提供某种方式将数据序列化和反序列化为 JSON。例如，如果我这样做shape = new Note(); shape.deserialize({ ... })，它将使用来自 json 的数据填充形状。

另一方面，如果我这样做shape.serialize()，它将返回形状数据的 JSON 表示。例如：- { x: 10, y: 10, label: 'test', width: 100, height: 100 }。

现在您需要一个显示此形状的相应视图对象。每个形状都可以有一个ShapeView给定shape对象作为数据，在 DOM 上呈现它。

然后CanvasView使用 aCollectionView将给出一个形状数组，使用它的 View 显示形状，然后将其放在正确的位置。

所有这些都为您提供了一个Canvas存储画布状态的模型。CanvasView以及呈现该模型状态的对应项。因此，您可以随时调用canvasModel.serialize()它为您提供一些保存画布状态的 json。您可以将其保存到服务器。

稍后用于canvasModel.deserialize()将画布恢复到以前的状态。

这是一个简单编辑器的要点。这些东西是大多数游戏的基础。通常CanvasView是非常聪明的，在屏幕上绘制东西，做滚动，动画等。

于 2013-07-20T04:26:13.493 回答