Question

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

希望有人可以帮助我。谢谢！

Answer 1

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

Konva.Textpath更复杂，例如它可以跟随曲线。

运行代码段。

＆＃13;

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()

＆＃13;

<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>

＆＃13;

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

1 个答案: