Yay Çizmenin Üç Yolu

Yayları üç farklı yolla tanımlamak için SkiaSharp kullanmayı öğrenin

Yay, bu sonsuzluk işaretinin yuvarlatılmış bölümleri gibi üç noktanın çevresi üzerindeki bir eğridir:

Bu tanımın basitliğine rağmen, her ihtiyacı karşılayan bir arc-drawing işlevi tanımlamanın hiçbir yolu yoktur ve bu nedenle, bir yay çizmenin en iyi yolu olan grafik sistemleri arasında fikir birliği yoktur. Bu nedenle, SKPath sınıf kendisini tek bir yaklaşımla kısıtlamaz.

SKPath bir AddArc yöntemi, beş farklı ArcTo yöntemi ve iki göreli RArcTo yöntemi tanımlar. Bu yöntemler, yay belirtmeye yönelik üç farklı yaklaşımı temsil eden üç kategoriye ayrılır. Hangisini kullandığınız, arkı tanımlamak için kullanılabilecek bilgilere ve bu yayının çizdiğiniz diğer grafiklere nasıl sığdığına bağlıdır.

Açılı Yay

Yayları çizmeye yönelik açılı yay yaklaşımı, üç noktayı sınırlayan bir dikdörtgen belirtmenizi gerektirir. Bu üç noktanın çevresi üzerindeki yay, üç noktanın ortasından yay başlangıcını ve uzunluğunu gösteren açılarla gösterilir. İki farklı yöntem açı yayları çizer. Yöntemi ve yöntemi şunlardır AddArc ArcTo :

public void AddArc (SKRect oval, Single startAngle, Single sweepAngle)

public void ArcTo (SKRect oval, Single startAngle, Single sweepAngle, Boolean forceMoveTo)

Bu yöntemler Android AddArc ve [ArcTo]xref:Android.Graphics.Path.ArcTo*) yöntemleriyle aynıdır. iOS AddArc yöntemi benzerdir, ancak bir dairenin çevresi üzerindeki yaylarla sınırlandırılır ve üç noktayla genelleştirilir.

Her iki yöntem de üç noktanın hem konumunu hem de boyutunu tanımlayan bir değerle SKRect başlar:

Yay, bu üç noktanın çevresinin bir parçasıdır.

startAngle Bağımsız değişken, üç noktanın ortasından sağa doğru çizilmiş yatay çizgiye göre derece cinsinden saat yönünde bir açıdır. bağımsız sweepAngle değişkeni ile startAnglegörelidir. Sırasıyla 60 derece ve 100 derecelik ve sweepAngle değerleri şunlardırstartAngle:

Yay başlangıç açısında başlar. Uzunluğu süpürme açısına tabidir. Yay burada kırmızı renkte gösterilir:

veya ArcTo yöntemiyle AddArc yola eklenen eğri, üç noktanın çevresinin yalnızca bu kısmıdır:

startAngle veya sweepAngle bağımsız değişkenleri negatif olabilir: Yay pozitif değerler için saat yönünde, negatif değerler sweepAngle için ise saat yönünün tersinedir.

Ancak kapalı AddArc dağılım tanımlamaz. 'den sonra çağırırsanızLineTo, yay sonundan yöntemindeki noktaya LineTo bir çizgi çizilir ve aynı değer için ArcTode AddArcgeçerlidir.

AddArc otomatik olarak yeni bir dağılım başlatır ve son bağımsız değişkeniyle işlevsel olarak çağrısına ArcTo trueeşdeğerdir:

path.ArcTo (oval, startAngle, sweepAngle, true);

Bu son bağımsız değişken olarak adlandırılır forceMoveTove etkili bir şekilde yay başında bir MoveTo çağrıya neden olur. Yeni bir dağılım başlıyor. Son bağımsız değişkeninde falseböyle bir durum söz konusu değildir:

path.ArcTo (oval, startAngle, sweepAngle, false);

