UNDO 및 REDO 함수를 지원하기 위해 Konva.js에서 명령 클래스 명령 클래스를 구현하는 방법은 무엇입니까?

konva.js의 명령 모드를 기반으로 실행 취소 redo 함수 구현

이 기사에서는 명령 모드를 사용하여 UNDO (Ctrl Z) 및 redo (Ctrl y) 기능을 Konva.js 그리기 응용 프로그램에서 구현하는 방법을 소개합니다. 그래픽 작업을 명령 개체로 캡슐화하고 명령 스택을 사용하여 이러한 작업을 관리하여 그래픽 편집의 폴백 및 진행 상황을 달성합니다.

먼저 기본 Command 클래스를 정의하십시오.

 클래스 명령 {
  생성자 () {
    this.states = []; // 상태 스냅 샷을 저장하는 데 사용}

  실행하다() {
    새 오류를 던지십시오 ( '실행 방법이 구현되어야 함');
  }

  undo () {
    새 오류를 던지십시오 ( '실행 취소 방법을 구현해야 함');
  }

  저축 (주) {
    this.states.push (state);
  }

  Restorestate () {
    this.states.pop () ||를 반환하십시오 널; // 이전 상태 또는 NULL로 돌아갑니다
  }
}

다음으로, 사각형을 그리는 명령과 같은 특정 명령 클래스를 만듭니다.

 Class DrawRectAngleCommand 확장 명령 {
  생성자 (스테이지, 레이어, 낙타) {
    감독자();
    this.stage = 단계;
    this.layer = 레이어;
    this.rect = rect;
  }

  실행하다() {
    this.savestate (this.layer.tojson ()); // 현재 레이어 상태를 저장 this.layer.add (this.rect);
    this.layer.draw ();
  }

  undo () {
    this.rect.destroy ();
    const prevstate = this.restorestate ();
    if (prevstate) {
      this.layer.destroychildren (); // 레이어를 지우십시오 .layer = konva.node.create (prevstate, this.stage); // 이전 상태를 복원 this.stage.add (this.layer);
      this.layer.draw ();
    }
  }
}

그런 다음 명령 관리자를 구현하십시오.

 클래스 CommandManager {
  생성자 () {
    this.undostack = [];
    this.redostack = [];
  }

  executeCommand (명령) {
    command.execute ();
    this.undostack.push (명령);
    this.redostack = []; // 새 명령을 실행 한 후 Redo Stack을 지우십시오}

  undo () {
    if (this.undostack.length === 0) 반환;
    const command = this.undostack.pop ();
    command.undo ();
    this.redostack.push (명령);
  }

  redo () {
    if (this.redostack.length === 0) 반환;
    const command = this.redostack.pop ();
    command.execute ();
    this.undostack.push (명령);
  }
}

마지막으로 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 (Stage, Layer, rect);
  CommandManager.ExecuteCommand (명령);
});

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

이 코드는 간단한 사각형 도면과 실행 취소를 구현합니다. 이동, 스케일링, 회전 등과 같은 다른 그래픽 작업을 지원하기 위해 Command 클래스를 확장 할 수 있습니다. 각 작업의 execute 방법에서 현재 상태를 저장하고 undo 방법에서 이전 상태를 복원해야합니다. 이렇게하면 실행 취소 레디 기능이 올바르게 작동합니다.

위 내용은 UNDO 및 REDO 함수를 지원하기 위해 Konva.js에서 명령 클래스 명령 클래스를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!