如何使用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”旋转的方式在路径上占用不同的宽度。

在此处查看现有文本路径中的完成方式：{​​{3}}

findSegmentToFitCharacter函数（起始行177）最有启发性。

这些相关功能可用于编写以DIY为中心的文字路径

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

所以你需要做的是：

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

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

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

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