Bu sürümü ArcTo geçerli konumdan yay başlangıcına kadar bir çizgi çizer. Bu, arkın daha büyük bir konturun ortasında olabileceği anlamına gelir.

Açı Yay sayfası, başlangıç ve süpürme açılarını belirtmek için iki kaydırıcı kullanmanıza olanak tanır. XAML dosyası iki Slider öğe ve bir SKCanvasViewörneği oluşturur. PaintCanvas AngleArcPage.xaml.cs dosyasındaki işleyici, alan olarak tanımlanan iki SKPaint nesneyi kullanarak hem oval hem de yay çizer:

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

    canvas.Clear();

    SKRect rect = new SKRect(100, 100, info.Width - 100, info.Height - 100);
    float startAngle = (float)startAngleSlider.Value;
    float sweepAngle = (float)sweepAngleSlider.Value;

    canvas.DrawOval(rect, outlinePaint);

    using (SKPath path = new SKPath())
    {
        path.AddArc(rect, startAngle, sweepAngle);
        canvas.DrawPath(path, arcPaint);
    }
}

Gördüğünüz gibi hem başlangıç açısı hem de süpürme açısı negatif değerlere sahip olabilir:

Bu yay oluşturma yaklaşımı algoritmik olarak en basittir ve arkı tanımlayan parametrik denklemleri türetmek kolaydır. Üç noktanın boyutunu ve konumunu ve başlangıç ve süpürme açılarını bilerek, yay başlangıç ve bitiş noktaları basit trigonometri kullanılarak hesaplanabilir:

x = oval.MidX + (oval.Width / 2) * cos(angle)

y = oval.MidY + (oval.Height / 2) * sin(angle)

Değer angle veya startAngle startAngle + sweepAngleşeklindedir.

Bir yayı tanımlamak için iki açının kullanılması, örneğin pasta grafik oluşturmak için çizmek istediğiniz yayının açısal uzunluğunu bildiğiniz durumlar için en iyisidir. Ayrılmış Pasta Grafiği sayfası bunu gösterir. sınıfı, ExplodedPieChartPage bazı fabrika dışı verileri ve renkleri tanımlamak için bir iç sınıf kullanır:

class ChartData
{
    public ChartData(int value, SKColor color)
    {
        Value = value;
        Color = color;
    }

    public int Value { private set; get; }

    public SKColor Color { private set; get; }
}

ChartData[] chartData =
{
    new ChartData(45, SKColors.Red),
    new ChartData(13, SKColors.Green),
    new ChartData(27, SKColors.Blue),
    new ChartData(19, SKColors.Magenta),
    new ChartData(40, SKColors.Cyan),
    new ChartData(22, SKColors.Brown),
    new ChartData(29, SKColors.Gray)
};

İşleyici, PaintSurface bir totalValues sayıyı hesaplamak için önce öğeleri döngüye alır. Bundan, her öğenin boyutunu toplamın kesri olarak belirleyebilir ve bunu bir açıya dönüştürebilir:

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

    canvas.Clear();

    int totalValues = 0;

    foreach (ChartData item in chartData)
    {
        totalValues += item.Value;
    }

    SKPoint center = new SKPoint(info.Width / 2, info.Height / 2);
    float explodeOffset = 50;
    float radius = Math.Min(info.Width / 2, info.Height / 2) - 2 * explodeOffset;
    SKRect rect = new SKRect(center.X - radius, center.Y - radius,
                             center.X + radius, center.Y + radius);

    float startAngle = 0;

    foreach (ChartData item in chartData)
    {
        float sweepAngle = 360f * item.Value / totalValues;

        using (SKPath path = new SKPath())
        using (SKPaint fillPaint = new SKPaint())
        using (SKPaint outlinePaint = new SKPaint())
        {
            path.MoveTo(center);
            path.ArcTo(rect, startAngle, sweepAngle, false);
            path.Close();

            fillPaint.Style = SKPaintStyle.Fill;
            fillPaint.Color = item.Color;

            outlinePaint.Style = SKPaintStyle.Stroke;
            outlinePaint.StrokeWidth = 5;
            outlinePaint.Color = SKColors.Black;

            // Calculate "explode" transform
            float angle = startAngle + 0.5f * sweepAngle;
            float x = explodeOffset * (float)Math.Cos(Math.PI * angle / 180);
            float y = explodeOffset * (float)Math.Sin(Math.PI * angle / 180);

            canvas.Save();
            canvas.Translate(x, y);

            // Fill and stroke the path
            canvas.DrawPath(path, fillPaint);
            canvas.DrawPath(path, outlinePaint);
            canvas.Restore();
        }

        startAngle += sweepAngle;
    }
}

