react-konva - react-konva中的图像旋转

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 或者将您的图像绘制到具有所需旋转的外部画布中，然后将该画布用作imageKonva 节点的属性

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';