缩放时如何调整Konva Label尺寸使其始终保持相对画布大小

核心原理是通过对Label施加与画布缩放比例相反的缩放值，抵消画布缩放带来的Label视觉尺寸变化，实现固定大小展示。

具体实现步骤 #

• 新增统一更新所有Label尺寸的公共方法

updateLabelSizes() {
  // 获取当前画布的缩放比例
  const scaleX = this.stage.scaleX()
  const scaleY = this.stage.scaleY()
  // 遍历图层中所有Label节点
  this.layer.find('Label').forEach(label => {
    // 施加逆缩放，抵消画布缩放的影响
    label.scaleX(1 / scaleX)
    label.scaleY(1 / scaleY)
  })
  // 批量重绘图层，提升性能
  this.layer.batchDraw()
}

• 在画布缩放事件中调用上述更新方法

this.stage.on('wheel', function (e) {
  // 保留你原有实现的画布缩放逻辑
  // ...
  // 缩放完成后调用方法更新所有Label尺寸
  this.updateLabelSizes()
});

• 新建Label时同步调用更新方法，保证刚创建的Label尺寸符合当前缩放比例

createMarker(point: any) {
    var label = createLabel(point.x, point.y);
    var tag = createTag();
    var text = createText();

    label.add(tag);
    label.add(text);

    this.layer.add(label);
    this.stage.add(this.layer);
    // 新增调用，适配当前画布缩放比例
    this.updateLabelSizes()
}

可选优化 #

如果场景中存在不需要固定尺寸的Label，可在创建时添加自定义属性标记，更新时仅处理目标Label：

// 创建Label时添加自定义标记
createLabel(x: number, y: number) {
    return new Konva.Label({
        x: x,
        y: y,
        opacity: 0.75,
        // 自定义属性，标记需要固定视觉尺寸
        keepStaticSize: true
    });
}

// 更新方法中筛选处理目标Label
updateLabelSizes() {
  const scaleX = this.stage.scaleX()
  const scaleY = this.stage.scaleY()
  this.layer.find('Label').forEach(label => {
    if (label.attrs.keepStaticSize) {
      label.scaleX(1 / scaleX)
      label.scaleY(1 / scaleY)
    }
  })
  this.layer.batchDraw()
}

该方案不需要单独调整Label内部Tag、Text的样式属性，内部元素会随Label整体缩放自动适配，保留原有样式比例。

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