ベクタ･フォント

TouchGFXバージョン4.23から、ベクタ･フォーマットのフォントの使用がサポートされています。 ベクタ･フォーマットで格納されるフォントは、フォント･データがすべてのフォント･サイズで共有されるため、データ･サイズを小さくできる可能性があります。 これは、すべてのフォント･サイズにそのサイズのグリフ専用のビットマップを持つビットマップ･フォントとは対照的です。

ベクタ･フォントは、TextAreaやButtonWithLabelなどのウィジェットで使用する通常のビットマップ･フォントと同様に、ユーザ･インタフェースで使用されます。

ベクタ･フォント･フォーマットを使用するには、STM32CubeMXのプラットフォームでベクタ･フォント機能を有効にする必要があります。

ベクタ･フォントは、16bpp、24bpp、または32bppのフレームバッファのみでサポートされます。

ベクタ･フォントとは

ベクタ･フォントは、個々の文字が曲線と直線で表されるフォントです。 これらの曲線と直線は、さまざまなサイズのグリフを生成するために拡大 / 縮小できます。 TouchGFXで通常使用するフォントはすべてベクタ･フォント（TrueTypeやOpenTypeフォントなど）です。 TouchGFX Designerがアセットを生成すると、フォント記述で使用されている曲線と直線は、TouchGFX Font Converterによって多数の小さいビットマップに変換されます。

ベクタ･フォントのビットマップへの変換は、TouchGFX Designerで定義されているタイポグラフィに基づきます。 たとえば、あるアプリケーションでLargeとSmallの2種類のタイポグラフィを使用するとします。 Largeはサイズ30のVerdanaをベースに、Smallはサイズ20のVerdanaをベースにします。 アプリケーションでこれらのタイポグラフィのグリフA～Zとa～zを使用している場合、各タイポグラフィのグリフは52個ですが、アプリケーションには104個のビットマップが含まれます。文字ごとに2種類のビットマップがあるからです。 サイズ30とサイズ20の2種類のビットマップです。

グリフのベクタ定義を保持し、グリフのビットマップが作成されないという点で、ベクタ･フォントは異なります。 代わりに、このベクタ定義は1回だけターゲット･アプリケーションに組み込まれます。 2つのタイポグラフィの生成に必要な追加データは、2種類のスケーリング･ファクタのみです。 ベクタ定義をサイズ30にスケーリングするものと、サイズ20にスケーリングするものです。

その結果、別のタイポグラフィ･サイズ、たとえばサイズ40のVerdanaをサンプルのアプリケーションに追加しても、必要とするFlashサイズの増加はわずかです。

例

例を挙げると、TruetypeフォントVerdanaの［G］のベクタ定義は170バイトです。

グリフを表すビットマップのサイズは、使用されるbppとグリフのサイズに応じて異なります。 次の表では、4bppのさまざまなグリフ･サイズでの［G］のビットマップ･サイズを示しています。

フォント･サイズ	Gのグリフ･サイズ（pixels）	ビットマップ･サイズ（bytes）
20	14 x 14	98
30	21 x 22	242
40	27 x 32	448
合計		788

フォント･サイズ20のビットマップ･サイズは［G］のベクタ定義よりも小さいですが、すでにサイズ30でベクタ定義がビットマップ･サイズよりも小さくなっています。 また、3種類のサイズのVerdanaを使用する場合、ビットマップでは788バイトを使用しますが、ベクタ定義では170バイトしか使用しません。 したがって、Flash使用量を78%節約できます。

このストレージの節約には、パフォーマンス上のデメリットがあります。 グリフを描画する必要がある場合、ベクタ定義をピクセルに変換する必要があります。 それには、グリフのベクタ定義をスケーリングおよび変換してから、フレームバッファに描画します。

Verdanaでは1つの［G］は20本のベジェ曲線と6本の直線で構成されます。 これらはすべてアウトラインに変換され、最終的に選択したテキストの色を使用して色付けされます。 このプロセスはがテキスト内のすべての文字について繰り返され、テキストが再描画されるたびに繰り返されます。

