如何使用画布和javascript在鼠标指针的顶部同时显示线条显示x和y协调器

问题描述

在mouseDown时绘制线条，并在使用画布和javascript的MouseMove上同时在鼠标指针的顶部显示x和y协调器。

在这里，x和y协调器在MouseMove时不断在鼠标指针上方绘制。然后我无法使用MouseDown绘制线条，因为我正在使用ctxTemp.clearRect（0,0，canvastemp.width，canvastemp.height）;

如果我没有使用ctxTemp.clearRect（0,0，canvastemp.width，canvastemp.height）;那么x和y协调器会在MouseMove时不断在鼠标指针上方绘制。

多谢。

解决方法

双缓冲区

创建内容时，通常在画布上渲染附加指南（坐标，小部件等）。

使用单个画布会造成问题，因为您将通过清除或仅绘制指南来覆盖内容。

解决方案是使用其他（或更多）画布将内容与指南分开。

示例

该示例显示了此操作的完成方式。

创建第二个画布，调用drawing。它与页面上画布的大小匹配。
鼠标将笔划绘制到第二个画布上。
主update函数将第二个画布绘制到主画布上，然后在其上方的框中绘制鼠标位置。
由于您不能在画布外部绘制图形，因此在绘制鼠标位置时需要一些附加代码，以防止鼠标移出画布外部。

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,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 && ctx.lineTo(...pointQueue[0]);
        ctx.stroke();
    }
}
function update(){
    if (pointQueue.length) {
        drawPen(drawing.ctx);        
        ctx.clearRect(0,w,h);
        ctx.drawImage(drawing,0);
        pointQueue.length && 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>

您可以尝试将div或span绑定到鼠标，并将其附加到像'mousemove'这样的eventListener上，在此div中，您可以有两个span

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

在此位置上，您可以添加一些鼠标事件来控制何时要显示坐标，就像仅在鼠标移动等时一样。

我希望这会有所帮助

html5-canvas javascript mouseevent