Skip to content

Drawing with MonoTouch.

Here’s a simple example on using Quartz 2D with MonoTouch.

First you need to create a CGBitmapContext object:

[sourcecode language=”csharp”]
int width = 100;
int height = 100;
CGBitmapContext ctx = new CGBitmapContext(IntPtr.Zero, width, height, 8, 4 * width, CGColorSpace.CreateDeviceRGB(), CGImageAlphaInfo.PremultipliedFirst);
[/sourcecode]
Then set some color settings such as the fill and stroke colors:

[sourcecode language=”csharp”]
CGColor red = new CGColor(1f, 0f, 0f, 1f);
CGColor black = new CGColor(0f, 0f, 0f, 1f);
ctx.SetFillColorWithColor(red);
ctx.SetStrokeColorWithColor(black);
[/sourcecode]

Now you can start drawing:

[sourcecode language=”csharp”]
//Draw an ellipse
ctx.FillEllipseInRect(new RectangleF(0, 0, width, height));

//Draw a rectangle inside the ellipse
ctx.SetFillColorWithColor(black);
ctx.FillRect(new RectangleF(width / 4, height / 4, width / 2, height / 2));
[/sourcecode]

Draw some text:

[sourcecode language=”csharp”]
ctx.SetFillColorWithColor(red);
ctx.SelectFont("Arial", 12f, CGTextEncoding.MacRoman);
ctx.ShowTextAtPoint(width / 2, height / 2, "Hi!");
[/sourcecode]

Once you are done drawing you can save your image or display it in a UIImageView using the ToImage() method:

[sourcecode language=”csharp”]
//Show the image in a UIImageView:
myUIImageView.Image = UIImage.FromImage(ctx.ToImage());

//Save your image to file:
UIImage toSave = UIImage.FromImage(ctx.ToImage());
NSError err = new NSError();
toSave.AsJPEG().Save(Path.Combine(Environment.GetFolderPath (Environment.SpecialFolder.Personal), "myimage.jpg"), true, out err);
[/sourcecode]

That should get you on your way to drawing some basic images with MonoTouch. I’ll cover some more advanced techniques in my next post.

6 thoughts on “Drawing with MonoTouch.”

  1. Nice post, thanks – works great.
    But… I have text with German umlauts and they are not displayed correctly. Any idea how to solve this?

  2. Pingback: MonoTouch.Info

  3. Hai,

    Thank’s for the tutorial.
    I am new to monodevelop.I created a signature project using core graphics.The project uses touches began event and mouse coordinates to draw.When i draw slowly the coordinates are highlighting but when the mouse moves faster there is a gap between adjacent coordinates.Please help..

    Here is the code.
    var currentPoint = new PointF();
    var lastPoint = new PointF();
    UITouch touch = touches.AnyObject as UITouch;
    currentPoint = touch.LocationInView(this);
    currentPoint.Y -= 7;
    UIGraphics.BeginImageContext(this.Frame.Size);
    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(0, 0, this.Frame.Size.Width, this.Frame.Size.Height), this.Image.CGImage);
    cont.ScaleCTM(1.0f, -1.0f);
    cont.TranslateCTM(0f, -this.Frame.Size.Height);
    }
    cont.SetLineCap(CGLineCap.Round);
    cont.SetLineWidth(3f);
    cont.SetRGBStrokeColor(0f,0f,0f,1.00f);
    cont.BeginPath();
    cont.MoveTo(currentPoint.X, currentPoint.Y);
    cont.AddLineToPoint(currentPoint.X,currentPoint.Y+5);
    cont.DrawPath(CGPathDrawingMode.Stroke);
    this.Image = UIGraphics.GetImageFromCurrentImageContext();
    UIGraphics.EndImageContext();
    lastPoint = currentPoint;
    NSError err = new NSError();
    string img_path=”path”;
    this.Image.AsJPEG().Save(img_path,true, out err);

Leave a Reply

Your email address will not be published.