如何解决如何使用画布和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}`
})
在此位置上,您可以添加一些鼠标事件来控制何时要显示坐标,就像仅在鼠标移动等时一样。
我希望这会有所帮助
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。