在文本路径上选择字体大小答案

【问题标题】：Choosing font size on a text path在文本路径上选择字体大小
【发布时间】：2013-01-09 15:03:30
【问题描述】：

我正在开发一个径向菜单（用于游戏），但在获取路径上的文本以完全按照我的意愿行事时遇到了一些麻烦。 Here's此刻的菜单示例：

我希望所有文本都与其所在节点的中心对齐，并且 fontSize 足够小以使文本适合可用空间。通过缩放字体并测量宽度直到合适为止，这对于纯文本来说是相当简单的：

var fontSize = 19;
var titleText = new Kinetic.Text({
    text: title,
    fontSize: fontSize ,
    fontFamily: 'Calibri',
    fill: 'white',
    rotationDeg: rotation
});


while (titleText.getWidth() > availableSpace)
    titleText.setFontSize(--fontSize);

但是，这种方法不能应用于弯曲的文本，因为（据我所知）没有办法测量沿路径放置字符串时的长度。

当文本沿路径放置时，我应该如何实现文本的居中和缩放？

【问题讨论】：

jsfiddle.net/ysaLp
请原谅真正糟糕的javascript，我对javascript相当陌生！
您感兴趣的函数是 CreateOptionWedge，它创建 1 个单个楔形、一行文本并返回包含两者的组。
javascript很好，结构很好。首先，您需要一个根据弧的宽度调整字体大小的函数，因为您的弧都是相同的宽度，您可以对字符数量执行类似 text.length 的操作，并执行循环将字体大小设置为更小，直到文本路径的宽度与弧的宽度匹配
那么对一段线性文本执行重新缩放，然后使用我在那里计算的字体大小作为路径上的文本？刚刚测试过，效果很好，谢谢：D

标签： html5-canvas kineticjs

【解决方案1】：

这是一个关于居中的技巧，但你明白了：

http://jsfiddle.net/ysaLp/2/

基本上，当您的列表中包含每个项目时，您希望在开头添加空格，具体取决于弧中的总空间。

你可以这样做（同样，在循环内）：

textPathObjectName.setText(' ' + textPathObjectName.getText()); //dependent on the length of the width of text ( .getTextWidth() )

在调整大小方面你得到：http://jsfiddle.net/ysaLp/5/

    for (var i = 1; i < 5 && titleText.getTextWidth() > circumference ; i++)
        titleText.setFontSize(titleText.getFontSize()-i);

这会降低你的字体，直到它“适合”你的楔形圆周

它还有助于以较低的值开始字体，因为您正在计算路径数据，所以首先将字体大小设置为 15。

【讨论】：