diff options
Diffstat (limited to 'doc/tutorial/slides/tutorial.xml')
| -rw-r--r-- | doc/tutorial/slides/tutorial.xml | 468 |
1 files changed, 468 insertions, 0 deletions
diff --git a/doc/tutorial/slides/tutorial.xml b/doc/tutorial/slides/tutorial.xml new file mode 100644 index 000000000..4b5248e0d --- /dev/null +++ b/doc/tutorial/slides/tutorial.xml @@ -0,0 +1,468 @@ +<?xml version="1.0" ?> +<svgslides + xmlns="http://www.svgslides.org/svgslides0.1" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + > + + <slides theme="cairo" + presentation="How to Recognize Ugly Graphics" + presentation-subtitle="How to recognize ugly graphics—and what you can do about it." + URL="http://cairographics.org" + bullet="bullet"> + + <slide title="Tutorial Preparation" variant="blank" bullet=""> + <lc></lc> + <lc align="center">http://cairographics.org/tutorial</lc> + <lc></lc> + <li>tar xzf tutorial.tar.gz</li> + <li>cd tutorial</li> + <li>make</li> + <lc></lc> + <lc align="center">IRC help: freenode.net #cairo</lc> + </slide> + + <slide variant="title"> + <lc>Carl Worth</lc> + <lc>Red Hat, Inc.</lc> + <lc></lc> + <lc>Ottawa Linux Symposium</lc> + <lc>2005-07-22</lc> + <lc>http://cairographics.org</lc> + </slide> + + <slide title="Ugly Graphics" variant="separator"> + <lc align="left">Jaggies</lc> + <lc align="center">Fuzzies</lc> + <lc align="right">Fireworks</lc> + </slide> + + <slide title="Jaggies"> + <img src="jaggies.svg"/> + </slide> + + <slide title="Fuzzies"> + <img src="fuzzies.svg"/> + </slide> + + <slide title="Fireworks"> + </slide> + + <slide title="Getting Started" variant="separator"> + <lc align="center">Various shell cairo program</lc> + </slide> + + <slide title="Minimal cairo-xlib program" variant="code"> + <lc>#include <cairo.h></lc> + <lc>#include <cairo-xlib.h></lc> + <lc>int main (void) {</lc> + <lc> Display *dpy = XOpenDisplay (0);</lc> + <lc> Window w = XCreateSimpleWindow (dpy,RootWindow (dpy, 0),</lc> + <lc> 0, 0, WIDTH, HEIGHT, 0, 0, WhitePixel (dpy, 0));</lc> + <lc> cairo_surface_t *surface = cairo_xlib_surface_create (dpy, w,</lc> + <lc> DefaultVisual (dpy, DefaultScreen (dpy)),</lc> + <lc> WIDTH, HEIGHT);</lc> + <lc> XEvent ev;</lc> + <lc> XSelectInput (dpy, w, ExposureMask);</lc> + <lc> XMapWindow (dpy, w);</lc> + <lc> while (XNextEvent (dpy, &ev) == 0)</lc> + <lc> if (ev.type == Expose && !ev.xexpose.count) {</lc> + <lc> cairo_t *cr = cairo_create (surface);</lc> + <lc> draw (cr);</lc> + <lc> cairo_destroy (cr);</lc> + <lc> }</lc> + <lc>}</lc> + </slide> + + <slide title="Minimal cairo-gtk program" variant="code"> + <lc>#include <gtk/gtk.h></lc> + <lc>static gboolean</lc> + <lc>handle_expose (GtkWidget *widget, GdkEventExpose *event, gpointer data) {</lc> + <lc> cairo_t *cr = gdk_cairo_create (widget->window);</lc> + <lc> draw (cr);</lc> + <lc> cairo_destroy (cr);</lc> + <lc> return FALSE;</lc> + <lc>}</lc> + <lc>int main (int argc, char **argv) {</lc> + <lc> GtkWidget *window, *drawing_area;</lc> + <lc> gtk_init (&argc, &argv);</lc> + <lc> window = gtk_window_new (GTK_WINDOW_TOPLEVEL);</lc> + <lc> gtk_window_set_default_size (GTK_WINDOW (window), WIDTH, HEIGHT);</lc> + <lc> drawing_area = gtk_drawing_area_new ();</lc> + <lc> gtk_container_add (GTK_CONTAINER (window), drawing_area);</lc> + <lc> g_signal_connect (drawing_area, "expose-event",</lc> + <lc> G_CALLBACK (handle_expose), NULL);</lc> + <lc> gtk_widget_show_all (window);</lc> + <lc> gtk_main ();</lc> + <lc>}</lc> + </slide> + + <slide title="Minimal cairo-png program" variant="code"> + <lc>#include <cairo.h></lc> + <lc></lc> + <lc>int main (void)</lc> + <lc>{</lc> + <lc> cairo_surface_t *surface;</lc> + <lc> cairo_t *cr;</lc> + <lc></lc> + <lc> surface = cairo_image_surface_create (CAIRO_FORMAT_ARGB32,</lc> + <lc> WIDTH, HEIGHT);</lc> + <lc> </lc> + <lc> cr = cairo_create (surface);</lc> + <lc> draw (cr);</lc> + <lc> cairo_surface_write_to_png (surface, "foo.png");</lc> + <lc></lc> + <lc> cairo_surface_destroy (surface);</lc> + <lc> cairo_destroy (cr);</lc> + <lc></lc> + <lc> return 0;</lc> + <lc>}</lc> + </slide> + + <slide title="Minimal cairo-pdf program" variant="code"> + <lc>#include <cairo.h></lc> + <lc>#include <cairo-pdf.h></lc> + <lc></lc> + <lc>int main (void)</lc> + <lc>{</lc> + <lc> cairo_surface_t *surface;</lc> + <lc> cairo_t *cr;</lc> + <lc></lc> + <lc> surface = cairo_pdf_surface_create (foo.pdf, WIDTH, HEIGHT);</lc> + <lc> </lc> + <lc> cr = cairo_create (surface);</lc> + <lc> draw (cr);</lc> + <lc> cairo_show_page (cr);</lc> + <lc></lc> + <lc> cairo_surface_destroy (surface);</lc> + <lc> cairo_destroy (cr);</lc> + <lc></lc> + <lc> return 0;</lc> + <lc>}</lc> + </slide> + + <slide title="Minimal pycairo-gtk shell" variant="code"> + <lc>import gtk</lc> + <lc>import cairo</lc> + <lc>import cairo.gtk</lc> + <lc></lc> + <lc>def handle_expose (widget, event):</lc> + <lc> cr = cairo.gtk.gdk_cairo_create (widget.window)</lc> + <lc> draw (c)</lc> + <lc></lc> + <lc>win = gtk.Window ()</lc> + <lc>win.connect ('destroy', lambda x: gtk.main_quit ())</lc> + <lc>drawingarea = gtk.DrawingArea ()</lc> + <lc>win.add (drawingarea)</lc> + <lc>drawingarea.connect ('expose_event', handle_expose)</lc> + <lc>drawingarea.set_size_request (WIDTH, HEIGHT)</lc> + <lc>drawingarea.set_double_buffered (False)</lc> + <lc>win.show_all ()</lc> + <lc>gtk.main ()</lc> + </slide> + + <slide title="Minimal pycairo-png shell" variant="code"> + <lc>import cairo</lc> + <lc></lc> + <lc>surface = cairo.ImageSurface (cairo.FORMAT_ARGB32, WIDTH, HEIGHT)</lc> + <lc>cr = cairo.Context (surface)</lc> + <lc></lc> + <lc>draw (cr)</lc> + <lc></lc> + <lc>surface.write_to_png ('foo.png')</lc> + </slide> + + <slide title="Minimal nickle program" variant="code"> + <lc>autoimport Cairo;</lc> + <lc></lc> + <lc>cairo_t cr = new (WIDTH, HEIGHT);</lc> + <lc>draw (cr);</lc> + </slide> + + <slide title="Drawing" variant="separator"> + <lc align="center">Here comes the fun part</lc> + </slide> + + <slide title="Cairo API"> + <ul> + <li>Paths</li> + <ul> + <li>construction</li> + <li>filling, stroking</li> + </ul> + <li>Images</li> + <ul> + <li>loading from disk</li> + <li>transforming</li> + <li>using as pattern</li> + </ul> + <li>Text</li> + <ul> + <li>Simple API example</li> + </ul> + </ul> + </slide> + + <slide title="Paths"> + <ul> + <li>Built from lines and splines.</li> + <ul> + <li>cairo_move_to() set current point</li> + <li>cairo_line_to() draw line</li> + <li>cairo_curve_to() draw Bézier spline</li> + <li>cairo_close_path() draw line to start</li> + </ul> + <li>Can also be built from glyphs</li> + <ul> + <li>cairo_text_path() path from UTF-8</li> + <li>cairo_glyph_path() path from glyphs</li> + </ul> + <li>Part of graphics state</li> + <ul> + <li>cairo_save()/cairo_restore() affect path</li> + </ul> + </ul> + </slide> + + <slide title="Using Paths"> + <ul> + <li>Stroke or Fill</li> + <ul> + <li>cairo_stroke walks path outline with pen</li> + <li>cairo_fill paints interior of path</li> + <li>both operations consume the path, resetting the current path to empty</li> + </ul> + <li>Clip</li> + <ul> + <li>cairo_clip intersects interior of path with current clip</li> + </ul> + <li>Convert path to stroked version</li> + <ul> + <li>not yet named</li> + </ul> + </ul> + </slide> + + <slide title="Path Example"> + </slide> + + <slide title="Stroking Paths"> + <ul> + <li>Elliptical pen (line width radius)</li> + <li>Join styles</li> + <ul> + <li>CAIRO_LINE_JOIN_MITER with limit</li> + <LI>CAIRO_LINE_JOIN_BEVEL</LI> + <li>CAIRO_LINE_JOIN_ROUND uses pen</li> + </ul> + <li>Cap styles</li> + <ul> + <LI>CAIRO_LINE_CAP_BUTT</LI> + <LI>CAIRO_LINE_CAP_ROUND</LI> + <LI>CAIRO_LINE_CAP_SQUARE</LI> + </ul> + </ul> + </slide> + + <slide title="Stroke Example"> + </slide> + + <slide title="Closing the Path"> + <li>cairo_close_path</li> + <li>Draws a line (if necessary) to the start of the path</li> + <li>Draws a join from that line to the first element of the path</li> + </slide> + + <slide title="Close Path Example"> + </slide> + + <slide title="Caps and Joins"> + <ul> + <li>cairo_set_line_cap</li> + <ul> + <LI>CAIRO_LINE_CAP_BUTT</LI> + <LI>CAIRO_LINE_CAP_ROUND</LI> + <LI>CAIRO_LINE_CAP_SQUARE</LI> + </ul> + <li>cairo_set_line_join</li> + <ul> + <LI>CAIRO_LINE_JOIN_BEVEL</LI> + <LI>CAIRO_LINE_JOIN_ROUND</LI> + <LI>CAIRO_LINE_JOIN_MITER</LI> + </ul> + </ul> + </slide> + + <slide title="Caps and Joins Setup"> + </slide> + + <slide title="Caps and Joins Example"> + </slide> + + <slide title="Filling Paths"> + <ul> + <li>Closes path with line_to if necessary</li> + <ul> + <li>line drawn from current point to last move_to location</li> + </ul> + <li>Fills interior</li> + <li>Even/odd or winding fill rules</li> + </ul> + </slide> + + <slide title="Fill Example"> + </slide> + + <slide title="Source color"> + <li>cairo_set_source_rgb sets a solid color source</li> + <li>Source color is used for any drawing operation (stroke, fill, or</li> + <li>others)</li> + </slide> + + <slide title="Fill and Stroke"> + <li>cairo_stroke/fill_preserve preserve the path</li> + <li>Could just walk the figure twice</li> + </slide> + + <slide title="Fill and Stroke Example"> + </slide> + + <slide title="Affine Transformations"> + <ul> + <li>Single matrix combines rotation, translation, scale and shear</li> + <li>Non-projective transformations</li> + <ul> + <li>Pen doesn't change shape along the stroke</li> + </ul> + <li>Transformations are cumulative</li> + <ul> + <li>translate, scale != scale, translate</li> + </ul> + </ul> + </slide> + + <slide title="Affine Transform Example"> + </slide> + + <slide title="Even/Odd vs Winding"> + <li>Even/Odd counts edges, fills when odd</li> + <li>Winding counts up for clockwise edges, down for counterclockwise, fills when !zero</li> + </slide> + + <slide title="Combining Images"> + <li>Cairo memory surfaces are images</li> + <li>cairo_show_surface paints one surface into another</li> + <li>Transformed through matrix</li> + <li>No projective transforms yet</li> + </slide> + + <slide title="Loading an Image File"> + </slide> + + <slide title="Image Example"> + </slide> + + <slide title="Image Transformation"> + </slide> + + <slide title="Resampling Modes"> + <li>Nearest Neighbor</li> + </slide> + + <slide title="Patterns"> + <li>Apply one surface as pattern on another</li> + <li>Pattern transformed through source surface matrix</li> + <li>Patterns may repeat</li> + </slide> + + <slide title="Pattern Example"> + </slide> + + <slide title="Pattern Transformations"> + <ul> + <li>Source surface holds matrix</li> + <li>Constructed with matrix operations</li> + <li>Some thought to changing this API</li> + <ul> + <li>Need to add projective transformations</li> + <li>May want procedural patterns</li> + </ul> + </ul> + </slide> + + <slide title="Pattern Transform"> + </slide> + + <slide title="Gradients"> + <ul> + <li>No primitive gradients in cairo</li> + <ul> + <li>Implemented as patterns</li> + <li>Bilinear interpolation smooths result</li> + </ul> + <li>Future API may include more</li> + <ul> + <li>Procedural patterns</li> + <li>Triangular patches</li> + </ul> + </ul> + </slide> + + <slide title="Gradient Setup"> + </slide> + + <slide title="Gradient Creation"> + </slide> + + <slide title="Gradient Example"> + </slide> + + <slide title="Text"> + <ul> + <li>API is getting replaced</li> + <li>“Toy” API will be similar to current code</li> + <li>“Full” API will have</li> + <ul> + <li>OS dependent font selection</li> + <li>Use Glyph Ids instead of Unicode chars</li> + </ul> + <li>New implementation will provide device-independent fonts</li> + <li>Old API worked only on X</li> + </ul> + </slide> + + <slide title="“Toy” Text API"/> + <ul> + <li>Simple font selection</li> + <ul> + <li>family, weight, slant</li> + <li>OS independent</li> + <li>No font listing support</li> + </ul> + <li>UTF-8 text drawing and extents functions</li> + <li>Still supports full font transformations</li> + </ul> + + <slide title="“Toy” Text Example"> + </slide> + + <slide title="Error Handling in C"> + <li>C has no exceptions</li> + <li>Checking each return is tedious</li> + <li>C programmers rarely bother</li> + <li>Lots of broken programs result</li> + </slide> + + <slide title="Cairo Error Handling"> + <li>Cairo returns status</li> + <li>Status is “persistant”</li> + <li>cairo_status function returns error state</li> + <li>API “shuts down” when an error occurs</li> + <li>All cairo functions are benign (and well defined) after any error.</li> + </slide> + + <slide title="Cairo Error Example"> + </slide> + + </slides> +</svgslides> |