Her pasta dilimi için yeni SKPath bir nesne oluşturulur. Yol, merkezden bir çizgi, ardından yay çizmek için bir ArcTo çizgi ve çağrıdan sonra ortaya giden başka bir çizgiden Close oluşur. Bu program, hepsini merkezden 50 piksel dışarı taşıyarak "ayrılmış" pasta dilimlerini görüntüler. Bu görev, her dilim için süpürme açısının orta noktası yönünde bir vektör gerektirir:

"Patlama" olmadan nasıl göründüğünü görmek için çağrıyı açıklama satırı yapmanız Translate yeterlidir:

Tanjant Yay

tarafından SKPath desteklenen ikinci yay türü tanjant yaydır; bu şekilde adlandırılır, çünkü yay iki bağlı çizgiye tanjant olan bir dairenin çevresi olur.

İki SKPoint parametreli yöntem çağrısı ArcTo veya noktalar için ayrı Single parametrelere ArcTo sahip aşırı yükleme ile bir tanjant yay bir yola eklenir:

public void ArcTo (SKPoint point1, SKPoint point2, Single radius)

public void ArcTo (Single x1, Single y1, Single x2, Single y2, Single radius)

Bu ArcTo yöntem PostScript arct (sayfa 532) işlevine ve iOS AddArcToPoint yöntemine benzer.

ArcTo yöntemi üç nokta içerir:

• Konturun geçerli noktası veya çağrılmadıysa MoveTo nokta (0, 0)
• Yöntemin ArcTo köşe noktası olarak adlandırılan ilk nokta bağımsız değişkeni
• hedef noktası olarak adlandırılan ikinci nokta bağımsız değişkeniArcTo:

Bu üç nokta iki bağlı çizgi tanımlar:

Üç nokta colinear ise (yani aynı düz çizgiye uzanırlarsa) hiçbir yay çizilmeyecektir.

ArcTo yöntemi bir parametre de içerirradius. Bu, bir dairenin yarıçapını tanımlar:

Tanjant yay, üç nokta için genelleştirilmemiştir.

İki çizgi herhangi bir açıda bir araya gelirse, bu daire her iki çizgiye de tanjant olacak şekilde bu çizgilerin arasına eklenebilir:

Kontura eklenen eğri, yöntemde belirtilen noktaların her ikisine ArcTo de dokunmaz. Geçerli noktadan ilk tanjant noktasına doğru düz bir çizgiden ve burada kırmızıyla gösterilen ikinci tanjant noktasında biten bir yaydan oluşur:

Dağılıma eklenen son düz çizgi ve yay aşağıdadır:

Dağılım ikinci tanjant noktasından devam edilebilir.

Tanjant Yay sayfası tanjant yay ile denemeler yapmanızı sağlar. Bu, birkaç kullanışlı SKPaint nesne tanımlayan ve işleme gerçekleştiren öğesinden InteractivePagetüretilen birkaç sayfadan ilkidirTouchPoint:

public class InteractivePage : ContentPage
{
    protected SKCanvasView baseCanvasView;
    protected TouchPoint[] touchPoints;

