我目前正在使用 开发图像编辑器HTML5 Canvas ,当鼠标悬停在 Canvas 上时,我在检测图像坐标时遇到问题。
我在一个用矩形剪断的代码中复制了这个问题:
什么时候:
我想要什么但我不知道该怎么做:
(0, 0)
Canvas 的将变为负数。而显示的(0, 0)
底部应与蓝色文本相对应。 1
, 但在更改为 0.5
之后或 1.5
应该以同样的方式工作。 代码
在下面,我分享了截取的代码,看看是否有人可以帮助我,因为我有点沮丧,而且我确信这很愚蠢。非常感谢!
const RECT_SIZE = 200
const ZOOM = 1
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
const svgPoint = svg.createSVGPoint()
const xform = svg.createSVGMatrix()
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
const res = document.querySelector('.res')
const pt = transformedPoint(canvas.width / 2, canvas.height / 2)
const X = canvas.width / 2 - RECT_SIZE / 2
const Y = canvas.height / 2 - RECT_SIZE / 2
function transformedPoint(x, y) {
svgPoint.x = x
svgPoint.y = y
return svgPoint.matrixTransform(xform.inverse())
}
function mousemove(e) {
const { left, top } = canvas.getBoundingClientRect()
res.textContent = `X: ${e.clientX - left} - Y: ${e.clientY - top}`
}
// SCALING CANVAS
ctx.translate(pt.x, pt.y)
ctx.scale(ZOOM, ZOOM)
ctx.translate(-pt.x, -pt.y)
// SETTING SOME DEFAULTS
ctx.lineWidth = 1
ctx.strokeStyle = 'green'
ctx.fillStyle = 'blue'
// DRAWING A REACTANGLE
ctx.beginPath()
ctx.strokeRect(X, Y, RECT_SIZE, RECT_SIZE)
ctx.font = "12px Arial";
ctx.fillText("0,0", X - 5, Y-10);
ctx.fillText("200,200", X + RECT_SIZE - 15, Y + RECT_SIZE + 15);
ctx.closePath()
canvas {
border: 1px solid red;
}
<canvas width="400" height="400" onmousemove="mousemove(event)"}></canvas>
<div class="res" />
换行:
res.textContent = `X: ${e.clientX - left} - Y: ${e.clientY - top}`
至res.textContent = `X: ${e.clientX - left - X} - Y: ${e.clientY - top - Y}`
ZOOM = 1
时显示正确的坐标.但是,更改缩放后不显示正确的坐标。
最佳答案
您必须将 ZOOM 值添加到 X 和 Y 计算中,如下例所示。我使用 Math.round 方法,因为最终的 X 和 Y 值是一个长分数。
const RECT_SIZE = 200
const ZOOM = 1.4
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
const svgPoint = svg.createSVGPoint()
const xform = svg.createSVGMatrix()
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
const res = document.querySelector('.res')
const pt = transformedPoint(canvas.width / 2, canvas.height / 2)
const X = canvas.width / 2 - RECT_SIZE / 2;
const Y = canvas.height / 2 - RECT_SIZE / 2;
canvas.addEventListener('mousemove',(event)=>{
const {top, left} = event.target.getBoundingClientRect();
const zoomX = Math.round((event.clientX - left - (canvas.width / 2 - ((RECT_SIZE * ZOOM) / 2)))/ZOOM);
const zoomY = Math.round((event.clientY - top - (canvas.height / 2 - ((RECT_SIZE * ZOOM) / 2)))/ZOOM);
res.textContent = `X: ${zoomX} - Y: ${zoomY}`;
});
function transformedPoint(x, y) {
svgPoint.x = x
svgPoint.y = y
return svgPoint.matrixTransform(xform.inverse())
}
// SCALING CANVAS
ctx.translate(pt.x, pt.y)
ctx.scale(ZOOM, ZOOM)
ctx.translate(-pt.x, -pt.y)
// SETTING SOME DEFAULTS
ctx.lineWidth = 1
ctx.strokeStyle = 'green'
ctx.fillStyle = 'blue'
// DRAWING A REACTANGLE
ctx.beginPath()
ctx.strokeRect(X, Y, RECT_SIZE, RECT_SIZE)
ctx.font = "12px Arial";
ctx.fillText("0,0", X - 5, Y-10);
ctx.fillText("200,200", X + RECT_SIZE - 15, Y + RECT_SIZE + 15);
ctx.closePath()
canvas {
border: 1px solid red;
}
<canvas width="400" height="400"}></canvas>
<div class="res" />
关于javascript - Canvas HTML5 : Display rect coordinates on mousemove,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63846100/