2

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

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

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

4

1 回答 1

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 源代码时，我总是对他们的代码印象深刻。

于 2013-04-16T14:39:33.947 回答