カスタムレンダリングインク

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

ストロークの DrawingAttributes プロパティを使用すると、サイズ、色、図形など、ストロークの外観を指定できますが、DrawingAttributes 許可されている範囲を超えて外観をカスタマイズしたい場合があります。エアブラシ、オイルペイント、その他多くの効果の外観でレンダリングすることで、インクの外観をカスタマイズできます。 Windows Presentation Foundation (WPF) を使用すると、カスタム DynamicRenderer と Stroke オブジェクトを実装することで、インクをカスタムレンダリングできます。

このトピックには、次のサブセクションが含まれています。

アーキテクチャ
動的レンダラーの実装
カスタムストロークの実装
カスタム InkCanvas の実装
結論

建築

インクレンダリングは 2 回発生します。ユーザーが手書き入力サーフェイスにインクを書き込むとき、また、ストロークがインク対応サーフェスに追加された後。 DynamicRenderer は、ユーザーがデジタイザーでタブレットペンを移動するとインクをレンダリングし、Stroke は要素に追加されるとそれ自体をレンダリングします。

インクを動的にレンダリングするときに実装する 3 つのクラスがあります。

DynamicRenderer: DynamicRendererから派生するクラスを実装します。このクラスは、描画時にストロークをレンダリングする特殊な StylusPlugIn です。 DynamicRenderer は別のスレッドでレンダリングを行うので、アプリケーションユーザーインターフェイス (UI) スレッドがブロックされている場合でも、手描き入力サーフェイスはインクを収集するように見えます。スレッドモデルの詳細については、「インクスレッドモデルの」を参照してください。ストロークを動的にレンダリングするようにカスタマイズするには、OnDraw メソッドをオーバーライドします。
Stroke: Strokeから派生するクラスを実装します。このクラスは、Stroke オブジェクトに変換された後の StylusPoint データの静的レンダリングを担当します。ストロークの静的レンダリングが動的レンダリングと一致するように、DrawCore メソッドをオーバーライドします。
InkCanvas:InkCanvasから派生するクラスを実装します。カスタマイズした DynamicRenderer を DynamicRenderer プロパティに割り当てます。 OnStrokeCollected メソッドをオーバーライドし、カスタムストロークを Strokes プロパティに追加します。これにより、インクの外観の一貫性が確保されます。

動的レンダラーの実装

DynamicRenderer クラスは WPF の標準的な部分ですが、より特殊なレンダリングを実行するには、DynamicRenderer から派生したカスタマイズされた動的レンダラーを作成し、OnDraw メソッドをオーバーライドする必要があります。

次の例では、線形グラデーションブラシの効果でインクを描くようにカスタマイズされた DynamicRenderer を示します。

using System;
using System.Windows.Media;
using System.Windows;
using System.Windows.Input.StylusPlugIns;
using System.Windows.Input;
using System.Windows.Ink;

Imports System.Windows.Media
Imports System.Windows
Imports System.Windows.Input.StylusPlugIns
Imports System.Windows.Input
Imports System.Windows.Ink

// A StylusPlugin that renders ink with a linear gradient brush effect.
class CustomDynamicRenderer : DynamicRenderer
{
    [ThreadStatic]
    static private Brush brush = null;

    [ThreadStatic]
    static private Pen pen = null;

    private Point prevPoint;

    protected override void OnStylusDown(RawStylusInput rawStylusInput)
    {
        // Allocate memory to store the previous point to draw from.
        prevPoint = new Point(double.NegativeInfinity, double.NegativeInfinity);
        base.OnStylusDown(rawStylusInput);
    }

    protected override void OnDraw(DrawingContext drawingContext,
                                   StylusPointCollection stylusPoints,
                                   Geometry geometry, Brush fillBrush)
    {
        // Create a new Brush, if necessary.
        brush ??= new LinearGradientBrush(Colors.Red, Colors.Blue, 20d);

        // Create a new Pen, if necessary.
        pen ??= new Pen(brush, 2d);

        // Draw linear gradient ellipses between
        // all the StylusPoints that have come in.
        for (int i = 0; i < stylusPoints.Count; i++)
        {
            Point pt = (Point)stylusPoints[i];
            Vector v = Point.Subtract(prevPoint, pt);

            // Only draw if we are at least 4 units away
            // from the end of the last ellipse. Otherwise,
            // we're just redrawing and wasting cycles.
            if (v.Length > 4)
            {
                // Set the thickness of the stroke based
                // on how hard the user pressed.
                double radius = stylusPoints[i].PressureFactor * 10d;
                drawingContext.DrawEllipse(brush, pen, pt, radius, radius);
                prevPoint = pt;
            }
        }
    }
}