    protected SKPaint strokePaint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        Color = SKColors.Black,
        StrokeWidth = 3
    };

    protected SKPaint redStrokePaint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        Color = SKColors.Red,
        StrokeWidth = 15
    };

    protected SKPaint dottedStrokePaint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        Color = SKColors.Black,
        StrokeWidth = 3,
        PathEffect = SKPathEffect.CreateDash(new float[] { 7, 7 }, 0)
    };

    protected void OnTouchEffectAction(object sender, TouchActionEventArgs args)
    {
        bool touchPointMoved = false;

        foreach (TouchPoint touchPoint in touchPoints)
        {
            float scale = baseCanvasView.CanvasSize.Width / (float)baseCanvasView.Width;
            SKPoint point = new SKPoint(scale * (float)args.Location.X,
                                        scale * (float)args.Location.Y);
            touchPointMoved |= touchPoint.ProcessTouchEvent(args.Id, args.Type, point);
        }

        if (touchPointMoved)
        {
            baseCanvasView.InvalidateSurface();
        }
    }
}

TangentArcPage sınıfı öğesinden InteractivePagetüretilir. TangentArcPage.xaml.cs dosyasındaki oluşturucu, dizinin örneğini oluşturmak ve başlatmak touchPoints ve (içindeInteractivePage) öğesini TangentArcPage.xaml dosyasında örneği oluşturulan nesneye SKCanvasView ayarlamakla baseCanvasView sorumludur:

public partial class TangentArcPage : InteractivePage
{
    public TangentArcPage()
    {
        touchPoints = new TouchPoint[3];

        for (int i = 0; i < 3; i++)
        {
            TouchPoint touchPoint = new TouchPoint
            {
                Center = new SKPoint(i == 0 ? 100 : 500,
                                     i != 2 ? 100 : 500)
            };
            touchPoints[i] = touchPoint;
        }

        InitializeComponent();

        baseCanvasView = canvasView;
        radiusSlider.Value = 100;
    }

    void sliderValueChanged(object sender, ValueChangedEventArgs args)
    {
        if (canvasView != null)
        {
            canvasView.InvalidateSurface();
        }
    }
    ...
}

İşleyici, PaintSurface dokunma noktalarına ve öğesine Slidergöre yay çizmek için yöntemini kullanırArcTo, ancak aynı zamanda açının temel alındığı daireyi algoritmalı olarak hesaplar:

public partial class TangentArcPage : InteractivePage
{
    ...
    void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
    {
        SKImageInfo info = args.Info;
        SKSurface surface = args.Surface;
        SKCanvas canvas = surface.Canvas;

        canvas.Clear();

        // Draw the two lines that meet at an angle
        using (SKPath path = new SKPath())
        {
            path.MoveTo(touchPoints[0].Center);
            path.LineTo(touchPoints[1].Center);
            path.LineTo(touchPoints[2].Center);
            canvas.DrawPath(path, dottedStrokePaint);
        }

        // Draw the circle that the arc wraps around
        float radius = (float)radiusSlider.Value;

        SKPoint v1 = Normalize(touchPoints[0].Center - touchPoints[1].Center);
        SKPoint v2 = Normalize(touchPoints[2].Center - touchPoints[1].Center);

        double dotProduct = v1.X * v2.X + v1.Y * v2.Y;
        double angleBetween = Math.Acos(dotProduct);
        float hypotenuse = radius / (float)Math.Sin(angleBetween / 2);
        SKPoint vMid = Normalize(new SKPoint((v1.X + v2.X) / 2, (v1.Y + v2.Y) / 2));
        SKPoint center = new SKPoint(touchPoints[1].Center.X + vMid.X * hypotenuse,
                                     touchPoints[1].Center.Y + vMid.Y * hypotenuse);

        canvas.DrawCircle(center.X, center.Y, radius, this.strokePaint);

        // Draw the tangent arc
        using (SKPath path = new SKPath())
        {
            path.MoveTo(touchPoints[0].Center);
            path.ArcTo(touchPoints[1].Center, touchPoints[2].Center, radius);
            canvas.DrawPath(path, redStrokePaint);
        }

        foreach (TouchPoint touchPoint in touchPoints)
        {
            touchPoint.Paint(canvas);
        }
    }

