テキスト描画

説明

Canderaでテキストを描画する最も簡単な方法は、TextNode2D、CGI Studio Widget Library の 3D テキスト ウィジェット、または 2D TextBrush 効果を使用することです。参照する：

Candera::TextNode2Dの使用方法については、次のセクションを参照してください。

Candera TextEngine インターフェイスを直接使用する方法の詳細については、次の章を参照してください。

章

Candera::TextNode2Dの使用 

章

概要

TextNode2D は、高速テキスト レンダリングに特化した RenderNode を表します。

テキストとスタイルを提供する必要があります。さらに、レンダリング用の BitmapBrush 効果と、関連付けられた BitmapBrush 効果によってレンダリングされる画像の生成に使用されるCandera::TextNodeRendererオブジェクトが必要です。

Candera::TextNodeRenderer の4 つの実装が利用可能で、それぞれが既存のCandera::TextBrushレンダリング コンセプト (ビットマップ、サーフェス、グリフ、およびグリフ キャッシュ) の 1 つの CacheType オプションに対応しています。

テキストのレイアウトは、 Candera::TextNode2DLayouter をノードにアタッチすることでサポートされます。Candera::TextNode2Dの関連テキストの配置と切り詰めを担当します。デフォルトのレイアウタは、水平方向と垂直方向の両方の切り捨てを実装しています。

レンダラー

Candera::TextNodeRendererオブジェクトは、提供されたテキストから正しい画像を生成するために使用されます。

Candera::TextNode2Dに適用されるレベル キャッシュ戦略を以下に説明します。

関連効果

Candera::TextNode2Dには BitmapBrush タイプのエフェクトのみが適用されることを考慮してください。他の効果が使用されている場合、何もレンダリングされません。テキストの外観は、インプレース効果 (色、マスク、HSL 変換など) を変更するか、ブレンド効果を変更することによって、選択した効果の種類によって変更できます。

使用できる BitmapBrush 効果のリストを以下に示します。

レイアウター

Candera::TextNode2DLayouter は、Candera::TextNode2Dに関連付けられたテキストの配置と切り詰めを担当します。Candera:: TextNode2DLayouter から派生した Candera:: DefaultTextNode2DLayouterは、テキストの切り捨てに使用されます。詳細については、次のセクションで説明します。

サブメニューに戻る

Candera::TextNode2D ガイドライン

TextNode2D をレンダリングするために最低限必要な手順は次のとおりです。

ノードと効果を定義する

Candera::TextNode2Dと関連する BitmapBrush 効果を定義します。

    TextNode2D* m_textNode;
    BitmapBrushColorBlend::SharedPointer m_textNodeEffect;

ノードとエフェクトを作成する

Candera::TextNode2D ::Create()メソッドを使用して、Candera::TextNode2D クラスのインスタンスを作成します。

    m_textNode = TextNode2D::Create();

同様の方法で BitmapBrush 効果を作成し、この効果を新しく作成したCandera::TextNode2Dに追加します。

    m_textNodeEffect = BitmapBrushColorBlend::Create();
    m_textNode->AddEffect(m_textNodeEffect.GetPointerToSharedInstance());

テキストを設定

Candera::TextNode2D::SetText()を使用して、レンダリングするテキストを指定します。

スタイルを設定

Candera::TextNode2D::SetStyle()を使用してスタイル オブジェクトを指定します。

    m_textNode->SetText("TextNode2D");

レンダラー

Candera::TextNode2D ::SetTextNodeRenderer()メソッドを使用して、Candera::TextNodeRendererを作成し、 Candera::TextNode2Dに設定します。

    m_textNode->SetTextNodeRenderer(&GlyphCacheTextNodeRenderer::GetInstance());

シーンに追加

最後に、 textNode をCandera::Scene2DまたはCandera::Group2Dに直接追加します。

    m_textNodeGroup->AddChild(m_textNode);

サブメニューに戻る

Candera::TextNode2D プロパティ

テキストの色

Candera::TextNode2Dの色の変更は、関連する BitmapBrush 効果によって行われます。エフェクトの使用によっては、すべての BitmapBrush エフェクトがカラー プロパティを公開するわけではありません。この場合、レンダリングされたテキストは白になります。

    m_textNodeEffect->GetColorEffect().Color().Set(Color(0.0f, 0.0f, 0.0f, 1.0f));

テキストの配置

テキストの配置は、 Candera::TextNode2Dのレイアウター プロパティによって実現されます。つまり、レイアウター内の位置と Candera ::TextNode2D内のテキストの位置は、同じ Candera::TextNode2DLayouter::SetHorizo​​ntalAlignment() によって変更されます。 Candera::TextNode2DLayouter::SetHorizo​​ntalAlignment() メソッドはレイアウタです。提供されたレイアウト オプションとは異なるテキスト位置が必要な場合は、 Candera::TextNode2Dをネストして、内側の TextNode に異なる配置値を設定することができます。

    TextNode2DLayouter::SetHorizontalAlignment(*m_textNode, Candera::HLeft);
    TextNode2DLayouter::SetVerticalAlignment(*m_textNode, Candera::VTop);