上記のプロセスは、それがうまく機能するGPU2Dを搭載したマイクロコントローラ（STM32U5G9など）でハードウェア･アクセラレーションされます。 STM32G0のような低速のマイクロコントローラでは、浮動小数点ハードウェアがなければ、ハードウェアがこうした動作を実行するには非常に大きな負荷となります。

そのような場合、ビットマップ･フォントが使用されていると、描画時間が短くなります。 したがって、Flashの節約が必要な場合はベクタ･フォントを使用し、それ以外の場合はビットマップ･フォントを使用することをお勧めします。
テキストがアニメーション（スクロール、移動またはフェード）になっている場合は、ビットマップ･フォントの使用をお勧めします。

設定

ベクタ･フォントの使用には、追加のフレームワーク機能であるVector RenderingとVector Fontsが必要です。 これらはSTM32CubeMXで有効になっています。 詳細については、Generator User Guideを参照してください。

タイポグラフィはTouchGFX Designerで設定します。 ここで、プロジェクトのタイポグラフィにビットマップ･フォント･フォーマットまたはベクタ･フォント･フォーマットのどちらを使用するのか選択できます。 デフォルトはビットマップ･フォント･フォーマットです。

ベクタ･フォントの使用

TouchGFXでは、ベクタ･フォントはビットマップ･フォントと同じように使用されます。 テキストを名前付きリソースまたはシングル･ユース･テキストとして作成します。 そのテキストをウィジェットの1つ、たとえばTextAreaに表示します。 ベクタ･フォントとビットマップ･フォントとの違いは、描画コードに隠されています。

タイポグラフィ

ベクタ･フォントは、TouchGFX Designerでタイポグラフィがベクタ･ベースに設定されている場合に生成されます。 Designer User Guideを参照してください。

複数のタイポグラフィで同じフォント（Verdanaなど）を使用している場合は、タイポグラフィはプロジェクト内でベクタ定義を共有しますが、異なるサイズのグリフを生成するために異なるスケーリング･ファクタを使用します。

つまり、タイポグラフィ属性Fallback CharacterおよびEllipsis Characterもタイポグラフィ間で同じである必要があるということです。

タイポグラフィで使用される文字（ワイルドカード文字を含む）はまとめられ、同じフォントを使用するプロジェクトのすべてのタイポグラフィで使用可能になります。

アーキテクチャ

ベクタ･フォントの描画は、新しいコンポーネントVectorFontRendererに基づいています。 このコンポーネントは、VectorRendererコンポーネントを使用してグリフを描画します。

ベクタ･フォントを使用するプロジェクトでは、これら2つのコンポーネントを使用可能にする必要があります。 これらのコンポーネントが有効な場合は、これはSTM32CubeMXによって自動的に実行されます。 STM32CubeMXを使用していない場合は、手動で実行する必要があります。

次のSTM32CubeMXで生成されたコードでは、関連する行がハイライト表示されています。

static STM32TouchController tc;
static STM32DMA dma;
static TouchGFXDataReader dataReader;
static LCD16bppSerialFlash display(dataReader);
static VectorFontRendererImpl vectorFontRenderer;
static ApplicationFontProvider fontProvider;
static Texts texts;
static TouchGFXHAL hal(dma, display, tc, 240, 320);