' A StylusPlugin that renders ink with a linear gradient brush effect.
Class CustomDynamicRenderer
    Inherits DynamicRenderer
    <ThreadStatic()> _
    Private Shared brush As Brush = Nothing

    <ThreadStatic()> _
    Private Shared pen As Pen = Nothing

    Private prevPoint As Point


    Protected Overrides Sub OnStylusDown(ByVal rawStylusInput As RawStylusInput)
        ' Allocate memory to store the previous point to draw from.
        prevPoint = New Point(Double.NegativeInfinity, Double.NegativeInfinity)
        MyBase.OnStylusDown(rawStylusInput)

    End Sub


    Protected Overrides Sub OnDraw(ByVal drawingContext As DrawingContext, _
                                   ByVal stylusPoints As StylusPointCollection, _
                                   ByVal geometry As Geometry, _
                                   ByVal fillBrush As Brush)

        ' Create a new Brush, if necessary.
        If brush Is Nothing Then
            brush = New LinearGradientBrush(Colors.Red, Colors.Blue, 20.0)
        End If

        ' Create a new Pen, if necessary.
        If pen Is Nothing Then
            pen = New Pen(brush, 2.0)
        End If

        ' Draw linear gradient ellipses between 
        ' all the StylusPoints that have come in.
        Dim i As Integer
        For i = 0 To stylusPoints.Count - 1

            Dim pt As Point = CType(stylusPoints(i), Point)
            Dim v As Vector = Point.Subtract(prevPoint, pt)

            ' Only draw if we are at least 4 units away 
            ' from the end of the last ellipse. Otherwise, 
            ' we're just redrawing and wasting cycles.
            If v.Length > 4 Then
                ' Set the thickness of the stroke based 
                ' on how hard the user pressed.
                Dim radius As Double = stylusPoints(i).PressureFactor * 10.0
                drawingContext.DrawEllipse(brush, pen, pt, radius, radius)
                prevPoint = pt
            End If
        Next i

    End Sub
End Class

カスタムストロークを実装する

Strokeから派生するクラスを実装します。このクラスは、Stroke オブジェクトに変換された後、StylusPoint データをレンダリングします。実際の描画を行うには、DrawCore クラスをオーバーライドします。

Stroke クラスは、AddPropertyData メソッドを使用してカスタムデータを格納することもできます。このデータは、永続化時にストロークデータと共に格納されます。

Stroke クラスでは、ヒットテストを実行することもできます。現在のクラスの HitTest メソッドをオーバーライドすることで、独自のヒットテストアルゴリズムを実装することもできます。

次の C# コードは、StylusPoint データを 3D ストロークとしてレンダリングするカスタム Stroke クラスを示しています。

using System;
using System.Windows.Media;
using System.Windows;
using System.Windows.Input.StylusPlugIns;
using System.Windows.Input;
using System.Windows.Ink;

Imports System.Windows.Media
Imports System.Windows
Imports System.Windows.Input.StylusPlugIns
Imports System.Windows.Input
Imports System.Windows.Ink

// A class for rendering custom strokes
class CustomStroke : Stroke
{
    Brush brush;
    Pen pen;

    public CustomStroke(StylusPointCollection stylusPoints)
        : base(stylusPoints)
    {
        // Create the Brush and Pen used for drawing.
        brush = new LinearGradientBrush(Colors.Red, Colors.Blue, 20d);
        pen = new Pen(brush, 2d);
    }

    protected override void DrawCore(DrawingContext drawingContext,
                                     DrawingAttributes drawingAttributes)
    {
        // Allocate memory to store the previous point to draw from.
        Point prevPoint = new Point(double.NegativeInfinity,
                                    double.NegativeInfinity);

        // Draw linear gradient ellipses between
        // all the StylusPoints in the Stroke.
        for (int i = 0; i < this.StylusPoints.Count; i++)
        {
            Point pt = (Point)this.StylusPoints[i];
            Vector v = Point.Subtract(prevPoint, pt);

            // Only draw if we are at least 4 units away
            // from the end of the last ellipse. Otherwise,
            // we're just redrawing and wasting cycles.
            if (v.Length > 4)
            {
                // Set the thickness of the stroke
                // based on how hard the user pressed.
                double radius = this.StylusPoints[i].PressureFactor * 10d;
                drawingContext.DrawEllipse(brush, pen, pt, radius, radius);
                prevPoint = pt;
            }
        }
    }
}

