Question

我无法找到如何在KineticJS中更改canvas的textBaseline属性的教程或文档。如果你看in the Kinetic.Text documentation，你就不会发现任何关于“基础......”的内容，Kinetic Text tutorial也没有证明它的用途。 textBaseline是否已将其纳入KineticJS？

我做了一个jsFiddle here来展示textBaseline如何在原始画布元素上工作，但我无法弄清楚在KineticJS中做同样事情的属性。我知道KineticJS的文档非常粗略;也许有一处房产但是没有提到？

否 - 由于缩放问题，无法调整Y坐标。让我们在通行证上表示愚蠢......

以下代码应使用底部基线放置，但正如您在小提琴中看到的那样，它使用“顶部”。

  var text_b = new Kinetic.Text({
    x: 25,
    y: 100.5,
    text: 'Bottom',
    fontSize: 18,
    fontFamily: 'Verdana',
    fill: 'black'
  });

Answer 1

我不相信目前有textBaseline的KineticJS解决方案。

您必须使用offset方法或属性。

例如设置offset属性：

  var text_b = new Kinetic.Text({
    x: 25,
    y: 100.5,
    text: 'Bottom',
    fontSize: 18,
    fontFamily: 'Verdana',
    fill: 'black',
    offset: [0, 18] //Offset by full font-size
  });

  var text_m = new Kinetic.Text({
    x: 175,
    y: 100.5,
    text: 'Middle',
    fontSize: 18,
    fontFamily: 'Verdana',
    fill: 'black',
    offset: [0, 9] //Offset by half of font-size
  });

  var text_t = new Kinetic.Text({
    x: 300,
    y: 100.5,
    text: 'Top',
    fontSize: 18,
    fontFamily: 'Verdana',
    fill: 'black' //No offset, as you said the default was top alignment
  });

在上面的示例中，我对offset + font-size进行了硬编码，但您可以根据您的字体和字体大小轻松动态设置这些值。

JSFIDDLE请注意，在我的JSFiddle中，我将舞台比例设置为 0.5

KineticJS中的textBaseline在哪里？

1 个答案: