如何解决在 p5.js 画布上旋转和绘制
我正在尝试在旋转的 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。