Bagaimana untuk melaksanakan Kelas Perintah Kelas Komando di Konva.js untuk menyokong Undo dan Redo Functions?

Pelaksanaan fungsi redo undo berdasarkan mod arahan di konva.js

Artikel ini memperkenalkan cara menggunakan mod arahan untuk melaksanakan fungsi Undo (Ctrl Z) dan Redo (Ctrl Y) dalam aplikasi lukisan Konva.js. Kami merangkumi operasi grafik ke dalam objek arahan dan menguruskan operasi ini menggunakan timbunan arahan untuk mencapai kemunculan dan kemajuan dalam penyuntingan grafik.

Pertama, tentukan kelas Command asas:

 Perintah Kelas {
  pembina () {
    this.states = []; // Digunakan untuk menyimpan gambar negeri}

  laksanakan () {
    membuang ralat baru ('Kaedah melaksanakan mesti dilaksanakan');
  }

  undo () {
    membuang kesilapan baru ('kaedah undo mesti dilaksanakan');
  }

  SaveState (Negeri) {
    this.states.push (state);
  }

  restorestate () {
    kembali this.states.pop () || null; // kembali ke keadaan sebelumnya, atau batal
  }
}

Seterusnya, buat kelas arahan tertentu, seperti arahan untuk melukis segi empat tepat:

 Kelas DrawRectangLeCommand memanjangkan perintah {
  Pembina (peringkat, lapisan, rect) {
    super ();
    this.stage = stage;
    this.layer = lapisan;
    this.rect = rect;
  }

  laksanakan () {
    this.savestate (this.layer.tojson ()); // Simpan lapisan semasa keadaan this.layer.add (this.rect);
    this.layer.draw ();
  }

  undo () {
    this.rect.destroy ();
    const prevstate = this.restorestate ();
    jika (prevstate) {
      this.layer.destroychildren (); // Kosongkan lapisan this.layer = konva.node.create (prevstate, this.stage); // memulihkan keadaan sebelumnya ini.stage.add (this.layer);
      this.layer.draw ();
    }
  }
}

Kemudian, laksanakan pengurus arahan:

 CommandManager kelas {
  pembina () {
    this.undOstack = [];
    this.RedOstack = [];
  }

  executeCommand (perintah) {
    command.execute ();
    this.undOstack.push (command);
    this.RedOstack = []; // Setelah melaksanakan arahan baru, jelaskan timbunan semula}

  undo () {
    jika (this.undostack.length === 0) kembali;
    const command = this.undOstack.pop ();
    command.undo ();
    this.redOstack.push (command);
  }

  redo () {
    jika (this.redostack.length === 0) kembali;
    const command = this.redOstack.pop ();
    command.execute ();
    this.undOstack.push (command);
  }
}

Akhirnya, gunakan dalam aplikasi Konva.js:

 const stage = baru konva.stage ({
  bekas: 'bekas',
  Lebar: Window.InnerWidth,
  Ketinggian: Window.InnerHeight
});

const lapisan = baru konva.layer ();
stage.add (lapisan);

const commandManager = commandManager baru ();

stage.on ('klik', (e) => {
  const rect = baru konva.rect ({
    X: E.Evt.Layerx,
    y: e.evt.layery,
    Lebar: 50,
    Ketinggian: 50,
    Isi: 'merah',
    Draggable: Benar
  });

  const command = new DrawRectangLeCommand (panggung, lapisan, rect);
  commandManager.ExecuteCommand (command);
});

document.addeventListener ('keydown', (e) => {
  jika (e.ctrlkey && e.key === 'z') {
    commandManager.undo ();
  } else if (e.ctrlKey && e.key === 'y') {
    commandManager.redo ();
  }
});

Kod ini melaksanakan lukisan segi empat tepat mudah dan membatalkan semula. Anda boleh melanjutkan kelas Command untuk menyokong operasi grafik lain seperti pergerakan, skala, putaran, dan lain -lain. Ingatlah untuk menyelamatkan keadaan semasa dalam kaedah execute setiap operasi dan memulihkan keadaan sebelumnya dalam kaedah undo . Ini akan memastikan ciri Redo Undo anda berfungsi dengan betul.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan Kelas Perintah Kelas Komando di Konva.js untuk menyokong Undo dan Redo Functions?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!