1

我有一个圆圈，我想在顶部画一些弯曲的文字。目前我正在生成圆圈和文本路径，但是文本面向圆圈的外部并且在读者看来是颠倒的。如何将文本翻转到正确的方向？

<script src="https://unpkg.com/konva@3.1.0/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>
4

1 回答 1

2

您只需要翻转path属性的方向。您将不得不手动进行。a并且ASVG 命令并不容易理解，所以要小心。

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

于 2020-10-26T20:45:30.810 回答