8

HTML5でフォントグリフのアウトライン情報をベジエパスとして取得したい。これにより、アウトラインをランダム化できます。

ランダムに変更されたグリフのアウトライン

ココアでは、appendBezierPathWithGlyph:inFont:. Java では、TextLayout.getOutline(). これは JavaScript でどのように機能しますか?

Mozilla にあることを発見しましたがmozPathText、動作させることができません。

4

3 に答える 3

11

低レベルの解析

JavaScript では、書体ファイルを手動で解析し、必要なパス データを抽出する必要があります。知る限り、現時点ではこれのためのヘルパー ライブラリがないため、自分でこれを行う必要があります。

ファイルを解析するには、ファイルを手動でアップロードし、新しいファイル APIと可能なバイナリ フォント形式 (ttf) の型付き配列を使用して生データとして解析する必要もあります。

これはかなり低レベルのものであり、ここでカバーするために広範であるため、非常に長い回答を書くことができます(IMHO)。ただし、一般的なフォント ファイルのファイル形式の仕様は次のとおりです。

しかし、多くの手間を省くための中間ステップとして実行できる別のアプローチがあります。

事前解析

使用する書体を選択します。Java/Cocoa/.NET (WPF) または任意の方法でそれらを実行し、必要な情報を含む配列を作成します (たとえば、WPF は各グリフのパス データを提供します)。それらを JavaScript 配列または JSON オブジェクトに変換し、それらをレンダリングと操作に使用します。結果のポイントはem、スケーリングが容易な値になります。

これで、配列を調べて、パス セグメント タイプ (ライン、ベジエなど) をレンダリングし、ポイントの位置を変更することができます。

mozPathTextキャンバス用であり、テキスト パスを保持するだけです (現在、Path API はどのブラウザーでも公開されていませんが、将来公開される予定です。ただし、グリフごとの低レベル パス データは多くの理由で利用できないため、これには使用できません) 、法的な理由の 1 つである可能性があります)。

痕跡

3 番目のアプローチは、個々のグリフをトレースしてキャンバス上のグリフを「OCR」し、トレースされたアウトラインからパスを構築することです。

これにはいくつかの方法があります。1 つの方法は、行ごとに解析し、距離/接続性に基づいてピクセルをグループ化し、ニューラル ネットワークまたは塗りつぶしアルゴリズムを使用してグループ/領域を反復処理して、グリフの外側の境界を見つけることです。

または - テキストをアウトラインとして描画し、各形状の接続されたピクセルをトレースして、それをライン パスとして使用することもできます。

この場合、簡単そうに見えて実はそうではないという課題に出くわすかもしれません。

例: レターOは外側のパスと内側のパスで構成されています。内側のパスは、外側のパスに「穴」を開けます。キャンバスでパスを定義するだけでは、この動作を直接定義することはできないため、2 つのパスが互いに属していると判断した後、2 つのパスの間に「カット」を追加し、カットで結合する必要があります。

異なる複合モードを使用すると、そのような錯覚を作成するのに役立つ場合がありますが、どのパスがソリッド パーツで、どのパスが「穴」として描画されるかを決定する必要があります。

反り・歪み

最後のアプローチは、グリフ パスをまったく使用せず、補間とワープ グリッド (通常は 3D テクスチャに関連して使用される) を使用してビットマップをワープすることです。

http://davis.wpi.edu/~matt/courses/morph/2d.htm
ワーピング (pdf)
モーフィング (pdf)

独自のフォント/パスを定義する (手動トレース)

おそらくより明白なオプション: 独自のフォント パスを最初から定義します。フォント デザイナーを作成するか、画像を手動でトレースするか、パスを手動で定義する領域で、もう少し作業が必要です。"font-plotter" (トレース イメージを使用) はそれほど複雑ではありませんが、忍耐が必要です。

ブラウザーでキャンバスを使用して、プロットしている線を記録し、スムージング アルゴリズム (カーディナル スプライン + ニー検出) を使用して、きれいな丸い曲線と鋭い角を得ることができます。

それはすべて、最終的にどのような結果を望んでいるか、およびどれだけの作業を喜んで行うかによって異なります. 残念ながら、内部データは公開されていないため (おそらく今後も公開されることはないでしょう)、この点に関して無料のチケットはありません。

于 2013-06-28T08:36:58.307 に答える
0

SVG を使用すると、一部のブラウザでは、求めていることの逆を行うことができます。カスタム フォント グリフをベジエ パスとして指定し、それらを使用してテキストをレイアウトします。SVG フォントをインポートして、それに対して変換を実行することもできます。しかし、SVG は現在広くサポートされていますが、SVG フォントはサポートされていません。現在、Safari、Chrome、Opera のみがサポートされています。

システム フォントを使用してこれらのタイプの変換をベクター形式で行いたい場合、私が知っているどのブラウザーでもそれは不可能です。HTML や SVG には、インストールされたグリフのアウトライン パスを取得するための API がありません。(Flash のようなプラグインで使用できるものがあるかもしれませんが、しばらくテキスト API をチェックアウトしていませんでした。)

ラスター方式で問題がなければ、非表示のキャンバス要素を使用してオフスクリーン バッファーにテキストをレイアウトし、結果のピクセル マップを取得できます。次に、ピクセルベースの変換を実行し、それを 2 番目の可視キャンバス要素に描画できます。

于 2013-07-03T19:07:57.910 に答える