JavaScriptからcanvasにundo・redoを実装してみる

JavaScript+Canvasの操作について

  • 元に戻す Undo(アンドゥ)
  • やり直し Redo(リドゥ)

この2つは自力での実装が大変です。
ただ便利なライブラリを見つけました。

その名も Undo-Canvas というライブラリ

そこでその紹介と記録も兼ね、
JSでCanvasのUndo・Redoの実装について

Undo-Canvasの使い方と実装コード例

実装方法は次の通り

1.ライブラリ本体の読み込み

このライブラリは単独で動きます。

▼ 次のGitHubページからダウンロード

▼ ヘッダーなどで読み込みする

jQueryなど他依存ライブラリも必要なし

本当にそれ単体で動かせます。

2.Undo・Redo機能をContext2Dに対して適用

そしたら実際のHTML・JSを作成していきます。

簡単に次のようなコードを書いてみました。

 

1.Canvas要素と履歴操作ボタン作成

Canvas要素は普通に作成。

それから元に戻す(Undo)するために #btnUndo というボタン要素を、やり直し(Redo)するために #btnRedo というボタン要素も作りました。名前については好きなようにつけてください。

 

2.UndoCanvasの初期化&Cnavasに図形などを描く

次にUndoCanvasライブラリの初期化。

そのあとにCanvasに円をランダムに描画します。

どういう結果になるかはお楽しみ

 

3.ボタン要素押下時にUndo・Redoを実行

最後にボタン押下時の処理追加

▼ jQueryを使ったコード

単純に UndoCanvas.enableUndo(ctx);  を呼び出したコンテキストに対し、元に戻すときは ctx.undo();  を実行、やり直すときは ctx.redo();  とするだけです。

使い方が簡単なのがこのライブラリの利点

UndoCanvasの実際に機能させてみた様子

上のコードを書いた結果・・・

次のような感じでしっかり機能しました。

▼ Undo・Redoしている様子(Gif動画)

Undo-Canvasを使ってCanvasに元に戻す・やり直し機能をつけてみた

実装自体はシンプルなのに、やりたいことはしっかり実現できてます。こういったライブラリは本当にありがたい。

グループ化してundo・redoもできる

このライブラリは応用的な機能もついてます。

それがグループ化したundo・redo

例えば画像編集ソフトだと「図形・オブジェクトに対する一連の操作」をグループ化していることが多いです。そうすればやり直しボタンを連打しなくてすむ

その機能がUndo-Canvasにも備わってます。

▼ 例えばコード例は以下の通り

この例でもランダムに円を描いてるんですが、2回に1回ごとに ctx.putTag()  を呼び出してます。これを使うことで次にputTag()が呼ばれるまでの範囲をグループ化できるわけです。

あとはアンドゥするときは ctx.undoTag()  、リドゥするときは ctx.redoTag()  のように呼び出しすればOK。

▼ 実際の動作はこのようになる

Undo-Canvasを使うと履歴をグループ化させてundo・redoもできる

グループ化したundo・redoの方が使う場面は多そうです。

ちなみに汎用的なundo/redoの実装について

この記事と直接の関係はないものの・・・

JavaScriptでのUndo/Redoの実装アイデアについて

今紹介したライブラリ的なのがあれば楽ですが、開発アプリによっては全てゼロから実装しないといけない場面もあります。(というかそっちの場合の方が多い)

そこで上記事でJSにおけるUndo/Redoの実装アイデアをまとめました。もし独自のUndoシステムがどういう実装になるか知りたいならご覧ください。

以上、JSでのCanvasへのundo・redo機能実装でした。

ではまた バイバイ(@^^)/~~~