GraphicsView

  • [アーティクル]

Browse sample. サンプルを参照する

.NET Multi-Platform App UI (.NET MAUI) GraphicsView は、Microsoft.Maui.Graphics 名前空間の型を使用して 2D グラフィックスを描画できるグラフィックス キャンバスです。 Microsoft.Maui.Graphics の詳細については、「グラフィックス」をご覧ください。

GraphicsView は、描画するコンテンツを指定する IDrawable 型の Drawable プロパティを定義します。 このプロパティは、データ バインディングのターゲットであり、スタイルを設定できる 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 構造体は、次のプロパティを定義します。

  • float 型の Bottom はキャンバスの下端の y 座標を表します。
  • PointF 型の Center はキャンバスの中心の座標を指定します。
  • float 型の Height はキャンバスの高さを定義します。
  • bool 型の IsEmpty はキャンバスのサイズと位置が 0 かどうかを示します。
  • float 型の Left は、キャンバスの左端の x 座標を表します。
  • PointF 型の Location はキャンバスの左上隅の座標を定義します。
  • float 型の Right は、キャンバスの右端の x 座標を表します。
  • SizeF 型の Size はキャンバスの幅と高さを定義します。
  • float 型の Top はキャンバスの上端の y 座標を表します。
  • float 型の Width はキャンバスの幅を定義します。
  • float 型の X はキャンバスの左上隅の x 座標を定義します。
  • float 型の Y はキャンバスの左上隅の y 座標を定義します。

これらのプロパティは、ICanvas でグラフィカル オブジェクトの位置とサイズを設定するのに使用できます。 たとえば、グラフィカル オブジェクトは、描画メソッドで Center.X と Center.Y の値を引数として使用すると、Canvas の中心に配置できます。 ICanvas での描画の詳細については、「グラフィカル オブジェクトを描画する」をご覧ください。

キャンバスを無効にする

GraphicsView には、それ自体を再描画する必要があることをキャンバスに通知する Invalidate メソッドがあります。 このメソッドは、GraphicsView インスタンスで呼び出す必要があります。

graphicsView.Invalidate();

.NET MAUI は、UI で必要に応じて GraphicsView を自動的に無効化します。 たとえば、要素が最初に表示されたり、表示されるようになったり、要素の上から要素を移動して表示されたりすると、再描画されます。 Invalidate を呼び出す必要があるのは、コンテンツがまだ表示されている間にコンテンツを変更した場合など、GraphicsView を強制的に再描画する必要がある場合だけです。