react-konva中的图像旋转

Question

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

在使用this.setState之前，我需要旋转图像，那么为什么上面的代码不能工作？

Answer 1

使用new Image()创建的<img>元素没有rotate方法。

如果你想旋转它，你有两种方法：

1只需旋转创建的Konva图像即可

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

2或将图像绘制到具有所需旋转的外部画布中，然后将该画布用作Konva节点的image属性

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