konva.jsのコマンドモードに基づいて、redo redo機能の実裝

この記事では、コマンドモードを使用して、konva.js描畫アプリケーションに元に戻す（ctrl z）およびredo（ctrl y）関數を実裝する方法を紹介します。グラフィカル操作をコマンドオブジェクトにカプセル化し、コマンドスタックを使用してこれらの操作を管理して、グラフィカル編集のフォールバックと進捗を実現します。

まず、基本的なCommandクラスを定義します。

クラスコマンド{
  constructor（）{
    this.states = []; //ステートスナップショットを保存するために使用}

  実行する（） {
    新しいエラーをスローします（ '実行メソッドを実裝する必要があります'）;
  }

  undo（）{
    新しいエラーをスローします（「元に戻すメソッドを実裝する必要があります」）;
  }

  Savestate（STATE）{
    this.states.push（state）;
  }

  restorestate（）{
    this.states.pop（）||を返しますヌル; //前の狀態(tài)に戻るか、null
  }
}

次に、長方形を描畫するコマンドなど、特定のコマンドクラスを作成します。

クラスDrawRectangLeCommand拡張コマンド{
  コンストラクター（ステージ、レイヤー、rect）{
    素晴らしい（）;
    this.stage = stage;
    this.layer = layer;
    this.rect = rect;
  }

  実行する（） {
    this.savestate（this.layer.tojson（））; //現在のレイヤーの狀態(tài)を保存しますthis.layer.add（this.rect）;
    this.layer.draw（）;
  }

  undo（）{
    this.rect.destroy（）;
    const prevstate = this.restorestate（）;
    if（prevstate）{
      this.layer.destroychildren（）; //レイヤーをクリアするthis.layer = konva.node.create（prevstate、this.stage）; //前の狀態(tài)this.stage.add（this.layer）を復元します。
      this.layer.draw（）;
    }
  }
}

次に、コマンドマネージャーを実裝します。

 class commandmanager {
  constructor（）{
    this.undostack = [];
    this.redostack = [];
  }

  executeCommand（command）{
    command.execute（）;
    this.undostack.push（command）;
    this.redostack = []; //新しいコマンドを実行した後、redoスタックをクリアします}

  undo（）{
    if（this.undostack.length === 0）return;
    const command = this.undostack.pop（）;
    command.undo（）;
    this.redostack.push（command）;
  }

  redo（）{
    if（this.redostack.length === 0）return;
    const command = this.redostack.pop（）;
    command.execute（）;
    this.undostack.push（command）;
  }
}

最後に、konva.jsアプリケーションで使用します。

 const stage = new konva.stage（{
  コンテナ：「コンテナ」、
  幅：window.innerwidth、
  高さ：window.innerheight
}）;

const layer = new konva.layer（）;
stage.add（層）;

const commandmanager = new CommandManager（）;

stage.on（ 'click'、（e）=> {
  const rect = new konva.rect（{
    X：e.evt.layerx、
    Y：e.evt.layery、
    幅：50、
    高さ：50、
    塗りつぶし：「赤」、
    Draggable：True
  }）;

  const command = new DrawRectangleCommand（ステージ、レイヤー、rect）;
  commandmanager.executecommand（command）;
}）;

document.addeventlistener（ 'keydown'、（e）=> {
  if（e.ctrlkey && e.key === 'z'）{
    commandmanager.undo（）;
  } else if（e.ctrlkey && e.key === 'y'）{
    commandmanager.redo（）;
  }
}）;

このコードは、単純な長方形の図面を実裝し、やり直しを元に戻します。 Commandクラスを拡張して、動き、スケーリング、回転などの他のグラフィカル操作をサポートできます。各操作のexecute方法で現在の狀態(tài)を保存し、元の狀態(tài)をundo戻す方法で復元することを忘れないでください。これにより、元に戻す機能が正しく機能するようになります。

以上がkonva.jsにコマンドクラスのコマンドクラスを実裝して、機能を元に戻し、redo機能をサポートする方法は？の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。