KonvaJS Отразить текст поверх круга

У меня есть круг, и я хочу нарисовать изогнутый текст сверху. В настоящее время я создаю круг и текстовый путь, однако текст обращен к внешней стороне круга и отображается для читателя вверх ногами. Как мне перевернуть текст в правильную ориентацию?

<script src="https://unpkg.com/[email protected]/konva.js"></script>
<div id="demo"></div>
<script type="text/javascript>

var stage = new Konva.Stage({
  container: 'demo',
  width: 500,
  height: 500,
});

var layer = new Konva.Layer();

var circle = new Konva.Circle({
  x: 250,
  y: 250,
  radius: 50,
  fill: '#FFFFFF',
  stroke: 'black',
  strokeWidth: 1
});

layer.add(circle);

var text = new Konva.TextPath({
  x: 250,
  y: 250,
  fill: '#000',
  textBaseline: 'hanging',
  fontSize: 15,
  fontFamily: 'Calibri',
  text: 'SOME TEXT',
  align: 'center',
  data: 'M 30 0 A 30 30 0 0 0 -30 0'
});

layer.add(text);
stage.add(layer);
layer.draw();

</script>

javascript svg konvajs konva
person ubiQ    schedule 26.10.2020    source источник
comment
В Firefox это так же просто, как side = прямо в textPath. В Chrome вам придется изменить путь.   -  person Robert Longson    schedule 26.10.2020
comment
Вы знаете, как изменить путь? Я безуспешно играл со всеми значениями строки данных. Насколько я понимаю, мне нужно перевернуть значения x, y и rx, ry, но это не работает.   -  person ubiQ    schedule 26.10.2020
comment
По этому поводу есть существующие вопросы.   -  person Robert Longson    schedule 26.10.2020

Ответы (1)


arrow_upward
2
arrow_downward

Вам просто нужно изменить направление вашего атрибута path. Придется делать это вручную. a и A Команды SVG непросто понять, поэтому будьте осторожны.

var PATH = 'M 0 30 a 30 30 0 1 1 1 0';

var text = new Konva.TextPath({
  x: 250,
  y: 250,
  fill: '#000',
  textBaseline: 'bottom',
  fontSize: 15,
  fontFamily: 'Calibri',
  text: 'SOME TEXT',
  align: 'center',
  data: PATH
});

Демо: https://jsbin.com/xapevekexe/1/edit?js,output < / а>

person lavrton    schedule 26.10.2020