Comment implémenter la classe de commande de classe de commande dans konva.js pour prendre en charge les fonctions d'annulation et de rétablissement?

Implémentation de la fonction REDO UNDO basée sur le mode de commande dans konva.js

Cet article présente comment utiliser le mode de commande pour implémenter les fonctions UNDO (CTRL Z) et Redoo (Ctrl y) dans l'application de dessin Konva.js. Nous encapsulons les opérations graphiques dans des objets de commande et gérons ces opérations à l'aide d'une pile de commandes pour réaliser et progresser dans l'édition graphique.

Définissez d'abord une classe Command de base:

 Classe Commande {
  constructeur () {
    this.states = []; // utilisé pour stocker des instantanés d'état}

  exécuter() {
    Jetez une nouvelle erreur («la méthode d'exécution doit être implémentée»);
  }

  undo () {
    Jetez une nouvelle erreur («Méthode UNO doit être implémentée»);
  }

  Savestate (état) {
    this.states.push (état);
  }

  Restorestate () {
    return this.states.pop () || nul; // retour à l'état précédent, ou nul
  }
}

Ensuite, créez une classe de commande spécifique, comme la commande pour dessiner un rectangle:

 class DrawrectangleCommand étend la commande {
  constructeur (étape, couche, rec) {
    super();
    this.stage = stage;
    this.layer = couche;
    this.rect = rect;
  }

  exécuter() {
    this.savestate (this.layer.tojson ()); // Enregistrer l'état de couche actuel this.layer.add (this.rect);
    this.layer.draw ();
  }

  undo () {
    this.rect.destroy ();
    const prevState = this.RestoreState ();
    if (prevState) {
      this.layer.destroychildren (); // efface la couche this.layer = konva.node.create (prevState, this.stage); // restaurer l'état précédent this.stage.add (this.layer);
      this.layer.draw ();
    }
  }
}

Ensuite, implémentez le gestionnaire de commande:

 classe CommandManager {
  constructeur () {
    this.undostack = [];
    this.redostack = [];
  }

  EXECTIONCOMAND (Commande) {
    Command.execute ();
    this.undostack.push (commande);
    this.redostack = []; // Après l'exécution de la nouvelle commande, effacez la pile de rétrochatrice}

  undo () {
    if (this.undostack.length === 0) return;
    const command = this.undostack.pop ();
    Command.undo ();
    this.redostack.push (commande);
  }

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

Enfin, utilisez dans l'application Konva.js:

 const stage = new konva.stage ({{
  conteneur: «conteneur»,
  Largeur: fenêtre.innerwidth,
  hauteur: fenêtre.innerheight
});

const compyer = new konva.layer ();
stage.add (couche);

const commandManager = new CommandManager ();

stage.on ('click', (e) => {
  const rect = new Konva.rect ({
    x: e.evt.layerx,
    y: e.evt.layery,
    Largeur: 50,
    hauteur: 50,
    Remplir: «rouge»,
    draggable: vrai
  });

  const command = new DrawrectangleCommand (étape, couche, 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 ();
  }
});

Ce code implémente le dessin rectangulaire simple et l'annulation de la refonte. Vous pouvez étendre Command pour prendre en charge d'autres opérations graphiques telles que le mouvement, la mise à l'échelle, la rotation, etc. N'oubliez pas de sauvegarder l'état actuel dans la méthode execute de chaque opération et de restaurer l'état précédent dans la méthode undo . Cela garantira que votre fonctionnalité de rétablissement d'annulation fonctionne correctement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!