More than 5 years have passed since last update.

VueでKonva.jsとcanvasを使ってお絵描き（その4）

Last updated at 2019-06-18Posted at 2019-05-01

戻るおよびやり直しの処理を実装（undo, redo）

キャンバスの状態を1つ前の状態に戻したり(undo)、やり直したり(redo)してみます。
ここを参考にしました。

**描画時：**描画する前に、描画前のキャンバスの状態を配列に保存しておく
**戻す時：**戻す前のキャンバスの状態をやり直し配列に保存し、戻す配列からキャンバスイメージを取り出して反映
**やり直す時：**やり直し前のキャンバスの状態を戻す配列に保存し、やり直し配列からキャンバスイメージを取り出して反映

※配列への保存と取り出しはFIFO方式で。
※キャンバスの状態はcontext.getImageDataメソッドで取得できるので、それを利用する
※context.putImageDataで、取り出したキャンバスの状態を反映する

親側（CallCanvas.vue）
メソッドを用意して、子の戻す、やり直すメソッドを読んでいるだけです。

CallCanvas.vue

<template>
    <div>
        <div class="md-layout md-gutter" style="margin-left: 340px">
          <div class="md-layout-item">
            ...
            ..
            .

            <md-field style="float: left; margin-top: -8px">
              <md-button
                class="md-dense md-raised md-primary"
                @click="onUndo" <!-- この行を追加 -->
              >
                戻る
              </md-button>
            </md-field>

            <md-field style="float: left; margin-top: -8px">
              <md-button
                class="md-dense md-raised md-primary"
                @click="onRedo"　<!-- この行を追加 -->
              >
                進む
              </md-button>
            </md-field>

            ...
            ..
            .
          </div>
        </div>
        ...
        ..
        .
    </div>
</template>

<script>
import FreeDrawing from './FreeDrawing.vue'

export default {
  ...
  ..
  .
  methods: {
    ...
    ..
    .
    // 元に戻す
    onUndo: function () {
      this.$refs.freeDrawing.undo()
    },
    // やり直す
    onRedo: function () {
      this.$refs.freeDrawing.redo()
    }
  },
  ...
  ..
  .
}
</script>
...
..
.

次は子です（FreeDrawing.vue）
undoメソッドとredoメソッドの新規追加に伴い、
dataプロパティに2つ追加および mousedownメソッドとonClearCanvasメソッドに１行ずつ追加しています。

FreeDrawing.vue

...
..
.

<script>
import Konva from 'konva'

export default {
  ...
  ..
  .
  data: () => ({
    ...
    ..
    .
    /** 追加 */
    undoDataStack: [], // 元に戻す配列
    redoDataStack: [] // やり直し配列
  }),
  ...
  ..
  .
  methods: {
    mousedown: function () {
      ...
      ..
      .
      // 戻す配列に描画前のキャンバスの状態を保存
      this.undoDataStack.push(this.context.getImageData(0, 0, this.canvas.width, this.canvas.height))
    },
    ...
    ..
    .
    onClearCanvas: function () {
      // キャンバスをクリアする前の状態を戻す配列に保存しておく
      this.undoDataStack.push(this.context.getImageData(0, 0, this.canvas.width, this.canvas.height))

      ...
      ..
      .
    },
    ...
    ..
    .
    /** 元に戻す */
    undo: function () {
      // 戻す配列が空の場合は何もしない
      if (this.undoDataStack.length <= 0) {
        return
      }

      // 戻す前の状態をやり直し配列に保存
      this.redoDataStack.push(this.context.getImageData(0, 0, this.canvas.width, this.canvas.height))

      // 元に戻す（戻す配列からキャンバスの状態を取り出して反映）
      this.context.putImageData(this.undoDataStack.pop(), 0, 0)
      this.drawingLayer.draw()
    },
    /** やり直す */
    redo: function () {
      // やり直し配列が空の場合は何もしない
      if (this.redoDataStack.length <= 0) {
        return
      }

      // やり直す前の状態を戻す配列に保存
      this.undoDataStack.push(this.context.getImageData(0, 0, this.canvas.width, this.canvas.height))

      // やり直す（やり直し配列からキャンバスの状態を取り出して反映）
      this.context.putImageData(this.redoDataStack.pop(), 0, 0)
      this.drawingLayer.draw()
    }
  },
  ...
  ..
  .
}
</script>