Question

我正在创建一个绘图应用程序，我试图在画布上绘制不同的形状（rect，circle，line）取决于形状按钮单击。因此，当我附上onmousedown，onmouseup，onmousemove，在画布上说在rect形状按钮上单击然后它在画布上添加事件，当我点击说圆形按钮时，它在画布上为rect和circle添加鼠标事件。所以我的问题是我的问题可以删除以前的事件或更改其处理程序。源代码 https://github.com/anuj-jaryal/screenshot-chrome-extension/tree/add-cropping?files=1 它的镀铬扩展首先在镀铬扩展中设置。

Answer 1

解决此问题的一种更简单的方法是不更改事件侦听器。

使用标记，每次用户选择新形状时更改标志，并在每次单击画布时检查标记。

let newWeDrawing = "circle";

function userChooseRect() {
    newWeDrawing = "rect"
}

function userClickedOnCanvas() {
    switch (newWeDrawing) {
        case "cirecle":
            drawCircle();
            break;
        case "rect":
            drawRect();
            break;
    }
}

或者，更好的方法是使用一些哈希表来描述不同的选项。

let newWeDrawing = 1;

function userChooseShape(idOfShape) {
    newWeDrawing = idOfShape;
}

function userClickedOnCanvas() {
    switch (newWeDrawing) {
        case 1:
            drawCircle();
            break;
        case 2:
            drawRect();
            break;
    }
}

删除上一个事件侦听器并添加新事件侦听器

1 个答案: