mirror of
https://gitlab.freedesktop.org/cairo/cairo.git
synced 2025-12-20 22:10:13 +01:00
469 lines
13 KiB
XML
469 lines
13 KiB
XML
|
<?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>
|