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.
Nice post, thanks – works great.
But… I have text with German umlauts and they are not displayed correctly. Any idea how to solve this?
Pingback: MonoTouch.Info
Excellent post! Thanks!!!
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);
Hi take a look at this example.
NSError err = new NSError();
THis is not allowed anymore, just do this
NSError err;
The function taking it with an ‘out’ will create it.