' A class for rendering custom strokes
Class CustomStroke
    Inherits Stroke
    Private brush As Brush
    Private pen As Pen


    Public Sub New(ByVal stylusPoints As StylusPointCollection)
        MyBase.New(stylusPoints)
        ' Create the Brush and Pen used for drawing.
        brush = New LinearGradientBrush(Colors.Red, Colors.Blue, 20.0)
        pen = New Pen(brush, 2.0)

    End Sub


    Protected Overrides Sub DrawCore(ByVal drawingContext As DrawingContext, _
                                     ByVal drawingAttributes As DrawingAttributes)

        ' Allocate memory to store the previous point to draw from.
        Dim prevPoint As New Point(Double.NegativeInfinity, Double.NegativeInfinity)

        ' Draw linear gradient ellipses between 
        ' all the StylusPoints in the Stroke.
        Dim i As Integer
        For i = 0 To Me.StylusPoints.Count - 1
            Dim pt As Point = CType(Me.StylusPoints(i), Point)
            Dim v As Vector = Point.Subtract(prevPoint, pt)

            ' Only draw if we are at least 4 units away 
            ' from the end of the last ellipse. Otherwise, 
            ' we're just redrawing and wasting cycles.
            If v.Length > 4 Then
                ' Set the thickness of the stroke 
                ' based on how hard the user pressed.
                Dim radius As Double = Me.StylusPoints(i).PressureFactor * 10.0
                drawingContext.DrawEllipse(brush, pen, pt, radius, radius)
                prevPoint = pt
            End If
        Next i

    End Sub
End Class

カスタム InkCanvas の実装

カスタマイズした DynamicRenderer とストロークを使用する最も簡単な方法は、InkCanvas から派生し、これらのクラスを使用するクラスを実装することです。 InkCanvas には、ユーザーが描画するときのストロークのレンダリング方法を指定する DynamicRenderer プロパティがあります。

InkCanvas でストロークをカスタムレンダリングするには、次の操作を行います。

InkCanvasから派生するクラスを作成します。
カスタマイズした DynamicRenderer を InkCanvas.DynamicRenderer プロパティに割り当てます。
OnStrokeCollected メソッドをオーバーライドします。このメソッドでは、InkCanvas に追加された元のストロークを削除します。次に、カスタムストロークを作成し、それを Strokes プロパティに追加し、カスタムストロークを含む新しい InkCanvasStrokeCollectedEventArgs を使用して基底クラスを呼び出します。

次の C# コードは、カスタマイズされた DynamicRenderer を使用し、カスタムストロークを収集するカスタム InkCanvas クラスを示しています。

public class CustomRenderingInkCanvas : InkCanvas
{
    CustomDynamicRenderer customRenderer = new CustomDynamicRenderer();

    public CustomRenderingInkCanvas() : base()
    {
        // Use the custom dynamic renderer on the
        // custom InkCanvas.
        this.DynamicRenderer = customRenderer;
    }

    protected override void OnStrokeCollected(InkCanvasStrokeCollectedEventArgs e)
    {
        // Remove the original stroke and add a custom stroke.
        this.Strokes.Remove(e.Stroke);
        CustomStroke customStroke = new CustomStroke(e.Stroke.StylusPoints);
        this.Strokes.Add(customStroke);

        // Pass the custom stroke to base class' OnStrokeCollected method.
        InkCanvasStrokeCollectedEventArgs args =
            new InkCanvasStrokeCollectedEventArgs(customStroke);
        base.OnStrokeCollected(args);
    }
}

InkCanvas には、複数の DynamicRendererを含めることができます。 InkCanvas に複数の DynamicRenderer オブジェクトを追加するには、StylusPlugIns プロパティに追加します。

結論

独自の DynamicRenderer、Stroke、および InkCanvas クラスを派生させることで、インクの外観をカスタマイズできます。これらのクラスを組み合わせることで、ユーザーがストロークを描画し、それを収集した後に、ストロークの外観が一貫していることを確認します。

参照先

高度なインク処理

次の方法で共有

カスタムレンダリングインク

建築

動的レンダラーの実装

カスタムストロークを実装する

カスタム InkCanvas の実装

結論

参照先

その他のリソース

次の方法で共有

カスタム レンダリング インク

建築

動的レンダラーの実装

カスタムストロークを実装する

カスタム InkCanvas の実装

結論

参照先

その他のリソース

カスタムレンダリングインク