Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting Started with CoreGraphics

17,800 views

Published on

Video for this seminar can be found here: http://www.youtube.com/watch?v=MNxVMYKaZP0

Mike has been an active member of the community since MonoTouch launched, and recently joined Xamarin’s excellent documentation team. He’ll show you how to get to grips with creating 2D graphics and modify PDF files on the fly within your MonoTouch applications.

Published in: Technology, Art & Photos
  • Be the first to comment

Getting Started with CoreGraphics

  1. 1. Xamarin Seminar 26th January 2012 Copyright 2012 © Xamarin Inc. All rights reserved
  2. 2. AgendaGetting Started with Core Graphics Mike Bluestein Technical Writer Xamarin Documentation Team mike.bluestein@xamarin.com Xamarin Copyright 2012 © Xamarin Inc. All rights reserved
  3. 3. 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
  4. 4. What is Core Graphics?
  5. 5. What is Core Graphics?
  6. 6. What is Core Graphics? • Quartz 2D
  7. 7. What is Core Graphics? • Quartz 2D • 2D Drawing API
  8. 8. What is Core Graphics? • Quartz 2D • 2D Drawing API • Images
  9. 9. What is Core Graphics? • Quartz 2D • 2D Drawing API • Images • PDF
  10. 10. It’s Device Independent
  11. 11. It’s Device Independent• Also resolution independent
  12. 12. It’s Device Independent• Also resolution independent• Don’t work in pixels
  13. 13. It’s Device Independent• Also resolution independent• Don’t work in pixels• Instead use geometric points
  14. 14. It’s Device Independent• Also resolution independent• Don’t work in pixels• Instead use geometric points• Code will generally work on any iOS device
  15. 15. Draw with Primitives
  16. 16. Draw with Primitives• To create geometry
  17. 17. Draw with Primitives• To create geometry• Describe how to connect points
  18. 18. Draw with Primitives• To create geometry• Describe how to connect points • Bezier curves
  19. 19. Draw with Primitives• To create geometry• Describe how to connect points • Bezier curves • Lines
  20. 20. Draw with Primitives• To create geometry• Describe how to connect points • Bezier curves • Lines • Paths
  21. 21. Draw with Primitives• To create geometry• Describe how to connect points • Bezier curves • Lines • Paths • Arcs
  22. 22. Ask to be Drawn
  23. 23. Ask to be Drawn• Specify various fill and stroke attributes
  24. 24. Ask to be Drawn• Specify various fill and stroke attributes• Ask the system to draw the geometry
  25. 25. Ask to be Drawn• Specify various fill and stroke attributes• Ask the system to draw the geometry• Draw during run loop
  26. 26. Draw during Run Loop
  27. 27. Draw during Run Loop• Drawing with Core Graphics begins life during run loop processing
  28. 28. Draw during Run Loop• Drawing with Core Graphics begins life during run loop processing• During each iteration through the run loop
  29. 29. 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
  30. 30. 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
  31. 31. Overriding Draw
  32. 32. Overriding Draw• Subclass UIView and Override Draw to introduce drawing code• When run loop cycles, Draw will be called
  33. 33. 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 }
  34. 34. Basic Steps to Draw
  35. 35. Basic Steps to Draw1. Get a graphics context
  36. 36. Basic Steps to Draw1. Get a graphics context2. Set up drawing attributes
  37. 37. Basic Steps to Draw1. Get a graphics context2. Set up drawing attributes3. Create geometry from drawing primitives
  38. 38. Basic Steps to Draw1. Get a graphics context2. Set up drawing attributes3. Create geometry from drawing primitives4. Call a Draw or Stroke method
  39. 39. Example - Draw a Star
  40. 40. Example - Draw a Star
  41. 41. 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); }
  42. 42. Other Drawing Scenarios
  43. 43. Other Drawing Scenarios• Images• Map Overlays• PDF
  44. 44. Other Drawing Scenarios• Images• Map Overlays• PDF
  45. 45. PDF Drawing Example
  46. 46. ReferencesApple’s Quartz 2D Programming GuideMonoTouch Samples - QuartzSamplehttps://github.com/xamarin/monotouch-samples/tree/master/QuartzSample Xamarin Copyright 2012 © Xamarin Inc. All rights reserved
  47. 47. Xamarin Seminar Please give us your feedback http://bit.ly/xamfeedback Follow us on Twitter @XamarinHQ 26th January 2012 Copyright 2012 © Xamarin Inc. All rights reserved

×