Nozioni di base di percorso in SkiaSharpPath Basics in SkiaSharp

Scaricare l'esempio scaricare l'esempioDownload Sample Download the sample

Esplorare l'oggetto di SkiaSharp SKPath per la combinazione di linee e curve collegateExplore the SkiaSharp SKPath object for combining connected lines and curves

Una delle funzionalità più importanti del percorso della grafica è la possibilità di definire quando più righe devono essere connesse e quando non devono essere collegati.One of the most important features of the graphics path is the ability to define when multiple lines should be connected and when they should not be connected. La differenza può essere significativa, come le parti superiori di queste due triangoli illustrano:The difference can be significant, as the tops of these two triangles demonstrate:

Un percorso di grafica viene incapsulato dal SKPath oggetto.A graphics path is encapsulated by the SKPath object. Un percorso è una raccolta di uno o più contorni.A path is a collection of one or more contours. Ogni distribuzione è una raccolta di connessi linee rette e curve.Each contour is a collection of connected straight lines and curves. Distribuzioni non sono connessi tra loro, ma sono visivamente potrebbe sovrapporsi.Contours are not connected to each other but they might visually overlap. In alcuni casi una singola distribuzione può sovrapporsi a se stesso.Sometimes a single contour can overlap itself.

Una distribuzione a livello generale inizia con una chiamata al metodo seguente della SKPath:A contour generally begins with a call to the following method of SKPath:

  • MoveTo Per iniziare una nuova distribuzioneMoveTo to begin a new contour

L'argomento al metodo è un singolo punto, è possibile esprimere come un SKPoint come separato X e Y coordinate o valore.The argument to that method is a single point, which you can express either as an SKPoint value or as separate X and Y coordinates. Il MoveTo chiamata stabilisce un punto all'inizio di un'iniziale e il contorno punto corrente.The MoveTo call establishes a point at the beginning of the contour and an initial current point. È possibile chiamare i metodi seguenti per continuare la distribuzione con una riga o una curva dal punto corrente a un punto specificato nel metodo, che diventa il nuovo punto corrente:You can call the following methods to continue the contour with a line or curve from the current point to a point specified in the method, which then becomes the new current point:

  • LineTo Per aggiungere una linea retta nel percorsoLineTo to add a straight line to the path
  • ArcTo Per aggiungere un arco, vale a dire una riga nella circonferenza di un cerchio o dell'ellisseArcTo to add an arc, which is a line on the circumference of a circle or ellipse
  • CubicTo Per aggiungere una spline di Bézier cubicaCubicTo to add a cubic Bezier spline
  • QuadTo Per aggiungere una spline di Bézier quadraticaQuadTo to add a quadratic Bezier spline
  • ConicTo Per aggiungere una razionale spline Bezier quadratica, che può eseguire in modo accurato il rendering di sezioni conica (puntini di sospensione, parabolas e hyperbolas)ConicTo to add a rational quadratic Bezier spline, which can accurately render conic sections (ellipses, parabolas, and hyperbolas)

Nessuno di questi cinque metodi contengono tutte le informazioni necessarie per descrivere la riga o una curva.None of these five methods contain all the information necessary to describe the line or curve. Ognuno di questi cinque metodi funziona in combinazione con il punto corrente stabilito dalla chiamata al metodo precede immediatamente.Each of these five methods works in conjunction with the current point established by the method call immediately preceding it. Ad esempio, il LineTo metodo aggiunge una linea retta per la distribuzione basata sul punto corrente di, il parametro LineTo è solo un singolo punto.For example, the LineTo method adds a straight line to the contour based on the current point, so the parameter to LineTo is only a single point.

Il SKPath classe definisce anche i metodi che hanno gli stessi nomi di questi sei metodi ma con un R all'inizio:The SKPath class also defines methods that have the same names as these six methods but with an R at the beginning:

Il R è l'acronimo relativo.The R stands for relative. Questi metodi hanno la stessa sintassi dei metodi corrispondenti senza il R ma sono relativo al punto corrente.These methods have the same syntax as the corresponding methods without the R but are relative to the current point. Questi strumenti sono utili per la creazione di parti simili di un percorso in un metodo che viene chiamato più volte.These are handy for drawing similar parts of a path in a method that you call multiple times.

