Как повернуть изображение в p5.js

Question

Как повернуть изображение в p5.js

1

Мне нужно повернуть изображение, но мой код не вращает его вокруг центра, и я не понимаю, почему. Когда я запускаю его, я не вижу его, поэтому я подозреваю, что он рисует его за пределами экрана.

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

Когда я удаляю rotate, он правильно рисует изображение, но мне нужно повернуть его.

FCin 29 июль 2017, в 14:03

Источник

Теги:

javascript

p5.js

1 ответ

Ещё вопросы

ɢʀᴜɴᴛ · Accepted Answer · 2017-07-29T08-58-00.000Z

Перед поворотом вам нужно перевести начало холста в центр или любую точку на холсте (который вы хотите сделать центром вращения).

Это можно сделать с помощью метода 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>

Являются ли width и height размером холста или изображения?
Спасибо, это работает. Мне также нужно было установить положение изображения на 0,0, как вы сделали.