GraphicsView

發行項
05/14/2024

.NET 多平臺應用程式 UI （.NET MAUI） GraphicsView 是圖形畫布，可使用命名空間中的 Microsoft.Maui.Graphics 類型繪製 2D 圖形。如需的詳細資訊 Microsoft.Maui.Graphics，請參閱圖形。

GraphicsView 會 Drawable 定義型 IDrawable別的屬性，指定將繪製的內容。這個屬性是由 BindableProperty支援，這表示它可以是數據系結的目標，並設定樣式。

GraphicsView 定義下列事件：

StartHoverInteraction，具有 TouchEventArgs，當指標進入的 GraphicsView點擊測試區域時，會引發這個區域。
MoveHoverInteraction，具有 TouchEventArgs，當指標在的點擊測試區域內 GraphicsView停留時，指標移動時會引發。
EndHoverInteraction，會在指標離開的 GraphicsView點擊測試區域時引發。
StartInteraction，具有 TouchEventArgs，在按下時 GraphicsView 引發。
DragInteraction，使用 TouchEventArgs，會在拖曳時 GraphicsView 引發。
EndInteraction，使用 TouchEventArgs，會在引發事件之按下時引發 StartInteraction 。
CancelInteraction，當與失去接觸的 GraphicsView 媒體發生接觸時，就會引發這種聯繫。

建立 GraphicsView

GraphicsView必須定義 IDrawable 物件，指定將在控件上繪製的內容。建立衍生自 IDrawable的物件，並實作其 Draw 方法，即可達成此目的：

namespace MyMauiApp
{
    public class GraphicsDrawable : IDrawable
    {
        public void Draw(ICanvas canvas, RectF dirtyRect)
        {
            // Drawing code goes here
        }      
    }
}

方法 Draw 具有 ICanvas 和 RectF 自變數。自 ICanvas 變數是您繪製圖形物件的繪圖畫布。自 RectF 變數是 struct ，其中包含繪圖畫布大小和位置的相關數據。如需繪圖的詳細資訊 ICanvas，請參閱繪製圖形物件。

在 XAML 中IDrawable，物件可以宣告為資源，然後藉由將其索引鍵指定為屬性的值Drawable來取GraphicsView用：

<ContentPage xmlns=http://schemas.microsoft.com/dotnet/2021/maui
             xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
             xmlns:drawable="clr-namespace:MyMauiApp"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Resources>
        <drawable:GraphicsDrawable x:Key="drawable" />
    </ContentPage.Resources>
    <VerticalStackLayout>
        <GraphicsView Drawable="{StaticResource drawable}"
                      HeightRequest="300"
                      WidthRequest="400" />
    </VerticalStackLayout>
</ContentPage>

位置和大小圖形物件

頁面上的位置ICanvas和大小可以藉由檢查方法中的 Draw 自變數屬性RectF來決定。

結構 RectF 會定義下列屬性：

Bottom，屬於類型 float，表示畫布下邊緣的 Y 座標。
Center型 PointF別為的，指定畫布中央的座標。
Height型 float別為的，定義畫布的高度。
IsEmpty型 bool別為的，指出畫布的大小和位置是否為零。
Left型 float別為的，表示畫布左邊緣的 x 座標。
Location型 PointF別為的，定義畫布左上角的座標。
Right型 float別為的，表示畫布右邊緣的 X 座標。
Size型 SizeF別為的，定義畫布的寬度和高度。
Top型 float別為的，表示畫布上邊緣的 Y 座標。
Width型 float別為的，定義畫布的寬度。
X型 float別為的，定義畫布左上角的 x 座標。
Y型 float別為的，定義畫布左上角的 Y 座標。

這些屬性可用來在上 ICanvas放置和調整圖形物件的大小。例如，圖形化物件可以使用和 Center.Y 值做為繪圖方法的自變數，放置在的中心。CanvasCenter.X 如需繪圖的相關信息 ICanvas，請參閱繪製圖形物件。

使畫布失效

GraphicsView 有方法 Invalidate 可通知畫布需要重新繪製本身。這個方法必須在實例上 GraphicsView 叫用：

graphicsView.Invalidate();

.NET MAUI 會視需要自動使無效 GraphicsView 。例如，當元素第一次顯示、進入檢視時，或透過從其頂端移動元素來顯示，則會重新繪製。唯一需要呼叫 Invalidate 的時間是當您想要強制 GraphicsView 重新繪製本身時，例如，如果您在它仍然可見時已變更其內容。

Share via

GraphicsView

建立 GraphicsView

位置和大小圖形物件

使畫布失效

意見反應

其他資源