Una distribuzione termina con un'altra chiamata a MoveTo oppure RMoveTo, che inizia una nuova distribuzione o una chiamata a Close, che chiude il contorno.A contour ends with another call to MoveTo or RMoveTo, which begins a new contour, or a call to Close, which closes the contour. Il Close metodo automaticamente aggiunge una linea retta dal punto corrente e il primo punto del contorno e contrassegna il percorso come chiuso, il che significa che verrà visualizzata senza eventuali estremità dei tratti.The Close method automatically appends a straight line from the current point to the first point of the contour, and marks the path as closed, which means that it will be rendered without any stroke caps.

È illustrata la differenza tra i contorni aperte e chiuse nel due distribuzioni del triangolo pagina, che usa un SKPath oggetto con due distribuzioni per il rendering due triangoli.The difference between open and closed contours is illustrated in the Two Triangle Contours page, which uses an SKPath object with two contours to render two triangles. Il primo contorno è aperto e il secondo viene chiusa.The first contour is open and the second is closed. Di seguito è riportato il TwoTriangleContoursPage classe:Here's the TwoTriangleContoursPage class:

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

    canvas.Clear();

    // Create the path
    SKPath path = new SKPath();

    // Define the first contour
    path.MoveTo(0.5f * info.Width, 0.1f * info.Height);
    path.LineTo(0.2f * info.Width, 0.4f * info.Height);
    path.LineTo(0.8f * info.Width, 0.4f * info.Height);
    path.LineTo(0.5f * info.Width, 0.1f * info.Height);

    // Define the second contour
    path.MoveTo(0.5f * info.Width, 0.6f * info.Height);
    path.LineTo(0.2f * info.Width, 0.9f * info.Height);
    path.LineTo(0.8f * info.Width, 0.9f * info.Height);
    path.Close();

    // Create two SKPaint objects
    SKPaint strokePaint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        Color = SKColors.Magenta,
        StrokeWidth = 50
    };

    SKPaint fillPaint = new SKPaint
    {
        Style = SKPaintStyle.Fill,
        Color = SKColors.Cyan
    };

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

Il primo contorno è costituito da una chiamata a MoveTo usando le coordinate X e Y anziché un' SKPoint valore, seguita da tre chiamate a LineTo disegnare tre lati del triangolo.The first contour consists of a call to MoveTo using X and Y coordinates rather than an SKPoint value, followed by three calls to LineTo to draw the three sides of the triangle. La seconda distribuzione ha solo due chiamate a LineTo ma viene completata la distribuzione con una chiamata a Close , che chiude il contorno.The second contour has only two calls to LineTo but it finishes the contour with a call to Close, which closes the contour. La differenza è significativa.The difference is significant:

Come può notare, il primo contorno è ovviamente una serie di tre linee collegate, ma non può connettersi con inizio alla fine.As you can see, the first contour is obviously a series of three connected lines, but the end doesn't connect with the beginning. Le due righe sovrappongano nella parte superiore.The two lines overlap at the top. La seconda distribuzione ovviamente viene chiuso ed è stata eseguita con una minore LineTo chiama perché il Close metodo aggiunge automaticamente una riga finale per chiudere il contorno.The second contour is obviously closed, and was accomplished with one fewer LineTo calls because the Close method automatically adds a final line to close the contour.

SKCanvas definisce un solo DrawPath metodo, che in questa dimostrazione viene chiamato due volte per riempire e tracciare il percorso.SKCanvas defines only one DrawPath method, which in this demonstration is called twice to fill and stroke the path. Tutte le distribuzioni sono riempiti, anche quelli che non sono chiusi.All contours are filled, even those that are not closed. Per motivi di compilazione di percorsi non chiusi, una linea retta si presuppone che esiste tra i punti iniziale e finale delle distribuzioni.For purposes of filling unclosed paths, a straight line is assumed to exist between the start and end points of the contours. Se si rimuove l'ultima LineTo dal primo contorno o rimuovere il Close chiamata dal contorno secondo, ogni contour avrà solo due lati ma essere compilato come se fosse un triangolo.If you remove the last LineTo from the first contour, or remove the Close call from the second contour, each contour will have only two sides but will be filled as if it were a triangle.

