1

I have a circle and I want to draw some curved text across the top. Currently I am generating the circle and the text-path, however the text faces towards the outside of the circle and appears upside down to the reader. How do I flip the text to the correct orientation?

<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>
ubiQ
  • 791
  • 2
  • 7
  • 17
  • On Firefox it's as easy as side="right" on the textPath. On Chrome you'd have to reverse the path. – Robert Longson Oct 26 '20 at 14:43
  • Do you know how to reverse the path? I've been playing around with all the values of the data string with no luck. From my understanding I need to flip the x,y and rx,ry values but this isn't working. – ubiQ Oct 26 '20 at 16:19
  • 1
    There are [existing questions](https://stackoverflow.com/questions/34867980/reversing-an-svg-path) on that. – Robert Longson Oct 26 '20 at 17:02

1 Answers1

3

You just need to flip the direction of your path attribute. You will have to do it manually. a and A SVG commands are not simple to understand, so be careful.

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
});

Demo: https://jsbin.com/xapevekexe/1/edit?js,output

lavrton
  • 18,973
  • 4
  • 30
  • 63