Поворот изображения в реактив-конве

Question

const bush1Image = new Image();
bush1Image.src = 'bush1.png';
bush1Image.rotate(90);

Мне нужно повернуть изображение перед использованием this.setState, так почему вышеприведенный код не работает?

Answer 1

<img> элемент, созданный с помощью new Image(), не имеет rotate метода.

Если вы хотите повернуть его, у вас есть два способа:

1 Просто поверните созданный образ Konva с

<Image image={this.state.image} rotation={90} />

2 Или нарисуйте свое изображение на внешнем холсте с требуемым вращением, а затем используйте это полотно в качестве image свойства для узлов Konva

const bush1Image = new Image();
bush1Image.onload = () => {
   const canvas = document.createElement('canvas');
   // reversed size, because image will be rotated
   canvas.width = bush1Image.height;
   canvas.height = bush1Image.width;
   const ctx = canvas.getContext('2d');
   ctx.moveTo(0, canvas.widht);
   ctx.rotate(90 * Math.PI / 180);
   ctx.drawImage(bush1Image, 0, 0);
   this.setState({ image: canvas })
}
bush1Image.src = 'bush1.png';