グラフィックス

  • [アーティクル]

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

.NET マルチプラットフォーム アプリ UI (.NET MAUI) は、Microsoft.Maui.Graphics 名前空間の型を使用して 2D グラフィックスを描画できるクロス プラットフォーム グラフィックス キャンバスを提供します。 このキャンバスは、図形や画像の描画やペイント、合成操作、グラフィカル オブジェクトの変換をサポートしています。

Microsoft.Maui.Graphics が提供する機能と、.NET MAUI の図形やブラシが提供する機能には多くの類似点があります。 ただし、それぞれが異なるシナリオを対象としています。

  • Microsoft.Maui.Graphics 機能は描画キャンバスで使用する必要があり、パフォーマンスの高いグラフィックスを描画でき、グラフィックスベースのコントロールを記述するための便利なアプローチを提供します。 たとえば、GitHub コントリビューション プロファイルをレプリケートするコントロールは、.NET MAUI 図形を使用するよりも Microsoft.Maui.Graphics を使った方が簡単に実装できます。
  • .NET MAUI 図形はページ上で直接使用でき、ブラシはすべてのコントロールで使用できます。 この機能は、魅力的な UI を作成するために提供されています。

.NET MAUI 図形の詳細については、「 図形」をご覧ください。

グラフィックスを描画する

.NET MAUI では、GraphicsView により Microsoft.Maui.Graphics 機能の利用が可能になります。 GraphicsView は、IDrawable 型の Drawable プロパティを定義し、このプロパティがコントロールによって描画されるコンテンツを定義します。 描画するコンテンツを指定するには、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 です。

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>

GraphicsView の詳細については、「 GraphicsView」をご覧ください。

キャンバスの描画

GraphicsView コントロールは、IDrawable オブジェクトを介して ICanvas オブジェクトへのアクセスを提供します。このオブジェクトに対してプロパティを設定したり、グラフィカル オブジェクトを描画するためのメソッドを呼び出したりできます。 ICanvas での描画の詳細については、「 グラフィカル オブジェクトを描画する」をご覧ください。

ICanvas は、キャンバス上に描画されるオブジェクトの外観に影響を与える次のプロパティを定義します。

  • float 型の Alpha は、オブジェクトの不透明度を示します。
  • bool 型の Antialias は、 アンチエイリアシングを有効にするかどうかを指定します。
  • BlendMode 型 の BlendMode は、ブレンド モードを定義します。このモードでは、オブジェクトが既存のオブジェクトの上にレンダリングされるときに、何が起こるかを決定します。
  • float 型の DisplayScale は、キャンバス上で UI をスケールするための拡大縮小係数を表します。
  • Color 型 の FillColor は、オブジェクトの内部のペイントに使用される色を示します。
  • IFont 型 の Font は、テキストを描画するときのフォントを定義します。
  • Color 型 の FontColor は、テキストを描画するときのフォントの色を指定します。
  • float 型 のFontSize は、テキストを描画するときのフォントのサイズを定義します。
  • float 型の MiterLimit は、オブジェクト内の行結合のマイター長の制限を指定します。
  • Color 型の StrokeColor は、オブジェクトの枠線を描画するために使用される色を示します。
  • float 型の StrokeDashOffset は、ダッシュ パターン内でダッシュが始まる距離を指定します。
  • float[] 型の StrokeDashPattern は、オブジェクトの枠線を描くために使用されるダッシュとギャップのパターンを指定します。
  • LineCap 型の StrokeLineCap は、線の始点と終点の図形を表します。
  • LineJoin 型の StrokeLineJoin は、図形の頂点で使用される結合の型を指定します。
  • float 型の StrokeSize は、オブジェクトの枠線の幅を示します。

既定では、ICanvas は StrokeSize を 1、StrokeColor を黒、StrokeLineJoin を LineJoin.Miter、StrokeLineCap を LineJoin.Cap に設定します。

描画キャンバスの状態

各プラットフォームの描画キャンバスには、その状態を維持する機能があります。 これにより、現在のグラフィックス状態を保持し、必要に応じて復元できます。

ただし、キャンバスの要素には、グラフィックス状態の要素でないものもあります。 グラフィックスの状態には、パスなどの描画オブジェクトや、グラデーションなどのペイント オブジェクトは含まれません。 各プラットフォームのグラフィックス状態の一般的な要素には、ストロークと塗りつぶしのデータ、フォント データがあります。

各 ICanvas のグラフィックスの状態は、次のメソッドを使用して操作できます:

  • SaveState は、現在のグラフィックスの状態を保存します。
  • RestoreState は、グラフィックスの状態を最後に保存した状態に設定します。
  • ResetState は、グラフィックスの状態を既定値にリセットします。

Note

これらのメソッドによって保持される状態はプラットフォームに依存します。