您好,我写了一个白板,可以在其中进行绘图。我用svg绘制路径。它确实可以与我的EventHandlers一起工作,但是当我将鼠标移到上方时,我想删除这些处理程序。该应用程序的工作方式类似于,当您单击时,白板将获取所有事件处理程序,并且可以绘制一条线。当您不单击时,您不会绘画。现在,当我单击一次时,我会做出无休止的一行。
我希望这是可以理解的:/
谢谢
main() {
// hole whiteboard
let whiteboard = document.getElementById("whiteboard");
const color = "black";
let test2 = event => {
//console.log(event);
this.createSvgElement(whiteboard,color);
this.setup(event);
//alert("Ich bin reich!");
}
whiteboard.addEventListener("mousedown",test2);
},createSvgElement(w,c){
this.whiteboard.removeEventListener("mousedown",this);
this.whiteboard = w;
this.segments = [];
this.points = [];
this.path = document.createElementNS("http://www.w3.org/2000/svg","path");
this.path.setattributeNS(null,"stroke",c);
this.path.setattributeNS(null,"stroke-width","2");
this.path.setattributeNS(null,"fill","transparent");
//console.log(this.path);
},setup(event){
this.whiteboard.addEventListener("mousemove",e => {
const [x,y] = this.pos(e);
//console.log(x);
this.points.push({ x,y });
const test = this.path.getattributeNS(null,"d");
//console.log(test);
this.path.setattributeNS(null,"d",test + ` L${x},${y}`);
});
this.whiteboard.addEventListener("mouseleave",e =>{
this.whiteboard.removeEventListener("mousemove",this);
this.whiteboard.removeEventListener("mouseup",this);
this.whiteboard.removeEventListener("mouseleave",this);
});
this.whiteboard.addEventListener("mouseup",this);
});
},pos(e){
const rect = this.whiteboard.getBoundingClientRect();
return [e.clientX - rect.left,e.clientY - rect.top];
},