应用react-konva旋转时出现的问题。 -火山引擎

在 react-konva 中，应用旋转时可能会遇到一些问题。具体来说，当您在 Konva 节点上应用旋转属性时，有两个不同的属性可以选择：rotation 和 angle。但是，使用其中任何一个属性都可能会导致意外的旋转和缩放问题，特别是当您尝试对节点进行多次旋转时。

为了解决此问题，您可以使用 Konva 的 setAttrs 方法而不是直接设置节点的旋转属性。这将确保 Konva 正确地计算节点的旋转和缩放。

以下是代码示例：

import React, { useRef } from 'react';
import { Layer, Rect, Stage } from 'react-konva';
function App() {
  const rectRef = useRef(null);
  const handleRotate = () => {
    const rectNode = rectRef.current;
    rectNode.setAttrs({
      rotation: rectNode.rotation() + 45,
  return (
    <Stage width={500} height={500}>
      <Layer>
          x={200}
          y={200}
          width={100}
          height={100}
          fill="red"
          ref={rectRef}
      </Layer>
      <button onClick={handleRotate}>Rotate</button>
    </Stage>
export default App;
在代码示例中，我们使用了 Konva 的 setAttrs 方法来更新矩形节点的 rotation 属性，而不是直接设置它。这将确保 Konva 正确地计算矩形的旋转角度，并将其应用于节点的所有变换属性。