    // Vector methods
    SKPoint Normalize(SKPoint v)
    {
        float magnitude = Magnitude(v);
        return new SKPoint(v.X / magnitude, v.Y / magnitude);
    }

    float Magnitude(SKPoint v)
    {
        return (float)Math.Sqrt(v.X * v.X + v.Y * v.Y);
    }
}

Tanjant Arc sayfası şu şekilde çalışır:

Tanjant yay, yuvarlatılmış dikdörtgen gibi yuvarlak köşeler oluşturmak için idealdir. SKPath Zaten bir AddRoundedRect yöntem içerdiğinden, Yuvarlatılmış Heptagon sayfası yedi taraflı bir çokgenin köşelerini yuvarlama için nasıl kullanılacağını ArcTo gösterir. (Kod herhangi bir normal çokgen için genelleştirilir.)

PaintSurface sınıfının işleyicisiRoundedHeptagonPage, heptagonun yedi köşesinin koordinatlarını hesaplamak için bir for döngü ve bu köşelerden yedi kenarın orta noktalarını hesaplamak için bir saniye içerir. Bu orta noktalar daha sonra yolu oluşturmak için kullanılır:

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

    canvas.Clear();

    float cornerRadius = 100;
    int numVertices = 7;
    float radius = 0.45f * Math.Min(info.Width, info.Height);

    SKPoint[] vertices = new SKPoint[numVertices];
    SKPoint[] midPoints = new SKPoint[numVertices];

    double vertexAngle = -0.5f * Math.PI;       // straight up

    // Coordinates of the vertices of the polygon
    for (int vertex = 0; vertex < numVertices; vertex++)
    {
        vertices[vertex] = new SKPoint(radius * (float)Math.Cos(vertexAngle),
                                       radius * (float)Math.Sin(vertexAngle));
        vertexAngle += 2 * Math.PI / numVertices;
    }

    // Coordinates of the midpoints of the sides connecting the vertices
    for (int vertex = 0; vertex < numVertices; vertex++)
    {
        int prevVertex = (vertex + numVertices - 1) % numVertices;
        midPoints[vertex] = new SKPoint((vertices[prevVertex].X + vertices[vertex].X) / 2,
                                        (vertices[prevVertex].Y + vertices[vertex].Y) / 2);
    }

    // Create the path
    using (SKPath path = new SKPath())
    {
        // Begin at the first midpoint
        path.MoveTo(midPoints[0]);

        for (int vertex = 0; vertex < numVertices; vertex++)
        {
            SKPoint nextMidPoint = midPoints[(vertex + 1) % numVertices];

            // Draws a line from the current point, and then the arc
            path.ArcTo(vertices[vertex], nextMidPoint, cornerRadius);

            // Connect the arc with the next midpoint
            path.LineTo(nextMidPoint);
        }
        path.Close();

        // Render the path in the center of the screen
        using (SKPaint paint = new SKPaint())
        {
            paint.Style = SKPaintStyle.Stroke;
            paint.Color = SKColors.Blue;
            paint.StrokeWidth = 10;

            canvas.Translate(info.Width / 2, info.Height / 2);
            canvas.DrawPath(path, paint);
        }
    }
}

Çalışan program şu şekildedir:

Eliptik Yay

Eliptik yay, iki SKPoint parametresi olan yönteme ArcTo çağrı veya ArcTo ayrı X ve Y koordinatlarına sahip aşırı yükleme ile bir yola eklenir:

public void ArcTo (SKPoint r, Single xAxisRotate, SKPathArcSize largeArc, SKPathDirection sweep, SKPoint xy)

public void ArcTo (Single rx, Single ry, Single xAxisRotate, SKPathArcSize largeArc, SKPathDirection sweep, Single x, Single y)

