如何使用 kineticjs 将文本沿 Kinetic.TextPath 居中

Question

有没有办法在 Kineticjs 中使用 Kinetic.TextPath 使文本沿路径居中。

如果没有，有人知道解决方法吗？我已经探索了 svg textpath 选项，但不确定如何将此 svg 放入 kineticjs。

我也尝试使用头发空间手动分隔文本，但 kineticjs 似乎将字符转换为正常空间，例如。 text.setText(String.fromCharCode(8202))

Answer 1

标准文本路径没有沿路径居中的文本

我在这里查看了源代码：github.com/ericdrowell/KineticJS/blob/master/src/plugins/... API 中没有任何内容允许文本沿路径居中。看到您尝试了添加前导空格的不令人满意的方法。 KineticJS 有一些非常好的 getXY-at-length-on-path 函数，您可以使用它们自己来完成。路径上的文本变得更加复杂，因为您必须考虑字符的旋转——“K”将根据曲线要求“K”旋转的方式在路径上占据不同的宽度。

在现有文本路径中查看它是如何完成的：https://github.com/ericdrowell/KineticJS/blob/master/src/plugins/TextPath.js

findSegmentToFitCharacter 函数（从第 177 行开始）最具指导意义。

这些相关函数可用于编写以自己为中心的文本路径

Kinetic.Path.getLineLength
Kinetic.Path.getPointOnEllipticalArc
Kinetic.Path.getPointOnCubicBezier
Kinetic.Path.getPointOnQuadraticBezier

所以你要做的是：

• 确定路径的中心 XY。
• 确定文本的中心（按宽度或字符数）
• 从路径的中心点向前绘制文本的后半部分。
• 从路径的中心点向后绘制文本的前半部分（以相反的顺序）。

findSegmentToFitCharacter 很好地展示了如何以适当的角度旋转每个字符。

编码好！ …如果你愿意分享你完成的结果，我会很感兴趣。

顺便说一句，每当我深入研究 KineticJS 源代码时，我总是对他们的代码印象深刻。