如何绘制线条使用 canvas 和 javascript 在鼠标指针顶部同时显示 x 和 y 坐标

Question

在 mouseDown 时绘制线条，同时在 MouseMove 时使用 canvas 和 javascript.

在鼠标指针顶部显示 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 时不断地在鼠标指针上绘制。

感谢是提前。

Answer 1

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

<div id='mouseCoord" style="position: absolute; top:0,left:0">
   <span id='mouseX'><span>
   <span id='mouseY'><span>
</div>

div#mouseCoord 会有一个绝对位置，在鼠标移动时，您可以更新他的top/left 位置

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

有了这个，您可以添加一些鼠标事件来控制何时显示坐标，例如仅在鼠标移动时显示坐标等...

希望对您有所帮助

Answer 2

双缓冲区

创建内容时在 canvas 上呈现附加指南（坐标、小部件等...）是一项常见任务。

使用单个 canvas 这会成为问题，因为您正在通过清除覆盖内容，或者只是绘制指南。

解决方案是使用额外的（或更多）canvas 将内容与指南分开。

例子

示例显示了这是如何完成的。

创建了第二个 canvas 调用 drawing。它与页面上 canvas 的大小匹配。
鼠标画笔划到秒canvas.
主 update 函数将第二个 canvas 绘制到主 canvas 上，然后在其上方的框中绘制鼠标位置。
由于您不能在 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 && 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 && 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>

如何绘制线条使用 canvas 和 javascript 在鼠标指针顶部同时显示 x 和 y 坐标

how to draw lines simultaneously show x & y coordinators on top of mouse pointer using canvas and javascript

javascript

canvas

html5-canvas

mouseevent

双缓冲区

例子