SkiaSharp and finger painting problem

LucculLuccul FRMember ✭✭
edited June 14 in Xamarin.Forms

I have a little problem with my finger painting with SkiaSharp with a photo taken.

I just want to take photo and draw on it.

But I can't draw on my entire photo (blue line) and I think I have a problem with my ConvertToPixel:

enter image description here

As you can see, my blue line is where I can draw on my image.

This is my code (based on FingerPaintSavePage in the demo: https://github.com/xamarin/xamarin-forms-samples/blob/master/Effects/TouchTrackingEffect/TouchTrackingEffect/TouchTrackingEffect/FingerPaintPage.xaml.cs)

using SkiaSharp;
using SkiaSharp.Views.Forms;
using System;
using System.Collections.Generic;
using TouchTracking;
using Xamarin.Forms;

namespace SkiaSharpFormsDemos.Bitmaps
{
    public partial class FingerPaintSavePage : ContentPage
    {
        private Dictionary<long, SKPath> inProgressPaths = new Dictionary<long, SKPath>();
        private List<SKPath> completedPaths = new List<SKPath>();
        private SKPaint paint = new SKPaint
        {
            Style = SKPaintStyle.Stroke,
            Color = SKColors.Blue,
            StrokeWidth = 10,
            StrokeCap = SKStrokeCap.Round,
            StrokeJoin = SKStrokeJoin.Round
        };
        private SKBitmap saveBitmap;

        public FingerPaintSavePage()
        {
            this.InitializeComponent();

            this.saveBitmap = BitmapExtensions.LoadBitmapResource(this.GetType(), "SkiaSharpFormsDemos.Media.test.jpg");
        }

        private void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
        {
            var info = args.Info;
            var surface = args.Surface;
            var canvas = surface.Canvas;

            // Render the bitmap
            canvas.Clear(); 

            canvas.DrawBitmap(this.saveBitmap, info.Rect, BitmapStretch.Uniform);
        }

        private void OnTouchEffectAction(object sender, TouchActionEventArgs args)
        {
            switch (args.Type)
            {
                case TouchActionType.Pressed:
                    if (!this.inProgressPaths.ContainsKey(args.Id))
                    {
                        var path = new SKPath();
                        path.MoveTo(this.ConvertToPixel(args.Location));
                        this.inProgressPaths.Add(args.Id, path);
                        this.UpdateBitmap();
                    }
                    break;

                case TouchActionType.Moved:
                    if (this.inProgressPaths.ContainsKey(args.Id))
                    {
                        var path = this.inProgressPaths[args.Id];
                        path.LineTo(this.ConvertToPixel(args.Location));
                        this.UpdateBitmap();
                    }
                    break;

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

                case TouchActionType.Cancelled:
                    if (this.inProgressPaths.ContainsKey(args.Id))
                    {
                        this.inProgressPaths.Remove(args.Id);
                        this.UpdateBitmap();
                    }
                    break;
            }
        }

        private SKPoint ConvertToPixel(Point pt)
        {
            return new SKPoint((float)(this.canvasView.CanvasSize.Width * pt.X / this.canvasView.Width),
                               (float)(this.canvasView.CanvasSize.Height * pt.Y / this.canvasView.Height));
        }

        private void UpdateBitmap()
        {
            using (var saveBitmapCanvas = new SKCanvas(this.saveBitmap))
            {
                foreach (var path in this.completedPaths)
                {
                    saveBitmapCanvas.DrawPath(path, this.paint);
                }

                foreach (var path in this.inProgressPaths.Values)
                {
                    saveBitmapCanvas.DrawPath(path, this.paint);
                }
            }

            this.canvasView.InvalidateSurface();
        } 
    }
}

My page (xaml)

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

I don't understand how I can fix it.

Thanks for your help

Sign In or Register to comment.