Konva.Text插入emoji仅显示线条而非填充表情的问题如何解决？

Konva.Text默认使用的通用字体未内置彩色emoji矢量资源，画布像素比适配不足时，就会出现emoji仅渲染为线条轮廓的问题，可通过以下方法修复：

• 配置跨平台emoji字体栈
  在Konva.Text参数中新增fontFamily配置，优先调用各系统自带的彩色emoji字体：

let complexText = new Konva.Text({
  x: 0,
  y: 0,
  text: "🔑 hello World 🤗",
  fontSize: 12,
  fill: "#003049",
  width: stage.width() - 10,
  padding: 5,
  align: "center",
  fontFamily: 'Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, sans-serif'
});

• 调整Stage像素比
  配置字体后仍有渲染异常的话，可在初始化Stage时设置像素比匹配设备屏幕参数，避免低分辨率下渲染失真：

const stage = new Konva.Stage({
  container: '你的容器ID',
  width: 自定义宽度,
  height: 自定义高度,
  pixelRatio: window.devicePixelRatio || 2
});

• 兜底兼容方案
  如果需要兼容不支持彩色emoji字体的旧设备，可将文本中的emoji单独提取为图片资源，通过Konva.Image和普通文本拼接实现预期效果。

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