当回调是类方法时,我正在尝试从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;
}
}