在 p5.js 画布上旋转和绘制

编程问答 2022-04-25

问题描述

我正在尝试在旋转的 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)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

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

我已经坚持了一段时间，希望得到任何帮助！提前致谢！

解决方法

这似乎是 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))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

canvasdrawingdrawingjavascriptp5.jsprocessingprocessingprocessing