Konva-React绘制Arrow对象后如何获取其rotation属性

Konva 没有为直接通过 points 属性定义始末坐标的 Arrow 对象内置获取朝向角度的方法。
原因很简单：你通过两点坐标定义箭头时，箭头的朝向是 Konva 内部根据点位直接计算绘制的，没有修改实例本身的旋转变换属性，此时直接调用 arrow.rotation() 拿到的永远是默认值 0，并不是你想要的箭头朝向角度。

目前有两种常用实现方案：

• 继续使用你目前的三角函数计算方案，这是性能最高、最直接的方式，参考计算逻辑如下：

// 入参为箭头起始、终点坐标，返回角度值（和Konva rotation单位统一）
const calcArrowAngle = (startX, startY, endX, endY) => {
  const dx = endX - startX;
  const dy = endY - startY;
  return Math.atan2(dy, dx) * 180 / Math.PI;
}

• 调整Arrow的定义逻辑，通过显式设置rotation属性实现，之后可以直接读取实例的rotation属性拿到角度：
  你可以把箭头的points固定为[0, 0, 箭头长度, 0]，将箭头的位置锚定在起始点，再通过计算出的角度设置rotation属性，对应代码修改如下：

const dx = endPos.xe - startPos.xe;
const dy = endPos.ye - startPos.ye;
// 计算箭头长度
const arrowLength = Math.sqrt(dx * dx + dy * dy);
// 计算朝向角度
const arrowRotation = Math.atan2(dy, dx) * 180 / Math.PI;

<Arrow
  x={startPos.xe}
  y={startPos.ye}
  points={[0, 0, arrowLength, 0]}
  rotation={arrowRotation}
  pointerLength={12}
  pointerWidth={10}
  fill='teal'
  stroke="black"
  strokeWidth={5}
/>

调整后直接调用Arrow实例的rotation()方法即可拿到正确的朝向角度。

内容的提问来源于stack exchange，提问作者abdullah yıldız