Eliptik yay, Ölçeklenebilir Vektör Grafikleri(SVG) ve Evrensel Windows Platformu ArcSegment sınıfına dahil edilen eliptik yay ile tutarlıdır.

Bu ArcTo yöntemler, konturun geçerli noktası olan iki nokta ile yöntemin son parametresi ArcTo ( xy parametre veya ayrı x ve y parametreler) arasında bir yay çizer:

yöntemine (rveya rx ve ry) yönelik ArcTo ilk nokta parametresi hiç bir nokta değil, bunun yerine üç noktanın yatay ve dikey yarıçapını belirtir;

xAxisRotate parametresi, bu üç noktayı döndürmek için saat yönünde derece sayısıdır:

Bu eğik üç nokta iki noktaya dokunacak şekilde konumlandırılırsa, noktalar iki farklı yayla bağlanır:

Bu iki yay iki şekilde ayırt edilebilir: Üst yay alt yaydan daha büyüktür ve yay soldan sağa doğru çekildiğinden, üst yay saat yönünde, alt yay ise saat yönünün tersine çizilir.

Üç noktayı iki nokta arasına başka bir şekilde sığdırmak da mümkündür:

Şimdi üstte saat yönünde çizilmiş daha küçük bir yay ve altta saat yönünün tersine çizilmiş daha büyük bir yay vardır.

Bu nedenle bu iki nokta, eğimli üç nokta tarafından tanımlanan bir yay ile toplam dört yolla bağlanabilir:

Bu dört yay, yöntemine yönelik ve SKPathDirection numaralandırma türü bağımsız değişkenlerinin SKPathArcSize dört bileşimiyle ArcTo ayırt edilir:

• kırmızı: SKPathArcSize.Large ve SKPathDirection.Clockwise
• yeşil: SKPathArcSize.Small ve SKPathDirection.Clockwise
• mavi: SKPathArcSize.Small ve SKPathDirection.CounterClockwise
• magenta: SKPathArcSize.Large ve SKPathDirection.CounterClockwise

Eğimli üç nokta iki nokta arasına sığacak kadar büyük değilse, yeterince büyük olana kadar tekdüzen ölçeklendirilir. Bu durumda iki noktaya yalnızca iki benzersiz yay bağlanır. Bunlar parametresiyle SKPathDirection ayırt edilebilir.

Bir yay tanımlamaya yönelik bu yaklaşım ilk karşılaşmada karmaşık görünse de, döndürülmüş üç nokta ile bir yay tanımlamaya izin veren tek yaklaşımdır ve yayları konturun diğer bölümleriyle tümleştirmeniz gerektiğinde genellikle en kolay yaklaşımdır.

Eliptik Yay sayfası, iki noktayı ve üç noktanın boyutunu ve döndürmesini etkileşimli olarak ayarlamanıza olanak tanır. sınıfı öğesinden InteractivePagetüretilir ve PaintSurface arka EllipticalArcPage.xaml.cs kod dosyasındaki işleyici dört yay çizer:EllipticalArcPage

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

    canvas.Clear();

    using (SKPath path = new SKPath())
    {
        int colorIndex = 0;
        SKPoint ellipseSize = new SKPoint((float)xRadiusSlider.Value,
                                          (float)yRadiusSlider.Value);
        float rotation = (float)rotationSlider.Value;

        foreach (SKPathArcSize arcSize in Enum.GetValues(typeof(SKPathArcSize)))
            foreach (SKPathDirection direction in Enum.GetValues(typeof(SKPathDirection)))
            {
                path.MoveTo(touchPoints[0].Center);
                path.ArcTo(ellipseSize, rotation,
                           arcSize, direction,
                           touchPoints[1].Center);

                strokePaint.Color = colors[colorIndex++];
                canvas.DrawPath(path, strokePaint);
                path.Reset();
            }
    }

    foreach (TouchPoint touchPoint in touchPoints)
    {
        touchPoint.Paint(canvas);
    }
}

Burada çalışıyor:

