Getting Started with CoreGraphics

16,687 views
16,512 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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
16,687
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
65
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×