在 p5.js 画布上旋转和绘图答案

【问题标题】：Rotating and drawing on a p5.js canvas在 p5.js 画布上旋转和绘图
【发布时间】：2021-08-24 06:33:57
【问题描述】：

我正在尝试在旋转的 p5.js 画布上绘图，其中画布元素通过其transform CSS 属性进行旋转。用户应该能够使用光标在画布上绘制点，即使画布元素正在旋转。

以下代码是我迄今为止尝试过的。但是，它目前无法正常工作，因为鼠标悬停在旋转画布上的位置未正确显示这些点。我目前正在the p5.js editor 上对此进行测试。

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)
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"&gt;&lt;/script&gt;

我找到了this related StackOverflow post，他们在旋转画布上作为 p5.Graphics 元素绘制。但是，出于我的目的，我想旋转实际元素，作为我正在开发的简单 p5.js 绘画应用程序的一部分。

我已经被这个问题困扰了一段时间，如果有任何帮助，我将不胜感激！提前致谢！

【问题讨论】：

标签： javascript canvas processing drawing p5.js

【解决方案1】：

这似乎是p5.js 中的一个错误。

鼠标坐标似乎取决于画布边界框的大小。边界框取决于旋转。因此，您需要缩放偏移量以计算画布中心。
不幸的是，这还不是全部。所有这些都不取决于当前的角度，而是取决于鼠标上次移动时设置的角度。因此需要在mouseMoved 回调中计算比例：

let scale;

function mouseMoved() {
  let angle_rad = radians(frameCount)
  scale = abs(sin(angle_rad)) + abs(cos(angle_rad))
}

let center_offset = 200 * scale;
point(mouseX-center_offset, mouseY-center_offset)

let canvas, scale

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

function draw() {
  
  let angle = frameCount;
  let angle_rad = radians(angle)
  let center_offset = 200 * scale
  
  canvas.style(`transform: rotate(${angle}deg)`)

  translate(200, 200)
  rotate(-angle_rad)
  
  point(mouseX-center_offset, mouseY-center_offset)
}

function mouseMoved() {
  let angle_rad = radians(frameCount)
  scale = abs(sin(angle_rad)) + abs(cos(angle_rad))
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"&gt;&lt;/script&gt;

【讨论】：