Xamarin iOS - Drawing onto image after scaling it - ios

Question

I have an app where the user can draw freely on a loaded image. He chooses a pencil color, and start drawing onto the image.
Along with that, he can scale the image down and up, using the fingers, that's where i'm having problems.
After scaling, when drawing onto the image, it gets blurry, and strangely shrinks..
Code for scaling:
void ScaleImage (UIPinchGestureRecognizer gestureRecognizer)
{
AdjustAnchorPoint (gestureRecognizer);
if (gestureRecognizer.State == UIGestureRecognizerState.Began || gestureRecognizer.State == UIGestureRecognizerState.Changed) {
gestureRecognizer.View.Transform *= CGAffineTransform.MakeScale (gestureRecognizer.Scale, gestureRecognizer.Scale);
gestureRecognizer.Scale = 1;
}
}
Code for drawing:
public override void TouchesBegan (NSSet touches, UIEvent evt)
{
base.TouchesBegan (touches, evt);
if (!canDraw)
return;
UITouch touch = (UITouch)touches.AnyObject;
lastPoint = touch.LocationInView (MyImageView);
}
public override void TouchesMoved (NSSet touches, UIEvent evt)
{
base.TouchesMoved (touches, evt);
if (!canDraw)
return;
UITouch touch = (UITouch)touches.AnyObject;
PointF currentPoint = touch.LocationInView (MyImageView);
UIGraphics.BeginImageContext (MyImageView.Frame.Size);
MyImageView.Image.Draw (new RectangleF (
0, 0,
MyImageView.Frame.Size.Width,
MyImageView.Frame.Size.Height));
CGContext ctx = UIGraphics.GetCurrentContext ();
ctx.SetLineCap (CGLineCap.Round);
ctx.SetLineWidth (5.0f);
ctx.SetRGBStrokeColor (red, green, blue, 1);
CGPath path = new CGPath ();
path.MoveToPoint(MyImageView.Transform, lastPoint.X, lastPoint.Y);
path.AddLineToPoint (MyImageView.Transform, currentPoint.X, currentPoint.Y);
ctx.AddPath (path);
ctx.DrawPath (CGPathDrawingMode.Stroke);
MyImageView.Image = UIGraphics.GetImageFromCurrentImageContext ();
UIGraphics.EndImageContext ();
lastPoint = currentPoint;
}
Thanks in advance!

Answer 1

I made it work by using Bezier Paths instead of Core Graphics.
You can find some background about Bezier Paths here:
https://developer.apple.com/library/ios/documentation/2ddrawing/conceptual/drawingprintingios/BezierPaths/BezierPaths.html
Since i wanted to implement an Undo button, i created a Class for storing the Color of the line, as well as the corresponding Path:
public class VESLine{
public UIBezierPath Path {
get;
set;
}
public UIColor Color {
get;
set;
}
public byte Index {
get;
set;
}
}
The TouchesBegan event was modified accordingly, to create a new UIBezierPath object, store it in the array, along with its Color and Index, and touch location:
public override void TouchesBegan (MonoTouch.Foundation.NSSet touches, UIEvent evt)
{
IndexCount++;
UIBezierPath path = new UIBezierPath ();
path.LineWidth = 5.0f;
UITouch touch = (UITouch)touches.AnyObject;
previousPoint1 = touch.PreviousLocationInView (this);
PointF p = touch.LocationInView (this);
path.MoveTo (p);
InvokeOnMainThread (() => {
this.SetNeedsDisplay ();
});
currentPath = path;
VESLine line = new VESLine () {
Path = currentPath,
Color = StrokeColor,
Index = IndexCount
};
lines.Add(line);
}
TouchesMoved event was also modified, to create a smooth line path, by using a QuadCurve instead of a regular line. I also call the SetNeedsDisplay method, to force view drawing:
public override void TouchesMoved (MonoTouch.Foundation.NSSet touches, UIEvent evt)
{
UITouch touch = (UITouch)touches.AnyObject;
PointF p = touch.LocationInView (this);
if (Math.Abs (p.X - previousPoint1.X) >= 4 ||
Math.Abs (p.Y - previousPoint1.Y) >= 4) {
PointF cP = new PointF ((p.X + previousPoint1.X) / 2, (p.Y + previousPoint1.Y) / 2);
currentPath.AddQuadCurveToPoint (cP, previousPoint1);
previousPoint1 = p;
}
else
currentPath.AddLineTo (p);
InvokeOnMainThread (() => {
this.SetNeedsDisplay ();
});
}
TouchesEnded and TouchesCancelled will redraw the view:
public override void TouchesEnded (MonoTouch.Foundation.NSSet touches, UIEvent evt)
{
InvokeOnMainThread (() => {
this.SetNeedsDisplay ();
});
}
public override void TouchesCancelled (MonoTouch.Foundation.NSSet touches, UIEvent evt)
{
InvokeOnMainThread (() => {
this.SetNeedsDisplay ();
});
}
Finally, the Draw method was rewritten to iterate the Array of paths, drawing each one of them using the corresponding color:
public override void Draw (System.Drawing.RectangleF rect)
{
foreach (VESLine p in lines) {
p.Color.SetStroke ();
p.Path.Stroke ();
}
}