如何正确控制Konva Line组件旋转值并解决位置偏移问题

核心问题分析 #

1. 未设置旋转中心：默认Konva节点以左上角为旋转中心，导致旋转时位置跳动。
2. 变换计算逻辑错误：直接通过缩放+位移更新点坐标，未考虑旋转变换对坐标的影响；拖拽时未处理旋转坐标系下的偏移转换。

修复步骤 #

1. 添加工具函数计算中心点

先实现计算点集边界框和中心点的工具函数，用于设置旋转中心：

import Konva from 'konva';

// 扁平化二维点数组
const flatPoints = (points) => points.flat();

// 计算点集的中心点
const getCenterPoint = (points) => {
  const flat = flatPoints(points);
  const rect = Konva.Util.getClientRect(flat);
  return [rect.x + rect.width / 2, rect.y + rect.height / 2];
};

2. 为Line组件设置旋转中心

通过offsetX和offsetY将旋转中心设置为图形中心点，避免旋转时位置跳动：

const center = getCenterPoint(points);

<Line
  ref={shapRef}
  points={flatPoints(points)}
  stroke={"#E90000"}
  strokeWidth={1}
  closed
  strokeScaleEnabled={false}
  draggable={true}
  onDragEnd={handleDragEnd}
  rotationDeg={rotateDeg}
  onTransformEnd={handleTransformEnd}
  // 设置旋转中心为图形中心点
  offsetX={center[0]}
  offsetY={center[1]}
/>

3. 修正变换处理函数

使用Konva的变换矩阵统一处理拖拽、旋转、缩放的坐标转换，确保计算准确：

const handleDragEnd = (e) => {
  const node = shapRef.current;
  if (!node) return;

  // 获取节点当前的完整变换矩阵（包含位移、旋转、缩放）
  const matrix = node.getTransformMatrix();
  // 将每个原始点应用变换矩阵，得到新坐标
  const newPoints = points.map(point => Konva.Util.transformPoint(point, matrix));
  
  onPointsChange(newPoints);
  // 重置节点变换属性，避免累积变换
  node.setAttrs({ x: 0, y: 0, rotation: 0, scaleX: 1, scaleY: 1 });
};

const handleTransformEnd = (e) => {
  const node = shapRef.current;
  if (!node) return;

  const matrix = node.getTransformMatrix();
  const newPoints = points.map(point => Konva.Util.transformPoint(point, matrix));
  // 提取当前旋转角度（用于单独保存旋转状态）
  const newRotation = node.rotation();
  
  onPointsChange(newPoints);
  onRotateDegChange(newRotation);
  
  node.setAttrs({ x: 0, y: 0, rotation: 0, scaleX: 1, scaleY: 1 });
};

原理说明 #

• 旋转中心设置：通过offsetX/Y将节点的原点移至图形中心点，旋转时会绕该点转动，避免位置偏移。
• 变换矩阵：Konva的getTransformMatrix()会返回包含所有变换（位移、旋转、缩放）的矩阵，使用transformPoint方法可以准确将原始点转换为变换后的坐标，无需手动计算复杂的旋转变换公式。
• 重置变换属性：每次变换结束后重置节点的x/y/rotation/scale，确保后续变换基于最新的points状态计算，避免累积变换导致的误差。

内容的提问来源于stack exchange，提问作者BachKhoa