react-konva中的图像旋转答案

【问题标题】：Image rotation in react-konvareact-konva中的图像旋转
【发布时间】：2020-02-20 08:17:57
【问题描述】：

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

在使用this.setState之前需要旋转图片，为什么上面的代码不起作用？

【问题讨论】：

标签： react-konva

【解决方案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';

【讨论】：