[cairo-commit] [cairo-www] src/tutorial.mdwn
Chris Wilson
ickle at freedesktop.org
Tue Oct 21 07:12:56 PDT 2008
src/tutorial.mdwn | 70 +++++++++++++++++++++++++++---------------------------
1 file changed, 35 insertions(+), 35 deletions(-)
New commits:
commit 22ceb31845670c299a4245d6c7de58abc08c4c3e
Author: Chris Wilson <chris at chris-wilson.co.uk>
Date: Tue Oct 21 15:12:35 2008 +0100
[tutorial] Fixup broken links.
diff --git a/src/tutorial.mdwn b/src/tutorial.mdwn
index d76981d..c808ce3 100644
--- a/src/tutorial.mdwn
+++ b/src/tutorial.mdwn
@@ -76,7 +76,7 @@ isn't shown.
<div class="tutright"><img src="destination.png" alt="" /></div>
The destination is the
-[surface](http://www.cairographics.org/manual/Surfaces.html) on which
+[surface](http://www.cairographics.org/manual/cairo-surfaces.html) on which
you're drawing. It may be tied to an array of pixels like in this
tutorial, or it might be tied to a SVG or PDF file, or something else.
This surface collects the elements of your graphic as you apply them,
@@ -90,9 +90,9 @@ The source is the "paint" you're about to work with. I show this as it
is—plain black for several examples—but translucent to show
lower layers. Unlike real paint, it doesn't have to be a single color;
it can be a
-[pattern](http://www.cairographics.org/manual/cairo-Patterns.html) or
+[pattern](http://www.cairographics.org/manual/cairo-pattern.html) or
even a previously created destination
-[surface](http://www.cairographics.org/manual/Surfaces.html). Also
+[surface](http://www.cairographics.org/manual/cairo-surfaces.html). Also
unlike real paint it can contain transparency information—the
Alpha channel.
@@ -135,7 +135,7 @@ PNG file. There is also a data type for the surface, called
The cairo context in this example is tied to an image surface of
dimension 120 x 120 and 32 bits per pixel to store RGB and Alpha
information. Surfaces can be created specific to most cairo backends,
-see the [manual](http://cairographics.org/manual/Surfaces.html) for details.
+see the [manual](http://cairographics.org/manual/cairo-surfaces.html) for details.
<h2 id="L2verbs">Verbs</h2>
@@ -191,10 +191,10 @@ the edge of the path and no further.
alt="" /></a></div>
The
-[`cairo_show_text()`](http://www.cairographics.org/manual/cairo-Text.html#cairo-show-text)
+[`cairo_show_text()`](http://www.cairographics.org/manual/cairo-text.html#cairo-show-text)
operation forms the mask from text. It may be easier to think of
`cairo_show_text()` as a shortcut for creating a path with
-[`cairo_text_path()`](http://www.cairographics.org/manual/cairo-Paths.html#cairo-text-path)
+[`cairo_text_path()`](http://www.cairographics.org/manual/cairo-paths.html#cairo-text-path)
and then using
[`cairo_fill()`](http://www.cairographics.org/manual/cairo-context.html#cairo-fill)
to transfer it. Be aware `cairo_show_text()` caches glyphs so is much
@@ -310,22 +310,22 @@ src="setsourcergba.png" alt="" /></a></div>
Gradients describe a progression of colors by setting a start and stop
reference location and a series of "stops" along the way. [Linear
-gradients](http://www.cairographics.org/manual/cairo-Patterns.html#cairo-pattern-create-linear)
+gradients](http://www.cairographics.org/manual/cairo-pattern.html#cairo-pattern-create-linear)
are built from two points which pass through parallel lines to define
the start and stop locations. [Radial
-gradients](http://www.cairographics.org/manual/cairo-Patterns.html#cairo-pattern-create-radial)
+gradients](http://www.cairographics.org/manual/cairo-pattern.html#cairo-pattern-create-radial)
are also built from two points, but each has an associated radius of the
circle on which to define the start and stop locations. Stops are added
to the gradient with
-[`cairo_add_color_stop_rgb()`](http://www.cairographics.org/manual/cairo-Patterns.html#cairo-pattern-add-color-stop-rgb)
+[`cairo_add_color_stop_rgb()`](http://www.cairographics.org/manual/cairo-pattern.html#cairo-pattern-add-color-stop-rgb)
and
-[`cairo_add_color_stop_rgba()`](http://www.cairographics.org/manual/cairo-Patterns.html#cairo-pattern-add-color-stop-rgba)
+[`cairo_add_color_stop_rgba()`](http://www.cairographics.org/manual/cairo-pattern.html#cairo-pattern-add-color-stop-rgba)
which take a color like `cairo_set_source_rgb*()`, as well as an offset
to indicate where it lies between the reference locations. The colors
between adjacent stops are averaged over space to form a smooth blend.
Finally, the behavior beyond the reference locations can be controlled
with
-[`cairo_set_extend()`](http://www.cairographics.org/manual/cairo-Patterns.html#cairo-pattern-set-extend).
+[`cairo_set_extend()`](http://www.cairographics.org/manual/cairo-pattern.html#cairo-pattern-set-extend).
<div class="tutright"><a href="setsourcegradient.c"><img
src="setsourcegradient.png" alt="" /></a></div>
@@ -407,10 +407,10 @@ Cairo uses a connect-the-dots style system when creating paths. Start
at 1, draw a line to 2, then 3, and so forth. When you start a path, or
when you need to start a new sub-path, you want it to be like point 1:
it has nothing connecting to it. For this, use
-[`cairo_move_to()`](http://www.cairographics.org/manual/cairo-Paths.html#cairo-move-to).
+[`cairo_move_to()`](http://www.cairographics.org/manual/cairo-paths.html#cairo-move-to).
This sets the current reference point without making the path connect
the previous point to it. There is also a relative coordinate variant,
-[`cairo_rel_move_to()`](http://www.cairographics.org/manual/cairo-Paths.html#cairo-rel-move-to),
+[`cairo_rel_move_to()`](http://www.cairographics.org/manual/cairo-paths.html#cairo-rel-move-to),
which sets the new reference a specified distance away from the current
reference instead. After setting your first reference point, use the
other path operations which both update the reference point and connect
@@ -423,10 +423,10 @@ to it in some way.
<div class="tutright"><img src="path-lineto.png" alt="" /></div>
Whether with absolute coordinates
-[`cairo_line_to()`](http://www.cairographics.org/manual/cairo-Paths.html#cairo-line-to)
+[`cairo_line_to()`](http://www.cairographics.org/manual/cairo-paths.html#cairo-line-to)
(extend the path from the reference to this point), or relative
coordinates
-[`cairo_rel_line_to()`](http://www.cairographics.org/manual/cairo-Paths.html#cairo-rel-line-to)
+[`cairo_rel_line_to()`](http://www.cairographics.org/manual/cairo-paths.html#cairo-rel-line-to)
(extend the path from the reference this far in this direction), the
path connection will be a straight line. The new reference point will be
at the other end of the line.
@@ -443,9 +443,9 @@ point you directly specify is not on the path. Instead it is the center
of the circle that makes up the addition to the path. Both a starting
and ending point on the circle must be specified, and these points are
connected either clockwise by
-[`cairo_arc()`](http://www.cairographics.org/manual/cairo-Paths.html#cairo-arc)
+[`cairo_arc()`](http://www.cairographics.org/manual/cairo-paths.html#cairo-arc)
or counter-clockwise by
-[`cairo_arc_negative()`](http://www.cairographics.org/manual/cairo-Paths.html#cairo-arc-negative).
+[`cairo_arc_negative()`](http://www.cairographics.org/manual/cairo-paths.html#cairo-arc-negative).
If the previous reference point is not on this new curve, a straight
line is added from it to where the arc begins. The reference point is
then updated to where the arc ends. There are only absolute versions.
@@ -460,9 +460,9 @@ Curves in cairo are cubic Bézier splines. They start at the current
reference point and smoothly follow the direction of two other points
(without going through them) to get to a third specified point. Like
lines, there are both absolute
-([`cairo_curve_to()`](http://www.cairographics.org/manual/cairo-Paths.html#cairo-curve-to))
+([`cairo_curve_to()`](http://www.cairographics.org/manual/cairo-paths.html#cairo-curve-to))
and relative
-([`cairo_rel_curve_to()`](http://www.cairographics.org/manual/cairo-Paths.html#cairo-rel-curve-to))
+([`cairo_rel_curve_to()`](http://www.cairographics.org/manual/cairo-paths.html#cairo-rel-curve-to))
versions. Note that the relative variant specifies all points relative
to the previous reference point, rather than each relative to the
preceding control point of the curve.
@@ -486,7 +486,7 @@ caps for there is no place to put them.
<h3 id="L3text">Text</h3>
Finally text can be turned into a path with
-[`cairo_text_path()`](http://www.cairographics.org/manual/cairo-Paths.html#cairo-text-path).
+[`cairo_text_path()`](http://www.cairographics.org/manual/cairo-paths.html#cairo-text-path).
Paths created from text are like any other path, supporting stroke or
fill operations. This path is placed anchored to the current reference
point, so <a href="#L3moving">`cairo_move_to()`</a> your desired
@@ -503,9 +503,9 @@ href="#L3fill">`cairo_fill()`</a>.
alt="" /></a></div>
To use text effectively you need to know where it will go. The methods
-[`cairo_font_extents()`](http://www.cairographics.org/manual/cairo-Text.html#cairo-font-extents)
+[`cairo_font_extents()`](http://www.cairographics.org/manual/cairo-text.html#cairo-font-extents)
and
-[`cairo_text_extents()`](http://www.cairographics.org/manual/cairo-Text.html#cairo-text-extents)
+[`cairo_text_extents()`](http://www.cairographics.org/manual/cairo-text.html#cairo-text-extents)
get you this information. Since this diagram is hard to see so small, I
suggest getting its [[source|textextents.c]] and bump the size up to 600. It shows the
relation between the reference point (red dot); suggested next reference
@@ -532,15 +532,15 @@ width would suggest.
In addition to placement, you also need to specify a face, style, and
size. Set the face and style together with
-[`cairo_select_font_face()`](http://www.cairographics.org/manual/cairo-Text.html#cairo-select-font-face),
+[`cairo_select_font_face()`](http://www.cairographics.org/manual/cairo-text.html#cairo-select-font-face),
and the size with
-[`cairo_set_font_size()`](http://www.cairographics.org/manual/cairo-Text.html#cairo-set-font-size).
+[`cairo_set_font_size()`](http://www.cairographics.org/manual/cairo-text.html#cairo-set-font-size).
If you need even finer control, try getting a
-[`cairo_font_options_t`](http://www.cairographics.org/manual/cairo-Font-Options.html#cairo-font-options-t)
+[`cairo_font_options_t`](http://www.cairographics.org/manual/cairo-font-options.html#cairo-font-options-t)
with
-[`cairo_get_font_options()`](http://www.cairographics.org/manual/cairo-Text.html#cairo-get-font-options),
+[`cairo_get_font_options()`](http://www.cairographics.org/manual/cairo-text.html#cairo-get-font-options),
tweaking it, and setting it with
-[`cairo_set_font_options()`](http://www.cairographics.org/manual/cairo-Text.html#cairo-set-font-options).
+[`cairo_set_font_options()`](http://www.cairographics.org/manual/cairo-text.html#cairo-set-font-options).
<h1 id="L1transforms">Working with Transforms</h1>
@@ -554,28 +554,28 @@ relation between two coordinate systems. The device-space coordinate
system is tied to the surface, and cannot change. The user-space
coordinate system matches that space by default, but can be changed for
the above reasons. The helper functions
-[`cairo_user_to_device()`](http://www.cairographics.org/manual/cairo-Transformations.html#cairo-user-to-device)
+[`cairo_user_to_device()`](http://www.cairographics.org/manual/cairo-transformations.html#cairo-user-to-device)
and
-[`cairo_user_to_device_distance()`](http://www.cairographics.org/manual/cairo-Transformations.html#cairo-user-to-device-distance)
+[`cairo_user_to_device_distance()`](http://www.cairographics.org/manual/cairo-transformations.html#cairo-user-to-device-distance)
tell you what the device-coordinates are for a user-coordinates position
or distance. Correspondingly
-[`cairo_device_to_user()`](http://www.cairographics.org/manual/cairo-Transformations.html#cairo-device-to-user)
+[`cairo_device_to_user()`](http://www.cairographics.org/manual/cairo-transformations.html#cairo-device-to-user)
and
-[`cairo_device_to_user_distance()`](http://www.cairographics.org/manual/cairo-Transformations.html#cairo-device-to-user-distance)
+[`cairo_device_to_user_distance()`](http://www.cairographics.org/manual/cairo-transformations.html#cairo-device-to-user-distance)
tell you user-coordinates for a device-coordinates position or distance.
Remember to send positions through the non-distance variant, and
relative moves or other distances through the distance variant.
I leverage all of these reasons to draw the diagrams in this document.
Whether I'm drawing 120 x 120 or 600 x 600, I use
-[`cairo_scale()`](http://www.cairographics.org/manual/cairo-Transformations.html#cairo-scale)
+[`cairo_scale()`](http://www.cairographics.org/manual/cairo-transformations.html#cairo-scale)
to give me a 1.0 x 1.0 workspace. To place the results along
the right column, such as in the discussion of <a
href="#L1drawingmodel">cairo's drawing model</a>, I use
-[`cairo_translate()`](http://www.cairographics.org/manual/cairo-Transformations.html#cairo-translate).
+[`cairo_translate()`](http://www.cairographics.org/manual/cairo-transformations.html#cairo-translate).
And to add the perspective view for the overlapping layers, I set up an
arbitrary deformation with
-[`cairo_transform()`](http://www.cairographics.org/manual/cairo-Transformations.html#cairo-transform)
+[`cairo_transform()`](http://www.cairographics.org/manual/cairo-transformations.html#cairo-transform)
on a
[`cairo_matrix_t`](http://www.cairographics.org/manual/cairo-matrix.html#cairo-matrix-t).
@@ -598,7 +598,7 @@ set your line width while the scale factor was 1, the line width setting
is always in user-coordinates and isn't modified by setting the scale.
While you're operating under a scale, the width of your line is
multiplied by that scale. To specify a width of a line in pixels, use
-[`cairo_device_to_user_distance()`](http://www.cairographics.org/manual/cairo-Transformations.html#cairo-device-to-user-distance)
+[`cairo_device_to_user_distance()`](http://www.cairographics.org/manual/cairo-transformations.html#cairo-device-to-user-distance)
to turn a `(1, 1)` device-space distance into, for example, a `(0.01,
0.01)` user-space distance. Note that if your transform deforms the
image there isn't necessarily a way to specify a line with a uniform
More information about the cairo-commit
mailing list