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