0

我正在开发一个径向菜单（用于游戏），并且在获取沿路径的文本以完全按照我想要的方式运行时遇到了一些麻烦。这是目前菜单的示例：

轻微破碎

我希望所有文本都与它所在的节点的中心对齐，并且 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);

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

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

4

1 回答 1

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。

于 2013-01-25T16:43:36.313 回答