如何使用动力学js使文本沿着Kinetic.TextPath居中 [英] How to center text along Kinetic.TextPath with kineticjs

问题描述

是否可以在Kineticjs中使用Kinetic.TextPath将文本沿路径居中.

Is there a way to center text along a path using Kinetic.TextPath in Kineticjs.

如果没有，有人知道解决方法吗?我已经探究了svg textpath选项，但不确定如何将该svg转换为dynamicjs.

If not, does anyone know a workaround? I have explored the svg textpath option but not sure how to get this svg into kineticjs.

我也尝试过使用空格来手动分隔文本，但是dynamicjs似乎将字符转换为普通空格. text.setText(String.fromCharCode(8202))

I have also tried to space the text manually using hair spaces but kineticjs seems to convert the character to a normal space eg. text.setText(String.fromCharCode(8202))

推荐答案

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

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

I checked the source code here: github.com/ericdrowell/KineticJS/blob/master/src/plugins/… and there's nothing in the API to allow centering of text along a path. Is see you have tried the unsatisfying method of adding leading spaces. KineticJS has some very nice getXY-at-length-on-path functions that you could use to do it yourself. Text-on-path is made more complex because you have to account for rotation of the characters--a "K" will take up different width on the path based on how the curve requires the "K" to rotate.

在此处查看如何在现有文本路径中完成操作: https ://github.com/ericdrowell/KineticJS/blob/master/src/plugins/TextPath.js

See how it is done in the existing textpath here: https://github.com/ericdrowell/KineticJS/blob/master/src/plugins/TextPath.js

findSegmentToFitCharacter函数(从第177行开始)最具启发性.

The findSegmentToFitCharacter function (starting line 177) is most instructive.

这些相关功能可用于编写以自己动手为中心的文本路径

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

所以您要做的是:

• 确定路径的中心XY.
• 确定文本的中心(通过宽度或字符数)
• 从路径的中心点向前拖动文本的后半部分.
• 从路径的中心点向后绘制文本的前半部分(顺序相反).

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

The findSegmentToFitCharacter nicely shows how to rotate each character at the appropriate angle.

良好的编码！ …如果您愿意分享完成的结果，我将很感兴趣.

Good coding! …and I would be interested if you care to share your finished results.

顺便说一句，每当我深入KineticJS源码时，他们的代码总是给我留下深刻的印象.

As an aside, whenever I dive into KineticJS source, I am always impressed by their code.

这篇关于如何使用动力学js使文本沿着Kinetic.TextPath居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！