考虑到附加参数如何获得 Konva.TextPath 宽度

Question

美好的一天，reader。

我正在尝试使用 Konva 创建带有动态路径的弯曲文本，所以我将 Konva.Text 转移到 Konva.TextPath，添加到 Text attrs 计算路径（代码示例写在最后） ，尽管考虑到下面列出的其他参数，我无法获得 Konva.TextPath 的正确宽度。我试过这个方法`

• textNode.textwidth
• textNode.width()
• textNode.textWidth()
• textNode.getClientRect().width // 弯曲时尺寸错误

最接近我想要的是第3个选项（好像和第1个一样？）。

有没有办法获取Konva.Text路径的宽度，同时考虑像`

这样的参数

• 字体，
• 字体大小，
• 字母间距，

我阅读了文档，浏览了 Whosebug，但找不到任何方法。有什么我遗漏的吗？

function redraw(originTextNode: Konva.Text | Konva.TextPath)
   const textWidth = textNode.textWidth();
   const calcedNewPath = calcNewPath({...other, textWidth })

   const textNode = Konva.TextPath({
     ...originTextNode.getAttrs(),
     data: calcedNewPath,
});

谢谢

Answer 1

您可以使用 textPath.getTextWidth() 获得文本的宽度而无需 letterSpacing 调整。它将包括 fontFamily（如果加载了字体）和 fontSize。如果您想将 letterSpacing 应用于该值，您可以这样做：

var fullWidth = textPath.getTextWidth() + (textPath.text().length - 1) * letterSpacing;

呈现的文本路径的实际长度与路径的长度相比仍可能略有不同。