[Ruby-GNOME2 Project Website] create - tut-gtk2-dancr-rbcatut-dwc (ruby-gnome2-doc-cvs) - Ruby-GNOME2

-------------------------
REMOTE_ADDR = 70.49.48.128
REMOTE_HOST = 
        URL = http://ruby-gnome2.sourceforge.jp/hiki.cgi?tut-gtk2-dancr-rbcatut-dwc
-------------------------
TITLE       = tut-gtk2-dancr-rbcatut-dwc
KEYWORD     = 
= (12.3) Ruby Cairo Tutorial
{{link "tut-gtk2-dancr-rbcatut-crdrmd", "tut-gtk2-dancr", "tut-gtk", "tut-gtk2-dynui"}}

= Sorry, this sub-chapter is still under construction

# (12.3.2) [current file: ... tut-gtk2-dancr-rbcatut-dwc]
#          [next file: ...... tut-gtk2-dynui]

:Contents of this sub-chapter:

    * 12.3.2 ((<Drawing with Cairo|tut-gtk2-dancr-rbcatut-dwc#Drawing with Cairo>))
      * 12.3.2.1 ((<Preparing and Selecting a Source|tut-gtk2-dancr-rbcatut-dwc#Preparing and Selecting a Source>))
      * 12.3.2.2 ((<Creating a Path|tut-gtk2-dancr-rbcatut-dwc#Creating a Path>))

    * 12.3.3 ((<Understanding Text|tut-gtk2-dancr-rbcatut-dwc#Understanding Text>))
    * 12.3.4 ((<Working with Transforms|tut-gtk2-dancr-rbcatut-dwc#Working with Transforms>))
    * 12.3.5 ((<Where to Go Next|tut-gtk2-dancr-rbcatut-dwc#Where to Go Next>))

    * 12.3.6 ((<Tips and Tricks|tut-gtk2-dancr-rbcatut-dwc#Tips and Tricks>))
      * 12.3.6.1 ((<Line Width|tut-gtk2-dancr-rbcatut-dwc#Line Width>))
      * 12.3.6.2 ((<Text Alignment|tut-gtk2-dancr-rbcatut-dwc#Text Alignment>))

{{br}}

== Drawing with Cairo
(12.3.2){{br}}

# {{image_right("")}}
# ((<|URL:http://...>))

# dialog-warning.png

{{br}}

=== Preparing and Selecting a Source
(12.3.2.1){{br}}
{{image_right("1203-p09-setsourcergba-in-C.png")}}

# {{image_right("")}}
# ((<|URL:http://...>))

{{br}}

=== Creating a Path
(12.3.2.2){{br}}

# {{image_right("")}}
# ((<|URL:http://...>))

Cairo always has an active path. If you call cairo_stroke() it will draw the path with your line settings. If you call cairo_fill() it will fill the inside of the path. But as often as not, the path is empty, and both calls will result in no change to your destination. Why is it empty so often? For one, it starts that way; but more importantly after each cairo_stroke() or cairo_fill() it is emptied again to let you start building your next path.

What if you want to do multiple things with the same path? For instance to draw a red rectangle with a black border, you would want to fill the rectangle path with a red source, then stroke the same path with a black source. A rectangle path is easy to create multiple times, but a lot of paths are more complex.

Cairo supports easily reusing paths by having alternate versions of its operations. Both draw the same thing, but the alternate doesn't reset the path. For stroking, alongside cairo_stroke() there is cairo_stroke_preserve(); for filling, cairo_fill_preserve() joins cairo_fill(). Even setting the clip has a preserve variant. Apart from choosing when to preserve your path, there are only a couple common operations.

{{br}}

=== Moving
(12.3.2.3){{br}}

# {{image_right("")}}
# ((<|URL:http://...>))

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(). 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(), 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 to it in some way.

 cr.move_to(0.25, 0.25)

{{br}}

=== Straight Lines
(12.3.2.4){{br}}

# {{image_right("")}}
# ((<|URL:http://...>))

Whether with absolute coordinates cairo_line_to() (extend the path from the reference to this point), or relative coordinates 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.

 cr.rel_line_to(0.25, -0.125)

{{br}}

=== Arcs
(12.3.2.5){{br}}

# {{image_right("")}}
# ((<|URL:http://...>))

Arcs are parts of the outside of a circle. Unlike straight lines, the 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() or counter-clockwise by 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.

 cr.arc(0.5, 0.5, 0.25 * Math::sqrt(2), -0.25 * Math::PI, 0.25 * Math::PI)

{{br}}

=== Curves
(12.3.2.6){{br}}

# {{image_right("")}}
# ((<|URL:http://...>))

Curves in cairo are cubic B騷ier 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()) and relative (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.

 cr.rel_curve_to(-0.25, -0.125, -0.25, 0.125, -0.5, 0)

{{br}}

=== Close the path
(12.3.2.7){{br}}

# {{image_right("")}}
# ((<|URL:http://...>))

Cairo can also close the path by drawing a straight line to the beginning of the current sub-path. This straight line can be useful for the last edge of a polygon, but is not directly useful for curve-based shapes. A closed path is fundamentally different from an open path: it's one continuous path and has no start or end. A closed path has no line caps for there is no place to put them.

 cr.close_path

{{br}}

=== Text
(12.3.2.8){{br}}

# {{image_right("")}}
# ((<|URL:http://...>))

Finally text can be turned into a path with 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 cairo_move_to() your desired location before turning text into a path. However there are performance concerns to doing this if you are working with a lot of text; when possible you should prefer using the verb cairo_show_text() over cairo_text_path() and cairo_fill().

{{br}}

== Understanding Text
(12.3.3){{br}}

# {{image_right("")}}
# ((<|URL:http://...>))

{{br}}

== Working with Transforms
(12.3.4){{br}}

# {{image_right("")}}
# ((<|URL:http://...>))

{{br}}

== Where to Go Next
(12.3.5){{br}}

# {{image_right("")}}
# ((<|URL:http://...>))

{{br}}

== Tips and Tricks
(12.3.6){{br}}

# {{image_right("")}}
# ((<|URL:http://...>))

{{br}}

=== Line Width
(12.3.6.1){{br}}

# {{image_right("")}}
# ((<|URL:http://...>))

{{br}}

=== Text Alignment
(12.3.6.2){{br}}

# {{image_right("")}}
# ((<|URL:http://...>))

# ------- REQUIRED FILES: -----------
{{br}}
{{br}}
(12.3.XXXX+1){{br}}
:To run the examples in this article download the following files into your program directory:

#    See: (12.1.3)

# {{image_left("")}} ....... Name it: ((*"".*))
{{br}}

# {{image_right("")}}
# ((<|URL:http://...>))

Ruby-GNOME2

[ruby-gnome2-doc-cvs] [Ruby-GNOME2 Project Website] create - tut-gtk2-dancr-rbcatut-dwc