如何在CSS transform旋转的p5.js原生画布上实现鼠标绘制功能

我正在尝试在旋转的p5.js画布上进行绘制，该canvas元素通过CSS transform属性实现旋转。要求即便画布处于动态旋转状态时，用户也可通过光标在画布上绘制点。

以下是我目前尝试的代码，但功能运行异常，绘制的点无法正确显示在鼠标悬停在旋转画布的对应位置。

let canvas

function setup() {
  canvas = createCanvas(400, 400)
  background('#fb88f3')
  strokeWeight(10)
}

function draw() {
  canvas.style(`transform: rotate(${frameCount}deg)`)

  translate(200, 200)
  rotate(-radians(frameCount))
  
  point(mouseX-200, mouseY-200)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

我找到了相关的实现方案是将旋转画布作为p5.Graphics元素处理，但我的开发需求是直接旋转实际canvas元素，用于我正在开发的简易p5.js绘画应用。

问题根源 #

你通过CSS修改transform实现的旋转是DOM层面的视觉变换，p5.js内置的mouseX、mouseY仅会读取相对于canvas元素原始未旋转状态的坐标，不会感知CSS变换带来的坐标系偏移，因此绘制位置和鼠标实际悬停位置无法匹配。

修复后代码 #

let canvas
const canvasSize = 400
const centerPos = canvasSize / 2

function setup() {
  canvas = createCanvas(canvasSize, canvasSize)
  background('#fb88f3')
  strokeWeight(10)
}

function draw() {
  // 记录当前CSS旋转角度
  const rotateDegree = frameCount % 360
  canvas.style(`transform: rotate(${rotateDegree}deg)`)

  translate(centerPos, centerPos)
  rotate(-radians(rotateDegree))
  
  // 计算鼠标相对于画布中心的原始偏移量
  const offsetX = mouseX - centerPos
  const offsetY = mouseY - centerPos
  const rotateRad = radians(rotateDegree)
  // 对偏移量做反向旋转变换，得到画布内部正确的绘制坐标
  const targetX = offsetX * cos(rotateRad) + offsetY * sin(rotateRad)
  const targetY = -offsetX * sin(rotateRad) + offsetY * cos(rotateRad)
  
  point(targetX, targetY)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

方案说明 #

• 完全保留了你直接旋转真实canvas DOM元素的需求，无需引入离屏画布
• 通过手动对鼠标坐标做反向旋转变换，抵消CSS旋转带来的坐标偏移，实现鼠标位置和绘制点的精准匹配
• 代码逻辑对原有业务侵入性极低，可直接集成到你的绘画应用中

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