当我使用Konva.Text时，如何在文本形状中添加html标签“sup”和“sub”？

Question

KonvaJS是一个优秀的画布插件，它易于使用，很多演示和详细的api文档。

但我有一个关于Konva.Text的问题，当我想显示像“7/8”这样的分数时，它显示为纯文本<sup> 7 </ sup> / <sub> 8 </ sub>，怎么能我做？

据我所知，fabric有类似setSuperscript和setSubscript的方法，我们的Konva.Text可以实现吗？

Answer 1

我建议用三种形状手动绘制它：

function createFraction(sup, sub) {
  const group = new Konva.Group();
  group.add(new Konva.Text({
    align: 'right',
    width: 100,
    x: -100,
    text: sup
  }));
  group.add(new Konva.Text({
    text: sub,
    y: 13,
    x: 2
  }));
  group.add(new Konva.Line({
    stroke: 'black',
    strokeWidth: 1,
    points: [5, 4, -5, 20],
    text: sub,
  }));
  return group;
}


const fraction = createFraction('7', '8');
fraction.position({ x: 50, y: 50});

layer.add(fraction);

https://jsbin.com/vahavimowa/edit?html,js,output