2D ビジュアルコンテンツの生成

Mesh API または Vector API を使用して、ビジュアル要素に 2D ビジュアルコンテンツを生成します。

Mesh API を使用してカスタム形状を描画できます。Mesh API は上級ユーザー向けのツールです。単純なジオメトリを生成することのみを必要とする場合は、代わりに Vector API を使用します。HTML キャンバスにヒントを得た Vector API は、線、弧、形状などの 2D ベクターグラフィックスを描画します。

Mesh API の使用

Mesh API を使用するには、MeshGenerationContext.Allocate メソッドでメッシュを割り当ててから、頂点とインデックスを入力します。MeshGenerationContext.Allocate メソッドは、ビジュアル要素のコンテンツを描画するためのジオメトリを表現するのに必要な指定された数の頂点とインデックスを割り当てて描画します。ジオメトリ生成規則の詳細については、Vertex.position を参照してください。

以下のコードスニペットは、単一のクアッドを生成します。頂点とインデックスを割り当て、右回りの向きで座標を指定します。

class QuadMeshElement : VisualElement
{
    public Color color = Color.red;

    public QuadMeshElement()
    {
        generateVisualContent += OnGenerateVisualContent;
    }

    void OnGenerateVisualContent(MeshGenerationContext mgc)
    {
        var mesh = mgc.Allocate(4, 6);

        var p0 = Vector2.zero;
        var p1 = new Vector2(layout.width, 0);
        var p2 = new Vector2(layout.width, layout.height);
        var p3 = new Vector2(0, layout.height);

        mesh.SetNextVertex(new Vertex() { position = new Vector3(p0.x, p0.y, Vertex.nearZ), tint = color });
        mesh.SetNextVertex(new Vertex() { position = new Vector3(p1.x, p1.y, Vertex.nearZ), tint = color });
        mesh.SetNextVertex(new Vertex() { position = new Vector3(p2.x, p2.y, Vertex.nearZ), tint = color });
        mesh.SetNextVertex(new Vertex() { position = new Vector3(p3.x, p3.y, Vertex.nearZ), tint = color });

        mesh.SetNextIndex(0);
        mesh.SetNextIndex(1);
        mesh.SetNextIndex(2);
        mesh.SetNextIndex(0);
        mesh.SetNextIndex(2);
        mesh.SetNextIndex(3);
    }
}

Vector API の使用

Vector API を使用するには、MeshGenerationContext から Painter2D オブジェクトにアクセスし、パスを生成します。次に、Stroke を使用して線を描画する、または Fill を使用して形状を描画することができます。

パスをビルドするには、一種の “仮想ペン” を動かすコマンドを発行します。例えば、Mesh API の例で同じクアッドを生成するには、“ペン” を最初の位置に移動し、線を連鎖させます。パスを設定したら、Fill を使用して形状をビルドします。

class QuadVectorElement : VisualElement
{
    public Color color = Color.red;

    public QuadVectorElement()
    {
        generateVisualContent += OnGenerateVisualContent;
    }

    void OnGenerateVisualContent(MeshGenerationContext mgc)
    {
        var p0 = Vector2.zero;
        var p1 = new Vector2(layout.width, 0);
        var p2 = new Vector2(layout.width, layout.height);
        var p3 = new Vector2(0, layout.height);

        var painter2D = mgc.painter2D;

        painter2D.fillColor = color;

        painter2D.BeginPath();
        painter2D.MoveTo(p0);
        painter2D.LineTo(p1);
        painter2D.LineTo(p2);
        painter2D.LineTo(p3);
        painter2D.ClosePath();
        painter2D.Fill();
    }
}

線

LineTo メソッドによって、現在のペンの位置から指定されたペンの位置までの直線が生成されます。線を描画する前に、ストローク色、線の幅、結合、上限などのプロパティを定義します。

線を描画する際に、LineJoin と LineCap のプロパティによって、線の結合と上限のスタイルがコントロールされます。

以下の画像は、線の上限と結合のさまざまなスタイルを示しています。

以下のコードスニペットは、ジグザグの線を描画します。

painter2D.lineWidth = 10.0f;
painter2D.strokeColor = Color.white;
painter2D.lineJoin = LineJoin.Round;
painter2D.lineCap = LineCap.Round;

