如何在Konva.js中将两个图形合并为单个图形并添加统一描边？

针对你遇到的两个独立Konva.Text无法统一加描边的问题，有两种可行方案，可根据需求选择：

方案一：自定义Shape实现文本内容的整体轮廓描边 #

如果需要的是两个文本内容合并后的整体轮廓描边（不是矩形外框），可以通过Konva.Shape自定义绘制逻辑，把两个文本作为同一个Shape的一部分绘制，从而实现统一描边：

// 自定义组合文本Shape
const combinedText = new Konva.Shape({
  x: 20, // 整体位置
  y: 20,
  stroke: 'black', // 统一描边颜色
  strokeWidth: 3, // 统一描边宽度
  drawFunc: function(context) {
    // 匹配原Text的字体样式（请根据实际情况调整）
    context.font = '16px Arial';
    
    // 绘制第一个文本（相对于Shape的坐标）
    context.fillStyle = 'blue';
    context.fillText('First Text', 0, 0);
    
    // 绘制第二个文本（调整y值控制间距，和原text2位置对应）
    context.fillStyle = 'red';
    context.fillText('Second Text', 0, 25);
    
    // 执行Konva的描边逻辑
    context.stroke(this);
  }
});

// 添加到图层并渲染
layer.add(combinedText);
layer.draw();

注意：需要保证drawFunc里的字体、字号等样式和原Konva.Text实例一致，否则显示效果会有差异。

方案二：用背景矩形实现整体外框描边 #

如果只需要包裹两个文本的矩形外框描边，可以把两个文本放入Konva.Group，再添加一个和Group包围盒匹配的透明描边矩形作为背景：

// 创建Group并添加两个文本
const group = new Konva.Group({
  x: 20,
  y: 20
});
group.add(text);
group.add(text2);
layer.add(group);
layer.draw();

// 获取Group的实际包围盒
const groupBounds = group.getClientRect();

// 创建描边矩形，放在文本下方作为背景
const outline = new Konva.Rect({
  x: groupBounds.x,
  y: groupBounds.y,
  width: groupBounds.width,
  height: groupBounds.height,
  stroke: 'black',
  strokeWidth: 3,
  fill: 'transparent',
  listening: false // 避免干扰文本的交互事件
});

// 将矩形插入到Group的最底层
group.addBefore(outline, text);
layer.draw();

补充说明 #

Konva.Group本身是容器组件，不负责渲染具体图形，因此不支持stroke、strokeWidth这类图形样式属性，无法直接通过Group实现统一描边。上述两种方案分别对应不同的描边需求，可根据实际场景选择。

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