void touchgfx_init()
{
    Bitmap::registerBitmapDatabase(BitmapDatabase::getInstance(), BitmapDatabase::getInstanceSize());
    TypedText::registerTexts(&texts);
    Texts::setLanguage(0);

    hal.setDataReader(&dataReader);
    fontProvider.setFlashReader(&dataReader);

    display.setVectorFontRenderer(&vectorFontRenderer);
    ...

VectorRendererコンポーネントも（TouchGFXGeneratedHAL.cppから）指定する必要があります。

namespace touchgfx
{
VectorRenderer* VectorRenderer::getInstance()
{
    static CWRVectorRendererRGB565 renderer;

    return &renderer;
}
} // namespace touchgfx

GPU2Dアクセラレータを搭載したプラットフォームでは、CWRVectorRendererRGB565ではなく、CPU2DVectorRendererを使用する必要があります。 これにより、ハードウェア･アクセラレーションが可能になります。

制限

Winding rules

Vector font typographies used in TouchGFX applications are required to follow certain rules in order for glyphs to be drawn correctly. Specifically, glyphs with overlapping outlines are sometimes not rendered correctly due to the winding rule deployed by TouchGFX when drawing vector fonts. To remove overlapping outlines from custom typographies, it is recommended to use the free FontForge tool.

Using FontForge

Navigate to the FontForge installation folder (usually c:/Program Files (x86)/FontForgeBuilds) and launch the .exe:

FontForge launch view.

Navigate to the assets/fonts/ folder of your project, e.g., c:/TouchGFXProjects/MyApplication/TouchGFX/assets/fonts/. FontForge will detect all the TrueType fonts in the application. In this example, the Cairo-Bold.ttf TrueType font contains overlapping outlines which are not drawn correctly:

FontForge open TrueType font view.

Clicking OK will open the font view of all the glyphs in the typography:

FontForge font view.

To remove overlapping contours from glyphs, select all glyphs in the font view with Ctrl + A. Next, with all glyphs selected use shortcut Ctrl + u followed by Ctrl + Shift + O to remove overlapping contours from selected glyphs. A blue mark will appear above all glyphs, indicating they have been changed. The effect can be seen by double-clicking on individual glyphs. An example is shown of the $ glyph from before and after removing overlapping contours below:

$-glyph with overlapping contours (left) and non-overlapping contours (right).

Observe that the outline of the glyph remains unaffected, but contours which were overlapping are merged. To use the non-overlapping typography in a TouchGFX application we use FontForge to export the new font. In the FontForge font view, use shortcut Ctrl + Shift + G to export the fonts. This opens the Generate Fonts view. It is recommended to rename the typography, e.g., with "-no-overlap" as a suffix, to avoid overwriting the original font in case of an error. Select TrueType as output format. The settings should be set as shown below:

FontForge generate font settings.

Press Generate to export the fonts. Press Yes if warnings appear. The exported typography will appear next to the original TrueType font in the assets/fonts/ folder of your project. The original font can be removed from this folder and placed elsewhere on disk, to avoid having multiple typographies of the same name appear in the TouchGFX Designer. Restart TouchGFX Designer to make the new font visible in the font selector. If you had generated code in TouchGFX Designer before modifying the font, make sure to remove the generated/fonts/ folder before generating code again.

ストレージ

ベクタ･フォント･データは、メモリ･マップド領域に格納する必要があります。 内部Flash、メモリ･マップド･モードの外部QSPI / OSPI Flash、RAM、またはその他の類似メモリなどに格納できます。

プラットフォームで他のフォント･データが非メモリ･マップド･データに格納される場合は、リンカ･スクリプトを変更して、すべてのベクタ･フォント･データを内部Flashなどに移動する必要があります。 次に、ARM gccを使用してこれを実行する方法を示します。

  /* Constant data into "FLASH" Rom type memory */
  .FontFlashSection :
  {
    . = ALIGN(4);
    */Vector_*.o(FontFlashSection)         /* Vector font data  */
    . = ALIGN(4);
  } >FLASH

  FontFlashSection :
  {
    *(FontFlashSection FontFlashSection.*)
    *(.gnu.linkonce.r.*)
    . = ALIGN(0x4);
  } >SPI_FLASH

これにより、フォント･データが */Vector_*.o/に一致するファイルからFLASH領域に格納され、その他のフォント･データがSPI_FLASH領域に格納されます。

ベクタ･フォント･データはgenerated/fonts/src/Vector_Font_Verdana.cppや類似のファイルに生成されます。

タイ語

タイ語がベクタ･フォントでは正確に描画できないことは既知の問題です。 対応策として、タイ語にはビットマップ･フォントを使用します。