kineticjs - KineticJS 中的 textBaseline 在哪里？

Question

我找不到说明如何在 KineticJS 中更改画布的 textBaseline 属性的教程或文档。如果您查看Kinetic.Text 文档，您将找不到任何提及“base..”的任何内容，并且Kinetic Text 教程也没有演示它的使用。textBaseline 是否进入了 KineticJS？

我在这里做了一个 jsFiddle，展示了 textBaseline 如何在原始画布元素上工作，但我无法弄清楚在 KineticJS 中做同样事情的属性。我知道 KineticJS 的文档很粗糙；也许有一个属性但没有提到？

否 - 由于缩放问题，不能调整 Y 坐标。让我们在通行证上摆脱这种愚蠢......

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

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

score 1 · Accepted Answer

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

您必须改用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
  });

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

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

kineticjs - KineticJS 中的 textBaseline 在哪里？

1 回答 1

Related

Reference