Html5 canvas 在文本路径上选择字体大小

我正在处理一个径向菜单（用于一个游戏），我在沿着路径获取文本时遇到了一些问题，无法完全按照我希望的方式进行操作。目前的菜单示例如下：

我希望所有文本都与它所在节点的中心对齐，并且字体大小要足够小，以便文本能够容纳到可用空间中。通过缩放字体和测量宽度，直到符合以下要求为止，对于直文本而言，这是非常简单的：

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

但是，这种方法不能应用于曲线文本，因为（就我所见）无法测量沿路径放置字符串时的长度

---

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

这里有一个关于居中的技巧，但您可以理解：

基本上，当列表中有每个项目时，您希望根据弧中的总空间在开始处添加空格

您可以执行（同样，在循环中）：

在调整尺寸方面，您可以获得：

for（var i=1；i<5&&titleText.getTextWidth（）>周长；i++）
titleText.setFontSize（titleText.getFontSize（）-i）；

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

---

这也有助于以较低的值启动字体，因为您正在计算路径数据，所以请先将字体大小设置为15。

请原谅这非常糟糕的javascript，我对javascript相当陌生！您感兴趣的函数是CreateOptionWedget，它创建一个楔形形状，一行文本，并返回一个包含这两个形状的组。javascript很好，结构也很好。首先，您需要一个函数，该函数根据弧的宽度调整字体大小，因为弧的宽度都相同，您可以对字符数执行text.length之类的操作，并循环将字体大小设置为更小，直到文本路径的宽度与弧的宽度匹配，然后对一段线性文本执行重缩放，然后使用我计算的字体大小来处理路径上的文本？刚刚测试过，效果很好，谢谢

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

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