Linee ed estremità dei tratti

Informazioni su come usare SkiaSharp per disegnare linee con estremità di tratto diverse

In SkiaSharp il rendering di una singola linea è molto diverso dal rendering di una serie di linee rette collegate. Anche quando si disegnano linee singole, tuttavia, è spesso necessario assegnare alle linee una larghezza particolare del tratto. Man mano che queste linee diventano più ampie, anche l'aspetto delle estremità delle linee diventa importante. L'aspetto della fine della linea è detto estremità del tratto:

Per disegnare singole linee, SKCanvas definisce un metodo semplice DrawLine i cui argomenti indicano le coordinate iniziali e finali della linea con un SKPaint oggetto :

canvas.DrawLine (x0, y0, x1, y1, paint);

Per impostazione predefinita, la StrokeWidth proprietà di un oggetto appena creato SKPaint è 0, che ha lo stesso effetto di un valore pari a 1 per il rendering di una linea di un pixel in spessore. Questo aspetto appare molto sottile su dispositivi ad alta risoluzione, ad esempio telefoni, quindi probabilmente vuoi impostare su StrokeWidth un valore più grande. Ma una volta che si inizia a disegnare linee di spessore sizable, che genera un altro problema: Come devono essere visualizzati gli inizi e le estremità di queste linee spesse?

L'aspetto degli inizi e delle estremità delle linee è chiamato estremità di linea o, in Skia, una estremità di tratto. La parola "cap" in questo contesto si riferisce a un tipo di cappello , qualcosa che si trova sulla fine della linea. Impostare la StrokeCap proprietà dell'oggetto SKPaint su uno dei membri seguenti dell'enumerazione SKStrokeCap :

• Butt (impostazione predefinita)
• Square
• Round

Questi sono illustrati meglio con un programma di esempio. La sezione SkiaSharp Lines and Paths del programma di esempio inizia con una pagina denominata Stroke Caps in base alla StrokeCapsPage classe . Questa pagina definisce un PaintSurface gestore eventi che scorre i tre membri dell'enumerazione SKStrokeCap , visualizzando sia il nome del membro di enumerazione che il disegno di una linea utilizzando tale limite di tratto:

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.Center
    };

    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 / 2;
    float xLine1 = 100;
    float xLine2 = info.Width - xLine1;
    float y = textPaint.FontSpacing;

    foreach (SKStrokeCap strokeCap in Enum.GetValues(typeof(SKStrokeCap)))
    {
        // Display text
        canvas.DrawText(strokeCap.ToString(), xText, y, textPaint);
        y += textPaint.FontSpacing;

        // Display thick line
        thickLinePaint.StrokeCap = strokeCap;
        canvas.DrawLine(xLine1, y, xLine2, y, thickLinePaint);

        // Display thin line
        canvas.DrawLine(xLine1, y, xLine2, y, thinLinePaint);
        y += 2 * textPaint.FontSpacing;
    }
}

Per ogni membro dell'enumerazione SKStrokeCap , il gestore disegna due righe, una con uno spessore del tratto di 50 pixel e un'altra linea posizionata sopra con uno spessore del tratto di due pixel. Questa seconda linea è destinata a illustrare l'inizio geometrico e la fine della linea indipendentemente dallo spessore della linea e da una estremità del tratto:

Come si può notare, le estremità del Square tratto e Round estendono efficacemente la lunghezza della linea per metà della larghezza del tratto all'inizio della linea e di nuovo alla fine. Questa estensione diventa importante quando è necessario determinare le dimensioni di un oggetto grafico sottoposto a rendering.

La SKCanvas classe include anche un altro metodo per disegnare più linee che è piuttosto peculiare:

DrawPoints (SKPointMode mode, points, paint)

Il points parametro è una matrice di SKPoint valori ed mode è un membro dell'enumerazione SKPointMode , che ha tre membri:

• Points per eseguire il rendering dei singoli punti
• Lines per connettere ogni coppia di punti
• Polygon per connettere tutti i punti consecutivi