SKPath definisce molti altri metodi e proprietà.SKPath defines many other methods and properties. I metodi seguenti aggiungono i contorni interi per il percorso, che potrebbe essere chiuso o non è stato chiuso a seconda del metodo:The following methods add entire contours to the path, which might be closed or not closed depending on the method:

Tenere presente che un SKPath oggetto definisce solo una geometria — una serie di punti e le connessioni.Keep in mind that an SKPath object defines only a geometry — a series of points and connections. Solo quando un SKPath combinata con un SKPaint oggetto è il percorso in cui viene eseguito il rendering con un colore specifico, spessore del tratto e così via.Only when an SKPath is combined with an SKPaint object is the path rendered with a particular color, stroke width, and so forth. Inoltre, tenere presente che il SKPaint oggetto passato per il DrawPath metodo consente di definire le caratteristiche dell'intero percorso.Also, keep in mind that the SKPaint object passed to the DrawPath method defines characteristics of the entire path. Se si desidera disegnare qualcosa che richiedono vari colori, è necessario utilizzare un percorso distinto per ogni colore.If you want to draw something requiring several colors, you must use a separate path for each color.

Proprio come l'aspetto di inizio e alla fine di una riga è definito da un'estremità della traccia, l'aspetto della connessione tra due righe è definito da una join stroke.Just as the appearance of the start and end of a line is defined by a stroke cap, the appearance of the connection between two lines is defined by a stroke join. Viene specificata impostando il StrokeJoin proprietà della SKPaint a un membro del SKStrokeJoin enumerazione:You specify this by setting the StrokeJoin property of SKPaint to a member of the SKStrokeJoin enumeration:

  • Miter per un join indossanoMiter for a pointy join
  • Round per un join arrotondatoRound for a rounded join
  • Bevel per un join abbassate-offBevel for a chopped-off join

Il join tratto pagina mostra tre tracciare join con codice simile al estremità dei tratti pagina.The Stroke Joins page shows these three stroke joins with code similar to the Stroke Caps page. Questo è il PaintSurface gestore dell'evento nel StrokeJoinsPage classe:This is the PaintSurface event handler in the StrokeJoinsPage class:

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

    canvas.Clear();

    SKPaint textPaint = new SKPaint
    {
        Color = SKColors.Black,
        TextSize = 75,
        TextAlign = SKTextAlign.Right
    };

    SKPaint thickLinePaint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        Color = SKColors.Orange,
        StrokeWidth = 50
    };

    SKPaint thinLinePaint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        Color = SKColors.Black,
        StrokeWidth = 2
    };

    float xText = info.Width - 100;
    float xLine1 = 100;
    float xLine2 = info.Width - xLine1;
    float y = 2 * textPaint.FontSpacing;
    string[] strStrokeJoins = { "Miter", "Round", "Bevel" };

    foreach (string strStrokeJoin in strStrokeJoins)
    {
        // Display text
        canvas.DrawText(strStrokeJoin, xText, y, textPaint);

        // Get stroke-join value
        SKStrokeJoin strokeJoin;
        Enum.TryParse(strStrokeJoin, out strokeJoin);

        // Create path
        SKPath path = new SKPath();
        path.MoveTo(xLine1, y - 80);
        path.LineTo(xLine1, y + 80);
        path.LineTo(xLine2, y + 80);

        // Display thick line
        thickLinePaint.StrokeJoin = strokeJoin;
        canvas.DrawPath(path, thickLinePaint);

        // Display thin line
        canvas.DrawPath(path, thinLinePaint);
        y += 3 * textPaint.FontSpacing;
    }
}

Ecco il programma in esecuzione:Here's the program running:

La giunzione è costituito da un punto ben strutturato di cui si connettono le righe.The miter join consists of a sharp point where the lines connect. Quando due righe vengono aggiunti a un angolo di piccole dimensioni, la giunzione può diventare piuttosto lunga.When two lines join at a small angle, the miter join can become quite long. Per evitare join acuto eccessivamente lunga, la lunghezza del join acuto è limitata dal valore della StrokeMiter proprietà della SKPaint.To prevent excessively long miter joins, the length of the miter join is limited by the value of the StrokeMiter property of SKPaint. Una giunzione che supera la lunghezza viene troncata per diventare un angolo smussato.A miter join that exceeds this length is chopped off to become a bevel join.