Блог

Главная - Вопросы по программированию - как рисовать линии одновременно, показывать координаторы x и y поверх указателя мыши с помощью canvas и javascript

как рисовать линии одновременно, показывать координаторы x и y поверх указателя мыши с помощью canvas и javascript

#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}`
})

Используя это, вы могли бы добавить некоторые события мыши для управления, когда вы хотите отображать координату, например, только при перемещении мыши и т.д…

Я надеюсь, что это может помочь