我试图告诉用户单击画布上的两个点。 我想获取这两个点的坐标并在它们之间画一条线。但是我遇到了一些错误。
我在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的初学者。
答案 0 :(得分:0)
我仅添加了一个单击侦听器,并使用状态字段来确定要采取的操作。
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);