Malování prstem v ve skiasharpu

Ukázka stažení Stažení ukázky

Pomocí prstů můžete malovat na plátně.

SKPathObjekt může být průběžně aktualizován a zobrazen. Tato funkce umožňuje použít cestu k interaktivnímu kreslení, jako je například v programu pro Malování prstem.

Cvičení při Malování prstem

Podpora dotykového ovládání v nástroji Xamarin.Forms neumožňuje sledovat jednotlivá prsty na obrazovce, takže byl Xamarin.Forms vyvinut efekt dotykového sledování, který poskytuje další podporu dotykového ovládání. Tento efekt je popsaný v článku vyvolání událostí z efektů. Ukázková Ukázka efektu dotykového ovládání v programu zahrnuje dvě stránky, které používají ve skiasharpu, včetně programu pro Malování prstem.

Řešení SkiaSharpFormsDemos zahrnuje tuto událost sledování dotykového ovládání. Projekt knihovny .NET Standard obsahuje TouchEffect třídu, TouchActionType výčet, TouchActionEventHandler delegáta a TouchActionEventArgs třídu. Každý projekt platformy obsahuje TouchEffect třídu pro tuto platformu. projekt iOS také obsahuje TouchRecognizer třídu.

stránka Malování prstem v SkiaSharpFormsDemos je zjednodušená implementace malování prstem. Nepovoluje výběr barvy nebo tloušťky čar, nemá žádný způsob, jak plátno vymazat, a samozřejmě nemůžete grafiku Uložit.

Soubor FingerPaintPage. XAML vloží do jedné buňky a připojí TouchEffect k tomuto Grid :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
             xmlns:tt="clr-namespace:TouchTracking"
             x:Class="SkiaSharpFormsDemos.Paths.FingerPaintPage"
             Title="Finger Paint">

    <Grid BackgroundColor="White">
        <skia:SKCanvasView x:Name="canvasView"
                           PaintSurface="OnCanvasViewPaintSurface" />
        <Grid.Effects>
            <tt:TouchEffect Capture="True"
                            TouchAction="OnTouchEffectAction" />
        </Grid.Effects>
    </Grid>
</ContentPage>

Přímé připojení k nefunguje na TouchEffectSKCanvasView všech platformách.

Soubor s kódem na pozadí FingerPaintPage. XAML. cs definuje dvě kolekce pro ukládání objektů a také objekt pro vykreslování těchto cest:

public partial class FingerPaintPage : ContentPage
{
    Dictionary<long, SKPath> inProgressPaths = new Dictionary<long, SKPath>();
    List<SKPath> completedPaths = new List<SKPath>();

    SKPaint paint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        Color = SKColors.Blue,
        StrokeWidth = 10,
        StrokeCap = SKStrokeCap.Round,
        StrokeJoin = SKStrokeJoin.Round
    };

    public FingerPaintPage()
    {
        InitializeComponent();
    }
    ...
}

Jak název navrhuje, inProgressPaths slovník ukládá cesty, které jsou aktuálně vykreslovány jedním nebo více prsty. Klíč slovníku je dotykové ID, které doprovází události dotykového ovládání. completedPathsPole je kolekce cest, které byly dokončeny, když prst, který nakreslí cestu z obrazovky, převedl.

TouchActionObslužná rutina spravuje tyto dvě kolekce. Když se prst poprvé dotkne obrazovky, přidá se do aplikace nový SKPathinProgressPaths . Při pohybu prstem se do cesty přidají další body. Když se prst uvolní, cesta se přenese do completedPaths kolekce. Můžete malovat více prsty současně. Po každé změně jedné z cest nebo kolekcí dojde k zrušení SKCanvasView platnosti:

public partial class FingerPaintPage : ContentPage
{
    ...
    void OnTouchEffectAction(object sender, TouchActionEventArgs args)
    {
        switch (args.Type)
        {
            case TouchActionType.Pressed:
                if (!inProgressPaths.ContainsKey(args.Id))
                {
                    SKPath path = new SKPath();
                    path.MoveTo(ConvertToPixel(args.Location));
                    inProgressPaths.Add(args.Id, path);
                    canvasView.InvalidateSurface();
                }
                break;

            case TouchActionType.Moved:
                if (inProgressPaths.ContainsKey(args.Id))
                {
                    SKPath path = inProgressPaths[args.Id];
                    path.LineTo(ConvertToPixel(args.Location));
                    canvasView.InvalidateSurface();
                }
                break;

            case TouchActionType.Released:
                if (inProgressPaths.ContainsKey(args.Id))
                {
                    completedPaths.Add(inProgressPaths[args.Id]);
                    inProgressPaths.Remove(args.Id);
                    canvasView.InvalidateSurface();
                }
                break;

            case TouchActionType.Cancelled:
                if (inProgressPaths.ContainsKey(args.Id))
                {
                    inProgressPaths.Remove(args.Id);
                    canvasView.InvalidateSurface();
                }
                break;
        }
    }
    ...
    SKPoint ConvertToPixel(Point pt)
    {
        return new SKPoint((float)(canvasView.CanvasSize.Width * pt.X / canvasView.Width),
                           (float)(canvasView.CanvasSize.Height * pt.Y / canvasView.Height));
    }
}

Body doprovázející události sledování dotykového ovládání jsou Xamarin.Forms souřadnice; musí být převedeny na souřadnice ve skiasharpu, což jsou pixely. To je účel ConvertToPixel metody.

PaintSurfaceObslužná rutina pak jednoduše vykreslí obě kolekce cest. Předchozí dokončené cesty se zobrazí pod cestou, které probíhají:

public partial class FingerPaintPage : ContentPage
{
    ...
    void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
    {
        SKCanvas canvas = args.Surface.Canvas;
        canvas.Clear();

        foreach (SKPath path in completedPaths)
        {
            canvas.DrawPath(path, paint);
        }

        foreach (SKPath path in inProgressPaths.Values)
        {
            canvas.DrawPath(path, paint);
        }
    }
    ...
}

Malby prstem jsou omezené jenom na vaše talentů:

\snímek stránky Malování prstem

Nyní jste viděli, jak kreslit čáry a definovat křivky pomocí rovnic ukazatelů. Pozdější oddíl na ve skiasharpu křivce a cestách popisuje různé typy křivek, které podporují. Užitečným předpokladem je ale zkoumání ve skiasharpu transformací.