konvajs / ng2-konva

Angular & Canvas - JavaScript library for drawing complex canvas graphics using Angular.
http://rafaelescala.com/ng2-konva/
113 stars 32 forks source link

After the stage is redrawn, the original event will be triggered multiple times. Is there a way to reset or refresh the stage? #41

Open RangerGuan opened 2 years ago

RangerGuan commented 2 years ago
    <ko-stage #stage [config]="configStage">
        <ko-layer #layer [config]="configLayer">
        </ko-layer>
    </ko-stage>

    this.stage.getStage().addEventListener(
      'touchstart mousedown',
      (evt) => {
RangerGuan commented 2 years ago

Well, I had to remove the previous time listener before every redraw. this.stage.getStage().removeEventListener('mousedown mouseup');

yury-kopyl commented 1 year ago

@RangerGuan Why you use native event? ng2-konva have angular events - use it (http://rafaelescala.com/ng2-konva/#event)

Jbz797 commented 1 year ago

Since the last update, the mouseup event on ko-stage trigger 2 times :

<div #koContainer class="ko-container" [ngStyle]="{ cursor: planState.cursor }">
  <ko-stage
    *ngIf="configStage"
    #stage
    [config]="configStage"
    (mousedown)="handStart()"
    (mousemove)="handMove()"
    (mouseup)="handEnd()"
    (touchmove)="handMove()"
    (touchstart)="handStart()"
    (wheel)="wheelStart($event)"
  >
    <ko-layer #layer />
  </ko-stage>
</div>
Jbz797 commented 1 year ago

I confirm that the events are all called twice :

• Object { angularComponent: {…}, event: {…} }
• mousedown { target: canvas, buttons: 1, clientX: 1357, clientY: 269, layerX: 1324, layerY: 236 }