Arc Infinity sayfası, sonsuzluk işareti çizmek için eliptik yay kullanır. Sonsuzluk işareti, 100 birimle ayrılmış 100 birim yarıçaplı iki daireyi temel alır:

Birbirini geçen iki çizgi her iki daireye de tanjanttır:

Sonsuzluk işareti, bu dairelerin parçalarının ve iki satırın birleşimidir. Sonsuzluk işaretini çizmek için eliptik yay kullanmak için, iki çizginin dairelere tanjant olduğu koordinatlar belirlenmelidir.

Dairelerden birinde sağ dikdörtgen oluşturma:

Dairenin yarıçapı 100 birimdir ve üçgenin hipotenüsü 150 birimdir, bu nedenle açı α 100'ün 150 veya 41,8 dereceye bölündüğü arksinüsüdür (ters sinüs). Üçgenin diğer tarafının uzunluğu, 41,8 derecelik kosinüsün 150 katı veya Pisagor teoreminin de hesaplanabildiği 112'dir.

Daha sonra tanjant noktasının koordinatları şu bilgiler kullanılarak hesaplanabilir:

x = 112·cos(41.8) = 83

y = 112·sin(41.8) = 75

Dört tanjant noktası, daire yarıçapı 100 olan nokta (0, 0) üzerinde ortalanmış bir sonsuzluk işareti çizmek için gereken tek noktadır:

PaintSurface sınıfındaki ArcInfinityPage işleyici sonsuzluk işaretini konumlandırarak (0, 0) noktasının sayfanın ortasına yerleştirilmesini sağlar ve yolu ekran boyutuna ölçeklendirir:

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

    canvas.Clear();

    using (SKPath path = new SKPath())
    {
        path.LineTo(83, 75);
        path.ArcTo(100, 100, 0, SKPathArcSize.Large, SKPathDirection.CounterClockwise, 83, -75);
        path.LineTo(-83, 75);
        path.ArcTo(100, 100, 0, SKPathArcSize.Large, SKPathDirection.Clockwise, -83, -75);
        path.Close();

        // Use path.TightBounds for coordinates without control points
        SKRect pathBounds = path.Bounds;

        canvas.Translate(info.Width / 2, info.Height / 2);
        canvas.Scale(Math.Min(info.Width / pathBounds.Width,
                              info.Height / pathBounds.Height));

        using (SKPaint paint = new SKPaint())
        {
            paint.Style = SKPaintStyle.Stroke;
            paint.Color = SKColors.Blue;
            paint.StrokeWidth = 5;

            canvas.DrawPath(path, paint);
        }
    }
}

Kod, sonsuzluk sinüsünün boyutlarını belirlemek için özelliğini SKPath kullanarak Bounds tuvalin boyutuna ölçeklendirir:

Sonuç biraz küçük görünüyor, bu da özelliğinin Bounds SKPath yolundan daha büyük bir boyut bildirdiğini gösteriyor.

Dahili olarak, Skia birden çok ikinci dereceden Bézier eğrisi kullanarak arkı yaklaşık olarak belirler. Bu eğriler (sonraki bölümde göreceğiniz gibi) eğrinin nasıl çizildiğini yöneten ancak işlenen eğrinin parçası olmayan denetim noktaları içerir. özelliği bu Bounds denetim noktalarını içerir.

Daha sıkı bir uyum elde etmek için denetim noktalarını dışlayan özelliğini kullanın TightBounds . Yatay modda çalışan ve yol sınırlarını elde etmek için özelliğini kullanan TightBounds program aşağıdadır:

Yaylar ve düz çizgiler arasındaki bağlantılar matematiksel olarak düzgün olsa da, yaydan düz çizgiye geçiş biraz ani görünebilir. Üç Tür Bézier Eğrisi ile ilgili bir sonraki makalede daha iyi bir sonsuzluk işareti sunulmuştur.

İlişkili Bağlantılar

• SkiaSharp API'leri