Xamarin.iOS Finger Paint on UI

Question

I want to draw with one finger on a UIImageView-Control with Xamarin iOS. What I found: First Second

This two examples won't work properly because with the first link there are the following problems:

1. I have to use two fingers for drawing, but I want to use only one Finger (don´t be confused with the pictures, I have to use two fingers to active the touch function)
2. The positioning is wrong I guess the problems relies on due to wrong scaling (see the attached pictures)

This is the code I currently have:

public partial class DetailImageView : UIImageView
{
    DetailImageViewController ctrl;
    public DetailImageView (IntPtr handle) : base (handle)
    {

    }

    public void Initialize(DetailImageViewController rootController)
    {
        ctrl = rootController;
    }

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

        UITouch touch = touches.AnyObject as UITouch;

        drawOnTouch(touch);

        //DrawLineOnImage();
    }

    public override void TouchesMoved(NSSet touches, UIEvent evt)
    {
        base.TouchesMoved(touches, evt);
        UITouch touch = touches.AnyObject as UITouch;

        drawOnTouch(touch);

        //DrawLineOnImage();
    }


    private void drawOnTouch(object data)
    {

        UITouch touch = data as UITouch;

        if (null != touch)
        {

            UIGraphics.BeginImageContext(this.Image == null ? this.Frame.Size : this.Image.Size);

            //UIGraphics.BeginImageContext(this.Frame.Size);

            using (CoreGraphics.CGContext cont = UIGraphics.GetCurrentContext())
            {

                if (this.Image != null)
                {

                    cont.TranslateCTM(0f, this.Image.Size.Height);
                    cont.ScaleCTM(1.0f, -1.0f);
                    cont.DrawImage(new RectangleF(0f, 0f, Convert.ToSingle(this.Image.Size.Width)
                                                  , Convert.ToSingle(this.Image.Size.Height)), this.Image.CGImage);
                    cont.ScaleCTM(1.0f, -1.0f);
                    cont.TranslateCTM(0f, -this.Image.Size.Height);


                } //end if

                CGPoint lastLocation = touch.PreviousLocationInView(this);
                CGPoint pt = touch.LocationInView(this);
                using (CGPath path = new CGPath())
                {

                    cont.SetLineCap(CGLineCap.Round);
                    cont.SetLineWidth(10);
                    cont.SetStrokeColor(0, 2, 3, 1);

                    var xMultiplier = Image.Size.Height / Frame.Height;
                    var yMultiplier = Image.Size.Width / Frame.Width;

                    var xLoc = lastLocation.X * xMultiplier;
                    var yLoc = lastLocation.Y * yMultiplier;

                    path.MoveToPoint(xLoc, yLoc);
                    path.AddLines(new CGPoint[] { new CGPoint(xLoc,
                                                              yLoc),
                        new CGPoint(pt.X * xMultiplier, pt.Y * yMultiplier) });
                    path.CloseSubpath();

                    cont.AddPath(path);
                    cont.DrawPath(CGPathDrawingMode.FillStroke);
                    this.Image = UIGraphics.GetImageFromCurrentImageContext();

                }//end using path


            }//end using cont
            UIGraphics.EndImageContext();
            this.SetNeedsDisplay();

        }//end if
    }//end void drawOnTouch
}

Answer 1

The positioning is wrong I guess the problems relies on due to wrong scaling

Because when we use the image, the image's size is usually different from the UIImageView's size. You use the image's size to draw paths, so it will miss its position. Try to modify like this:

if (null != touch)
{

    UIGraphics.BeginImageContext(this.Frame.Size);

    using (CoreGraphics.CGContext cont = UIGraphics.GetCurrentContext())
    {

        if (this.Image != null)
        {

            cont.TranslateCTM(0f, this.Frame.Size.Height);
            cont.ScaleCTM(1.0f, -1.0f);
            cont.DrawImage(new RectangleF(0f, 0f, Convert.ToSingle(this.Frame.Size.Width)
                                            , Convert.ToSingle(this.Frame.Size.Height)), this.Image.CGImage);
            cont.ScaleCTM(1.0f, -1.0f);
            cont.TranslateCTM(0f, -this.Frame.Size.Height);


        } //end if

        CGPoint lastLocation = touch.PreviousLocationInView(this);
        CGPoint pt = touch.LocationInView(this);
        using (CGPath path = new CGPath())
        {

            cont.SetLineCap(CGLineCap.Round);
            cont.SetLineWidth(10);
            cont.SetStrokeColor(0, 2, 3, 1);

            var xLoc = lastLocation.X;
            var yLoc = lastLocation.Y;

            path.MoveToPoint(xLoc, yLoc);
            path.AddLines(new CGPoint[] { new CGPoint(xLoc,
                                                    yLoc),
            new CGPoint(pt.X, pt.Y) });
            path.CloseSubpath();

            cont.AddPath(path);
            cont.DrawPath(CGPathDrawingMode.FillStroke);
            this.Image = UIGraphics.GetImageFromCurrentImageContext();

        }//end using path


    }//end using cont
    UIGraphics.EndImageContext();
    this.SetNeedsDisplay();

}//end if

About

I have to use two fingers for drawing, but I want to use only one Finger

What do you mean this? The code can be used drawing paths with only finger.