共用方式為


GraphicsView

Browse sample. 流覽範例

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

GraphicsViewDrawable 定義 型 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 具有 ICanvasRectF 自變數。 自 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 座標。
  • CenterPointF別為 的 ,指定畫布中央的座標。
  • Heightfloat別為 的 ,定義畫布的高度。
  • IsEmptybool別為 的 ,指出畫布的大小和位置是否為零。
  • Leftfloat別為 的 ,表示畫布左邊緣的 x 座標。
  • LocationPointF別為 的 ,定義畫布左上角的座標。
  • Rightfloat別為 的 ,表示畫布右邊緣的 X 座標。
  • SizeSizeF別為 的 ,定義畫布的寬度和高度。
  • Topfloat別為 的 ,表示畫布上邊緣的 Y 座標。
  • Widthfloat別為 的 ,定義畫布的寬度。
  • Xfloat別為 的 ,定義畫布左上角的 x 座標。
  • Yfloat別為 的 ,定義畫布左上角的 Y 座標。

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

使畫布失效

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

graphicsView.Invalidate();

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