javascript - 如何在 p5.js 中旋转图像

Question

我需要旋转图像，但我的代码没有围绕中心旋转图像，我不明白为什么。当我运行它时我看不到它，所以我怀疑它把它画到了屏幕之外。

push();
rotate(PI / 2 * rotation);
imageMode(CENTER);
image(this.texture, centerPosX, centerPosY);
pop();

当我删除 rotate 时，它会正确绘制图像，但我需要旋转它。

Answer 1

在旋转之前，您需要将 Canvas 原点平移到中心或 Canvas 内的任何点(您希望作为旋转中心)。

这可以使用 translate() 来完成方法。

ᴅᴇᴍᴏ

var img;

function setup() {
   createCanvas(300, 300);
   img = loadImage('https://i.imgur.com/Q6aZlme.jpg');
}

function draw() {
   background('#111');
   translate(width / 2, height / 2);
   rotate(PI / 180 * 45);
   imageMode(CENTER);
   image(img, 0, 0, 150, 150);
}

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