Wie implementieren Sie die Befehlsklassenklasse der Befehlsklasse in konva.js, um die Funktionen und Wiederholungsfunktionen zu unterstützen?

Implementierung der Rückgängerfunktion basierend auf dem Befehlsmodus in konva.js

In diesem Artikel wird der Befehlsmodus verwendet, um die Funktionen (Strg Z) und die Wiederherstellung (Strg Y) in der Zeichnungsanwendung von Konva.js zu implementieren. Wir umfassen grafische Operationen in Befehlsobjekte und verwalten diese Operationen mithilfe eines Befehlsstapels, um Fallback und Fortschritte bei der grafischen Bearbeitung zu erreichen.

Definieren Sie zunächst eine grundlegende Command :

 Klassenbefehl {
  constructor () {
    this.States = []; // Wird verwendet, um Status -Snapshots zu speichern}

  execute () {
    Neuen Fehler werfen ('MOTTELUNGSMETHODE implementiert werden');
  }

  rückgängig () {
    Neuen Fehler werfen ('Rückgabemethode muss implementiert werden');
  }

  Savestate (Zustand) {
    this.States.push (Staat);
  }

  restorestate () {
    Gibt dies.States.pop () || Null; // kehre zum vorherigen Zustand oder in Null zurück
  }
}

Erstellen Sie als Nächstes eine bestimmte Befehlsklasse, z. B. den Befehl zum Zeichnen eines Rechtecks:

 Klasse DrawRectangleCommand erweitert den Befehl {
  Konstruktor (Stufe, Schicht, rekt) {
    super();
    this.Stage = Stage;
    this.layer = Layer;
    this.Rect = rect;
  }

  execute () {
    this.savestate (this.layer.tojson ()); // Speichern Sie den aktuellen Ebenenzustand this.layer.add (this.Rect);
    this.layer.draw ();
  }

  rückgängig () {
    this.Rect.Destroy ();
    const prevState = this.restorestate ();
    if (prevState) {
      this.layer.DestroyChildren (); // Die Schicht this.layer = konva.node.create (PrevState, this.stage) löschen; // den vorherigen Zustand that.Stage.add (this.layer) wiederherstellen;
      this.layer.draw ();
    }
  }
}

Implementieren Sie dann den Befehlsmanager:

 Klasse CommandManager {
  constructor () {
    this.undostack = [];
    this.redostack = [];
  }

  ExecuteCommand (Befehl) {
    command.execute ();
    this.undostack.push (Befehl);
    this.redostack = []; // Löschen Sie nach der Ausführung des neuen Befehls den Redo -Stack}

  rückgängig () {
    if (this.undostack.length === 0) return;
    const command = this.undostack.pop ();
    command.undo ();
    this.redostack.push (Befehl);
  }

  redo () {
    if (this.redostack.length === 0) return;
    const command = this.redostack.pop ();
    command.execute ();
    this.undostack.push (Befehl);
  }
}

Verwenden Sie schließlich in der Anwendung konva.js:

 const stage = new Konva.Stage ({{
  Container: 'Container',
  Breite: Fenster.innernwidth,
  Höhe: Fenster
});

const Layer = neuer Konva.layer ();
Stage.Add (Schicht);

const commandManager = new commandManager ();

Stage.on ('Click', (e) => {
  const rect = new Konva.Rect ({{
    x: e.evt.layerx,
    y: e.evt.layery,
    Breite: 50,
    Höhe: 50,
    Füllung: 'rot',
    Draggierbar: Richtig
  });

  const command = new DrawRectangLecommand (Stufe, Schicht, RECT);
  CommandManager.ExecuteCommand (Befehl);
});

document.addeventListener ('keydown', (e) => {
  if (e.ctrlkey && e.Key === 'z') {
    CommandManager.undo ();
  } else if (e.ctrlkey && e.Key === 'y') {
    CommandManager.redo ();
  }
});

Dieser Code implementiert eine einfache Rechteckzeichnung und rückgängig machen. Sie können Command Befehlsklasse erweitern, um andere grafische Operationen wie Bewegung, Skalierung, Rotation usw. zu unterstützen. Denken Sie daran, den aktuellen Status in der execute der einzelnen Operationen zu speichern und den vorherigen Zustand in der undo wiederherzustellen. Dadurch wird sichergestellt, dass Ihre Rückgängerfunktion korrekt funktioniert.

Das obige ist der detaillierte Inhalt vonWie implementieren Sie die Befehlsklassenklasse der Befehlsklasse in konva.js, um die Funktionen und Wiederholungsfunktionen zu unterstützen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!