---
title: WWDC2001 Session 107
framework: wwdc
role: article
path: wwdc/wwdc2001-107
---

# WWDC2001 Session 107

## Transcript

Kind: captions Language: en good morning everyone I'd like to welcome you to session 107 which is 2d graphics using quartz today we're going to talk about when the most exciting aspects of Mac OS 10 which is the quartz graphics technology and for many developers you're abstracted from it if you're using carbon you often develop with quick-draw if you're using cocoa you're using the NS graphics and S by za those abstractions but what we want to talk about is the quartz - dapi because we really believe that every application can benefit from being you know being powered by PostScript in PDF style graphics and also given the ability to create and consume PDFs as well as an imported format so I'd like to introduce her rune shake is the courts - the engineering manager and he's going to take the presentation from here Thank You Travis good day everyone welcome to this session so we're gonna be focusing on 2d graphics using quartz so our agenda for today is basically going to detail about what quartz is look at the architecture seawifs used in the system where you might be using it indirectly where you might want to focus on using it the bulk of the presentation is going to be focusing on the quartz API will conclude the session where the demo demonstrating the power of quartz so fundamentally quartz is the graphic system on Mac OS so it's responsible for the Aqua look and feel this participates in that all of your window management is handled by quartz rendering it's part of the printing workflow so it plays a very important role throughout throughout maca's 10 so looking at the system architecture slide you'll notice that quartz is in the application services layer right above Darwin it's sure at that level we've got quartz OpenGL and QuickTime looking at that in a little more detail you'll notice that quick-draw QuickTime and OpenGL are not only peers to courts but at the same time they are also sitting on top of courts and the reason for that is quartz is really composed of two special two components quartz 2d which is what our focus today and the quartz compositor so in the graphics and imaging overview you we've talked a little bit about both of them the quartz compositor is responsible for all your Windows Server window management needs in the system it's rip it allows you it effectively handles the compositing of multimedia your windows your menus blending them appropriately with the rest of the system and uploading and sending that to the - on screen on the courts to decide that's your that's the rendering library and that's the focus of this talk today it's a low-level rendering library it's based on the PDF imaging model so hopefully most of you were at the PDF and Mac os10 session right before this one which discussed PDF and the imaging model of course 2d in itself because it is a based on the imaging model and the way we've architected it is resolution and device-independent so you do not have to worry about what the device is what you can that's abstract it for you all you have to do is draw to the context which I'll get into and it was the resolution in high precision a high fidelity output can be machee v' by me by course minting the resolution of your data throughout the workflow we also incorporate color sync and 80s 80s is that Apple type services so that's for all your font management color sync is incorporated also so that allows you to get high fidelity color managed color managed output onto your device quartz does all the work working with color sync to achieve that so let's have a look at where quartz is used you may you may already be using quartz indirectly there's if your cocoa application carbon or Java applications they all sit on top of quartz and so they're using quartz indirectly in cocoa most of the as tribals mentioning most of the NS Bezier path a classes draw and its image classes they take advantage of the quartz API so there the functionality in cocoa is very similar to quartz so you're taking advantage of code indirectly there on the carbon side which you if you do some things things like draw team text that goes through absolutely which is sits which it does all of its text rendering through quartz so and also when you're printing from carbon carbon you're printing to a quick report internally what we do is we turn slate the quick draw calls into quartz calls for your printing and needs Java 2d graphics are also implemented on top of quartz so they're handled natively on the system you may want to directly access for court and what you want to do there is you want to access it through the core graphics framework core graphics is our internal name for quartz quartz is more the marketing name core graphics is part of the application services framework when would you want to actually use courts from carbon the quick-draw model has been a imaging model has been around for the last 10 15 years but the courts imaging model is much more richer much more advanced so that's that's an opportunity for you to take advantage of the advanced 2d graphics through carbon instead of using quick-draw we also have two other api's that I won't be discussing too much today one is the full screen access API and that's if you want to do direct access the screen for gaming or for changing written and displayed apps that's available there's another API for remote access so the applications like Timbuktu where you want to access a remote app and remote system and get information about the contents on screen or be able to send events that's also available that's also part of courts in general when you're working with carbon cocoa or Java that's those frameworks will will be the ones that you go to for all your window management need quartz doesn't necessarily explicitly they're done implicitly through those high layer of level 13 works so let's get into the API itself it's a sea based interface and the reason for that is because we're servicing cocoa carbon and Java so you've got Objective C C++ and Java that's interacting with the system we decided to choose a simple C based interface that can service all three of those clients and so those who are familiar with the core foundation naming convention courts relies on the same naming convention for all of its API and the convention is basically a two letter keyword representing the framework that you're working on and Class verb and object so in our case cg represents the framework so all of quartz calls will begin with cg so the Knicks sample CG context draw image it's straightforward what that really does is it draws an image into a CG context so here's a list of the classes that we'll be talking about that --cork rides these are not classes in the C++ term these are just collection of things that we'll be discussing today so the first thing you want to do is you want to interact with the device so a CG context is your connection to the device so this is synonymous to a quick report on the court side we that connection is an abstraction so you do not have to worry about the details of the device with what the resolution is or whether it's a printer or whether it is on screen from your perspective you want to basically send down your data in as rich of a format as possible and course will be responsible will be responsible for making because it knows about the device it will translate the data appropriately to that device render it save it out into PDF or whatever depending on what the device is so that the important point there is you can send the same information to whatever device through the same API make the same calls and it'll be handled for you one thing also that's part of the CG context is state is is also part of that context so when what I mean by state is it's similar to quick-draw where you're changing you know setting the color you're setting the font you set that into the CG context and until you change it again that's that you know until you change it again the the the state is maintained so you can also save the state draw a make changes to the state for example change the font color or change the text color or change the CTM change the color space information do your drawing and then if you you can then restore it and when you restore it you're restoring it back to the state that you saved it up you do not have to worry about wrist restoring all of the changes that you made so this way this allows you to cleanly get back to a state that you know with which undos under and as all the modifications that you might have done so the context that we support if you're if you're working on screen you're working with cocoa or carbon so the cocoa and carbon will allow you will will create a context for you so on cocoa side you've got a nanosphere uten that you can actually get the graphics context for that view on the carbon side you're working with a quick report you can we've got a on quick draw you can actually make a function call to get at the context for that port when you're printing you're also working with contexts and those are creative for you for the criticism from the printing system those could be a poster context or those could be a raster context depending on what the printer device is in those cases in the first two cases the context is created for you we do provide two other contexts that you can create explicitly one is the cg bitmap EDF context this is where you are trying to generate a PDF document so in order to generate this PDF document it's easy all you do is create a PDF context and now start drawing all of your things into that context and it will all of that all of the drawings that you calls that you make will now be saved into a PDF document at the same time if you choose to you could also create a bitmap context which is this is an off screen but context where everything will be rendered into that off screen bitmap he could make the same set of calls into that same context and instead of being saved out to PDF because it's in our different context you can now render the same set of calls so now that you've got a context let's look at the watch the drawing primitives that you would want to draw into that context basically there's four in number you've got refugee amah tree villages you know line art 2d line art things like your rectangle Alette spats you've got text and images and then finally a PDF document so on the previous slide I had talked about you know if you want to create a PDF document and now we also allow you to take a PDF document and draw that into a context as yet another primitive the rendering the drawing operations are done using the painters algorithm and that's basically you draw something onto a canvas or onto the device and you lay down ink for one a drawing primitive and then you lay down ink for the next one on top and continue to do that so it's a bottom to top drawing operation things above you obscure things below you and in order to maintain resolution independence we all of our drawing operations support floating point coordinates so you can even with that you can use define your shapes define your positioning in the coordinate system using floating points and the appropriate translations are done to the device and that allows it allows for high precision and high fidelity output so let's look at the first primitive which is up vector geometry fundamentally vector geometry is represented as a path in courts in order to what what you want to do there is you de first want to define the path into the context the the definition constructs that internally in the constant context and the next thing you want to do is draw it so drawing a simple there's just one called CG context draw path there are other convenience functions that allow you to draw paths and shapes but that's one that you would probably use more explicitly you know on the definition side though it's very similar to PostScript or the PDF imaging model basically what you do is you begin a path that destroys any paths that might be you might have in the context already the first thing we want to do after that is move to a point la you can also do line to curve you curve to is nothing is a cubic Bezier curve a chord curve to is a quadratic Bezier curve and if you choose to you may also want to close the path because there's a difference between an open path and a closed path in terms of how it will get rendered so as an example I'm gonna try and just draw a simple button like shape using some of these Khan AP eyes it's the first thing to keep in mind is I'll be illustrating what the path will look like but the path isn't really being drawn into the context as I step through this it's really being collected into the context so the illustration is for is just to show what the context is collecting you begin a path you move to a point in your coordinate system and if you can faintly see that's just a point in I've just illustrated that there you the move to sets the current a point in the context then you can perform a line to and that draws a line from the current point to the point that you specify on the line to next thing I'm going to do is call a curve to where I've specify two control points and a final end point and that defines a cubic Bezier curve from the current point to the end point specified and similarly as I keep going on the line to you and a curfew and as a result I'm able to define a shape I can also explicitly close that path also so here's the sequence that allows you to just that define that shape you don't necessarily have to go through that sequence for some of the more common primitives that you are used to for example rectangle lines and arcs arcs can be used to define circles we provide convenience functions which I haven't listed but they're available you don't have to construct all of those or for example for rectangle you don't have to do a move to line 2 line 2 line 2 line 2 there's a simple convenience function for that once you define the shape now you want to draw it what there are a few drawing operations that you can do to it you want to fill it you may want to clip it and you may want to stroke it so fill is really defining the content of that shape that you've defined there's a Phil and CEO Phil I'll show you what the difference between the two instead of feeling you could also choose to set that the content of that shape to be a clipping region so the continent once you set that a clip for a shape any operation you do from that any drawing operation that you might do from that time point onwards while the clip is being it was is currently set in the context all those drawing operations will be effectively clipped to that shape that you've defined you can also stroke the outline of that shape with a pen effectively and we provide for various stroking parameters you can sort of width what happens at line joins you can different define that what happens at the end of a path in terms of the line tap so you can set the mitre limits and also specify line - parameters to control the dashing effectively define it dot - pattern on that line so here are examples of paths so on the top left you will see two open paths one is simple line one with a dash pattern one using cubic Bezier curves using the curve to a more complicated example on your top right and here's the two stars they illustrate the difference between a fill and a neo fill so on the bottom left and the one which is not filled on the center that's an e or fill because it's an even odd filling a rule that defines with how things are filled the other star is based on the winding rule which is the standard fill operation paths are really composed you can be composed of subpaths also and those paths can be disjoint so as an example you could also do a doughnut like shape where the sub paths are really disjoint from the other one and to do something like that all you do is perform another move to operation so bid those with those path constructs you can actually generate really complicated 2d line art text is similar in nature because characters are nothing more than we work directly with outline fonts of a glyph is really effectively a path that it defined in the font so but you don't have to work at it at that level we provide different and drawings functions to draw to draw your text onto a contour context and we support outline fonts and most of these are coming from our leveraging ATS on the system there's two type type one open type Cid fonts four four four four systems which have a lot a huge number of glyphs in the order of thousands primarily Chinese Japanese Korean Vietnamese that take advantage of that and similarly two paths one thing you can do is fill it stroke it and clip it also text text can the functionality that we provide is at the glyph level that's the basic functionality that's the main functionality that courts provide we also provide simple text drawing functionality where it's primarily Mac roman encoding but for unicode support what you really want to do is take advantage of absolutely above us that will handle all of your unicode needs and your layout needs so let's have a look at how the API is that you would want to use here first thing you want to do is set up a create a CD font rest that that can be come from a platform form for example a 80s font draft there's another function that allows you to select a font by name also once you've selected the font into the context effectively you do two two things next you set the text drawing mode one of the three types that I mentioned those could be mixed also you might want to fill and stroke or fill inside the clip and then you just draw your text there's the two types that I was mentioning there's if you want to draw text X do you want to try glyphs there's the context maintains the current a current text position so when you just do a draw text or sorry when you do a show text or a show glyph it starts the text off at the current text drawing position and draws your text from that point onwards you could also explain and once the text has been drawn to the context it updates the text drawing position you can explicitly also its draw text at by not by specifying the point that you want to start it at also so that covers text and that's our second primitive in the system the next one I'll focus on is images we've got support for various types of image formats primarily through the various color spaces that we support so we support RGB labs CMYK images you can draw all of these into a context and because we also work heavily with color sync we also support ICC profile based images or ICC profiles based color spaces that you can associate with an image and it will be appropriately color managed for you when you render it into a context we support alpha Channel and an alpha Channel is nothing more than another channel so in an example where you can an RGB image or in the Alpha Channel we yet another component in that and that represents the transparency for that color component that data could also be pre multiplied or not which effectively means the there's a it determines whether the color values are have been pre multiplied by the Alpha or not so that's provided in the system also also you might we also can't create images which are one bit or 8-bit image masks you're going to create an image like that you can also draw that into a context once you do that draw that image what you're effectively doing is the current color that's been set into the context will be drawn through that mask so that's an another interesting feature that we've got in in course also so using images that are very simple first thing you want to do is basically create an it's image ref and you want to call the CG image create function and when you when you're creating that image you're specifying you know all the parameters that define that image you're specifying the width the height how many bits there are in that component bits per pixel the color space whether it's RGB lamp CMYK whatnot whether it's alpha it has alpha information or not whether it's pretty multiplied or not and normally in other api's on other platforms you'd be providing the point of the bits that represents the data itself in our case what we do is we provide another abstraction we've called a data provider that's your communication to provide the bits I'll get into the data providers a little later in another slide once you're done creating that image and it's very simple from that point onwards you just drawn that CG context called the CG context draw image call and you specify a rectangle that you want the draw image to be drawn into PDF documents are very similar in nature in the sense that there's as simple as images first thing you want to do is create a PDF document ref you can create a PDF document from one file on disk or if you've got one in memory you can create a PDF document ref we've got functions for that once it once you've got that PDF document right and that that effectively points to the document all you want to do is just draw that into a into a context and the functions that you use there is a cheesy context draw PDF document we also provide some convenience functions that allow you to get the bounding box are the number of pages in that PDF document so those are provided so now that we've covered all of the drawing primitives you may want to do some you know need effects on on while your drawing one thing that you might want to do is look at the transformation model that we've got in quartz the initial coordinate system is anchored at an origin on the bottom left so your 0 0 is at the bottom left this is different from quick-draw you're familiar with that which is a your top left and it's anchored in the bottom left and it's in it's like a Cartesian graph so it's increasing Y upwards and X increasing to your right that's your initial coordinate system that's the coordinate system that you get when you get a context and now you can modify that by applying a transformation on to that context so there are transformations like you know the simple examples are rotations translate scales you may want to choose a skew you could even build up complex transformations yourself so we provide two mechanisms for that one is that you draw a you set the transform as modify the sea currents ETM that's inside the context X directly by making context calls or the other thing you do is you can we've got affine transform classes that allow you to that allow you to build up a transforms and then you can once you build the appropriate transform you can set that into the context so let me just go into battlin as I show it as an example so here is the D for D fault coordinate system so let's say we're just drawing a unit square at 0 0 we begin a comma path add a rectangle draw the path so you see a rectangle if we were to modify the CTM be prior to drawing the path prior to drawing the rectangle and let's say we're just doing a rotate operation so it's going to rotate about the origin notice the new coordinate system it started out like this it's now rotated so now any drawing operations you do from that point onwards for example are rectangle are now relative to that new coordinate system that's in place in let's say you were to also insert before drawing the path you were also to draw apply a scale so it now we're building on that rotation that we had applied earlier and now we're performing a scale on top of that and similarly if you were to draw a perform a translate and but you translate in the X direction it's not X in relative to the original coordinate system its relative to the most recent and effectively member to the current transformation matrix that's in the system so you'll notice that it's in this case it's translating to your you know to the top right even though this what we may have specified is a translation in the X direction so using this you can actually build up really complex transformations and notice you do not have to do the calculations and for and calculate the points for that rectangle you can still continue to draw your rectangle as if it was in a you know in in the original coordinate system it's just applied based on the current transformation that is set up for you or that you might have set up explicitly yourself so we've talked about transformations we've talked about some of the primitives one thing I want to get into next is the color spaces that we support so when you're trying to draw vector geometry or line or text you want to be able to draw that with a variety of color spaces and here are the ones that we support so the first one is a device-based color spaces these are color spaces where you know what the destination device is these are usually very simple for people to create and that's what most people end up using but that's not what we recommend necessarily so in this case you've got RGB gray and CMYK you know what the destination is you do and you're telling course you do not want it to be color managed alternately what we want are what we recommend is for people to use calibrated color spaces or even go as far as you know tagging your data with an ICC profile so you you create these color spaces from a profile or from a calibrated space where you've specified you know things like the gamma and the white point for that color space and once that color space is set your drawing operation for your text and your vector geometry will then be color managed for you appropriately there's the LAV color space also that we spent and support and the last one is an index color space so which is nothing more you have to have a reference color space for example the RGB color space and you build up and an array of colors and you're the color that you specify isn't is done through an index into that color table so this is very similar to gif or piloted images so in order to set work with color using our API what you want to do is create a color space it's one of the ones that were on from the previous slides once you've created a color space you if you want to set that for the East you can do it for both fill and Stroke so you you can create calls to set the fill color space and you can make calls to set the stroke color space now that that is selected into the context you when you spend when you're specifying the colors you pass it an array of color values for the component of that color space for example in RGB udall you'd be specifying the RG and B components as an array of color values we also allow you to add alpha values so when you set the color you can also pass in an alpha value and that leads us to transparency you can set a global alpha into the context of what that means is when you set an alpha value all of the drawing that you do from that point onwards will inherit that transparency value effectively so it will be composited for you to the appropriate device alternately you can also set that on the fill and are on the stroke explicitly also the global Alpha is can be applied to PDF documents that you might want to render into the context that would apply to text to all of the primitives that we've talked about whereas the fill and Stroke ones only apply to text and to vector geometry so transparency supported on screen context and 4-bit nap context because you the appropriate compositing is done for you when you specify the alpha value on the PDF context we currently do not support transparency that's transparency the transparency model in PDF is part of the 1.4 spec that we currently have not implemented that the 1.4 spec is currently published and we're working to with Adobe to track that spec we currently support 1.2 and 1.3 so a lot of those a lot of what we support in terms of the PDF specification was discussed in a in the PDF and Mac os10 talked prior to this one and because PDF plays an important role in in the printing workflow because that's the spool file you will also not get transparency on your printing contacts so that's something to keep in mind because it will work on screen but until we add support for it on the PDF and the printing side you will not get that necessarily on the printed output so one thing I other thing I wanted to cover was a data provider and data managers and examples of those are data providers and data consumers this is nothing more than a way for courts to provide data to you or for you to provide data to courts so in the example of an image where you were creating an image you're trying to provide the the bitmap bits to courts so you first have to create a datum provider and pass that in you you're passing in the memory pointer if that happens to be the one that happens to be the type of data provider that you're working with if you're also working with a PDF document that you have on disk or something else you do the same thing you have to create a data provider that allows courts to get at data that resides on disk or wherever it may lie so we provide convenience functions most likely you you've got the file loaded already or it's already on disk so we've got convenience functions that allow you to create data providers and data consumers from memory and from disk and we use the CF URL mechanism for defining the path for that and some miscellaneous items one thing if you're drawing on screen you will you have to be you have to understand that you're growing into a into a back buffer it's buffered for you there's double buffering that's applied to the system you're not directly accessed you're not growing directly to screen so you would want to do a flushing operation so if you wanted to see that in that drawing operation immediately onto the screen there's also another function called cg context synchronized and that's primarily similar to flushing except it allows you to synchronize drawing from multiple components so that they're all atomically flushed at the same time you may want to call into a plug-in for example to do some drawing into a context but you don't want that the drawing that it's drawing the drawing to appear immediately so you expect that plug-in to do a synchronized and then you may then choose to update if flush the contents on your own when you're ready to flush the appropriate pieces once they're all done drawing you want to have that appear atomically on-screen you don't want things to flash onto the screen so that's another function that you can take advantage of if you're working with quick-draw you've you're probably imaging through the quick-draw api's already but you may choose to also work with cg at the same time so there would be some interactions if you're trying to do both imaging at both at the same time or if you want to you know given a quick report how do you get at a CG context for that so those those interactions are actually discussed in the graphics and imaging tips and tricks' talks on Friday morning so that's a very important talk if if you're working with carbon or if you're working with quick-draw it focuses on two aspects one is the quick draw CG and printing interaction and also discusses performance issues related to flushing if you're and we've got some tools that will help you there and so now I want to bring up Andrew Barnes to do a demo that demonstrates the power of Courts so let's hurry indicated there are four types of objects there is line art text images and PDF documents this demo is going to demonstrate how to draw all four of these documents or all four of these things as well as it's going to go through some code examples when I was in the audience I saw a lot of people taking a lot of notes this the code fragment that I'm gonna be showing you are probably going to be available or definitely I want to make sure they are available on it on our website so you don't have to take down the notes because it's it's a fair chunk of code so the first thing we're gonna start off with is just normal line art we have a little demonstration here and we show the Apple logo which is a nice logo should have made it yellow and sleeping with today's color but it's basically it's it's a glyph that I yanked out of so it's the Apple logo so here is a stroke rectangle our favorite star that does some strange things to show yo Phil and some stroking where the - Brent adds pattern dashing is just basically a in the API it's specified as an array of floating-point values they basically specify you know how much to go on how much to go off how much to how much to go off and there's an extra phase parameter that allows you to take your start point and move it through that array so - for an example we are going to move things around so you see I'm just adjusting the phase based on on some number and so all of this stuff is all you know it rotates like normal scales you know right so so let's see how we do that so let's start off with something pretty pretty straightforward it's going to be every object that's ever drawn in this little demonstration program is going to have a draw state specifies a transformation specifies some alpha specifies a bounding box of the object in the objects user space so if I were drawing an object that was you know a unit right let's say glyph I place the glyph inside of a unit square it will the bounding box will basically be you know zero to one one right so we do that we keep track of this information associated with the object so that we can adjust the transformation such that our particular point that we want on the screen which is point a is going to be mapped at the center of that bounding box so that bounding box information is kept and tracked with the objects of the object can do its proper transformation and then there's a progress indicator for instance that little dashing movement thing was done with a progress indicator so that's it's just an extra piece of data that gets added on so as Thrun indicated there is the transformation state now there's a current transformation that exists on the context PDF or R or raster context and you have to set your transformation help so given a draw state which was this other stuff before with X Y width and height we simply go through very basic stuff like translate rotate scale and this is the little piece of code that will make sure that your bounding box is centered at that point so you know just basically translates to move about half kind of thing so if you have a draw state you can get back a transform now if you have a draw state and you want to apply this transformation there's a little piece of dubious code in here that basically says okay if your transform is null then just take the matrix but that's just to show you that the diamond that you can either be working with a transform object which a lot of people like working with they would just be able to modify the transform and they keep the transform associated with their object and they move that around and they say okay draw with this or they keep the parameters explicit you know X Y width and height or sorry X Y angle and scale and then you basically apply the two so in both cases we're going to apply this to our current context in this particular case we have a transform you can County the transform of the current CTM so if you start off with an upright and you do some rotation something kind of goes there and then you can draw your object and the other case it's like okay I've got my explicit components I can either build a transform right by concatenating all these things together or I can apply them directly to the context right and in that way I'm actually modifying the current CTM as a series as a bunch of steps so that's what that code does which is basically the same as this other code on top so okay so now we're going to draw a path so there are two things we can do with a path we can either fill it or we can stroke it and we won't talk about clipping for this current demo the only thing that's really applicable to the fill state is a color right so once you get a fill state or operation if he wants to apply a fill color is going to say apply fill color or fill State apply and that will basically apply the color space and the color that was pretty straightforward the stroke state a little bit more complicated stroking is obviously going to be a color you can set the fill on the stroke color independently and when you're stroking you're going to be using the line state or the line parameters inside of the context there is the line width and they joining their sort of joints that are rounded versus miter joints or you know sort of butt joints then there's capping which is like when you when you stop a segment what happens to the end does it get rounded or it just gets chopped or what happens with the join so and then there's this - array which is this array where you set your points for your phase and you specify a sequence of on and off so this stroke state is basically passed to the object if it needs to stroke and basically just does those things set the line join the cap that with set the dashes and set the color pretty straightforward so now we're talking about paths for the purposes of this demo it's very simple it's just a array of segment types an array of coordinates and all this little tiny loop goes through let's just say if it's a move to pick the two coordinates off put in my zip line to curve to four coordinates so it's it's very straightforward again this will be in the website so now our path example of goes in and says okay I've got a path object and I want to draw so it has to do is apply its transform code that you saw above apply it's drew it's its fill state apply its stroke state set the Alpha if anybody sits in the Alpha begin a path and numerate the path segments and then draw your path and then you're done pretty much so a lot of these parameters are have default values for instance unless you're doing something strange with stroking you really don't have to set you know the cap and the join or the dashes if you're just doing a straight line but it the other caveat to this is it if you're unsure where your context is if you're unsure if you're what your state in your context is you must set it right I mean you can't really assume that oh my gosh you know the font size is gonna be the correct size and then okay I'll just you know show some text or show you know some something because it's not you're not always sure where that thing came from but if you are sure you definitely do not have to do it if you make modifications as Haroon indicated to to the current graphic state you can bracket it by you know a save and a restore so that you can make little tiny twiddling you know like a change the color or change the dashing then you can restore your changes which just revert the context back or revert the current state back to what it was before so whenever these functions or this function or all of these demo functions are called what I do is I basically do my bracket and I do my end with reference to the the synchronized call you know you could possibly do if you I could neither do a flush here if I wanted to flush each object independently or I could do a synchronized which says you know I'm finished drawing my stuff synchronize it and let's move on okay so in saying that let's move on so we moved to our second demo so we're saying our second demo is taxed right so we can fill in stroke text and we can think text and we can you know stroke and of course you know you can rotate scale you know usual stuff and so let's go to our little demo so now we're moving on to this case this case is broken up into two sections first section has to do with text text in this particular example this is slightly miss named but it really has to do with a ASCII string of text with some encoding right for this particular example is gonna be macro encoding so we're going to get some string of text and we're just going to say okay I want to deal with this string of text and macro meant encoding so like the the path example it's pretty straightforward you know when the object comes in it has a draw state has a text rendering mode that's how you're able to get the strokes has the font size of character you know and some text so basically when the draw happens we apply the transformation which was the whole rotation scale thing then we apply the fill state a stroke state set the Alpha select the font by name with its size and the encoding in this case it's macro man encoding it's a parameter because it could be not macro man encoding and then we set the text mode and in that example you saw that right there was stroking and filling and there I think therefore there is filling stroking filling and stroking and clipping I think actually no there's two there six but you can look at that in the in the documentation or in the header files actually so once we've done with that then we can say show text at point right or show text or some other hope a whole bunch of text type operators that taken at an ASCII string and send it through some particular encoding that's indicated by the font the select font is really a convenience function as you'll see in the next example select font basically calls the font API to find the font by a particular name and then apply an encoding onto the font and then set the font into the context and then set the font scale so in the second example where you going to deal with glyphs glyphs are basically actual indices of outlines inside of a particular font they're not unicode they're not they're not anything that's portable it's really sick Euler to a particular font now typically a lot of layout engines will decide to take you know arbitrary Unicode text or kanji text or something like that and transform them into glyphs associated with a particular font and at the lowest level of API you know you you really are going to be drawing an array of glyphs that are matched with a particular fought right so any particular text run after it's been figured out that you have to do this and swivel it around and put kerning and stuff like that you'll end up with just a bunch of array of arrays of glyphs you know and their positions and the font to which they're coming from so this example shows you know how to draw with just the glyph IDs you can use that Sooey to do all of this layout stuff that's what it's for and you'll be able to take Unicode text and convert it to clef IDs and fonts and then you'll be able to use those with with CG so like all the examples they come with a fill state stroke state text mode two pretty usual now we're gonna get a font ID case right so you get a font Ref sorry not font ID font ref we get a font ref and you have a size and you have the glyph array so like all the other examples before you apply a transform apply the fill States trust state set the font set the color here it was explicit right instead of the Select font mechanism by name you actually got the font and you got the size you can say set the font set the slides said the text raining road and show glyphs a point seemed like show a texted point except it takes clips so hopefully everybody is happy with their I haven't lost anything anybody so now we're gonna go to the second example so now we're talking about images we have an alpha logo you know of course all the cases it's all the same object right so it's like very and we can fete things out right so images are with respect to this like this demonstration are practically very simple listen PDF documents the you when the image is called to draw you simply apply the transform you set the Alpha which is how you're able to get the fading and you draw the image with the image box so let me sort of both images and PDF documents have the same parameter called the rect it basically specifies a destination rent for both PDF documents and images they're assumed to be objects that are in a unit square and what you do with that rectangle is you basically say okay I got this thing that's hair looks just like a unit square and I want to take it and put it at this particular point so if you were to have an image and it was 600 by 800 and you wanted to do with no transform you said you know the transform to be identity you'd be able to take the image and draw the image at the correct location PDF documents are also pretty straightforward but we won't go to that just yet because I lost my step here's a PDF document you know here's a nice little chicken they all this is there's no smoke and mirrors here this is real line art being rendered and our document and go down we can zoom around so they're just chicken document mac OS data sheet or mac OS so documents are like images they take the same bound in rec to draw to the destination and they practically do the same thing you apply transform you set the alpha you draw the document very straightforward don't worry about this piece of code that basically does are tracking for our progress indicator which allows us to page through our document so next example so this is another example that uses PDF documents and images and what it tries to demonstrate is color matching now here's an example of an image that was rendered off screen it's a PDF document basically that was rendered off screen and the result of that memory was switched around we lied and we said it's really a BGR image right so we rendered RGB data and then we said oh yeah forget the RGB we're just gonna call these these triples BGR and basically this image is essentially the result of that right it's just an image that got rendered through as if it was a BG our data and this is why you know all the Reds or blues this particular case is a slightly different example right this is a basically a PDF document of course it does that rotations the media box is kind of different that lays down CMYK colors and on the screen you see cyan as electric cyan now what we want to do is we want to say okay we would like to draw this PDF document we really want to proof it on a CMYK printer so we have a CMYK profile which we got from color sync and we loaded up and we created a color space object from it and then we said okay I want you to draw the document inside this off-screen context with this profile which is this color sync CMYK profile and that's why the cyan looks a little bit like what it should look when you print this electric cyan and a printer so now that you finish the two simple cases of draw document draw image we're going to slide here a complicated example and but it's not that strange we get the document in the media box and we get the images color space which is the color space to use and we get the context as color space which is the con which is the color space to use for drawing onto your off-screen image so basically the first time through if there's no context then let's make one so we go and compute the width height Papa blah blah blah blah and here we say I've got a piece of memory now I want to create a data provider as you indicated we have these data managers and they allow you to create objects that can consume and produce memory this particular case we want to create a consumer so the data provider is a direct access sort of here's a sheet of memory it's this size and we have a little release function that says ok when you're done with it and everything's all released go call this method or this function to free the memory up which is just as soon as you get the data pointer we just call free so once we create this data provider then we say ok now that we have our data provider I want to create this image definition and we have to specify the width and Heights bits per pixel in this particular case we're just using RGB 8-bit so bits per sample is going to be 8 bits per pixel is going to be 32 row bytes is going to be width of the image times 4 and we're saying that the Alpha is pre multiplied first we're using an air GB format and the color space no rendering a tent for the image so that's how you would create an image from a bunch of memory which you can see this an example when you look at the header files it'd be a little bit more obvious to of these parameters here are a little bit don't worry about them they basically are decode parameters we do allow the ability to decode images from one bit depth through some transformation that's linear and produce other bits so I can take a 2 bit image and map my 2 bits to 8 bit and expand the scale or I can move the 2 bits and say I want you to only populate the range from 128 to 255 and that's what those decode things do when you see them in the documentation you'll LA you'll say ok yeah that's what that was for so so now we have our image then the second case is the second thing that we need to do is we have to create our bitmap context which is the thing that we wanted the context we want to draw to its an off-screen context we're going to use the same memory that we hand it to the image and we're going to say ok create a bitmap context with the correct width and height in the pits per sample and we're going to say here's the color space to use we use this particular case for the CMYK case so we said ok here's a CMYK what we're going to do is we're going to use the CMYK to draw and because you've had to the data provider off to the image you can just release it because the image has a reference to it so once we've done all of that the first time through you know you didn't have a context I didn't have any memory didn't have an image you just run through that little tiny thing and he creates ok a life-size image and context to draw into that image so now every time we get new stuff coming in a different page or whatever we basically say you know have our off-screen set our transformations that we're basically trying to say whatever the Media size of the document that we're trying to render we wanted to fit smack dab in the middle of the image because I only provided you know 10 pixels by 10 pixels and I wanted to draw on the 10 pixels so we translate the context so it's correctly positioned we draw basically erase the context or you clear it in this particular case we're recording alpha so we want to issue a clear which will clear out both the AL from the data planes and then we just draw a document like the example before but remember we're going to an off-screen context so once the document is drawn then we say ok great we have our little off-screen image right there both referencing both the image and the context were referencing the same piece of memory basically take that then we say ok great we're ready to draw we apply our transform set our alpha and we draw our image and that's how basically these little proofing things we're done so fairly in-depth kind of situation so now to tie it all together we will sort of demonstrate everything all together you know who needs OpenGL when you can render or aqua icons in with a software and if things are a little bit more complicated random PDF document with an alpha image being drawn ok so I just wanted to finish off by talking about some of the documentation there's a quartz primer that's available for you on our website tech pubs is currently working on drawing with quartz part of the inside Mac OS 10 series and at the moment if all fails you can always go back to the headers and those are available in the co graphics framework as part of the application services framework that's what you want to go off to and I wanted white Travis back up to discuss the road map Thank You Haruna and Andrew I want to quickly do the road map so we have some time for some Q&A obviously we've already gone and done the PDF quartz of Mac OS 10 and the drawing actually no they've revised it so the next session that might be of interest is drawing Unicode text with atsui I know that we mentioned text handling in the session but for the the built-in text handling inside quartz is very simple we mentioned a lot of it's a glyph level and based on Mac Roman encoding if you're developing applications you're going to want to use more advanced to text and so what we strongly suggest you do is you use higher-level frameworks such as that su and M LTE that'll be covered in the drawing Unicode text without Sooey we also have an interesting technology called image capture which you've already seen demonstrated allows your applications to work with digital cameras then we go over to a very interesting session 118 which is color sync which is go into depth and describe how color management works in conjunction with quartz to deliver fully color manage content on the user's screen and output devices unlike previously with quick-draw where you really did not have a color manage drawing environment quartz is fully integrated with color man managed to us was demonstrated by Andrew this is very important because we feel that the fidelity on screen and on print is valuable to all users of all classes of applications so you should definitely check out the color sync presentation next we have another text by Mac os10 this will again cover quartz and how it relates to the other text api's in the system then we have a very interesting demonstration if you are doing high-performance 2d work where you for example using large bitmaps although the performance of quartz is quite good if you need even greater performance you should check out the OpenGL in high performance 2d and we also have a printing session the print session will talk about carbon BSD and cocoa printing and then on the final day we have a very important session for carbon developers the graphics and imaging tips and tricks this session will provide a lot of information to enable carbon developers to look seriously at using quartz to D for their graphics as opposed to quick-draw and finally we have the feedback forum you