Konva Transformer：如何避免旋转锚点触发网格吸附

核心思路是在Transformer的变换事件里，判断当前操作的锚点是否为旋转锚点，若是则跳过网格吸附逻辑，只对调整大小的锚点执行对齐。

方法一：在transform事件中直接判断锚点类型 #

const gridSize = 20; // 根据需求设置网格尺寸
const transformer = new Konva.Transformer();
layer.add(transformer);

transformer.on('transform', () => {
  // 获取当前激活的操作锚点
  const activeAnchor = transformer.getActiveAnchor();
  
  // Konva默认旋转锚点的名称是'rotater'，如果是旋转操作则跳过吸附
  if (activeAnchor && activeAnchor.name() === 'rotater') {
    return;
  }

  // 仅对调整大小的锚点执行网格吸附
  const targetNode = transformer.nodes()[0];
  if (!targetNode) return;

  // 计算对齐到网格的位置和尺寸
  const alignedX = Math.round(targetNode.x() / gridSize) * gridSize;
  const alignedY = Math.round(targetNode.y() / gridSize) * gridSize;
  const alignedWidth = Math.round(targetNode.width() / gridSize) * gridSize;
  const alignedHeight = Math.round(targetNode.height() / gridSize) * gridSize;

  // 应用对齐后的参数并更新transformer
  targetNode.position({ x: alignedX, y: alignedY });
  targetNode.size({ width: alignedWidth, height: alignedHeight });
  transformer.update();
});

方法二：在transformstart事件中记录操作类型（更高效） #

如果担心频繁获取activeAnchor影响性能，可以在变换开始时记录是否为旋转操作，后续直接判断状态：

const gridSize = 20;
const transformer = new Konva.Transformer();
layer.add(transformer);

let isRotating = false;

// 变换开始时判断操作类型
transformer.on('transformstart', () => {
  const activeAnchor = transformer.getActiveAnchor();
  isRotating = activeAnchor && activeAnchor.name() === 'rotater';
});

transformer.on('transform', () => {
  // 是旋转操作则跳过吸附
  if (isRotating) return;

  // 网格吸附逻辑同方法一
  const targetNode = transformer.nodes()[0];
  if (!targetNode) return;

  const alignedX = Math.round(targetNode.x() / gridSize) * gridSize;
  const alignedY = Math.round(targetNode.y() / gridSize) * gridSize;
  const alignedWidth = Math.round(targetNode.width() / gridSize) * gridSize;
  const alignedHeight = Math.round(targetNode.height() / gridSize) * gridSize;

  targetNode.position({ x: alignedX, y: alignedY });
  targetNode.size({ width: alignedWidth, height: alignedHeight });
  transformer.update();
});

// 变换结束后重置状态
transformer.on('transformend', () => {
  isRotating = false;
});

注意事项 #

• Konva默认的旋转锚点名称是rotater，如果你自定义了旋转锚点的名称，需要对应修改判断条件中的字符串。
• 网格吸附的计算逻辑可以根据你的需求调整，比如只对齐位置、只对齐尺寸，或者调整取整方式（如Math.floor/Math.ceil）。

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