Question

我试图告诉用户单击画布上的两个点。我想获取这两个点的坐标并在它们之间画一条线。但是我遇到了一些错误。

我在drawLine函数中添加了两个事件侦听器，在该函数中，我需要获取两组坐标。

const mainCanvas = document.querySelector('#mainCanvas');
const pExplain = document.querySelector('.explain');

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    console.log("x: " + x + " y: " + y);
}

function drawLine() {
    pExplain.innerHTML = "Please select a starting point for your line";
    mainCanvas.addEventListener('mousedown', function(e) {
        getCursorPosition(mainCanvas, e);
        pExplain.innerHTML = "Please select an ending point for your line";
    })

    mainCanvas.addEventListener('mousedown', function(e) {
        getCursorPosition(mainCanvas, e);
        // and here draw the line
        // Do not worry about the line, I know how to draw it
    })
}

这不起作用，并且两次给出相同的坐标集。感谢您的任何帮助。请客气，因为我是JavaScript的初学者。

Answer 1

我仅添加了一个单击侦听器，并使用状态字段来确定要采取的操作。

const mainCanvas = document.querySelector('#mainCanvas');
const pExplain = document.querySelector('.explain');

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    console.log("x: " + x + " y: " + y);
    return {x:x, y:y};
}

var status = "getStart";
var start, stop;
function mouseDrawHandler(e) {
        if(status == "getStart") {
            start = getCursorPosition(mainCanvas, e);
            pExplain.innerHTML = "Please select an ending point for your line";
            status = "getStop";
        } else if (status == "getStop"){
            stop = getCursorPosition(mainCanvas, e);
            addLine(start,stop);//for example
            status = "getStart";
        }
    }

function drawLine() {
    status = "getStart";
    pExplain.innerHTML = "Please select a starting point for your line";
    mainCanvas.addEventListener('mousedown', mouseDrawHandler);
}

drawLine();
//mainCanvas.removeEventListener('mousedown', mouseDrawHandler);

为什么同时向同一元素添加两个相同的addEventListeners触发/执行？

1 个答案: