Konva.TextPath 和 Konva.Text 类之间的精确区别？

Question

任何人都可以详细说明使用 Konva.TextPath 和 Konva.Text 类之间的确切区别吗？我在我的项目中使用 Konva.js 库，我到处搜索了这个问题但是对此没有任何明确的解释。

希望有人能帮助我out.Thanks！

Answer 1

Konva.Text 是一行上的简单文本。

Konva.Text路径比较复杂，比如可以走曲线。

运行片段。

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>

Konva.TextPath 和 Konva.Text 类 之间的精确区别？

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

konvajs

Konva.TextPath 和 Konva.Text 类之间的精确区别？