KonvaJS：使用Transformer调整分组大小时如何保持内部文本字号不变

算力阿峰

2026-10-4

解决方案

Konva.Transformer调整分组尺寸时默认修改分组的scaleX/scaleY属性，分组内所有子元素会继承缩放比例，因此文本字号会同步变化。要固定字号可以使用以下两种方案：

方案1：动态抵消文本的缩放影响

无需修改Transformer默认行为，监听分组的transform事件，用分组的缩放值反向修正文本字号，适合分组内同时存在需要缩放的其他元素的场景。

const group = new Konva.Group({
  x: 100,
  y: 100,
  width: 200,
  height: 100,
  draggable: true
});
// 初始化文本节点，记录初始字号
const originalFontSize = 16;
const text = new Konva.Text({
  text: '固定字号示例',
  fontSize: originalFontSize,
  fill: '#333'
});
group.add(text);
layer.add(group);

const tr = new Konva.Transformer({ nodes: [group] });
layer.add(tr);

// 核心修正逻辑
group.on('transform', () => {
  const scale = Math.min(group.scaleX(), group.scaleY());
  // 遍历分组内所有文本节点修正字号
  group.find('Text').forEach(textNode => {
    textNode.fontSize(originalFontSize / scale);
  });
});

方案2：直接修改分组宽高而非缩放

配置Transformer自定义变换逻辑，让调整大小时直接修改分组宽高、始终保持缩放比例为1，适合分组内所有元素都不需要继承缩放的场景。

const tr = new Konva.Transformer({
  nodes: [group],
  onTransform: (e) => {
    const targetGroup = e.target;
    const scaleX = targetGroup.scaleX();
    const scaleY = targetGroup.scaleY();
    // 用缩放值计算新宽高后重置缩放
    targetGroup.width(targetGroup.width() * scaleX);
    targetGroup.height(targetGroup.height() * scaleY);
    targetGroup.scaleX(1);
    targetGroup.scaleY(1);
  }
});