Как я могу добавить HTML-тег «sup» и «sub» в текстовой форме, когда я использую Konva.Text? - PullRequest
Новая
       7

Как я могу добавить HTML-тег «sup» и «sub» в текстовой форме, когда я использую Konva.Text?

0 голосов
/ 01 апреля 2019

KonvaJS - отличный плагин Canvas, он прост в использовании, много демонстраций и подробный документ API.

Но у меня проблема с Konva.Text, когда я хочу отобразить дробное число, например " 7 / 8", это просто текст 7 / 8 , как мне это сделать?

Насколько я знаю, в ткани есть аналогичные методы, называемые setSuperscript и setSubscript, может ли быть достигнут наш Konva.Text?

1 Ответ

0 голосов
/ 01 апреля 2019

Предлагаю нарисовать его вручную тремя фигурами: 

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

...