共用方式為

DrawingView

  • 發行項

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 的螢幕快照

MultiLine 使用量

根據預設 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內ScrollView使用 DrawingView 時，有時會在 iOS 上攔截。 您可以依照下列範例，在 iOS 上將 屬性設定 ShouldDelayContentTouches 為 false ，以防止這種情況：

我已解決此問題，方法是將 ios：ScrollView.ShouldDelayContentTouches=“false” 新增至包含 DrawingView 的 ScrollView：

<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);

屬性

屬性 類型​ 描述
線條 ObservableCollection<IDrawingLine> IDrawingLine目前在上的集合DrawingView
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色彩。
寬 float 默認用來在 上繪製線條的 DrawingView寬度。

DrawingLine

DrawingLine包含點清單，並允許個別設定每個線條樣式。

屬性

屬性 類型​ 描述 預設值
LineColor Color 用來在上繪製線條的 DrawingView色彩。 Colors.Black
寬 float 用來在上繪製線條的 DrawingView寬度。 5
點 ObservableCollection<PointF> 建立行的 PointF 集合。 new()
資料粒度 int 這一行的數據粒度。 最小值為 5。 值越高，線條越平滑，程式越慢。 5
ShouldSmoothPathWhenDrawn bool 在繪製時啟用或停用此線條平滑處理（反別名）。 false

自定義 IDrawingLine

使用自訂實作取代預設值 DrawingLine 有 2 個步驟：

  1. 建立實作的 IDrawingLine自訂類別：
    public class MyDrawingLine : IDrawingLine
{
    public ObservableCollection<PointF> Points { get; } = new();
    ...
}
  2. 建立實作的 IDrawingLineAdapter自定義類別。 
    public class MyDrawingLineAdapter : IDrawingLineAdapter
{
    public IDrawingLine(MauiDrawingLine mauiDrawingLine)
    {
        return new MyDrawingLine
        {
            Points = mauiDrawingLine.Points,
            ...
        }
    }
}
  3. 在中IDrawingViewHandler設定自訂 IDrawingLineAdapter ：
    var myDrawingLineAdapter = new MyDrawingLineAdapter();
drawingViewHandler.SetDrawingLineAdapter(myDrawingLineAdapter);

DrawingLineStartedEventArgs

包含最後一個繪圖點的事件自變數。

屬性

屬性 類型​ 描述
Point PointF 最後一個繪圖點。

DrawingLineCompletedEventArgs

包含最後一個繪圖線的事件自變數。

屬性

屬性 類型​ 描述
LastDrawingLine IDrawingLine 最後一個繪圖線。

PointDrawnEventArgs

包含最後一個繪圖點的事件自變數。

屬性

屬性 類型​ 描述
Point PointF 最後一個繪圖點。

方法

方法 描述
GetImageStream Stream擷取 ，其中包含目前在 上繪製之 的DrawingView影像Lines。
GetImageStream （static） Stream擷取 ，其中包含提供做為參數之 集合IDrawingLine的影像。

範例

您可以在 .NET MAUI Community Toolkit 範例應用程式中找到這項功能的範例。

API

您可以在 .NET MAUI Community Toolkit GitHub 存放庫上找到 的DrawingView原始程式碼。