2

Kinetic.TextPathKineticjsを使用してパスに沿ってテキストを中央に配置する方法はありますか?

そうでない場合、誰かが回避策を知っていますか? 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 に答える