DrawingView

[アーティクル]
05/20/2024

DrawingView は、タッチ操作またはマウス操作を使用して線を描画できる画面を提供します。ユーザーによる描画の結果は画像として保存できます。この一般的なユースケースは、アプリケーションで署名ボックスを提供することです。

基本的な使用方法

DrawingView を使用すると、線の色、線の幅を設定し、線のコレクションにバインドできます。

XAML

XAML 名前空間を含める

XAML でこのツールキットを使用するには、次の xmlns をページまたはビューに追加する必要があります。

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

したがって、以下のコードは、

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

次のように、xmlns を含むように変更されます。

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

DrawingView の使用

<toolkit:DrawingView
            Lines="{Binding MyLines}"
            LineColor="Red"
            LineWidth="5" />

C#

using CommunityToolkit.Maui.Views;

var drawingView = new DrawingView
{
    Lines = new ObservableCollection<IDrawingLine>(),
    LineColor = Colors.Red,
    LineWidth = 5
};

次のスクリーンショットは、Android での結果の DrawingView を示しています。

Android 上の DrawingView のスクリーンショット

複数行の使用

既定では、DrawingView は 1 行のみをサポートします。 MultiLine を有効にするには、IsMultiLineModeEnabled を true に設定します。 ShouldClearOnFinish が false であることを確認します。

XAML

<views:DrawingView
            Lines="{Binding MyLines}"
            IsMultiLineModeEnabled="true"
            ShouldClearOnFinish="false" />

C#

using CommunityToolkit.Maui.Views;

var gestureImage = new Image();
var drawingView = new DrawingView
{
    Lines = new ObservableCollection<IDrawingLine>(),
    IsMultiLineModeEnabled = true,
    ShouldClearOnFinish = false,
};

次のスクリーンショットは、Android での結果の DrawingView を示しています。

Android 上の複数行を使用した DrawingView のスクリーンショット

線の描画が完了したときにイベントを処理する

DrawingView を使用すると、OnDrawingLineCompleted などのイベントをサブスクライブできます。対応するコマンド DrawingLineCompletedCommand も使用できます。

XAML

<views:DrawingView
            Lines="{Binding MyLines}"
            DrawingLineCompletedCommand="{Binding DrawingLineCompletedCommand}"
            OnDrawingLineCompleted="OnDrawingLineCompletedEvent" />

C#

using CommunityToolkit.Maui.Views;

var gestureImage = new Image();
var drawingView = new DrawingView
{
    Lines = new ObservableCollection<IDrawingLine>(),
    DrawingLineCompletedCommand = new Command<IDrawingLine>(async (line) =>
    {
        var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));

        var stream = await line.GetImageStream(gestureImage.Width, gestureImage.Height, Colors.Gray.AsPaint(), cts.Token);
        gestureImage.Source = ImageSource.FromStream(() => stream);
    })
};
drawingView.OnDrawingLineCompleted += async (s, e) =>
{
    var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));

    var stream = await e.LastDrawingLine.GetImageStream(gestureImage.Width, gestureImage.Height, Colors.Gray.AsPaint(), cts.Token);
    gestureImage.Source = ImageSource.FromStream(() => stream);
};

ScrollView 内で使用する

ScrollView 内で DrawingView を使用すると、iOS で ScrollView とのタッチ操作がインターセプトされることがあります。これは、次の例のように、iOS で ShouldDelayContentTouches プロパティを false に設定することで防ぐことができます。

次のように、DrawingView を含む ScrollView に ios:ScrollView.ShouldDelayContentTouches="false" を追加することで、この問題を解決しました。

<ContentPage
    xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls">

    <ScrollView ios:ScrollView.ShouldDelayContentTouches="false">

        <DrawingView />

    </ScrollView>

</ContentPage>

詳細については、ScrollView コンテンツのタッチに関するページを参照してください。

詳細な使用方法

利点を最大限に活用するために、DrawingView には、描画線のイメージストリームを取得するメソッドが用意されています。

