Finger drawing in Xamarin.iOS App (C#)

Question

I make an app where the user can draw something with his fingers... I have no idea how I can do this...

After research I found the code below.

But with this code I can only draw one line. If I the touch ended and a new touch event begins the line continue on this point... The old line connect automaticly to the new one.

So I want to create a new line on each touch.

Does someone know how this is working?

code

    CGPath path;
    CGPoint initialPoint;
    CGPoint latestPoint;

    public DrawView (IntPtr handle) : base (handle)
    {
        BackgroundColor = UIColor.White;

        path = new CGPath();
    }

    public override void TouchesBegan(NSSet touches, UIEvent evt)
    {
        base.TouchesBegan(touches, evt);

        UITouch touch = touches.AnyObject as UITouch;

        if (touch != null)
        {
            initialPoint = touch.LocationInView(this);
        }
    }

    public override void TouchesMoved(NSSet touches, UIEvent evt)
    {
        base.TouchesMoved(touches, evt);

        UITouch touch = touches.AnyObject as UITouch;

        if (touch != null)
        {
            latestPoint = touch.LocationInView(this);
            SetNeedsDisplay();
        }
    }

    public override void Draw(CGRect rect)
    {
        base.Draw(rect);

        if (!initialPoint.IsEmpty)
        {

            //get graphics context
            using (CGContext g = UIGraphics.GetCurrentContext())
            {
                //set up drawing attributes
                g.SetLineWidth(2);
                UIColor.Black.SetStroke();

                //add lines to the touch points
                if (path.IsEmpty)
                {
                    path.AddLines(new CGPoint[] { initialPoint, latestPoint });
                }
                else
                {
                    path.AddLineToPoint(latestPoint);
                }

                //add geometry to graphics context and draw it
                g.AddPath(path);

                g.DrawPath(CGPathDrawingMode.Stroke);
            }
        }
    }

Answer 1

You can create a extra CGPath to record the paths and draw them with CGContext

Code :

public partial class DrawLine : UIView
{

    CGPath pathtotal;
    CGPath path;

    CGPoint initialPoint;
    CGPoint latestPoint;
    public DrawLine(IntPtr handle) : base(handle)
    {
        BackgroundColor = UIColor.White;
        pathtotal = new CGPath();
    }
    public override void TouchesBegan(NSSet touches, UIEvent evt)
    {
        base.TouchesBegan(touches, evt);
        path = new CGPath();
        UITouch touch = touches.AnyObject as UITouch;

        if (touch != null)
        {
            initialPoint = touch.LocationInView(this);
        }
    }

    public override void TouchesMoved(NSSet touches, UIEvent evt)
    {
        base.TouchesMoved(touches, evt);

        UITouch touch = touches.AnyObject as UITouch;

        if (touch != null)
        {
            latestPoint = touch.LocationInView(this);
            SetNeedsDisplay();
        }
    }

    public override void Draw(CGRect rect)
    {
        base.Draw(rect);

        if (!initialPoint.IsEmpty)
        {

            //get graphics context
            using (CGContext g = UIGraphics.GetCurrentContext())
            {
                //set up drawing attributes
                g.SetLineWidth(2);
                UIColor.Black.SetStroke();

                //add lines to the touch points
                if (path.IsEmpty)
                {
                    path.AddLines(new CGPoint[] { initialPoint, latestPoint });
                }
                else
                {
                    path.AddLineToPoint(latestPoint);
                }

                //add geometry to graphics context and draw it
                pathtotal.AddPath(path);

                g.AddPath(pathtotal);
                g.DrawPath(CGPathDrawingMode.Stroke);
            }
        }
    }
}

Test result: