폴리라인 및 파라메트릭 수식

SkiaSharp를 사용하여 매개 변수 수식으로 정의할 수 있는 모든 줄을 렌더링합니다.

이 가이드의 SkiaSharp 곡선 및 경로 섹션에서 특정 유형의 곡선을 렌더링하도록 정의하는 다양한 메서드 SKPath 를 볼 수 있습니다. 그러나 경우에 따라 직접 지원 SKPath되지 않는 곡선 형식을 그려야 합니다. 이러한 경우 폴리라인(연결된 선 컬렉션)을 사용하여 수학적으로 정의할 수 있는 곡선을 그릴 수 있습니다. 선을 충분히 작고 충분히 많이 만들면 결과는 곡선처럼 보입니다. 이 나선형은 실제로 3,600 작은 라인입니다 :

일반적으로 한 쌍의 매개 변수 수식 측면에서 곡선을 정의하는 것이 가장 좋습니다. 이러한 수식은 세 번째 변수에 의존하는 X 및 Y 좌표에 대한 수식으로, 시간 동안 호출 t 되기도 합니다. 예를 들어 다음 매개 변수 수식은 0에서 1까지의 t에 대한 지점(0, 0)을 중심으로 반경이 1인 원을 정의합니다.

x = cos(2πt)

y = sin(2πt)

반지름이 1보다 큰 경우 사인 값과 코사인 값을 해당 반지름으로 곱하기만 하면 되고, 중심을 다른 위치로 이동해야 하는 경우 다음 값을 추가합니다.

x = xCenter + radius·cos(2πt)

y = yCenter + radius·sin(2πt)

축이 가로 및 세로와 평행한 타원의 경우 두 개의 반지름이 관련됩니다.

x = xCenter + xRadius·cos(2πt)

y = yCenter + yRadius·sin(2πt)

그런 다음, 다양한 점을 계산하고 경로에 추가하는 루프에 해당하는 SkiaSharp 코드를 배치할 수 있습니다. 다음 SkiaSharp 코드는 표시 화면을 채우는 줄임표에 대한 개체를 만듭니다 SKPath . 루프는 360도를 직접 순환합니다. 가운데는 디스플레이 표면의 너비와 높이의 절반이며 두 개의 반지름도 마찬가지입니다.

SKPath path = new SKPath();

for (float angle = 0; angle < 360; angle += 1)
{
    double radians = Math.PI * angle / 180;
    float x = info.Width / 2 + (info.Width / 2) * (float)Math.Cos(radians);
    float y = info.Height / 2 + (info.Height / 2) * (float)Math.Sin(radians);

    if (angle == 0)
    {
        path.MoveTo(x, y);
    }
    else
    {
        path.LineTo(x, y);
    }
}
path.Close();

그러면 줄임표가 360개의 작은 줄로 정의됩니다. 렌더링되면 매끄럽게 표시됩니다.

물론 폴리라인을 사용하는 타원은 자동으로 수행하는 메서드를 포함 AddOval 하기 때문에 SKPath 만들 필요가 없습니다. 그러나 에서 제공하지 SKPath않는 시각적 개체를 그릴 수 있습니다.

Archimedean 나선형 페이지에는 줄임표 코드와 유사하지만 중요한 차이점이 있는 코드가 있습니다. 원의 360도 주위를 10번 반복하여 반경을 지속적으로 조정합니다.

void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
    SKImageInfo info = args.Info;
    SKSurface surface = args.Surface;
    SKCanvas canvas = surface.Canvas;

    canvas.Clear();

    SKPoint center = new SKPoint(info.Width / 2, info.Height / 2);
    float radius = Math.Min(center.X, center.Y);

    using (SKPath path = new SKPath())
    {
        for (float angle = 0; angle < 3600; angle += 1)
        {
            float scaledRadius = radius * angle / 3600;
            double radians = Math.PI * angle / 180;
            float x = center.X + scaledRadius * (float)Math.Cos(radians);
            float y = center.Y + scaledRadius * (float)Math.Sin(radians);
            SKPoint point = new SKPoint(x, y);

            if (angle == 0)
            {
                path.MoveTo(point);
            }
            else
            {
                path.LineTo(point);
            }
        }

        SKPaint paint = new SKPaint
        {
            Style = SKPaintStyle.Stroke,
            Color = SKColors.Red,
            StrokeWidth = 5
        };

        canvas.DrawPath(path, paint);
    }
}

각 루프 사이의 오프셋이 상수이므로 결과는 산술 나선형이라고도 합니다.

블록에 SKPath 생성 using 됩니다. 이는 SKPath 이전 프로그램의 개체보다 SKPath 더 많은 메모리를 사용하며, 이는 블록이 관리되지 않는 리소스를 삭제하는 데 더 적합하다는 것을 using 시사합니다.

관련 링크

• SkiaSharp API