XAML

<toolkit:DrawingView
            x:Name="DrawingViewControl"
            Lines="{Binding MyLines}"
            IsMultiLineModeEnabled="true"
            ShouldClearOnFinish="true"
            DrawingLineCompletedCommand="{Binding DrawingLineCompletedCommand}"
            OnDrawingLineCompleted="OnDrawingLineCompletedEvent"
            LineColor="Red"
            LineWidth="5"
            HorizontalOptions="Fill"
            VerticalOptions="Fill">
            <toolkit:DrawingView.Background>
                    <LinearGradientBrush StartPoint="0,0"
                                         EndPoint="0,1">
                        <GradientStop Color="Blue"
                                      Offset="0"/>
                        <GradientStop Color="Yellow"
                                      Offset="1"/>
                    </LinearGradientBrush>
            </toolkit:DrawingView.Background>
</toolkit:DrawingView>

C#

using CommunityToolkit.Maui.Views;

var gestureImage = new Image();
var drawingView = new DrawingView
{
    Lines = new ObservableCollection<IDrawingLine>(),
    IsMultiLineModeEnabled = true,
    ShouldClearOnFinish = false,
    DrawingLineCompletedCommand = new Command<IDrawingLine>(async (line) =>
    {
        var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));

        var stream = await line.GetImageStream(gestureImage.Width, gestureImage.Height, Colors.Gray.AsPaint(), cts.Token);
        gestureImage.Source = ImageSource.FromStream(() => stream);
    }),
    LineColor = Colors.Red,
    LineWidth = 5,
    Background = Brush.Red
};
drawingView.OnDrawingLineCompleted += async (s, e) =>
{
    var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));

    var stream = await e.LastDrawingLine.GetImageStream(gestureImage.Width, gestureImage.Height, Colors.Gray.AsPaint(), cts.Token);
    gestureImage.Source = ImageSource.FromStream(() => stream);
};

// get stream from lines collection
var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
var lines = new List<IDrawingLine>();
var stream1 = await DrawingView.GetImageStream(
                lines,
                new Size(gestureImage.Width, gestureImage.Height),
                Colors.Black.
                cts.Token);

// get steam from the current DrawingView
var stream2 = await drawingView.GetImageStream(gestureImage.Width, gestureImage.Height, cts.Token);

Properties

プロパティ	タイプ	説明
明細行	`ObservableCollection<IDrawingLine>`	現在 `DrawingView` 上にある `IDrawingLine` のコレクション
IsMultiLineModeEnabled	`bool`	複数行モードを切り替えます。 true の場合、線の間でタップ/クリックを放している間、`DrawingView` 上に複数の線を描画できます。注: `ClearOnFinish` も有効になっている場合、タップ/クリックを放した後に線が消去されます。さらに、線が描画されるたびに `DrawingLineCompletedCommand` が起動されます。
ShouldClearOnFinish	`bool`	タップ/クリックを放した後に `DrawingView` が消去され、線が描画されるかどうかを示します。注: `IsMultiLineModeEnabled` も有効になっている場合、予期しない動作が発生する可能性があります。
DrawingLineStartedCommand	`ICommand`	このコマンドは、`DrawingView` 上の線の描画が開始されるたびに呼び出されます。
DrawingLineCancelledCommand	`ICommand`	このコマンドは、`DrawingView` 上の線の描画が取り消されるたびに呼び出されます。
DrawingLineCompletedCommand	`ICommand`	このコマンドは、`DrawingView` 上の線の描画が完了するたびに呼び出されます。 . これは、タップまたはクリックが解除された後に起動されることに注意してください。 `MultiLineMode` が有効な場合、このコマンドは複数回実行されます。
PointDrawnCommand	`ICommand`	このコマンドは、`DrawingView` 上のポイントの描画が完了するたびに呼び出されます。
OnDrawingLineStarted	`EventHandler<DrawingLineStartedEventArgs>`	`DrawingView` イベントは、描画ラインの開始時に発生します。
OnDrawingLineCancelled	`EventHandler<EventArgs>`	`DrawingView` イベントは、描画ラインの取り消し時に発生します。
OnDrawingLineCompleted	`EventHandler<DrawingLineCompletedEventArgs>`	`DrawingView` イベントは、描画ラインの完了時に発生します。
OnPointDrawn	`EventHandler<PointDrawnEventArgs>`	`DrawingView` イベントは、ポイントの描画時に発生します。
LineColor	`Color`	`DrawingView` に線を描画するために既定で使用される色。
LineWidth	`float`	`DrawingView` に線を描画するために既定で使用される幅。

