Graphics

サンプルを参照する

.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は、コントロールによって描画されるコンテンツを指定するDrawable型の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です。

XAML では、IDrawable オブジェクトをリソースとして宣言し、そのキーを GraphicsView プロパティの値として指定することで、Drawableで使用できます。

<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 コントロールは、ICanvas オブジェクトを介してIDrawable オブジェクトへのアクセスを提供します。このオブジェクトでは、プロパティを設定したり、グラフィカル オブジェクトを描画するために呼び出されるメソッドを使用したりできます。 ICanvasでの描画の詳細については、「グラフィカル オブジェクトを描画する」を参照してください。

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

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

既定では、ICanvasStrokeSizeは 1、StrokeColorは黒、StrokeLineJoinは LineJoin.Miter、StrokeLineCapは LineJoin.Cap に設定されます。

描画キャンバスの状態

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

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

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

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