KineticJS中的textBaseline在哪里? [英] Where is textBaseline in KineticJS?

问题描述

我找不到显示如何在KineticJS中更改画布的textBaseline属性的教程或文档.如果您在Kinetic.Text文档中查找 ，您将不会发现任何有关基础"的内容..的任何内容，而运动文本教程则不演示其用法. textBaseline是否已将其添加到KineticJS中?

I cannot find a tutorial or documentation showing how to change canvas's textBaseline property in KineticJS. If you look in the Kinetic.Text documentation you won't find any mention of "base.." anything, and the Kinetic Text tutorial does not demonstrate its use either. Did textBaseline make it into KineticJS?

我做了 jsFiddle此处，显示了textBaseline如何在原始画布元素上工作，但我无法弄清楚排除在KineticJS中执行相同操作的属性.我知道KineticJS的文档很粗糙；也许有财产，但只是没有提到?

I did a jsFiddle here showing how textBaseline works on a raw canvas element, but I cannot figure out the property for doing the same thing in KineticJS. I know the documentation is rough for KineticJS; perhaps a property is there but just not mentioned?

否-由于缩放问题，无法选择调整Y坐标.让我们在通过时傻掉头吧...

NO - adjusting the Y coordinate is not an option due to scaling issues. Let's head that silliness off at the pass...

下面的代码应该使用最底端的基线放置，但是正如您在小提琴中看到的那样，它使用了最顶".

The following code should be placed using a bottom baseline, but as you can see in the fiddle, it uses "top".

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

推荐答案

我不认为目前textBaseline的KineticJS解决方案.

I don't believe there is a KineticJS solution for textBaseline at the moment.

您必须改为使用offset方法或属性.

You'll have to use the offset method or property instead.

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

• 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
  });    

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

In the example above I am hard-coding the offset + font-size but you can easily set these values dynamically depending on your set of fonts and font-sizes.

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

JSFIDDLE Note in my JSFiddle, I set the stage scale to 0.5

这篇关于KineticJS中的textBaseline在哪里?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！