Getting Started with CoreGraphics

IntroductionThis session will be a primer on using Core Graphicswith MonoTouch. What is Core Graphics? What are its fundamental concepts? How is it used? Examples Xamarin Copyright 2012 © Xamarin Inc. All rights reserved

What is Core Graphics?

What is Core Graphics? • Quartz 2D

What is Core Graphics? • Quartz 2D • 2D Drawing API

What is Core Graphics? • Quartz 2D • 2D Drawing API • Images

What is Core Graphics? • Quartz 2D • 2D Drawing API • Images • PDF

It’s Device Independent

It’s Device Independent• Also resolution independent

It’s Device Independent• Also resolution independent• Don’t work in pixels

It’s Device Independent• Also resolution independent• Don’t work in pixels• Instead use geometric points

It’s Device Independent• Also resolution independent• Don’t work in pixels• Instead use geometric points• Code will generally work on any iOS device

Draw with Primitives

Draw with Primitives• To create geometry

Draw with Primitives• To create geometry• Describe how to connect points

Draw with Primitives• To create geometry• Describe how to connect points • Bezier curves

Draw with Primitives• To create geometry• Describe how to connect points • Bezier curves • Lines

Draw with Primitives• To create geometry• Describe how to connect points • Bezier curves • Lines • Paths

Draw with Primitives• To create geometry• Describe how to connect points • Bezier curves • Lines • Paths • Arcs

Ask to be Drawn

Ask to be Drawn• Specify various ﬁll and stroke attributes

Ask to be Drawn• Specify various ﬁll and stroke attributes• Ask the system to draw the geometry

Ask to be Drawn• Specify various ﬁll and stroke attributes• Ask the system to draw the geometry• Draw during run loop

Draw during Run Loop

Draw during Run Loop• Drawing with Core Graphics begins life during run loop processing

Draw during Run Loop• Drawing with Core Graphics begins life during run loop processing• During each iteration through the run loop

Draw during Run Loop• Drawing with Core Graphics begins life during run loop processing• During each iteration through the run loop • System checks if any views need to be drawn

Draw during Run Loop• Drawing with Core Graphics begins life during run loop processing• During each iteration through the run loop • System checks if any views need to be drawn • Calls the UIView’s Draw method

Overriding Draw

Overriding Draw• Subclass UIView and Override Draw to introduce drawing code• When run loop cycles, Draw will be called

Overriding Draw• Subclass UIView and Override Draw to introduce drawing code• When run loop cycles, Draw will be called public override void Draw (RectangleF rect) { base.Draw (rect); // drawing code goes here }

Basic Steps to Draw

Basic Steps to Draw1. Get a graphics context

Basic Steps to Draw1. Get a graphics context2. Set up drawing attributes

Basic Steps to Draw1. Get a graphics context2. Set up drawing attributes3. Create geometry from drawing primitives

Basic Steps to Draw1. Get a graphics context2. Set up drawing attributes3. Create geometry from drawing primitives4. Call a Draw or Stroke method

Example - Draw a Star

Example - Draw a Star public override void Draw (RectangleF rect) { base.Draw (rect); // get graphics context CGContext gctx = UIGraphics.GetCurrentContext (); // set up drawing attributes gctx.SetLineWidth (4); UIColor.Yellow.SetStroke (); // stroke with a dashed line gctx.SetLineDash (3, new float[] {6,2} ); // create geometry var path = new CGPath (); PointF origin = new PointF (Bounds.GetMidX (), Bounds.GetMinY () + 10); path.AddLines (new PointF[] { origin, new PointF (origin.X + 35, origin.Y + 80), new PointF (origin.X - 50, origin.Y + 30), new PointF (origin.X + 50, origin.Y + 30), new PointF (origin.X - 35, origin.Y + 80) }); path.CloseSubpath (); // add geometry to graphics context and draw it gctx.AddPath (path); gctx.DrawPath (CGPathDrawingMode.Stroke); }

Other Drawing Scenarios

Other Drawing Scenarios• Images• Map Overlays• PDF

PDF Drawing Example

ReferencesApple’s Quartz 2D Programming GuideMonoTouch Samples - QuartzSamplehttps://github.com/xamarin/monotouch-samples/tree/master/QuartzSample Xamarin Copyright 2012 © Xamarin Inc. All rights reserved

http://blog.xamarin.com	9971
http://www.go-mono.com	1076
http://go-mono.com	166
http://newblog.xamarin.com	58
http://www.go-mono.org	18
http://go-mono.org	10
http://translate.googleusercontent.com	6
http://go-mono.net	2
http://webcache.googleusercontent.com	2
http://xamarin.wordpress.com	1
http://ej.sectorit.net	1

Getting Started with CoreGraphics

by Xamarin on Jan 26, 2012

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 11,311

Statistics

Getting Started with CoreGraphics Presentation Transcript