在 p5.js canvas 上旋转和绘图

Question

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

下面的代码是我目前尝试过的代码。但是，它目前不起作用，因为这些点没有正确显示鼠标悬停在旋转 canvas 上的位置。我目前正在 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)
}

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

我发现他们将旋转的 canvas 作为 p5.Graphics 元素。但是，出于我的目的，我想旋转实际元素，作为我正在处理的简单 p5.js 绘画应用程序的一部分。

我已经坚持了一段时间，非常感谢任何帮助！提前致谢！

Answer 1

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

鼠标坐标似乎取决于 canvas 的边界框的大小。边界框取决于旋转。因此，您需要缩放偏移量以计算 canvas.
的中心不幸的是，这还不是全部。所有这一切都不取决于当前的角度，而是取决于上次移动鼠标时设置的角度。因此，需要在 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))
}

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

在 p5.js canvas 上旋转和绘图

Rotating and drawing on a p5.js canvas

javascript

processing

drawing

canvas

p5.js