Konva.js视图缩放时增大线段长度文本字号的实现问询

要实现缩小视图时增大长度文本的尺寸，核心思路是根据Konva舞台的缩放比例反向计算文本字号——当舞台缩放值小于1（视图缩小），让字号按缩放比例的倒数放大，这样文本在视觉上的大小能保持清晰可读，不会因为视图缩小而变得模糊难辨。

具体实现步骤 #

• 获取当前舞台缩放比例：Konva舞台的缩放状态可通过stage.scale()获取，通常x和y方向的缩放值一致，取其中一个即可。
• 动态计算字号：设定一个基础字号（比如你原本固定的12），用基础字号 / 缩放比例得到新字号。这样当视图缩小（缩放比例<1），字号会自动增大；视图放大时字号相应缩小，保证文本视觉大小相对稳定。
• 监听缩放事件触发重绘：给舞台绑定缩放变化事件，确保缩放操作完成后自动重新绘制线段和文本，让字号实时更新。

修改后的代码片段 #

先定义基础字号常量，再在创建长度文本时替换为动态计算的字号，同时添加缩放事件监听：

// 定义基础字号（可根据需求自行调整）
const BASE_FONT_SIZE = 12;

function redrawSegments(segArray){
 drawLayer.destroy();
 segGrp = new Konva.Group({name:'segments'});
 cornGrp = new Konva.Group({name:'corners'});
 tGrp = new Konva.Group({name:'tconnections'});
 lenGrp = new Konva.Group({name:'lengths'});
 
 // 获取当前舞台的缩放比例（假设你的舞台变量名为stage）
 const currentScale = stage.scale().x;
 // 动态计算字号：基础字号除以缩放比例，实现缩小视图时字号增大
 const dynamicFontSize = BASE_FONT_SIZE / currentScale;

 /* SEGMENTS */
 for(var i=0;i<segArray.length;i++){
 // --- 原有的线段绘制、事件绑定代码保持不变 ---

 // Length indicator
 var lenTxt = new Konva.Text({
 align: 'center',
 verticalAlign: 'middle',
 fontSize: dynamicFontSize, // 替换为动态计算的字号
 resizeEnabled:true
 });

 // --- 原有的文本位置设置、长度赋值代码保持不变 ---

 lenGrp.add(lenTxt);
 }
 drawLayer.add(segGrp);
 drawLayer.add(lenGrp);
 drawLayer.draw(); // 记得最后调用draw()更新图层
}

// 监听舞台缩放变化，触发重绘更新文本
stage.on('scalechange', function() {
 redrawSegments(segArray); // 确保segArray在此作用域可访问
});

额外优化建议 #

• 可以给动态字号加范围限制，避免极端缩放时文本过大或过小：

  const dynamicFontSize = Math.max(8, Math.min(36, BASE_FONT_SIZE / currentScale));
  

  这样字号会被限制在8~36之间，避免显示异常。
• 如果文本位置、宽度在缩放后出现偏移，也可以同步根据缩放比例调整这些属性，比如：

  // 以水平线段为例，调整x坐标和宽度
  lenTxt.x(drawShape.attrs.points[0] / currentScale);
  lenTxt.width( (lenTot/gridSizeInMM * gridSize) / currentScale );
  

  这一步需要结合你的网格逻辑微调，确保文本始终对齐线段。

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