DrawingLine

DrawingLine にはポイントの一覧が含まれており、各線スタイルを個別に構成できます。

Properties

プロパティ	タイプ	説明	規定値
LineColor	`Color`	`DrawingView` に線を描画するために使用される色。	`Colors.Black`
LineWidth	`float`	`DrawingView` に線を描画するために使用される幅。	`5`
ポイント	`ObservableCollection<PointF>`	線を作成する `PointF` のコレクション。	`new()`
細分性	`int`	この線の細分性。最小値は 5 です。値が大きいほど、線は滑らかになり、プログラムは遅くなります。	`5`
ShouldSmoothPathWhenDrawn	`bool`	描画時にこの線をスムージング (アンチエイリアス) するかどうかを有効または無効にします。	`false`

カスタム IDrawingLine

既定の DrawingLine をカスタム実装に置き換えるには、次の 2 つの手順があります。

IDrawingLine を実装するカスタムクラスを作成します。

public class MyDrawingLine : IDrawingLine
{
    public ObservableCollection<PointF> Points { get; } = new();
    ...
}

IDrawingLineAdapter を実装するカスタムクラスを作成します。

public class MyDrawingLineAdapter : IDrawingLineAdapter
{
    public IDrawingLine(MauiDrawingLine mauiDrawingLine)
    {
        return new MyDrawingLine
        {
            Points = mauiDrawingLine.Points,
            ...
        }
    }
}

IDrawingViewHandler でカスタム IDrawingLineAdapter を設定します。

var myDrawingLineAdapter = new MyDrawingLineAdapter();
drawingViewHandler.SetDrawingLineAdapter(myDrawingLineAdapter);

DrawingLineStartedEventArgs

最後の描画ポイントを含むイベント引数。

Properties

プロパティ	タイプ	説明
ポイント	`PointF`	最後の描画ポイント。

DrawingLineCompletedEventArgs

最後の描画線を含むイベント引数。

Properties

プロパティ	タイプ	説明
LastDrawingLine	`IDrawingLine`	最後の描画線。

PointDrawnEventArgs

最後の描画ポイントを含むイベント引数。

Properties

プロパティ	タイプ	説明
ポイント	`PointF`	最後の描画ポイント。

メソッド

メソッド	説明
GetImageStream	`DrawingView` に現在描画されている `Lines` の画像を含む `Stream` を取得します。
GetImageStream (静的)	パラメーターとして指定された `IDrawingLine` のコレクションのイメージを含む `Stream` を取得します。

例

この機能の動作状態の例は、.「NET MAUI Community Toolkit サンプルアプリケーション」でご覧になれます。

API

DrawingView のソースコードは、.NET MAUI Community Toolkit の GitHub リポジトリにあります。

次の方法で共有

DrawingView

基本的な使用方法

XAML

XAML 名前空間を含める

DrawingView の使用

C#

複数行の使用

XAML

C#

線の描画が完了したときにイベントを処理する

XAML

C#

ScrollView 内で使用する

詳細な使用方法

XAML

C#

Properties

DrawingLine

Properties

カスタム IDrawingLine

DrawingLineStartedEventArgs

Properties

DrawingLineCompletedEventArgs

Properties

PointDrawnEventArgs

Properties

メソッド

例

API

その他のリソース