2D 시각적 콘텐츠 생성

메시 API 또는 벡터 API를 사용하여 시각적 요소에 2D 시각적 콘텐츠를 생성합니다.

메시 API를 사용하여 커스텀 모양을 그릴 수 있습니다. 메시 API는 고급 사용자를 위한 툴입니다. 단순 지오메트리만 생성하려면 벡터 API를 사용하십시오. HTML 캔버스에서 영감을 받은 벡터 API는 선, 호, 셰이프 같은 2D 벡터 그래픽스를 그립니다.

메시 API 사용

메시 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);
    }
}

벡터 API 사용

벡터 API를 사용하려면 MeshGenerationContext에서 Painter2D 오브젝트에 액세스하고 경로를 생성합니다. 그런 다음 Stroke를 사용하여 선을 그리거나 Fill을 사용하여 모양을 그릴 수 있습니다.

경로를 빌드하려면 일종의 ’가상 펜’을 움직이는 커맨드를 실행합니다. 예를 들어 메시 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 메서드는 지정된 호의 중심, 반지름, 시작 및 끝 각도로 호를 생성합니다.
• ArcTo 메서드는 두 직선 세그먼트 사이에 호를 생성합니다.

다음 코드 스니핏은 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 메서드는 두 개의 컨트롤 포인트와 큐빅 베지어의 최종 위치로 큐빅 베지어 커브를 생성합니다.
• 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에서 파이 차트 만들기
• 메시 API를 사용하여 방사형 진행 표시기 만들기
• 벡터 API를 사용하여 방사형 진행 표시기 만들기