painter2D.BeginPath();
painter2D.MoveTo(new Vector2(100, 100));
painter2D.LineTo(new Vector2(120, 120));
painter2D.LineTo(new Vector2(140, 100));
painter2D.LineTo(new Vector2(160, 120));
painter2D.LineTo(new Vector2(180, 100));
painter2D.LineTo(new Vector2(200, 120));
painter2D.LineTo(new Vector2(220, 100));
painter2D.Stroke();

Arc

以下のメソッドで弧を描画できます。

• Arc メソッドは、指定された円弧の中心、半径、および開始角度と終了角度から円弧を生成します。
• ArcTo メソッドは、2 つの直線セグメント間に円弧を生成します。

以下のコードスニペットは、Arc を使用して境界線のあるセクターを描画します。

painter2D.lineWidth = 2.0f;
painter2D.strokeColor = Color.red;
painter2D.fillColor = Color.blue;

painter2D.BeginPath();
// Move to the arc center
painter2D.MoveTo(new Vector2(100, 100));

// Draw the arc, and close the path
painter2D.Arc(new Vector2(100, 100), 50.0f, 10.0f, 95.0f);
painter2D.ClosePath();

// Fill and stroke the path
painter2D.Fill();
painter2D.Stroke();

以下のコードスニペットは、ArcTo を使用して、線の角に要求された半径の弧を描画します。

painter2D.BeginPath();
painter2D.MoveTo(new Vector2(100, 100));
painter2D.ArcTo(new Vector2(150, 150), new Vector2(200, 100), 20.0f);
painter2D.LineTo(new Vector2(200, 100));
painter2D.Stroke();

カーブ

以下のメソッドで曲線を描画できます。

• BezierCurveTo メソッドは、2 つのコントロールポイントと 3 次ベジエの最終位置によって 3 次ベジエ曲線を生成します。
• QuadraticCurveTo メソッドは、2 次ベジエのコントロールポイントと最終位置によって 2 次ベジエ曲線を生成します。

以下のコードスニペットは、BezierCurveTo を使用してベジエ曲線を描画します。

painter2D.BeginPath();
painter2D.MoveTo(new Vector2(100, 100));
painter2D.BezierCurveTo(new Vector2(150, 150), new Vector2(200, 50), new Vector2(250, 100));
painter2D.Stroke();

以下のコードスニペットは、QuadraticCurveTo を使用して 2 次曲線を描画します。

painter2D.BeginPath();
painter2D.MoveTo(new Vector2(100, 100));
painter2D.QuadraticCurveTo(new Vector2(150, 150), new Vector2(250, 100));
painter2D.Stroke();

塗りつぶしされる穴

Fill を実行する際に穴のあるパスを構築できます。MoveTo を呼び出すと、新しいサブパスが開始されます。穴を作成するには、塗りつぶしルールを使用して、さまざまなサブパスを互いに重ねます。

塗りつぶしルールは、形状の内側をどのように塗りつぶしするかを決定します。

• OddEven: その点から任意の向きで無限遠にレイを描画し、レイが交差する所定の形状からのパスセグメントの数をカウントします。この数が奇数の場合、点は内側にあり、偶数の場合、点は外側にあります。
• NonZero: その点から任意の向きで無限遠にレイを描画し、形状のセグメントがレイと交差する場所を調べます。カウント 0 から開始し、パスセグメントが左から右にレイと交差するたびに 1 を加算します。パスセグメントが右から左にレイと交差するたびに 1 を減算します。交差をカウントした後、結果が 0 の場合、点はパスの外側にあります。それ以外の場合は内側にあります。

以下のコードスニペットは、ひし形の穴を持つ矩形を作成します。

painter2D.BeginPath();
painter2D.MoveTo(new Vector2(10, 10));
painter2D.LineTo(new Vector2(300, 10));
painter2D.LineTo(new Vector2(300, 150));
painter2D.LineTo(new Vector2(10, 150));
painter2D.ClosePath();

painter2D.MoveTo(new Vector2(150, 50));
painter2D.LineTo(new Vector2(175, 75));
painter2D.LineTo(new Vector2(150, 100));
painter2D.LineTo(new Vector2(125, 75));
painter2D.ClosePath();

painter2D.Fill(FillRule.OddEven);

追加リソース

• MeshGenerationContext
• Painter2D
• エディターとランタイム UI での円グラフの作成
• Mesh API を使用して放射状の進捗インジケーターを作成
• Vector API を使用して放射状の進捗インジケーターを作成