Question

KonvaJS是一个出色的canvas插件，它易于使用，提供了许多示例以及详细的api文档。

但是我有一个关于Konva.Text的问题，当我想显示像“ ⁷ / ₈”之类的分数时，它显示为纯文本⁷ / ₈，我该怎么办？

据我所知，织物具有类似的名为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

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

1 个答案: