方法: アウトラインテキストを作成する

[アーティクル]
12/19/2024

ほとんどの場合、Windows Presentation Foundation (WPF) アプリケーションでテキスト文字列に装飾を追加する場合、個別の文字またはグリフのコレクションの観点からテキストを使用します。たとえば、線形グラデーションブラシを作成し、TextBox オブジェクトの Foreground プロパティに適用できます。テキストボックスを表示または編集すると、線形グラデーションブラシがテキスト文字列内の現在の文字セットに自動的に適用されます。

線形グラデーションブラシで表示されるテキスト

ただし、テキストを Geometry オブジェクトに変換して、他の種類の視覚的にリッチテキストを作成することもできます。たとえば、テキスト文字列のアウトラインに基づいて Geometry オブジェクトを作成できます。

線形グラデーションブラシを使用してテキストアウトラインをする

テキストを Geometry オブジェクトに変換すると、テキストは文字のコレクションではなくなります。テキスト文字列内の文字を変更することはできません。ただし、ストロークと塗りつぶしのプロパティを変更することで、変換されたテキストの外観に影響を与えることができます。ストロークは変換されたテキストのアウトラインを指します。塗りつぶしはそのアウトライン内の領域を指します。

次の例は、変換されたテキストのストロークと塗りつぶしを変更して視覚効果を作成するいくつかの方法を示しています。

色が異なる塗りつぶしとストロークを持つテキスト塗りつぶしとストロークに別の色を使用するテキスト

ストロークにイメージブラシを適用したテキスト

また、変換されたテキストの外接ボックスの四角形 (強調表示) を変更することもできます。次の例は、変換されたテキストのストロークと強調表示を変更して視覚効果を作成する方法を示しています。

イメージブラシをストロークに適用し、を強調表示したテキスト

例

テキストを Geometry オブジェクトに変換するキーは、FormattedText オブジェクトを使用することです。このオブジェクトを作成したら、BuildGeometry メソッドと BuildHighlightGeometry メソッドを使用して、テキストを Geometry オブジェクトに変換できます。最初のメソッドは、書式設定されたテキストのジオメトリを返します。2 番目のメソッドは、書式設定されたテキストの境界ボックスのジオメトリを返します。次のコード例は、FormattedText オブジェクトを作成し、書式設定されたテキストとその境界ボックスのジオメトリを取得する方法を示しています。

/// <summary>
/// Create the outline geometry based on the formatted text.
/// </summary>
public void CreateText()
{
    System.Windows.FontStyle fontStyle = FontStyles.Normal;
    FontWeight fontWeight = FontWeights.Medium;

    if (Bold == true) fontWeight = FontWeights.Bold;
    if (Italic == true) fontStyle = FontStyles.Italic;

    // Create the formatted text based on the properties set.
    FormattedText formattedText = new FormattedText(
        Text,
        CultureInfo.GetCultureInfo("en-us"),
        FlowDirection.LeftToRight,
        new Typeface(
            Font,
            fontStyle,
            fontWeight,
            FontStretches.Normal),
        FontSize,
        System.Windows.Media.Brushes.Black // This brush does not matter since we use the geometry of the text.
        );

    // Build the geometry object that represents the text.
    _textGeometry = formattedText.BuildGeometry(new System.Windows.Point(0, 0));

    // Build the geometry object that represents the text highlight.
    if (Highlight == true)
    {
        _textHighLightGeometry = formattedText.BuildHighlightGeometry(new System.Windows.Point(0, 0));
    }
}

''' <summary>
''' Create the outline geometry based on the formatted text.
''' </summary>
Public Sub CreateText()
    Dim fontStyle As FontStyle = FontStyles.Normal
    Dim fontWeight As FontWeight = FontWeights.Medium

    If Bold = True Then
        fontWeight = FontWeights.Bold
    End If
    If Italic = True Then
        fontStyle = FontStyles.Italic
    End If

    ' Create the formatted text based on the properties set.
    Dim formattedText As New FormattedText(Text, CultureInfo.GetCultureInfo("en-us"), FlowDirection.LeftToRight, New Typeface(Font, fontStyle, fontWeight, FontStretches.Normal), FontSize, Brushes.Black) ' This brush does not matter since we use the geometry of the text.

    ' Build the geometry object that represents the text.
    _textGeometry = formattedText.BuildGeometry(New Point(0, 0))

    ' Build the geometry object that represents the text highlight.
    If Highlight = True Then
        _textHighLightGeometry = formattedText.BuildHighlightGeometry(New Point(0, 0))
    End If
End Sub

取得した Geometry オブジェクトを表示するには、変換されたテキストを表示しているオブジェクトの DrawingContext にアクセスする必要があります。これらのコード例では、このアクセスは、ユーザー定義のレンダリングをサポートするクラスから派生したカスタムコントロールオブジェクトを作成することによって実現されます。

カスタムコントロール Geometry オブジェクトを表示するには、OnRender メソッドのオーバーライドを指定します。オーバーライドされたメソッドでは、DrawGeometry メソッドを使用して、Geometry オブジェクトを描画する必要があります。

/// <summary>
/// OnRender override draws the geometry of the text and optional highlight.
/// </summary>
/// <param name="drawingContext">Drawing context of the OutlineText control.</param>
protected override void OnRender(DrawingContext drawingContext)
{
    // Draw the outline based on the properties that are set.
    drawingContext.DrawGeometry(Fill, new System.Windows.Media.Pen(Stroke, StrokeThickness), _textGeometry);

    // Draw the text highlight based on the properties that are set.
    if (Highlight == true)
    {
        drawingContext.DrawGeometry(null, new System.Windows.Media.Pen(Stroke, StrokeThickness), _textHighLightGeometry);
    }
}

''' <summary>
''' OnRender override draws the geometry of the text and optional highlight.
''' </summary>
''' <param name="drawingContext">Drawing context of the OutlineText control.</param>
Protected Overrides Sub OnRender(ByVal drawingContext As DrawingContext)
    ' Draw the outline based on the properties that are set.
    drawingContext.DrawGeometry(Fill, New Pen(Stroke, StrokeThickness), _textGeometry)

    ' Draw the text highlight based on the properties that are set.
    If Highlight = True Then
        drawingContext.DrawGeometry(Nothing, New Pen(Stroke, StrokeThickness), _textHighLightGeometry)
    End If
End Sub

カスタムユーザーコントロールオブジェクトの例のソースについては、Visual Basicの C# と OutlineTextControl.vb の OutlineTextControl.cs を参照してください。

参照

書式設定されたテキストを描画する

次の方法で共有

方法: アウトラインテキストを作成する

例

参照

その他のリソース