切り捨て

Candera::TextNode2D が提供する切り捨てタイプは 1 つだけです。切り捨てが必要な場合、テキストは切り取られ、スペースに合わせて末尾の省略記号が追加されます。デフォルトでは、切り捨てはサポートされていません。このためには、 Candera::DefaultTextNode2DLayouter をCandera::TextNode2Dにアタッチする必要があり(以下のスニペットを参照)、テキストのサイズがCandera::TextNode2Dの指定されたLayout Sizeプロパティに収まらなくなると、テキストは自動的に切り捨てられます。テキストの切り捨てを実行するとき、境界四角形のサイズは考慮されません。

    m_textNode->SetLayouter(&TextNode2DLayouter::GetDefault());

複数行のサポート

TextNode2D では、複数行のレイアウトがデフォルトで有効になっています。このプロパティは、Candera::TextNode2DLayouter::SetMultiLineEnabled() メソッドを使用して有効/無効にすることができます。

ワードラップのサポート

TextNode2D では、Wordwrap はデフォルトでは有効になっていません。このプロパティは、Candera::TextNode2DLayouter::SetWordWrapEnabled() メソッドを使用して有効/無効にすることができます。

文字の高さ

グリフ ベースの高さの計算は引き続き行われますが、レイアウトには使用されません。Size が (-1;-1) の場合、テキストが配置される四角形は、古い TextBrushConstantHeight オプションで測定されたものになります。TextBrushActualHeight は、ノードの境界矩形を取得するために常に使用されますが、ノードのレイアウト矩形を取得することもできます (以下のテキスト長の計算に関する情報を参照してください)。

テキストの長さ

レンダリングされたテキストのサイズを取得するために、次のメソッドが提供されています。

サブメニューに戻る

Candera::SceneComposer の TextNode2D

新しい TextNode2D はツールボックス パネルにあります。シーンにテキストを追加するには、TextNode をパネルから Scene2D ノードにドラッグします。

TextNode の [プロパティ] パネルから、レンダリングに必要なプロパティ ( Text、Style )を構成します。

Candera:: TextNode2D の Candera:: TextNodeRendererタイプは、Rendererプロパティを使用して変更できます。SceneComposer のデフォルト値は Bitmap です。

Candera::DefaultTextNode2DLayouter は、Enable Text Layoutingをチェックすることでアタッチされます。プロパティ パネルには、追加のレイアウタ プロパティが表示されます。

TextNode2D が作成されると、Candera::BitmapBrushColorBlendが自動的にノードに関連付けられ、テキストの色のみを変更するために使用されます。ツールボックス パネルの効果のリストにある BitmapBrush 効果は、テキストのレンダリングに使用できます。テキストの視覚的な外観は、選択した効果の種類に応じて影響を受けます。

TextEngine レンダリング インターフェイス 

概要: レンダリング インターフェース

テキストをレンダリングするためのメイン インターフェイスは、メソッドです。

テキスト レンダリング コンテキスト

Candera ::TextRendering::TextRenderContext は、テキスト レンダリングのターゲット、つまりテキストのレンダリング先を定義するために必要です。

ビットマップをテキスト レンダリングのターゲットとして構成する

Candera::TextRendering::BitmapTextRenderContext を使用して、テキストをビットマップに描画できます。したがって、まず、描画されるビットマップを次のように定義する必要があります

    BitmapTextRenderContext bmpRenderContext;
    static_cast<void>(bmpRenderContext.SetBitmap(m_bitmap));
    bmpRenderContext.SetPenColor(m_color);

レイアウト オプション

Candera ::TextRendering::LayoutingOptions はレンダリングされたテキストのレイアウトを定義します

成形オプション

Candera ::TextRendering::ShapingOptions は、テキストを論理からディスプレイ プレゼンテーションに変換する方法を定義します。コンストラクターのいずれかを使用することをお勧めします。

テキスト プロパティ

Candera ::TextRendering::TextProperties は、レンダリングされるテキスト自体を定義するだけです。

メニューに戻る

フォント メトリックとテキスト サイズ 

フォントサイズ

Canderaでは、フォント サイズ (それぞれのフォントの高さ) をピクセル サイズで指定する必要があります。Microsoft Wordなどのいくつかのワープロ プログラムでは、フォントはポイント サイズで定義されていることに注意してください。ピクセル サイズとポイント サイズの間の変換は、次のように計算されます ( FreeType グリフ規則を参照)。

