Canvas缩放旋转平移后，如何将点击点映射至原始图像坐标？

Hey there, let's tackle this coordinate conversion problem. You've already built out all the core transform logic (rotation, scaling, panning), so we just need to reverse those transforms in the right order to map your canvas click to the original image's correct position.

First, let's recap the order of transforms you're applying when drawing:

1. Translate the canvas origin to its center (translate(cw/2, ch/2))
2. Scale the image (scale(scaleFactor, scaleFactor))
3. Rotate the image (rotate(orientation * π/180))
4. Pan the image into position (translate(panX, panY))

To get from a canvas click to the original image, we need to apply the inverse transforms in reverse order of how you drew. Here's how to implement it:

Step 1: Update the Click Handler with Inverse Transforms #

Replace your current handleCanvasClick function with this revised version that handles the coordinate conversion:

handleCanvasClick = (e) => {
  // Get click position relative to canvas top-left
  const rect = this.canvas.getBoundingClientRect()
  let x = e.clientX - rect.left
  let y = e.clientY - rect.top

  // 1. Reverse the center translation (undo translate(cw/2, ch/2))
  x -= this.cw / 2
  y -= this.ch / 2

  // 2. Reverse the scaling (undo scale(scaleFactor, scaleFactor))
  x /= this.scaleFactor
  y /= this.scaleFactor

  // 3. Reverse the rotation (undo rotate(orientation)) - use negative angle
  const rad = -(this.orientation * Math.PI) / 180
  const cos = Math.cos(rad)
  const sin = Math.sin(rad)
  const rotatedX = x * cos - y * sin
  const rotatedY = x * sin + y * cos

  // 4. Reverse the pan translation (undo translate(panX, panY))
  let originalX = rotatedX - this.panX
  let originalY = rotatedY - this.panY

  // Adjust coordinates for image rotation (since rotation swaps width/height in some cases)
  let finalX, finalY
  switch(this.orientation) {
    case 90:
      // Rotated 90deg: original x ↔ rotated y, original y = image width - rotated x
      finalX = originalY
      finalY = this.image.width - originalX
      break
    case 180:
      // Rotated 180deg: flip both axes against image dimensions
      finalX = this.image.width - originalX
      finalY = this.image.height - originalY
      break
    case 270:
      // Rotated 270deg: original x = image height - rotated y, original y ↔ rotated x
      finalX = this.image.height - originalY
      finalY = originalX
      break
    default: // 0deg, no rotation
      finalX = originalX
      finalY = originalY
      break
  }

  // Store the original image coordinates (not canvas-transformed ones!)
  this.imagePoints.push([finalX, finalY])
}

Step 2: Adjust Marker Drawing to Use Original Coordinates #

Now that we're storing original image coordinates, we need to convert them back to the transformed canvas space when drawing markers. Update your drawTranslated function's marker drawing section:

drawTranslated = () => {
  if (!this.ctx) return
  this.ctx.clearRect(0, 0, this.cw, this.ch)
  this.ctx.save()
  this.ctx.translate(this.cw / 2, this.ch / 2)
  this.ctx.scale(this.scaleFactor, this.scaleFactor)
  this.ctx.rotate((this.orientation * Math.PI) / 180)
  this.ctx.translate(this.panX, this.panY)
  this.ctx.drawImage(this.image, 0, 0)
  
  this.imagePoints.forEach(point => {
    let drawX = point[0]
    let drawY = point[1]

    // Convert original image coordinates to rotated canvas space
    switch(this.orientation) {
      case 90:
        drawX = this.image.height - point[1]
        drawY = point[0]
        break
      case 180:
        drawX = this.image.width - point[0]
        drawY = this.image.height - point[1]
        break
      case 270:
        drawX = point[1]
        drawY = this.image.width - point[0]
        break
      default:
        break
    }

    this.ctx.beginPath()
    this.ctx.arc(drawX, drawY, 5, 0, 2 * Math.PI)
    this.ctx.fillStyle = red
    this.ctx.fill()
  })
  
  this.ctx.restore()
}

Why This Works #

• Inverse Transform Order: We reverse the drawing transforms because each transform modifies the coordinate system sequentially—undoing them requires going backwards.
• Rotation Adjustments: When you rotate the image 90/270 degrees, the original image's width and height swap places in the canvas, so we have to remap x and y to match the original image's axes.
• Store Original Coordinates: By saving the original image positions instead of canvas-transformed ones, your markers will stay anchored to the correct spots no matter how you pan/scale/rotate the image—this also makes exporting annotation data much cleaner later.

Quick Test Tip #

To verify it's working, click the top-left corner of the visible image (after any rotation/scaling/panning) and check if the resulting finalX/finalY are close to (0,0). Do the same for the other corners to confirm the mapping is correct.

内容的提问来源于stack exchange，提问作者John Ruddell