#javascript #canvas #html5-canvas #mouseevent
#javascript #холст #html5-canvas #mouseevent
Вопрос:
рисовать линии при наведении курсора мыши и одновременно показывать координаторы x и y поверх указателя мыши при перемещении курсора мыши с помощью canvas и javascript.
Здесь координаторы x и y непрерывно рисуют поверх указателя мыши во время перемещения мыши. Тогда я не могу рисовать линии при наведении курсора мыши, так как я использую ctxTemp.clearRect (0,0, canvasTemp.width,canvasTemp.height);
если я не использую ctxTemp.clearRect(0,0, canvasTemp.width,canvasTemp.height); тогда координаторы x и y непрерывно рисуют поверх указателя мыши при перемещении мыши.
заранее благодарю.
Ответ №1:
Двойной буфер
Обычной задачей является отображение дополнительных направляющих (координат, виджетов и т.д.) На canvas при создании контента.
При использовании одного canvas это становится проблематичным, поскольку вы перезаписываете содержимое, очищая или просто рисуя направляющие.
Решение заключается в использовании дополнительного (или нескольких) canvas для отделения содержимого от направляющих.
Пример
В примере показано, как это делается.
-
Создается второй вызов canvas
drawing
. Это соответствует размеру холста на странице. -
Мышь переносит обводку на второй холст.
-
Функция main
update
рисует второй холст на главном холсте, а затем рисует положение мыши в рамке поверх него. -
Поскольку вы не можете рисовать за пределами canvas, при рисовании положения мыши необходим некоторый дополнительный код, чтобы предотвратить ее выход за пределы canvas.
requestAnimationFrame(update);
const ctx = canvas.getContext("2d");
var w = canvas.width, h = canvas.height;
const drawing = createImage(w, h); // create canvas to hold drawing
const pointQueue = []; // holds points when mouse button down
drawing.ctx.lineWidth = 4;
drawing.ctx.strokeStyle = "#F00";
drawing.ctx.lineJoin = "round";
drawing.ctx.lineCap = "round";
ctx.font = "16px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
/* add mouse listeners */
const bounds = canvas.getBoundingClientRect();
const mouse = {x: 0, y: 0, button: false}, events = ["down", "up", "move"];
events.forEach(name => document.addEventListener("mouse" name, mouseEvents));
function drawMousePos(ctx) {
const text = "X: " mouse.x.toFixed(0) " Y: " mouse.y.toFixed(0);
const width = ctx.measureText(text).width 8;
var x = mouse.x, y = mouse.y - 18;
if (x width / 2 > w) { x = w - width / 2 }
if (x - width / 2 < 0) { x = width / 2 }
if (y - 10 < 0) { y = 10 }
if (y 10 > h) { y = h - 10 }
ctx.fillStyle = "#EEC8";
ctx.fillRect(x - width / 2, y - 12, width , 20);
ctx.strokeRect(x - width / 2, y - 12, width, 20);
ctx.fillStyle = "#000C";
ctx.fillText(text, x, y);
}
function drawPen(ctx) {
if (pointQueue.length >= 2) {
ctx.beginPath();
ctx.moveTo(...pointQueue.shift());
while (pointQueue.length > (mouse.button ? 1 : 0)) { ctx.lineTo(...pointQueue.shift()) }
pointQueue.length amp;amp; ctx.lineTo(...pointQueue[0]);
ctx.stroke();
}
}
function update(){
if (pointQueue.length) {
drawPen(drawing.ctx);
ctx.clearRect(0, 0, w, h);
ctx.drawImage(drawing, 0, 0);
pointQueue.length amp;amp; drawMousePos(ctx);
canvas.style.cursor = "none";
} else { canvas.style.cursor = "crosshair" }
requestAnimationFrame(update);
}
function createImage(w, h){
const can = document.createElement("canvas");
can.width = w;
can.height = h;
can.ctx = can.getContext("2d");
return can;
}
function mouseEvents(e){
mouse.x = e.pageX - bounds.left - 2; // offset by 2 pixels for canvas border
mouse.y = e.pageY - bounds.top - 2;
if (e.type === "mousedown") { mouse.button = true }
if (mouse.button) { pointQueue.push([mouse.x , mouse.y]) }
if (e.type === "mouseup") { mouse.button = false }
}
canvas {
border : 2px solid black;
cursor: crosshair;
}
Click drag mouse to draw<br>
<canvas id="canvas" width="512" height="256"></canvas>
Комментарии:
1. это очень полезно, но в настоящее время координаты x и y отображаются после наведения курсора мыши mouseMove. можете ли вы изменить и помочь мне с координатами x и y только при первоначальном перемещении мыши
Ответ №2:
вы могли бы попробовать привязать div или span к вашей мыши и прикрепить к нему EventListener типа ‘mousemove’, в этом div у вас могло бы быть два диапазона, например
<div id='mouseCoord" style="position: absolute; top:0,left:0">
<span id='mouseX'><span>
<span id='mouseY'><span>
</div>
Div #mouseCoord будет иметь абсолютную позицию, и при перемещении мыши вы можете обновить его верхнюю / левую позицию
const mouseDiv = document.getElementById('mouseCoord')
const mouseX = document.getElementById('mouseX')
const mouseY = document.getElementById('mouseY')
mouseDiv.addEventListener('mousemove', e => {
mouseDiv.setAttribute('style', `left: ${e.offsetX};top: ${e.offsetY}`)
mouseY.innerText = `y: ${e.offsetY}`
mouseY.innerText = `x: ${e.offsetX}`
})
Используя это, вы могли бы добавить некоторые события мыши для управления, когда вы хотите отображать координату, например, только при перемещении мыши и т.д…
Я надеюсь, что это может помочь