たとえば、 Microsoft Windows では、歴史的な理由から 96 PPI (DPI) のデフォルト解像度を定義しています。Microsoft Wordで定義されたポイント サイズ 18 のフォントは、Canderaで定義されたピクセル サイズ 24 (24 = 18 * 96/72)のフォントと同じ高さになります。

フォント メトリック

フォントの場合、フォント アセンダー、デバイス ピクセル単位のディセンダー値、フォント行の高さ、およびフォント文字の最大垂直送り量を記述する静的フォント メトリックが提供されます。 Candera::TextRendering::Font ::GetMetrics()

    TextRendering::Metrics metrics;
    if (!m_font.GetMetrics(metrics)) {
        return false;
    }

テキスト境界

さらに、指定された文字列のテキスト境界 (幅、高さなど) は、Candera::TextRendering::GlyphTextMeasureContextまたはCandera::TextRendering::CursorTextMeasureContextのGetTextRectangleメソッドを呼び出すことによって取得できます。

Candera::TextRendering::GlyphTextMeasureContext は、すべてのグリフ ビットマップによってカバーされる最小の表面に対応する長方形を構築します。この長方形の位置 ((左、上) 座標で表される) は、テキスト位置からオフセットできます。したがって、テキストをレンダリングするときは、このオフセットの逆数を使用してレイアウト オプションを構築する必要があります。

Candera::TextRendering::CursorTextMeasureContext は、テキストの処理中に移動するときにカーソルが掃引するサーフェス全体に対応する長方形を作成します。カーソルは、スタイルの高さと同じ長さのセグメントと見なされます。通常、この四角形にはオフセットがなく、カーソルの最終的な前進が含まれます。

    GlyphTextMeasureContext glyphContext;
    static_cast<void>(textRenderer.Render(glyphContext, LayoutingOptions(), ShapingOptions(m_style), TextProperties(m_text)));
    TextRect textBound = glyphContext.GetTextRectangle();
    mTextStartPos.SetX(-textBound.GetPosition().GetX());
    mTextStartPos.SetY(-textBound.GetPosition().GetY());
    Int16 textWidth = textBound.GetWidth();
    Int16 textHeight = textBound.GetHeight();

    static_cast<void>(textRenderer.Render(bmpRenderContext, LayoutingOptions(mTextStartPos), ShapingOptions(m_style), TextProperties(m_text)));

レイアウト オプションは、テキストのレイアウトを記述します。整形オプションは、テキストの整形方法 (合字、テキストの方向など) を定義し、スタイルも含みます。

メニューに戻る

単純なテキスト レンダリング 

シンプルなテキストのレンダリング

Candera ::TextRendering::TextRenderer は、テキストをレンダリングするコア関数を提供します。

単純なテキスト レンダリングの場合、Candera::TextRendering::TextRenderer::Render()メソッドが呼び出されます。実際のテキスト (TChar* 型) とターゲットとしての BitmapTextRenderContext に加えて、レイアウトと整形を指定できます。

    static_cast<void>(textRenderer.Render(bmpRenderContext, LayoutingOptions(mTextStartPos), ShapingOptions(m_style), TextProperties(m_text)));

最後に、変更を適用するためにイメージを更新する必要があります。

    bool success = m_textureImage->Update();

メニューに戻る

文字とグリフの位置のマッピング 

概要

Canderaテキスト エンジンは、文字列の位置をグリフ文字列の位置にマッピングできるインターフェイスを提供します。この機能は、テキストのハイライトなど、文字の位置に応じてさまざまな操作を実行するために、アプリケーションやウィジェットで役立ちます。

例

便宜上、この強調表示機能を使用して TextTextureWidget を改善することにしました。ウィジェットは、間隔m_startとm_endのインデックスを持つ文字に対応するすべてのグリフを赤でレンダリングすることにより、テキストを強調表示します。

文字位置情報は、Candera::BitmapTextRenderContextクラスの Blit メソッドでアクセスできます。したがって、このクラスを派生させ、Blit メソッドを次のように上書きする必要があります。

class BitmapTextRenderContextSelection : public BitmapTextRenderContext
{      
public:   
    BitmapTextRenderContextSelection(Int selectionStart, Int selectionEnd, Color color) : m_start(selectionStart), m_end(selectionEnd), m_color(color) {}
    virtual void Blit(Int16 x, Int16 y, const GlyphBitmap& glyph);
private:
    typedef BitmapTextRenderContext Base;

    Color ComputeColorForCharPosition(TextPosition position);
    Int m_start;
    Int m_end;
    Color m_color;
};

void BitmapTextRenderContextSelection::Blit(Int16 x, Int16 y, const GlyphBitmap& glyph){

    SetPenColor(ComputeColorForCharPosition(glyph.characterPosition));
    Base::Blit(x, y, glyph);
}

