我目前正在使用HTML5 Canvas開(kāi)發(fā)一個(gè)圖像編輯器，當(dāng)鼠標(biāo)懸停在畫(huà)布上時(shí)，我在檢測(cè)圖像坐標(biāo)時(shí)遇到了問(wèn)題。我在用矩形剪斷的代碼中復(fù)制了這個(gè)問(wèn)題：什么時(shí)候：紅色部分是畫(huà)布的邊框。畫(huà)布大小為400x400 像素。綠色部分是模擬圖像的矩形。矩形大小為200x200 像素。在 mousemove 事件中，顯示在畫(huà)布的底部坐標(biāo)。藍(lán)色文字，是我想要的（現(xiàn)在坐標(biāo)不是那些，是畫(huà)布的）我想要什么，但我不知道該怎么做：在 mousemove 上，我想顯示矩形的坐標(biāo)而不是畫(huà)布坐標(biāo)。即(0, 0)畫(huà)布的將變?yōu)樨?fù)值。(0, 0)底部顯示的應(yīng)該與藍(lán)色文字相對(duì)應(yīng)。更改 ZOOM 屬性后它也應(yīng)該工作。示例中的 ZOOM 為1，但更改為0.5或后1.5應(yīng)該以相同的方式工作。代碼在下面，我分享了代碼片段，看看是否有人可以幫助我，因?yàn)槲矣悬c(diǎn)沮喪，我確信這很愚蠢。多謝！const RECT_SIZE = 200const ZOOM = 1const 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 / 2const Y = canvas.height / 2 - RECT_SIZE / 2function 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 CANVASctx.translate(pt.x, pt.y)ctx.scale(ZOOM, ZOOM)ctx.translate(-pt.x, -pt.y)// SETTING SOME DEFAULTSctx.lineWidth = 1ctx.strokeStyle = 'green'ctx.fillStyle = 'blue'// DRAWING A REACTANGLEctx.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}`時(shí)顯示正確的坐標(biāo)ZOOM = 1。但是，更改縮放后未顯示正確的坐標(biāo)。