选择文本路径上的字体大小

Question

我正在研究一个放射状菜单（对于一个游戏）而且我在沿着路径获取文本时遇到了一些麻烦，以确切地表达我喜欢它的方式。 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);

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

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

Answer 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。