La pagina Righe multiple illustra questo metodo. Il file MultipleLinesPage.xaml crea un'istanza di due Picker visualizzazioni che consentono di selezionare un membro dell'enumerazione SKPointMode e un membro dell'enumerazione SKStrokeCap :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:skia="clr-namespace:SkiaSharp;assembly=SkiaSharp"
             xmlns:skiaforms="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
             x:Class="SkiaSharpFormsDemos.Paths.MultipleLinesPage"
             Title="Multiple Lines">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Picker x:Name="pointModePicker"
                Title="Point Mode"
                Grid.Row="0"
                Grid.Column="0"
                SelectedIndexChanged="OnPickerSelectedIndexChanged">
            <Picker.ItemsSource>
                <x:Array Type="{x:Type skia:SKPointMode}">
                    <x:Static Member="skia:SKPointMode.Points" />
                    <x:Static Member="skia:SKPointMode.Lines" />
                    <x:Static Member="skia:SKPointMode.Polygon" />
                </x:Array>
            </Picker.ItemsSource>
            <Picker.SelectedIndex>
                0
            </Picker.SelectedIndex>
        </Picker>

        <Picker x:Name="strokeCapPicker"
                Title="Stroke Cap"
                Grid.Row="0"
                Grid.Column="1"
                SelectedIndexChanged="OnPickerSelectedIndexChanged">
            <Picker.ItemsSource>
                <x:Array Type="{x:Type skia:SKStrokeCap}">
                    <x:Static Member="skia:SKStrokeCap.Butt" />
                    <x:Static Member="skia:SKStrokeCap.Round" />
                    <x:Static Member="skia:SKStrokeCap.Square" />
                </x:Array>
            </Picker.ItemsSource>
            <Picker.SelectedIndex>
                0
            </Picker.SelectedIndex>
        </Picker>

        <skiaforms:SKCanvasView x:Name="canvasView"
                                PaintSurface="OnCanvasViewPaintSurface"
                                Grid.Row="1"
                                Grid.Column="0"
                                Grid.ColumnSpan="2" />
    </Grid>
</ContentPage>

Si noti che le dichiarazioni dello spazio dei nomi SkiaSharp sono leggermente diverse perché lo SkiaSharp spazio dei nomi è necessario per fare riferimento ai membri delle SKPointMode enumerazioni e SKStrokeCap . Il SelectedIndexChanged gestore per entrambe le Picker visualizzazioni invalida semplicemente l'oggetto SKCanvasView :

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

Questo gestore deve verificare l'esistenza dell'oggetto SKCanvasView perché il gestore eventi viene chiamato per la prima volta quando la SelectedIndex proprietà di Picker è impostata su 0 nel file XAML e che si verifica prima della creazione di un'istanza SKCanvasView di .

Il PaintSurface gestore ottiene i due valori di enumerazione dalle Picker viste:

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

    canvas.Clear();

    // Create an array of points scattered through the page
    SKPoint[] points = new SKPoint[10];

    for (int i = 0; i < 2; i++)
    {
        float x = (0.1f + 0.8f * i) * info.Width;

        for (int j = 0; j < 5; j++)
        {
            float y = (0.1f + 0.2f * j) * info.Height;
            points[2 * j + i] = new SKPoint(x, y);
        }
    }

    SKPaint paint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        Color = SKColors.DarkOrchid,
        StrokeWidth = 50,
        StrokeCap = (SKStrokeCap)strokeCapPicker.SelectedItem
    };

    // Render the points by calling DrawPoints
    SKPointMode pointMode = (SKPointMode)pointModePicker.SelectedItem;
    canvas.DrawPoints(pointMode, points, paint);
}

Gli screenshot mostrano un'ampia gamma di Picker selezioni:

I Telefono a sinistra mostra in che modo il SKPointMode.Points membro di enumerazione determina DrawPoints il rendering di ognuno dei punti nella SKPoint matrice come quadrato se il limite di riga è Butt o Square. Il rendering dei cerchi viene eseguito se il limite di riga è Round.

Lo screenshot di Android mostra il risultato di SKPointMode.Lines. Il DrawPoints metodo disegna una linea tra ogni coppia di valori, utilizzando il limite di SKPoint riga specificato, in questo caso Round.

Quando invece si usa SKPointMode.Polygon, viene disegnata una linea tra i punti successivi nella matrice, ma se si osserva molto attentamente, si noterà che queste linee non sono connesse. Ognuna di queste righe separate inizia e termina con l'estremità di riga specificata. Se si selezionano le Round estremità, le linee potrebbero sembrare connesse, ma non sono effettivamente connesse.

Se le linee sono connesse o meno è un aspetto fondamentale dell'uso dei percorsi grafici.

Collegamenti correlati

• API SkiaSharp