locked
Possibility to make a path fill clickable RRS feed

  • Question

  • User367459 posted

    I have an image, and have drawn paths over the image as there are different sections of the image that need to be clickable. I thought path was the best idea and managed to draw the paths on top of the image well, but now realised I cannot make them clickable. When I try to add a gesture recognizer, it makes the whole image clickable and not only inside that specific path. Is there an alternative solution or is there something I can do with my code?

    Here is an image of the app (added colours to make the paths distinguishable. There is an image of a truck underneath):

    Here is my XAML code:

    ```

    ```

    Thursday, October 22, 2020 11:35 AM

All replies

  • User379860 posted

    I met the same issue, due to the Path is preview version, Add GestureRecognizers to Path. it not worked as normal. You can open an issue in github.

    https://github.com/xamarin/Xamarin.Forms/issues

    Thursday, October 22, 2020 1:08 PM
  • User367459 posted

    Thank you for your reply. Do you know any alternative solutions for now for what I’m after?

    Thursday, October 22, 2020 11:26 PM
  • User379860 posted

    I test it with skiasharp's Path, I write two lines to make a test. It worked with `GestureRecognizers. However, you have to rewirte your layout by skiasharp

    Here is running gif.

    Here is related code. ``` using System;

    using Xamarin.Forms;

    using SkiaSharp; using SkiaSharp.Views.Forms;

    namespace SkiaSharpFormsDemos.Paths { public class TwoTriangleContoursPage : ContentPage { public TwoTriangleContoursPage() { Title = "Two Triangle Contours"; SKCanvasView canvasView2 = new SKCanvasView(); canvasView2.PaintSurface += CanvasView2_PaintSurface; ;

            var tapGestureRecognizer2 = new TapGestureRecognizer();
            tapGestureRecognizer2.Tapped += async (s, e) =>
            {
                await DisplayAlert("inof", "click blue", "Ok");
            };
            canvasView2.VerticalOptions = LayoutOptions.Center;
            canvasView2.HorizontalOptions = LayoutOptions.Center;
            canvasView2.GestureRecognizers.Add(tapGestureRecognizer2);
    
            //MyPath1.GestureRecognizers.Add(tapGestureRecognizer);
    
            SKCanvasView canvasView = new SKCanvasView();
            canvasView.PaintSurface += OnCanvasViewPaintSurface;
    
            var tapGestureRecognizer = new TapGestureRecognizer();
            tapGestureRecognizer.Tapped += async (s, e) =>
            {
                await DisplayAlert("inof", "click Red", "Ok");
            };
    
            canvasView.GestureRecognizers.Add(tapGestureRecognizer);
    
            canvasView.VerticalOptions= LayoutOptions.Center;
            canvasView.HorizontalOptions = LayoutOptions.Center;
            StackLayout stackLayout = new StackLayout();
    
            stackLayout.Children.Add(canvasView);
            stackLayout.Children.Add(canvasView2);
            Content = stackLayout;
        }
    
        private void CanvasView2_PaintSurface(object sender, SKPaintSurfaceEventArgs args)
        {
            //throw new NotImplementedException();
    
            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.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.Blue,
                StrokeWidth = 50
            };
    
    
    
            // Fill and stroke the path
           // canvas.DrawPath(path, fillPaint);
            canvas.DrawPath(path, strokePaint);
        }
    
        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.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.Red,
                StrokeWidth = 50
            };
    
            SKPaint fillPaint = new SKPaint
            {
                Style = SKPaintStyle.Fill,
                Color = SKColors.Red
            };
    
            // Fill and stroke the path
            canvas.DrawPath(path, fillPaint);
            canvas.DrawPath(path, strokePaint);
        }
    }
    

    }

    ```

    Friday, October 23, 2020 7:57 AM
  • User367459 posted

    Thanks will try it out :smile:

    Is it still clickable outside of the triangles? If not then this is what I’m after :smiley:

    Friday, October 23, 2020 9:22 AM
  • User379860 posted

    Is it still clickable outside of the triangles? If not then this is what I’m after

    Oh, I did not test this needs. Due to the SKCanvasView will draw an square canvas, when we draw the triangles, here a part of place of canvas is clickable.

    Monday, October 26, 2020 7:46 AM