可拖拽Layer缩放/拖拽后，Transformer组件处理Polygon的变形异常问题求助

问题本质 #

调整Konva Stage或Layer的缩放比例，或者拖拽Layer之后，用Transformer操作Polygon时，图形会跟着当前的缩放比例一直放大/缩小，变形操作完全被视图缩放状态绑定，根本没法正常调整图形。

解决办法 #

核心就是让Transformer的操作逻辑基于原始画布的坐标体系，抵消视图缩放带来的影响，具体可以这么做：

1. 实时记录视图缩放比例 #

先在组件里存个状态记录当前Stage的缩放值，每次缩放操作都更新它：

const [stageScale, setStageScale] = useState(1);

// 举个滚轮缩放的例子
const handleWheel = (e) => {
  e.evt.preventDefault();
  const scaleStep = 1.1;
  const newScale = e.evt.deltaY > 0 
    ? stageScale / scaleStep 
    : stageScale * scaleStep;
  setStageScale(newScale);
  stage.current.scale({ x: newScale, y: newScale });
  stage.current.draw();
};

2. 校正Transformer的变换参数 #

在Transformer的transform事件里，把图形的变换参数除以当前的视图缩放比例，抵消缩放的影响：

const handleTransform = () => {
  const targetNode = transformer.current.nodes()[0];
  if (!targetNode) return;

  // 把缩放后的参数转回原始画布的比例
  const correctedScaleX = targetNode.scaleX() / stageScale;
  const correctedScaleY = targetNode.scaleY() / stageScale;
  const correctedX = targetNode.x() / stageScale;
  const correctedY = targetNode.y() / stageScale;

  // 应用校正后的参数，同时重置Transformer自身的缩放
  targetNode.scale({ x: correctedScaleX, y: correctedScaleY });
  targetNode.position({ x: correctedX, y: correctedY });
  targetNode.getLayer().draw();

  transformer.current.scale({ x: 1, y: 1 });
  transformer.current.position({ x: 0, y: 0 });
};

3. 拖拽Layer后同步校正图形位置 #

如果有Layer拖拽的需求，拖拽结束后要把图形的位置也校正回来，避免Transformer和图形错位：

const handleLayerDragEnd = () => {
  const targetNode = transformer.current.nodes()[0];
  if (!targetNode) return;

  const layerPos = layer.current.position();
  // 把Layer的偏移量从图形位置里扣除（要除以缩放比例）
  targetNode.position({
    x: targetNode.x() - layerPos.x / stageScale,
    y: targetNode.y() - layerPos.y / stageScale,
  });
  // 重置Layer的位置，避免累积偏移
  layer.current.position({ x: 0, y: 0 });
  layer.current.draw();
};

为什么这么做？ #

Konva的Transformer默认会跟着当前Layer/Stage的缩放比例来计算变换步长，视图放大后，拖拽Transformer控制点时，图形的缩放倍数也会被放大，导致越拉越大。通过把图形的变换参数除以视图缩放比例，相当于把操作逻辑拉回了原始画布的尺度，变形操作就不会受视图缩放影响了。

小提醒 #

• 每次缩放或拖拽Layer后，一定要及时更新stageScale，不然校正参数会不准。
• 如果transform事件触发太频繁，加个节流函数优化下性能，避免卡帧。

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