Add tap events to elements inside an SVG using SkiaSharp in Xamarin.Forms

Question

I want to get the particular points inside the svg for xamarin.forms Is there is any ways from which I can achieve?

Thanks in advance.

Answer 1

Yes you can add touch events to particular points using Skiasharp. You just have to filter actions by Locations. Assuming you are using Xaml and C#, you Xaml code would look like this

<Grid BackgroundColor="White"
        Grid.Row="1">

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

and then your C# would be like this

void OnTouchEffectAction(object sender, TouchActionEventArgs args)
{
    // Convert Xamarin.Forms point to pixels
    Point pt = args.Location;
    SKPoint point = 
        new SKPoint((float)(canvasView.CanvasSize.Width * pt.X / canvasView.Width),
                    (float)(canvasView.CanvasSize.Height * pt.Y / canvasView.Height));

    // Uncomment the code below based on what you specifically need
    // if (point != The Point you care about) or (pt != The Location you care about
        // return;
    switch (args.Type)
    {
        case TouchActionType.Pressed:
            if (bitmap.HitTest(point))
            {
                touchIds.Add(args.Id);
                bitmap.ProcessTouchEvent(args.Id, args.Type, point);
                break;
            }
            break;

        case TouchActionType.Moved:
            if (touchIds.Contains(args.Id))
            {
                bitmap.ProcessTouchEvent(args.Id, args.Type, point);
                canvasView.InvalidateSurface();
            }
            break;

        case TouchActionType.Released:
        case TouchActionType.Cancelled:
            if (touchIds.Contains(args.Id))
            {
                bitmap.ProcessTouchEvent(args.Id, args.Type, point);
                touchIds.Remove(args.Id);
                canvasView.InvalidateSurface();
            }
            break;
    }
}

Charles Petzold authored these Github examples with Skiasharp, check them out to get a better idea

Answer 2

Answering this old question to maybe help future explorers like myself - in my app I went with SkiaSharp's own tap handlers that are on SKCanvas. You turn them on with the EnableTouchEvents property and then set the callback in the Touch property. Also, in the callback handler make sure to set e.Handled = true; on the SKTouchEventArgs or else you won't get the full spectrum of SKTouchAction types. Tap location is also included.