textBaseline在KineticJS在哪里？

Question

我找不到说明如何在textBaseline中更改画布的KineticJS属性的教程或文档。如果你看上去像在Kinetic.Text文档中，你就不会发现任何关于“基地”的地方。任何东西，动态文本教程也没有演示它的用途。textBaseline成功进入KineticJS了吗？

我做了一个jsFiddle在这里，展示了textBaseline是如何在原始画布元素上工作的，但我无法找到在KineticJS中执行相同操作的属性。我知道文档对于KineticJS来说很粗糙；也许有一个属性，但是没有提到？

不-调整Y坐标不是一个选项，因为缩放问题。让我们把那愚蠢的东西带到关口去.

下面的代码应该使用底部基线放置，但正如您在小提琴中看到的，它使用"top“。

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

Answer 1

我认为目前还没有针对KineticJS的textBaseline解决方案。

您将不得不使用offset方法或属性。

• Kinetic.Shape#getOffset
• Kinetic.Shape#getOffsetX
• Kinetic.Shape#getOffsetY
• Kinetic.Shape#setOffset
• Kinetic.Shape#setOffsetX
• Kinetic.Shape#setOffsetY

例如，设置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