Precise Difference between Konva.TextPath and Konva.Text classes?

Question

Can anyone elaborate the precise difference between using Konva.TextPath and Konva.Text classes?I am using Konva.js library in my project and I have searched this issue everywhere but there isn't any clear explanation regarding this.

Hope someone can help me out.Thanks!

Answer 1

Konva.Text is simple text on a line.

Konva.Textpath is more complex, for example it can follow a curve.

Run the snippet.

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

var layer = new Konva.Layer();
stage.add(layer);




var kerningPairs = {
  'A': {
    ' ': -0.05517578125,
    'T': -0.07421875,
    'V': -0.07421875,
  },
  'V': {
    ',': -0.091796875,
    ":": -0.037109375,
    ";": -0.037109375,
    "A": -0.07421875,
  }
}
var textpath = new Konva.TextPath({
  x: 100,
  y: 20,
  fill: '#333',
  fontSize: '24',
  fontFamily: 'Arial',
  text: 'Textpath - literally text on a path.',
  data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50',
  getKerning: function(leftChar, rightChar) {
    return kerningPairs.hasOwnProperty(leftChar) ? pairs[leftChar][rightChar] || 0 : 0
  }
});
layer.add(textpath)

var text = new Konva.Text({
  x: 0,
  y: 5,
  text: 'Konva.Text = simple text.',
  fontSize: 30,
  fontFamily: 'Calibri',
  fill: 'green'
});
layer.add(text);
stage.draw()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>


<div id='container'></div>