当回调是类方法时,删除事件侦听器

时间:2019-11-11 14:10:00

标签: javascript typescript

当回调是类方法时,我正在尝试从canvas元素中删除事件侦听器(我在此项目中使用Typescript)。此类负责使用光标在画布内移动图像。当前,执行quit方法时不会删除事件。

我希望将回调保留为类方法!

class MoveTool extends Tool {

   button: HTMLElement;
   canvas: HTMLCanvasElement;  
   isDraggable: boolean;

   public constructor(element : MouseEvent) {

       if(!__states.activeLayer) return;
       super(element);
       this.canvasEditMode();  
       (<HTMLInputElement>this.element.target).parentElement.classList.add('tool-focus');
   }    

   public quit(this : this) {
       (<HTMLInputElement>this.element.target).parentElement.classList.remove('tool-focus');
       document.getElementById(__states.activeLayer).style.cursor = 'pointer';
       this.canvas.removeEventListener('mousedown', this.mouseDown.bind(this));
       this.canvas.removeEventListener('mousemove', this.mouseMove.bind(this));
       this.canvas.removeEventListener('mouseup', this.mouseUp.bind(this));
   }


   public run() {
       this.isDraggable = false;
       this.canvas.addEventListener('mousedown', this.mouseDown.bind(this));
       this.canvas.addEventListener('mousemove', this.mouseMove.bind(this)); 
       this.canvas.addEventListener('mouseup', this.mouseUp.bind(this));
   }

   public mouseDown(event : MouseEvent) : void {
       this.isDraggable = true;
       this.startCur = this.getCursorPosition(event);
   }

   public mouseUp(event : MouseEvent) : void {
       this.isDraggable = false;
   }

   public mouseMove(event: MouseEvent) : MouseEvent {
       if(this.isDraggable) {

           this.current = this.getCursorPosition(event);

           if(!(this.current.x > 0 - this.image.width 
                && this.current.x < this.canvas.width + this.image.width
                && this.current.y > 0 - this.image.height 
                && this.current.y < this.canvas.height + this.image.height
               )
           ) return;         

           this.currentX = this.startCur.x === this.current.x 
               ? this.currentX
               : this.startCur.x > this.current.x 
                   ? this.currentX - (this.startCur.x - this.current.x) 
                   : this.currentX + (this.current.x - this.startCur.x);


           this.currentY =  this.startCur.y === this.current.y
               ? this.currentY
               : this.startCur.y > this.current.y 
                   ? this.currentY - (this.startCur.y - this.current.y) 
                   : this.currentY + (this.current.y - this.startCur.y);   

           setInterval(() => {
               this.clearCanvas();
               this.context.drawImage(this.image, this.currentX, this.currentY);          
           }, 1000/30);        

       }
       return event;
   }
}

0 个答案:

没有答案