13

クライアント側だけでなく、サーバー側にも元に戻す機能とやり直し機能を実装したいと思います。画像を含むdivがあり、回転してサイズ変更して書き換えることができます。画像生成のすべての基本操作。そして、すべての操作でデータベースとイメージが更新されます。あなたは私の画像が再生成されており、データベースはすべてのアクションの後に更新されていると言うことができます。

次に、元に戻す機能とやり直し機能を実装する必要があります。私もいくつかの研究をしました。私が必要としているのは、必要なタスクを実装するための最良のアプローチです。私は、各アクションの「ログ型のもの」を維持するか、データベースまたはHTMLを含むjavascript配列で処理するか、その他何を考えていましたか?

私の目標を達成するための最良のアプローチは何ですか。

ありがとう、

4

3 に答える 3

26

基本的なレベルでは、次の2つが必要です。

  • 実行された操作を追跡する操作スタック(配列)。ユーザーが操作を実行するときは、操作を説明するオブジェクトを作成し、それを配列に追加します。ユーザーが[元に戻す]をクリックすると、配列から最後の項目を削除できます。

  • 各操作タイプには、「save」メソッドと「undo」メソッドが必要です。一部の「元に戻す」メソッドは「保存」メソッドに似ているため(つまり、水平方向のフリップを元に戻すには別のフリップを行うだけ)、他のメソッドにはそのような対称性がないため(つまり、クロップを元に戻すには)、これは注意が必要です。切り抜きが発生する前の画像データを保存します)。

「やり直し」機能が必要な場合は、2番目の操作スタックが必要になります。操作が取り消されるたびに、それをREDOスタックの最後に追加します。ユーザーが「やり直し」を押すと、それを再び操作スタックに戻します。

コマンドパターン(http://en.wikipedia.org/wiki/Command_pattern)を調べると役立つ場合があります。これは、Undoを実装するためによく使用されるためです。

于 2012-01-12T16:49:14.127 に答える
8

私の JavaScript 元に戻すマネージャーは、コマンド パターンを使用します。基本的に、アクションごとに元に戻すアクションとやり直しアクションも実装します。同じ機能のサーバーサイドを構築できます。

https://github.com/ArthurClemens/Javascript-Undo-Manager

そして、これはコマンド パターンの明確なコード例です: https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/command.html

于 2012-01-12T21:36:05.547 に答える