1

私は特定のコードを探しているのではなく、次の状況に対処するための全体的なアプローチを探しています:ユーザーは、クリックしてドラッグすることで、新しい div でラップされたテキストを作成できます (テキスト ノードと呼びましょう)。ユーザーが変更したDOMの状態をどうにかして保存したい。

JSBin サンプルをチェックして、私の言いたいことを正確に確認してください。

コードは私の Ember プロジェクトから抽出されたものですが、これが何をするかです:

  1. Click to editエリアは単なる Ember ビューです
  2. ワークスペースにドラッグすると、[クリックして編集] が複製され、すべての Ember バインディングが失われます (これはまったく問題ありません)。

したがって、ユーザーが 1 つまたは複数のテキスト ノードをワークスペースに追加すると、次のようになります。

<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;dr (すでに **cking の質問にアクセスしてください)

別のページでユーザーの変更を忠実に再現できるようにするには、この情報をどのように保存すればよいでしょうか?

いくつかのアイデア

  1. ルート変更時に、.textクラスを使用してすべての DOM 要素をループし、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, ラベル: 'テスト', 幅: 100, 高さ: 100 }.

次に、この形状を表示する対応するビュー オブジェクトが必要です。各シェイプにはShapeView、shapeオブジェクトをデータとして指定し、それを DOM にレンダリングする があります。

次に、指定された形状の配列をCanvasView使用CollectionViewして、そのビューを使用して形状を表示し、正しい位置に配置します。

これによりCanvas、キャンバスの状態を格納するモデルが得られます。そして、CanvasViewそのモデルの状態をレンダリングする対応する 。canvasModel.serialize()そのため、キャンバスの状態を保持する json をいつでも呼び出すことができます。これをサーバーに保存できます。

後で使用canvasModel.deserialize()して、キャンバスを以前の状態に復元します。

これが簡易エディタの要点です。これはほとんどのゲームの基盤です。通常、CanvasViewは非常にスマートで、画面上のものを描画したり、スクロールやアニメーションなどを行ったりします。

于 2013-07-20T04:26:13.493 に答える