Color BitmapTextRenderContextSelection::ComputeColorForCharPosition(TextPosition position){
    if(position >= m_start && position <= m_end){
        return Color(255,0,0);
    } else {
        return m_color;
    }
}

TextTextureWidget::UpdateTextureImage() で、 Candera::BitmapTextRenderContextの代わりに新しく作成したクラスを使用します。

    BitmapTextRenderContextSelection bmpRenderContext(m_selectionStart, m_selectionEnd, GetTextColorPrv());

メニューに戻る

双方向テキストの短縮サポート 

機能の概要

この機能により、指定された表示領域に収まらない場合はいつでも双方向テキストが短縮されます。短縮を行うアルゴリズムは、右から左へのテキストの左から右へのテキストへのさまざまなレベルの埋め込み、およびその逆の埋め込みを処理できます。最後のチャンクのテキストの方向に応じて、短縮文字列は最後のフィッティング テキスト セグメントの左端または右端に挿入されます。

レンダリングされるシーンのタイプに応じて、次のいずれかを使用して、この機能を利用できます。

TextNode2D を使用した切り捨て

この機能は、ノード パラメータの [テキスト レイアウトを有効にする] が有効になっている場合にのみアクティブになります。テキストのサイズがノードの指定されたSizeプロパティに収まらなくなると、テキストは自動的に切り捨てられます。TextNode2D は、スペースに合わせてテキストを切り取り、末尾の省略記号を追加するという切り捨て方法を 1 つだけ提供します。

TextTextureWidget を使用した切り捨て

この機能は、ウィジェット パラメーターTruncation method がText値に設定されている場合にのみアクティブになります。テキスト短縮の視覚的フィードバックに使用される文字は、3D ウィジェットの切り捨てテキストプロパティを設定することで構成できます。

例

以下の画像は、3 つのシナリオを例示しています。

メニューに戻る

フォントヒンティング 

概要

フォント ヒンティングは、数学的な命令を使用してアウトライン フォントの表示を調整し、ラスタライズされたグリッドに合わせます。これは、フォントをより明確にレンダリングするためにピクセルを補間することによって行われます。画面の解像度が低い場合、明確で読みやすいテキストを生成するには、ヒントが重要です。アンチエイリアシングと (液晶ディスプレイの場合) サブピクセル レンダリングを併用して、さらに明瞭にすることができます。

ヒントは通常、書体のデザイン プロセス中にフォント エディターで作成され、フォントに埋め込まれます。一般に、グリフにヒントを与えるには 3 つの方法があります。

ヒントを有効にする

メソッドCandera::TextRendering::Font::SetHintingEnabled()を使用して、ヒンティングを有効または無効にすることができます。ヒンティングを無効にすると、以下に示すように、グリフがぼやけて表示される場合があります。テキストは小さなサイズのフォント (9px) でレンダリングされ、ズームインされました。

AutoHint を有効にする

Candera::TextRendering::Font::SetAutohintEnabled()メソッドを呼び出すことで、フォント ドライバーの自動ヒンターの使用を制御できます。自動ヒンターを無効にすると、フォントのネイティブ ヒンターが使用されるか、ヒンティングが無効になります (拡大画像)。

Force AutoHint を有効にする

特定のフォント ドライバーが独自のヒントを提供しない場合、デフォルトで自動ヒントが使用されます。フォーマット固有のヒントが提供されている場合でも、メソッドCandera::TextRendering::Font::SetForceAutohintEnabled() を使用して有効にすることで、自動ヒントを使用することができます。

ヒントモード

ドライバーのオートヒンターは、次のパラメーター (ヒンティング アルゴリズム) のいずれかを指定してCandera::TextRendering::Font::SetHintingMode()メソッドを呼び出すことで構成できます。

コード例

    m_font1.SetHintingMode(GlyphHinter::Monochrome);
    m_font2.SetHintingMode(GlyphHinter::Light);

グリフ ビットマップ形式

グリフ レンダリング プロセスの出力タイプは、メソッドCandera::TextRendering::Font::SetRequestedGlyphFormat()を呼び出して、次のレンダリング モードのいずれかをパラメータとして設定できます。

上記の各レンダリング モードは、アウトラインに対して実行される特定の種類のスキャンライン変換に対応しています。

コード例

    m_font1.SetRequestedGlyphFormat(GlyphBitmap::VerticalLcd);
    m_font2.SetRequestedGlyphFormat(GlyphBitmap::Grayscale);

モノクロ レンダー モード

モノクロ レンダリング モードでは、2 レベルの不透明度しか使用しないため、アンチエイリアスが削除され、小さなサイズのフォントがより鮮明に表示されます (ぼかしなし)。モノクロ レンダリング モードとグレースケール レンダリング モードの比較を以下に示します。

このレンダリング モードを使用するもう 1 つの利点は、1 ビット形式であるため、グリフのメモリ フットプリントが小さいことです。

メニューに戻る