0

美好的一天，读者。

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

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

最接近我想要的是第 3 个选项（似乎与第 1 个相同？）。

有没有考虑到像`这样的参数来获得Konva.TextPath的宽度

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

我阅读了文档，查看了stackoverflow，但找不到任何方法。有什么我错过的吗？

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

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

谢谢

4

1 回答 1

2

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

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

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

于 2020-12-17T20:52:44.850 回答