rdp-rmagick 0.0.0
Sign up to get free protection for your applications and to get access to all the features.
- data/ChangeLog +769 -0
- data/Doxyfile +1514 -0
- data/README-Mac-OSX.txt +1 -0
- data/README.md +231 -0
- data/build_tarball.rake +215 -0
- data/doc/comtasks.html +287 -0
- data/doc/constants.html +1581 -0
- data/doc/css/doc.css +299 -0
- data/doc/css/popup.css +34 -0
- data/doc/css/ref.css +67 -0
- data/doc/draw.html +3269 -0
- data/doc/ex/InitialCoords.rb +23 -0
- data/doc/ex/NewCoordSys.rb +32 -0
- data/doc/ex/OrigCoordSys.rb +18 -0
- data/doc/ex/PreserveAspectRatio.rb +205 -0
- data/doc/ex/RotateScale.rb +37 -0
- data/doc/ex/Skew.rb +38 -0
- data/doc/ex/Use01.rb +16 -0
- data/doc/ex/Use02.rb +21 -0
- data/doc/ex/Use03.rb +16 -0
- data/doc/ex/ViewBox.rb +33 -0
- data/doc/ex/adaptive_threshold.rb +10 -0
- data/doc/ex/add_noise.rb +17 -0
- data/doc/ex/affine.rb +48 -0
- data/doc/ex/affine_transform.rb +20 -0
- data/doc/ex/arc.rb +49 -0
- data/doc/ex/arcpath.rb +33 -0
- data/doc/ex/arcs01.rb +28 -0
- data/doc/ex/arcs02.rb +61 -0
- data/doc/ex/average.rb +15 -0
- data/doc/ex/axes.rb +64 -0
- data/doc/ex/baseline_shift01.rb +18 -0
- data/doc/ex/bilevel_channel.rb +9 -0
- data/doc/ex/blur_image.rb +12 -0
- data/doc/ex/border.rb +10 -0
- data/doc/ex/bounding_box.rb +44 -0
- data/doc/ex/cbezier1.rb +42 -0
- data/doc/ex/cbezier2.rb +42 -0
- data/doc/ex/cbezier3.rb +42 -0
- data/doc/ex/cbezier4.rb +43 -0
- data/doc/ex/cbezier5.rb +43 -0
- data/doc/ex/cbezier6.rb +53 -0
- data/doc/ex/channel.rb +26 -0
- data/doc/ex/charcoal.rb +12 -0
- data/doc/ex/chop.rb +29 -0
- data/doc/ex/circle.rb +33 -0
- data/doc/ex/circle01.rb +17 -0
- data/doc/ex/clip_path.rb +60 -0
- data/doc/ex/coalesce.rb +60 -0
- data/doc/ex/color_fill_to_border.rb +29 -0
- data/doc/ex/color_floodfill.rb +28 -0
- data/doc/ex/color_histogram.rb +48 -0
- data/doc/ex/color_reset.rb +11 -0
- data/doc/ex/colorize.rb +16 -0
- data/doc/ex/colors.rb +64 -0
- data/doc/ex/compose_mask.rb +23 -0
- data/doc/ex/composite.rb +135 -0
- data/doc/ex/composite_layers.rb +53 -0
- data/doc/ex/composite_tiled.rb +23 -0
- data/doc/ex/contrast.rb +36 -0
- data/doc/ex/crop.rb +31 -0
- data/doc/ex/crop_with_gravity.rb +46 -0
- data/doc/ex/cubic01.rb +45 -0
- data/doc/ex/cubic02.rb +94 -0
- data/doc/ex/cycle_colormap.rb +21 -0
- data/doc/ex/dissolve.rb +13 -0
- data/doc/ex/drawcomp.rb +42 -0
- data/doc/ex/drop_shadow.rb +60 -0
- data/doc/ex/edge.rb +11 -0
- data/doc/ex/ellipse.rb +45 -0
- data/doc/ex/ellipse01.rb +22 -0
- data/doc/ex/emboss.rb +11 -0
- data/doc/ex/enhance.rb +28 -0
- data/doc/ex/equalize.rb +11 -0
- data/doc/ex/evenodd.rb +43 -0
- data/doc/ex/fill_pattern.rb +26 -0
- data/doc/ex/flatten_images.rb +36 -0
- data/doc/ex/flip.rb +11 -0
- data/doc/ex/flop.rb +11 -0
- data/doc/ex/font_styles.rb +34 -0
- data/doc/ex/fonts.rb +20 -0
- data/doc/ex/frame.rb +12 -0
- data/doc/ex/gaussian_blur.rb +11 -0
- data/doc/ex/get_multiline_type_metrics.rb +42 -0
- data/doc/ex/get_pixels.rb +48 -0
- data/doc/ex/get_type_metrics.rb +146 -0
- data/doc/ex/gradientfill.rb +27 -0
- data/doc/ex/grav.rb +46 -0
- data/doc/ex/gravity.rb +79 -0
- data/doc/ex/group.rb +26 -0
- data/doc/ex/hatchfill.rb +27 -0
- data/doc/ex/image.rb +46 -0
- data/doc/ex/images/Apple.miff +0 -0
- data/doc/ex/images/Ballerina.jpg +0 -0
- data/doc/ex/images/Ballerina3.jpg +0 -0
- data/doc/ex/images/Button_0.gif +0 -0
- data/doc/ex/images/Button_1.gif +0 -0
- data/doc/ex/images/Button_2.gif +0 -0
- data/doc/ex/images/Button_3.gif +0 -0
- data/doc/ex/images/Button_4.gif +0 -0
- data/doc/ex/images/Button_5.gif +0 -0
- data/doc/ex/images/Button_6.gif +0 -0
- data/doc/ex/images/Button_7.gif +0 -0
- data/doc/ex/images/Button_8.gif +0 -0
- data/doc/ex/images/Button_9.gif +0 -0
- data/doc/ex/images/Button_A.gif +0 -0
- data/doc/ex/images/Button_B.gif +0 -0
- data/doc/ex/images/Button_C.gif +0 -0
- data/doc/ex/images/Button_D.gif +0 -0
- data/doc/ex/images/Button_E.gif +0 -0
- data/doc/ex/images/Button_F.gif +0 -0
- data/doc/ex/images/Button_G.gif +0 -0
- data/doc/ex/images/Button_H.gif +0 -0
- data/doc/ex/images/Button_I.gif +0 -0
- data/doc/ex/images/Button_J.gif +0 -0
- data/doc/ex/images/Button_K.gif +0 -0
- data/doc/ex/images/Button_L.gif +0 -0
- data/doc/ex/images/Button_M.gif +0 -0
- data/doc/ex/images/Button_N.gif +0 -0
- data/doc/ex/images/Button_O.gif +0 -0
- data/doc/ex/images/Button_P.gif +0 -0
- data/doc/ex/images/Button_Q.gif +0 -0
- data/doc/ex/images/Button_R.gif +0 -0
- data/doc/ex/images/Button_S.gif +0 -0
- data/doc/ex/images/Button_T.gif +0 -0
- data/doc/ex/images/Button_U.gif +0 -0
- data/doc/ex/images/Button_V.gif +0 -0
- data/doc/ex/images/Button_W.gif +0 -0
- data/doc/ex/images/Button_X.gif +0 -0
- data/doc/ex/images/Button_Y.gif +0 -0
- data/doc/ex/images/Button_Z.gif +0 -0
- data/doc/ex/images/Cheetah.jpg +0 -0
- data/doc/ex/images/Coffee.wmf +0 -0
- data/doc/ex/images/Flower_Hat.jpg +0 -0
- data/doc/ex/images/Gold_Statue.jpg +0 -0
- data/doc/ex/images/Hot_Air_Balloons.jpg +0 -0
- data/doc/ex/images/Hot_Air_Balloons_H.jpg +0 -0
- data/doc/ex/images/Leaf.miff +0 -0
- data/doc/ex/images/No.wmf +0 -0
- data/doc/ex/images/Polynesia.jpg +0 -0
- data/doc/ex/images/Red_Rocks.jpg +0 -0
- data/doc/ex/images/Rocks_On_Beach.miff +0 -0
- data/doc/ex/images/Shorts.jpg +0 -0
- data/doc/ex/images/Snake.wmf +0 -0
- data/doc/ex/images/Violin.jpg +0 -0
- data/doc/ex/images/Yellow_Rose.miff +0 -0
- data/doc/ex/images/big-duck.gif +0 -0
- data/doc/ex/images/duck.gif +0 -0
- data/doc/ex/images/duck0.gif +0 -0
- data/doc/ex/images/duck1.gif +0 -0
- data/doc/ex/images/duck10.gif +0 -0
- data/doc/ex/images/duck11.gif +0 -0
- data/doc/ex/images/duck12.gif +0 -0
- data/doc/ex/images/duck13.gif +0 -0
- data/doc/ex/images/duck14.gif +0 -0
- data/doc/ex/images/duck15.gif +0 -0
- data/doc/ex/images/duck2.gif +0 -0
- data/doc/ex/images/duck3.gif +0 -0
- data/doc/ex/images/duck4.gif +0 -0
- data/doc/ex/images/duck5.gif +0 -0
- data/doc/ex/images/duck6.gif +0 -0
- data/doc/ex/images/duck7.gif +0 -0
- data/doc/ex/images/duck8.gif +0 -0
- data/doc/ex/images/duck9.gif +0 -0
- data/doc/ex/images/graydient230x6.gif +0 -0
- data/doc/ex/images/logo400x83.gif +0 -0
- data/doc/ex/images/model.miff +0 -0
- data/doc/ex/images/notimplemented.gif +0 -0
- data/doc/ex/images/smile.miff +0 -0
- data/doc/ex/images/spin.gif +0 -0
- data/doc/ex/implode.rb +34 -0
- data/doc/ex/level.rb +11 -0
- data/doc/ex/level_colors.rb +11 -0
- data/doc/ex/line.rb +42 -0
- data/doc/ex/line01.rb +23 -0
- data/doc/ex/mask.rb +36 -0
- data/doc/ex/matte_fill_to_border.rb +40 -0
- data/doc/ex/matte_floodfill.rb +33 -0
- data/doc/ex/matte_replace.rb +40 -0
- data/doc/ex/median_filter.rb +28 -0
- data/doc/ex/modulate.rb +11 -0
- data/doc/ex/mono.rb +23 -0
- data/doc/ex/morph.rb +26 -0
- data/doc/ex/mosaic.rb +35 -0
- data/doc/ex/motion_blur.rb +11 -0
- data/doc/ex/negate.rb +11 -0
- data/doc/ex/negate_channel.rb +9 -0
- data/doc/ex/nested_rvg.rb +21 -0
- data/doc/ex/nonzero.rb +43 -0
- data/doc/ex/normalize.rb +11 -0
- data/doc/ex/oil_paint.rb +11 -0
- data/doc/ex/opacity.rb +37 -0
- data/doc/ex/ordered_dither.rb +11 -0
- data/doc/ex/path.rb +64 -0
- data/doc/ex/pattern1.rb +25 -0
- data/doc/ex/pattern2.rb +26 -0
- data/doc/ex/polaroid.rb +28 -0
- data/doc/ex/polygon.rb +24 -0
- data/doc/ex/polygon01.rb +23 -0
- data/doc/ex/polyline.rb +23 -0
- data/doc/ex/polyline01.rb +23 -0
- data/doc/ex/posterize.rb +8 -0
- data/doc/ex/preview.rb +9 -0
- data/doc/ex/qbezierpath.rb +52 -0
- data/doc/ex/quad01.rb +36 -0
- data/doc/ex/quantize-m.rb +25 -0
- data/doc/ex/radial_blur.rb +9 -0
- data/doc/ex/raise.rb +8 -0
- data/doc/ex/random_threshold_channel.rb +13 -0
- data/doc/ex/rect01.rb +15 -0
- data/doc/ex/rect02.rb +22 -0
- data/doc/ex/rectangle.rb +35 -0
- data/doc/ex/reduce_noise.rb +28 -0
- data/doc/ex/remap.rb +12 -0
- data/doc/ex/remap_images.rb +21 -0
- data/doc/ex/resize_to_fill.rb +10 -0
- data/doc/ex/resize_to_fit.rb +10 -0
- data/doc/ex/roll.rb +9 -0
- data/doc/ex/rotate.rb +45 -0
- data/doc/ex/rotate_f.rb +14 -0
- data/doc/ex/roundrect.rb +34 -0
- data/doc/ex/rubyname.rb +30 -0
- data/doc/ex/rvg_clippath.rb +14 -0
- data/doc/ex/rvg_linecap.rb +43 -0
- data/doc/ex/rvg_linejoin.rb +41 -0
- data/doc/ex/rvg_opacity.rb +19 -0
- data/doc/ex/rvg_pattern.rb +26 -0
- data/doc/ex/rvg_stroke_dasharray.rb +12 -0
- data/doc/ex/segment.rb +11 -0
- data/doc/ex/sepiatone.rb +8 -0
- data/doc/ex/shade.rb +11 -0
- data/doc/ex/shadow.rb +31 -0
- data/doc/ex/shave.rb +15 -0
- data/doc/ex/shear.rb +10 -0
- data/doc/ex/sketch.rb +18 -0
- data/doc/ex/skewx.rb +52 -0
- data/doc/ex/skewy.rb +47 -0
- data/doc/ex/smile.rb +125 -0
- data/doc/ex/solarize.rb +11 -0
- data/doc/ex/sparse_color.rb +55 -0
- data/doc/ex/splice.rb +9 -0
- data/doc/ex/spread.rb +11 -0
- data/doc/ex/stegano.rb +55 -0
- data/doc/ex/stroke_dasharray.rb +43 -0
- data/doc/ex/stroke_fill.rb +11 -0
- data/doc/ex/stroke_linecap.rb +44 -0
- data/doc/ex/stroke_linejoin.rb +48 -0
- data/doc/ex/stroke_width.rb +49 -0
- data/doc/ex/swirl.rb +17 -0
- data/doc/ex/text.rb +37 -0
- data/doc/ex/text01.rb +17 -0
- data/doc/ex/text_align.rb +36 -0
- data/doc/ex/text_antialias.rb +38 -0
- data/doc/ex/text_styles.rb +21 -0
- data/doc/ex/text_undercolor.rb +28 -0
- data/doc/ex/texture_fill_to_border.rb +34 -0
- data/doc/ex/texture_floodfill.rb +32 -0
- data/doc/ex/texturefill.rb +25 -0
- data/doc/ex/threshold.rb +13 -0
- data/doc/ex/to_blob.rb +14 -0
- data/doc/ex/translate.rb +39 -0
- data/doc/ex/transparent.rb +38 -0
- data/doc/ex/transpose.rb +9 -0
- data/doc/ex/transverse.rb +9 -0
- data/doc/ex/tref01.rb +25 -0
- data/doc/ex/triangle01.rb +16 -0
- data/doc/ex/trim.rb +24 -0
- data/doc/ex/tspan01.rb +18 -0
- data/doc/ex/tspan02.rb +19 -0
- data/doc/ex/tspan03.rb +21 -0
- data/doc/ex/unsharp_mask.rb +28 -0
- data/doc/ex/viewex.rb +35 -0
- data/doc/ex/vignette.rb +12 -0
- data/doc/ex/watermark.rb +28 -0
- data/doc/ex/wave.rb +9 -0
- data/doc/ex/wet_floor.rb +59 -0
- data/doc/ex/writing_mode01.rb +27 -0
- data/doc/ex/writing_mode02.rb +26 -0
- data/doc/ilist.html +2056 -0
- data/doc/image1.html +4680 -0
- data/doc/image2.html +3665 -0
- data/doc/image3.html +4522 -0
- data/doc/imageattrs.html +1638 -0
- data/doc/imusage.html +514 -0
- data/doc/index.html +416 -0
- data/doc/info.html +1499 -0
- data/doc/magick.html +565 -0
- data/doc/optequiv.html +2435 -0
- data/doc/rvg.html +975 -0
- data/doc/rvgclip.html +248 -0
- data/doc/rvggroup.html +305 -0
- data/doc/rvgimage.html +289 -0
- data/doc/rvgpattern.html +475 -0
- data/doc/rvgshape.html +406 -0
- data/doc/rvgstyle.html +270 -0
- data/doc/rvgtext.html +465 -0
- data/doc/rvgtspan.html +238 -0
- data/doc/rvgtut.html +530 -0
- data/doc/rvguse.html +145 -0
- data/doc/rvgxform.html +294 -0
- data/doc/scripts/doc.js +22 -0
- data/doc/scripts/stripeTables.js +23 -0
- data/doc/struct.html +1339 -0
- data/doc/usage.html +1621 -0
- data/examples/constitute.rb +7 -0
- data/examples/crop_with_gravity.rb +46 -0
- data/examples/demo.rb +324 -0
- data/examples/describe.rb +44 -0
- data/examples/find_similar_region.rb +34 -0
- data/examples/histogram.rb +325 -0
- data/examples/identify.rb +187 -0
- data/examples/image_opacity.rb +29 -0
- data/examples/import_export.rb +31 -0
- data/examples/pattern_fill.rb +38 -0
- data/examples/rotating_text.rb +45 -0
- data/examples/spinner.rb +50 -0
- data/examples/thumbnail.rb +65 -0
- data/examples/vignette.rb +79 -0
- data/ext/RMagick/Makefile +180 -0
- data/ext/RMagick/RMagick2.so +0 -0
- data/ext/RMagick/extconf.h +119 -0
- data/ext/RMagick/extconf.rb +406 -0
- data/ext/RMagick/mkmf.log +3022 -0
- data/ext/RMagick/rmagick.c +394 -0
- data/ext/RMagick/rmagick.h +1307 -0
- data/ext/RMagick/rmagick.o +0 -0
- data/ext/RMagick/rmdraw.c +1991 -0
- data/ext/RMagick/rmdraw.o +0 -0
- data/ext/RMagick/rmenum.c +1224 -0
- data/ext/RMagick/rmenum.o +0 -0
- data/ext/RMagick/rmfill.c +717 -0
- data/ext/RMagick/rmfill.o +0 -0
- data/ext/RMagick/rmilist.c +1217 -0
- data/ext/RMagick/rmilist.o +0 -0
- data/ext/RMagick/rmimage.c +15099 -0
- data/ext/RMagick/rmimage.o +0 -0
- data/ext/RMagick/rminfo.c +2567 -0
- data/ext/RMagick/rminfo.o +0 -0
- data/ext/RMagick/rmmain.c +1705 -0
- data/ext/RMagick/rmmain.o +0 -0
- data/ext/RMagick/rmmontage.c +511 -0
- data/ext/RMagick/rmmontage.o +0 -0
- data/ext/RMagick/rmpixel.c +1103 -0
- data/ext/RMagick/rmpixel.o +0 -0
- data/ext/RMagick/rmstruct.c +1047 -0
- data/ext/RMagick/rmstruct.o +0 -0
- data/ext/RMagick/rmutil.c +1730 -0
- data/ext/RMagick/rmutil.o +0 -0
- data/lib/RMagick.rb +1962 -0
- data/lib/rvg/clippath.rb +48 -0
- data/lib/rvg/container.rb +131 -0
- data/lib/rvg/deep_equal.rb +56 -0
- data/lib/rvg/describable.rb +53 -0
- data/lib/rvg/embellishable.rb +417 -0
- data/lib/rvg/misc.rb +740 -0
- data/lib/rvg/paint.rb +55 -0
- data/lib/rvg/pathdata.rb +131 -0
- data/lib/rvg/rvg.rb +283 -0
- data/lib/rvg/stretchable.rb +168 -0
- data/lib/rvg/stylable.rb +124 -0
- data/lib/rvg/text.rb +187 -0
- data/lib/rvg/to_c.rb +103 -0
- data/lib/rvg/transformable.rb +133 -0
- data/lib/rvg/units.rb +66 -0
- data/metaconfig +7 -0
- data/post-clean.rb +12 -0
- data/post-install.rb +50 -0
- data/post-setup.rb +254 -0
- data/rmagick.gemspec +20 -0
- data/setup.rb +1585 -0
- data/test/Draw.rb +121 -0
- data/test/Image1.rb +762 -0
- data/test/Image2.rb +1308 -0
- data/test/Image3.rb +1001 -0
- data/test/ImageList1.rb +808 -0
- data/test/ImageList2.rb +389 -0
- data/test/Image_attributes.rb +682 -0
- data/test/Import_Export.rb +116 -0
- data/test/Info.rb +349 -0
- data/test/Magick.rb +364 -0
- data/test/Pixel.rb +120 -0
- data/test/Preview.rb +62 -0
- data/test/all_basic.rb +39 -0
- data/test/cmyk.icm +0 -0
- data/test/srgb.icm +0 -0
- data/test/test.0 +0 -0
- data/uninstall.rb +74 -0
- metadata +455 -0
data/doc/rvgtspan.html
ADDED
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
2
|
+
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
3
|
+
|
|
4
|
+
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
5
|
+
<head>
|
|
6
|
+
<meta name="generator" content=
|
|
7
|
+
"HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
|
|
8
|
+
|
|
9
|
+
<title>RMagick 0.0.0: RVG Reference: RVG::Tspan Class</title>
|
|
10
|
+
<meta http-equiv="Content-Type" content=
|
|
11
|
+
"text/html; charset=us-ascii" />
|
|
12
|
+
<meta name="GENERATOR" content="Quanta Plus" />
|
|
13
|
+
<meta name="Copyright" content=
|
|
14
|
+
"Copyright (C) 2006 by Timothy P. Hunter" />
|
|
15
|
+
<link rel="stylesheet" type="text/css" href="css/doc.css" />
|
|
16
|
+
<script type="text/javascript" src="scripts/doc.js">
|
|
17
|
+
</script>
|
|
18
|
+
<script type="text/javascript">
|
|
19
|
+
//<![CDATA[
|
|
20
|
+
//]]>
|
|
21
|
+
</script>
|
|
22
|
+
<style type="text/css">
|
|
23
|
+
/*<![CDATA[*/
|
|
24
|
+
}
|
|
25
|
+
/*]]>*/
|
|
26
|
+
</style>
|
|
27
|
+
</head>
|
|
28
|
+
|
|
29
|
+
<body>
|
|
30
|
+
<h6 id="header">RMagick 0.0.0 User's Guide and Reference</h6>
|
|
31
|
+
|
|
32
|
+
<div class="nav">
|
|
33
|
+
« <a href="rvgtext.html">Prev</a> | <a href=
|
|
34
|
+
"index.html">Contents</a> | <a href=
|
|
35
|
+
"rvguse.html">Next</a> »
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<h1>class RVG::Tspan <span class="superclass"><
|
|
39
|
+
TextBase</span></h1>
|
|
40
|
+
|
|
41
|
+
<div id="toc">
|
|
42
|
+
<h2>Table of Contents</h2>
|
|
43
|
+
|
|
44
|
+
<h3>class methods</h3>
|
|
45
|
+
|
|
46
|
+
<ul>
|
|
47
|
+
<li><a href="#new">new</a></li>
|
|
48
|
+
</ul>
|
|
49
|
+
|
|
50
|
+
<h3>instance methods</h3>
|
|
51
|
+
|
|
52
|
+
<div>
|
|
53
|
+
<div class="toccol">
|
|
54
|
+
<ul>
|
|
55
|
+
<li><a href="#d">d</a></li>
|
|
56
|
+
|
|
57
|
+
<li><a href="#rotate">rotate</a></li>
|
|
58
|
+
|
|
59
|
+
<li><a href="#tspan">tspan</a></li>
|
|
60
|
+
</ul>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<h3>shared methods</h3>
|
|
64
|
+
|
|
65
|
+
<p>In addition to the methods listed above, <code>class
|
|
66
|
+
RVG::Tspan</code> also implements the <a href=
|
|
67
|
+
"rvgstyle.html">styles</a> method.</p>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<h2 class="methods">class methods</h2>
|
|
72
|
+
|
|
73
|
+
<div class="sig">
|
|
74
|
+
<h3 id="new">new</h3>
|
|
75
|
+
|
|
76
|
+
<p>RVG::Tspan.new(<span class="arg">text</span>=nil,
|
|
77
|
+
<span class="arg">x</span>=0, <span class="arg">y</span>=0) [
|
|
78
|
+
<span class="arg">{ |tspan| ...}</span> ] ->
|
|
79
|
+
<em>tspan</em></p>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<div class="desc">
|
|
83
|
+
<h4>Description</h4>
|
|
84
|
+
|
|
85
|
+
<p>This method may be invoked indirectly via the <a href=
|
|
86
|
+
"rvgtext.html#tspan">tspan</a> method in
|
|
87
|
+
<code>RVG::Text</code>.</p>
|
|
88
|
+
|
|
89
|
+
<p>Tspan objects are containers, so this method yields to a
|
|
90
|
+
block if one is present. The only objects that a tspan can
|
|
91
|
+
contain are other tspans. Styles defined on a tspan propagate
|
|
92
|
+
to any tspans contained within it.</p>
|
|
93
|
+
|
|
94
|
+
<h4>Arguments</h4>
|
|
95
|
+
|
|
96
|
+
<p>All arguments are optional.</p>
|
|
97
|
+
|
|
98
|
+
<dl>
|
|
99
|
+
<dt>text</dt>
|
|
100
|
+
|
|
101
|
+
<dd>A string. If present, this string is drawn at the current
|
|
102
|
+
text position. By default the string is positioned with the
|
|
103
|
+
lower-left corner of the first glyph at the current text
|
|
104
|
+
position. Use the <a href=
|
|
105
|
+
"rvgtext.html#text_anchor">:text_anchor</a> style to override
|
|
106
|
+
this behavior. After the string is rendered, the current text
|
|
107
|
+
position is moved to the end of the string.</dd>
|
|
108
|
+
|
|
109
|
+
<dt>x, y</dt>
|
|
110
|
+
|
|
111
|
+
<dd>Specify a new current text position within the current
|
|
112
|
+
user coordinate system.</dd>
|
|
113
|
+
</dl>
|
|
114
|
+
|
|
115
|
+
<h4>Examples</h4>
|
|
116
|
+
|
|
117
|
+
<p><a href="javascript:popup('tspan01.rb.html')"><img src=
|
|
118
|
+
"ex/tspan01.gif" title="Click to see the example script" alt=
|
|
119
|
+
"tspan example" /></a></p>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<h2 class="methods">instance methods</h2>
|
|
123
|
+
|
|
124
|
+
<div class='sig'>
|
|
125
|
+
<h3 id='d'>d</h3>
|
|
126
|
+
|
|
127
|
+
<p><span class="arg">tspan</span>.d(<span class=
|
|
128
|
+
"arg">dx</span>[, <span class="arg">dy</span>=0]) [
|
|
129
|
+
<span class="arg">{ |self| ...}</span> ] ->
|
|
130
|
+
<em>self</em></p>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<div class="desc">
|
|
134
|
+
<h4>Description</h4>
|
|
135
|
+
|
|
136
|
+
<p>The <span class="arg">dx</span> and <span class=
|
|
137
|
+
"arg">dy</span> arguments are added to the the current text
|
|
138
|
+
position to form a new current text position. Yields to a block
|
|
139
|
+
if one is present.</p>
|
|
140
|
+
|
|
141
|
+
<h4>Arguments</h4>
|
|
142
|
+
|
|
143
|
+
<dl>
|
|
144
|
+
<dt>dx, dy</dt>
|
|
145
|
+
|
|
146
|
+
<dd>The distance, in the user coordinate system, to be added
|
|
147
|
+
to the current text position.</dd>
|
|
148
|
+
</dl>
|
|
149
|
+
|
|
150
|
+
<h4>Example</h4>
|
|
151
|
+
|
|
152
|
+
<p><a href="javascript:popup('tspan02.rb.html')"><img src=
|
|
153
|
+
"ex/tspan02.gif" title="Click to see the example script" alt=
|
|
154
|
+
"tspan example 2" /></a></p>
|
|
155
|
+
|
|
156
|
+
<h4>Returns</h4>
|
|
157
|
+
|
|
158
|
+
<p>self</p>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<div class='sig'>
|
|
162
|
+
<h3 id='rotate'>rotate</h3>
|
|
163
|
+
|
|
164
|
+
<p><span class="arg">tspan</span>.rotate(<span class=
|
|
165
|
+
"arg">degrees</span>) [ <span class="arg">{ |self| ...}</span>
|
|
166
|
+
] -> <em>self</em></p>
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
<div class="desc">
|
|
170
|
+
<h4>Description</h4>
|
|
171
|
+
|
|
172
|
+
<p>Rotates the text about the current text position by the
|
|
173
|
+
specified number of <span class="arg">degrees</span>. Yields to
|
|
174
|
+
a block if one is present.</p>
|
|
175
|
+
|
|
176
|
+
<h4>Arguments</h4>
|
|
177
|
+
|
|
178
|
+
<dl>
|
|
179
|
+
<dt>degrees</dt>
|
|
180
|
+
|
|
181
|
+
<dd>The amount of rotation</dd>
|
|
182
|
+
</dl>
|
|
183
|
+
|
|
184
|
+
<h4>Example</h4>
|
|
185
|
+
|
|
186
|
+
<p><a href="javascript:popup('tspan03.rb.html')"><img src=
|
|
187
|
+
"ex/tspan03.gif" title="Click to see the example script" alt=
|
|
188
|
+
"tspan example 3" /></a></p>
|
|
189
|
+
|
|
190
|
+
<h4>Returns</h4>
|
|
191
|
+
|
|
192
|
+
<p>self</p>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
<div class='sig'>
|
|
196
|
+
<h3 id='tspan'>tspan</h3>
|
|
197
|
+
|
|
198
|
+
<p><span class="arg">tspan</span>.tspan(<span class=
|
|
199
|
+
"arg">string</span>=0, <span class="arg">x</span>=nil,
|
|
200
|
+
<span class="arg">y</span>=0) [ <span class="arg">{ |tspan|
|
|
201
|
+
...}</span> ] -> <em>tspan</em></p>
|
|
202
|
+
</div>
|
|
203
|
+
|
|
204
|
+
<div class="desc">
|
|
205
|
+
<h4>Description</h4>
|
|
206
|
+
|
|
207
|
+
<p>Calls <a href="#new">RVG::Tspan.new</a> to construct a tspan
|
|
208
|
+
and adds it to the tspan. Yields to a block if one is present,
|
|
209
|
+
passing the new tspan as an argument. Styles defined on the
|
|
210
|
+
container tspan propagate to the contained tspan.</p>
|
|
211
|
+
|
|
212
|
+
<h4>Arguments</h4>
|
|
213
|
+
|
|
214
|
+
<dl>
|
|
215
|
+
<dt>string</dt>
|
|
216
|
+
|
|
217
|
+
<dd>A text string.</dd>
|
|
218
|
+
|
|
219
|
+
<dt>x, y</dt>
|
|
220
|
+
|
|
221
|
+
<dd>A new initial text position</dd>
|
|
222
|
+
</dl>
|
|
223
|
+
|
|
224
|
+
<h4>Returns</h4>
|
|
225
|
+
|
|
226
|
+
<p>The new tspan, so other <code>RVG::Tspan</code> methods can
|
|
227
|
+
be chained to it.</p>
|
|
228
|
+
</div>
|
|
229
|
+
|
|
230
|
+
<p class="spacer"> </p>
|
|
231
|
+
|
|
232
|
+
<div class="nav">
|
|
233
|
+
« <a href="rvgtext.html">Prev</a> | <a href=
|
|
234
|
+
"index.html">Contents</a> | <a href="rvguse.html">Next</a>
|
|
235
|
+
»
|
|
236
|
+
</div>
|
|
237
|
+
</body>
|
|
238
|
+
</html>
|
data/doc/rvgtut.html
ADDED
|
@@ -0,0 +1,530 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="iso-8859-1"?>
|
|
2
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
3
|
+
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
4
|
+
|
|
5
|
+
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
6
|
+
<!-- $Id: rvgtut.html,v 1.14 2008/03/08 00:28:45 rmagick Exp $ -->
|
|
7
|
+
|
|
8
|
+
<head>
|
|
9
|
+
<meta name="generator" content=
|
|
10
|
+
"HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
|
|
11
|
+
|
|
12
|
+
<title>RMagick 0.0.0: RVG Tutorial</title>
|
|
13
|
+
<meta name="GENERATOR" content="Quanta Plus" />
|
|
14
|
+
<link rel="stylesheet" type="text/css" href="css/doc.css" />
|
|
15
|
+
<style type="text/css">
|
|
16
|
+
/*<![CDATA[*/
|
|
17
|
+
img {
|
|
18
|
+
padding-bottom:1em;
|
|
19
|
+
padding-top:1em;
|
|
20
|
+
}
|
|
21
|
+
/*]]>*/
|
|
22
|
+
</style>
|
|
23
|
+
</head>
|
|
24
|
+
|
|
25
|
+
<body>
|
|
26
|
+
<h6 id="header">RMagick 0.0.0 User's Guide and Reference</h6>
|
|
27
|
+
|
|
28
|
+
<div class="nav">
|
|
29
|
+
« <a href="constants.html">Prev</a> | <a href=
|
|
30
|
+
"index.html">Contents</a> | <a href=
|
|
31
|
+
"rvg.html">Next</a> »
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<h1>Drawing with RVG</h1>
|
|
35
|
+
|
|
36
|
+
<div id="toc">
|
|
37
|
+
<h2>A tutorial</h2>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div style="position:relative;">
|
|
41
|
+
<p><img src="ex/images/duck.gif" alt="duck|type" width="180"
|
|
42
|
+
height="180" /></p>
|
|
43
|
+
|
|
44
|
+
<div style="position:absolute; left: 200px;top:1em">
|
|
45
|
+
<h3>Introduction</h3>
|
|
46
|
+
|
|
47
|
+
<p>RVG (Ruby Vector Graphics) is a facade for RMagick's
|
|
48
|
+
<a href="draw.html">Draw</a> class that supplies a drawing
|
|
49
|
+
API based on the <a href=
|
|
50
|
+
"http://www.w3.org/Graphics/SVG/">Scalable Vector
|
|
51
|
+
Graphics</a> W3C recommendation.</p>
|
|
52
|
+
|
|
53
|
+
<p>RVG is a <em>scalable</em> <em>vector</em> drawing
|
|
54
|
+
library. <em>Scalable</em> means that drawings are not fixed
|
|
55
|
+
to a single size in pixels. The same drawing can be rendered
|
|
56
|
+
for a screen display or for printing. <em>Vector</em> images
|
|
57
|
+
are drawn using geometric objects like lines and circles.
|
|
58
|
+
Unlike raster images, vector images don't get "pixelated"
|
|
59
|
+
when you make them bigger.</p>As an introduction to the RVG
|
|
60
|
+
library, let's see how to draw this little duck on the left.
|
|
61
|
+
Here is the complete program.
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
<pre class="example">
|
|
65
|
+
1 require 'rvg/rvg'
|
|
66
|
+
2 include Magick
|
|
67
|
+
3
|
|
68
|
+
4 RVG::dpi = 72
|
|
69
|
+
5
|
|
70
|
+
6 rvg = RVG.new(2.5.in, 2.5.in).viewbox(0,0,250,250) do |canvas|
|
|
71
|
+
7 canvas.background_fill = 'white'
|
|
72
|
+
8
|
|
73
|
+
9 canvas.g.translate(100, 150).rotate(-30) do |body|
|
|
74
|
+
10 body.styles(:fill=>'yellow', :stroke=>'black', :stroke_width=>2)
|
|
75
|
+
11 body.ellipse(50, 30)
|
|
76
|
+
12 body.rect(45, 20, -20, -10).skewX(-35)
|
|
77
|
+
13 end
|
|
78
|
+
14
|
|
79
|
+
15 canvas.g.translate(130, 83) do |head|
|
|
80
|
+
16 head.styles(:stroke=>'black', :stroke_width=>2)
|
|
81
|
+
17 head.circle(30).styles(:fill=>'yellow')
|
|
82
|
+
18 head.circle(5, 10, -5).styles(:fill=>'black')
|
|
83
|
+
19 head.polygon(30,0, 70,5, 30,10, 62,25, 23,20).styles(:fill=>'orange')
|
|
84
|
+
20 end
|
|
85
|
+
21
|
|
86
|
+
22 foot = RVG::Group.new do |_foot|
|
|
87
|
+
23 _foot.path('m0,0 v30 l30,10 l5,-10, l-5,-10 l-30,10z').
|
|
88
|
+
24 styles(:stroke_width=>2, :fill=>'orange', :stroke=>'black')
|
|
89
|
+
25 end
|
|
90
|
+
26 canvas.use(foot).translate(75, 188).rotate(15)
|
|
91
|
+
27 canvas.use(foot).translate(100, 185).rotate(-15)
|
|
92
|
+
28
|
|
93
|
+
29 canvas.text(125, 30) do |title|
|
|
94
|
+
30 title.tspan("duck|").styles(:text_anchor=>'end', :font_size=>20,
|
|
95
|
+
31 :font_family=>'helvetica', :fill=>'black')
|
|
96
|
+
32 title.tspan("type").styles(:font_size=>22,
|
|
97
|
+
33 :font_family=>'times', :font_style=>'italic', :fill=>'red')
|
|
98
|
+
34 end
|
|
99
|
+
35 canvas.rect(249,249).styles(:stroke=>'blue', :fill=>'none')
|
|
100
|
+
36 end
|
|
101
|
+
37
|
|
102
|
+
38 rvg.draw.write('duck.gif')
|
|
103
|
+
</pre>
|
|
104
|
+
|
|
105
|
+
<h2>Summary</h2>
|
|
106
|
+
|
|
107
|
+
<p>All drawings follow the same 3 steps:</p>
|
|
108
|
+
|
|
109
|
+
<ol>
|
|
110
|
+
<li>Create an RVG object. Specify the width and height of the
|
|
111
|
+
final image. The <code>RVG.new</code> method yields to a
|
|
112
|
+
block.</li>
|
|
113
|
+
|
|
114
|
+
<li>Within the block, call methods on the RVG object to specify
|
|
115
|
+
a background, add shapes, text, or raster images, or add groups
|
|
116
|
+
of shapes, text, or raster images.</li>
|
|
117
|
+
|
|
118
|
+
<li>Call the <code>draw</code> method to draw the shapes, text,
|
|
119
|
+
or raster images onto the background.</li>
|
|
120
|
+
</ol>
|
|
121
|
+
|
|
122
|
+
<p>I'll step through the example line-by-line.</p>
|
|
123
|
+
|
|
124
|
+
<h2>Lines 1-3</h2>
|
|
125
|
+
<pre class="example">
|
|
126
|
+
1 require 'rvg/rvg'
|
|
127
|
+
2 include Magick
|
|
128
|
+
</pre>
|
|
129
|
+
|
|
130
|
+
<p>These are just the usual Ruby code to load the RVG extension.
|
|
131
|
+
To save some typing, I've included the Magick module into
|
|
132
|
+
Object's namespace.</p>
|
|
133
|
+
|
|
134
|
+
<h2>Lines 4-6</h2>
|
|
135
|
+
<pre class="example">
|
|
136
|
+
4 RVG::dpi = 72
|
|
137
|
+
5
|
|
138
|
+
6 rvg = RVG.new(2.5.in, 2.5.in).viewbox(0,0,250,250) do |canvas|
|
|
139
|
+
</pre>
|
|
140
|
+
|
|
141
|
+
<p><code>RVG::dpi</code> enables the use of <em>unit methods</em>
|
|
142
|
+
in RVG. When you set <code>RVG::dpi</code> to a non-nil value,
|
|
143
|
+
RVG adds a number of conversion methods to the Fixnum and Float
|
|
144
|
+
classes . These methods allow you to specify measurements in
|
|
145
|
+
units such as inches, millimeters, and centimeters. <em>DPI</em>
|
|
146
|
+
stands for "dots per inch," the image resolution. Here I set
|
|
147
|
+
<code>RVG::dpi</code> to 72, a common value for displays.</p>
|
|
148
|
+
|
|
149
|
+
<p>The <code>RVG.new</code> method accepts 2 parameters. These
|
|
150
|
+
parameters specify the width and height of the final image in
|
|
151
|
+
pixels. Since I've defined <code>RVG::dpi</code>, I can specify
|
|
152
|
+
these values in inches using the <code>in</code> conversion
|
|
153
|
+
method. At 72dpi, the final image will be 2.5*72=180 pixels on a
|
|
154
|
+
side.</p>
|
|
155
|
+
|
|
156
|
+
<p>By default, RVG uses pixels as its unit of measurement, but
|
|
157
|
+
since I'm drawing a scalable picture I don't want to confine
|
|
158
|
+
myself to pixels. The <code>viewbox</code> method defines a
|
|
159
|
+
coordinate system with a logical unit. <code>Viewbox</code> takes
|
|
160
|
+
4 parameters, <code>min_x</code>, <code>min_y</code>,
|
|
161
|
+
<code>width</code>, and <code>height</code>. On line 6 I define
|
|
162
|
+
my coordinate system to have its origin at (0,0) and a width and
|
|
163
|
+
height of 250 units. By using my own coordinate system, I can
|
|
164
|
+
later change the size of the image to 5 inches square or 1 inch
|
|
165
|
+
square just by changing the arguments to <code>new</code>.</p>
|
|
166
|
+
|
|
167
|
+
<div style="position:relative">
|
|
168
|
+
<p><img src="ex/images/duck0.gif" alt=
|
|
169
|
+
"default coordinate system" width="180" height="180" /></p>
|
|
170
|
+
|
|
171
|
+
<div style="position:absolute; left:200px;top:0;">
|
|
172
|
+
<p><strong>The default coordinate system</strong></p>
|
|
173
|
+
|
|
174
|
+
<p>By default, the RVG coordinate system has its origin in
|
|
175
|
+
the upper-left corner. The x-axis proceeds to the right. The
|
|
176
|
+
y-axis proceeds downwards. The image on the left shows the
|
|
177
|
+
axes of this coordinate system. I've added a light-blue
|
|
178
|
+
"graph-paper" background to the example images to help
|
|
179
|
+
associate the coordinate arguments to the actual locations in
|
|
180
|
+
the image. Just remember that the axes and graph-paper
|
|
181
|
+
background are not actually part of the image I'm
|
|
182
|
+
producing.</p>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
<p>The RVG class is one of the <em>container</em> classes defined
|
|
187
|
+
by RVG. Container objects can contain graphic objects such as
|
|
188
|
+
circles and lines, text, raster images, and other container
|
|
189
|
+
objects. The outermost container is always an RVG object. I will
|
|
190
|
+
add all the graphic objects that form the duck to this
|
|
191
|
+
container.</p>
|
|
192
|
+
|
|
193
|
+
<p>Container constructors normally yield to a block. However,
|
|
194
|
+
here I've chained <code>viewbox</code> to <code>new</code>, so
|
|
195
|
+
<code>viewbox</code> takes responsibility for yielding and passes
|
|
196
|
+
the new instance of RVG to the <code>canvas</code> argument.</p>
|
|
197
|
+
|
|
198
|
+
<h2>Line 7</h2>
|
|
199
|
+
<pre class="example">
|
|
200
|
+
7 canvas.background_fill = 'white'
|
|
201
|
+
</pre>
|
|
202
|
+
|
|
203
|
+
<p>By default, RVG graphics are drawn on a transparent
|
|
204
|
+
background. This is convenient when you want to display your
|
|
205
|
+
image over another image. You can override the default background
|
|
206
|
+
color by assigning a color to the <code>background_fill=</code>
|
|
207
|
+
attribute. Here I set the background color to "white."</p>
|
|
208
|
+
|
|
209
|
+
<h2>Lines 9-13</h2>
|
|
210
|
+
<pre class="example">
|
|
211
|
+
9 canvas.g.translate(100, 150).rotate(-30) do |body|
|
|
212
|
+
10 body.styles(:fill=>'yellow', :stroke=>'black', :stroke_width=>2)
|
|
213
|
+
11 body.ellipse(50, 30)
|
|
214
|
+
12 body.rect(45, 20, -20, -10).skewX(-35)
|
|
215
|
+
13 end
|
|
216
|
+
</pre>
|
|
217
|
+
|
|
218
|
+
<p>There's a lot going on in these few lines - seven method calls
|
|
219
|
+
- so let's take it one method at a time.</p>
|
|
220
|
+
|
|
221
|
+
<h3>Groups</h3>
|
|
222
|
+
|
|
223
|
+
<p><code>Group</code> is the second container class in RVG. The
|
|
224
|
+
purpose of a group is to associate a set of coordinate system
|
|
225
|
+
transformations and a set of styles with the graphic objects
|
|
226
|
+
within the group. To create a Group object within another
|
|
227
|
+
container, call the <code>g</code> method on the container. The
|
|
228
|
+
<code>g</code> method yields if a block is present. In this
|
|
229
|
+
example, there is no block associated with <code>g</code>, so
|
|
230
|
+
<code>g</code> returns the new group. The <code>g</code> method
|
|
231
|
+
adds the group to the content of its container. In this example,
|
|
232
|
+
the group's container is the canvas object created in line 6. The
|
|
233
|
+
graphic objects in the group are drawn as part of drawing the
|
|
234
|
+
container. The <code>translate</code> and <code>rotate</code>
|
|
235
|
+
chained to <code>g</code> modify the group by adding
|
|
236
|
+
<em>coordinate system transforms</em>.</p>
|
|
237
|
+
|
|
238
|
+
<p>(Okay, there <em>is</em> a block, but there are 2 method calls
|
|
239
|
+
between <code>g</code> and the block. I'll explain more
|
|
240
|
+
later.)</p>
|
|
241
|
+
|
|
242
|
+
<h3>Transforms</h3>
|
|
243
|
+
|
|
244
|
+
<p>I'm going to use this group to contain the ellipse that forms
|
|
245
|
+
the duck's body and the rectangle that forms the wing. I could
|
|
246
|
+
just specify x- and y-coordinates to position these shapes
|
|
247
|
+
relative to the origin, but it's easier to move the origin to
|
|
248
|
+
where I want to draw the shapes. This is the purpose of the
|
|
249
|
+
<code>translate</code> method. This method moves the origin to
|
|
250
|
+
the (x,y) position specified by its arguments. I call
|
|
251
|
+
<code>translate</code> on the group object, and since the content
|
|
252
|
+
of the group gets the coordinate system transformations specified
|
|
253
|
+
for the group, the ellipse and the rectangle will be drawn on a
|
|
254
|
+
coordinate system with the origin at (100, 150) relative to the
|
|
255
|
+
old coordinate system.</p>
|
|
256
|
+
|
|
257
|
+
<p>Also, I want the duck's body to slant upward, so I use the
|
|
258
|
+
<code>rotate</code> method to rotate the axes. The argument to
|
|
259
|
+
<code>rotate</code> is the number of degrees of rotation. A
|
|
260
|
+
negative number indicates counter-clockwise rotation.</p>
|
|
261
|
+
|
|
262
|
+
<p>After translating and rotating the coordinate system, the axes
|
|
263
|
+
look like this:</p>
|
|
264
|
+
|
|
265
|
+
<div style="position:relative">
|
|
266
|
+
<p><img src="ex/images/duck1.gif" width="180" height="180" alt=
|
|
267
|
+
"duck body" /></p>
|
|
268
|
+
|
|
269
|
+
<div style="position:absolute; left:200px;top:0">
|
|
270
|
+
<p><strong>The transform methods</strong></p>
|
|
271
|
+
|
|
272
|
+
<p>There are six transform methods. In addition to
|
|
273
|
+
<code>translate</code> and <code>rotate</code>, there's
|
|
274
|
+
<code>scale</code>, <code>skewX</code>, <code>skewY</code>,
|
|
275
|
+
and <code>matrix</code>. When groups are nested, any
|
|
276
|
+
transforms defined on the inner group(s) are added to the
|
|
277
|
+
outer transforms.</p>
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
|
|
281
|
+
<h3>Styles</h3>
|
|
282
|
+
|
|
283
|
+
<p>Recall that the <code>styles</code> method modifies the
|
|
284
|
+
default group styles. The <code>styles</code> method takes a hash
|
|
285
|
+
as an argument. The hash keys are style names, and the hash
|
|
286
|
+
values are, well, style values. In this example there are three
|
|
287
|
+
style names. The :fill style sets the fill color to 'yellow'. The
|
|
288
|
+
:stroke style sets the outline color to 'black'. The
|
|
289
|
+
:stroke_width style sets the width of the outline to 2. I want
|
|
290
|
+
the styles to apply to all objects within the group so in line 10
|
|
291
|
+
I call <code>styles</code> on the new group object.</p>
|
|
292
|
+
|
|
293
|
+
<p>The <code>styles</code> method is a real workhorse. It's
|
|
294
|
+
defined in almost every class in RVG and there are many other
|
|
295
|
+
style names in addition to these three..</p>
|
|
296
|
+
|
|
297
|
+
<h3>Basic shapes</h3>
|
|
298
|
+
|
|
299
|
+
<p>The group contains two basic shapes, an ellipse and a
|
|
300
|
+
rectangle. I add the ellipse to the group with the
|
|
301
|
+
<code>ellipse</code> method. <code>Ellipse</code> has four
|
|
302
|
+
parameters. The first two, the radius on the x-axis and the
|
|
303
|
+
radius on the y-axis, are required. The last two are the (x,y)
|
|
304
|
+
coordinate of the center. When these are omitted, as here, they
|
|
305
|
+
default to (0,0). I add the rectangle with the <code>rect</code>
|
|
306
|
+
method, which also has four parameters. The first two are the
|
|
307
|
+
width and height of the rectangle. The last two are the (x,y)
|
|
308
|
+
coordinate of the upper-left corner. Both of these methods return
|
|
309
|
+
<code>self</code>, so you can chain other methods to them.</p>
|
|
310
|
+
|
|
311
|
+
<p>Here's what the group looks like when rendered. The ellipse is
|
|
312
|
+
centered on the origin. The upper-left corner of the rectangle is
|
|
313
|
+
slightly up and to the left of the origin.</p>
|
|
314
|
+
|
|
315
|
+
<div style="position:relative">
|
|
316
|
+
<p><img src="ex/images/duck3.gif" alt=
|
|
317
|
+
"default coordinate system" width="180" height="180" /></p>
|
|
318
|
+
|
|
319
|
+
<div style="position:absolute; left:200px;top:0">
|
|
320
|
+
<p><strong>The shape methods</strong></p>
|
|
321
|
+
|
|
322
|
+
<p>There are 7 shape methods. In addition to
|
|
323
|
+
<code>ellipse</code> and <code>rect</code>, there's
|
|
324
|
+
<code>circle</code>, <code>line</code>, <code>path</code>,
|
|
325
|
+
<code>polygon</code>, and <code>polyline</code>. You can also
|
|
326
|
+
think of text as a shape. Shapes are stroked and filled, and
|
|
327
|
+
can be modified by the transform methods and the
|
|
328
|
+
<code>styles</code> method.</p>
|
|
329
|
+
</div>
|
|
330
|
+
</div>
|
|
331
|
+
|
|
332
|
+
<h3>SkewX</h3>
|
|
333
|
+
|
|
334
|
+
<p>Everybody knows that a wing doesn't look like a rectangle! A
|
|
335
|
+
wing looks like a slanted parallelogram. (Well, it does in this
|
|
336
|
+
example!) Fortunately, I can use the transform methods on shapes
|
|
337
|
+
as well as containers. The <code>skewX</code> method makes it
|
|
338
|
+
easy for us to give the rectangle a slant. The <code>skewX</code>
|
|
339
|
+
method is another transform. It takes a single argument, the
|
|
340
|
+
number of degrees to skew the x-axis. Since all the shape
|
|
341
|
+
constructors, including <code>rect</code>, return
|
|
342
|
+
<code>self</code>, I can chain <code>skewX</code> directly to
|
|
343
|
+
<code>rect</code> and limit the effect of the transform to just
|
|
344
|
+
the rectangle. The result looks like this. (I've drawn in the
|
|
345
|
+
axes for the wing coordinate system.)</p>
|
|
346
|
+
|
|
347
|
+
<p><img src="ex/images/duck4.gif" width="180" height="180" alt=
|
|
348
|
+
"duck wing" /></p>
|
|
349
|
+
|
|
350
|
+
<p>That's it for the body. Let's tie up one loose end before
|
|
351
|
+
moving on. I said earlier that container constructors (such as
|
|
352
|
+
<code>g</code>) yield to a block if present. In this case,
|
|
353
|
+
though, the <code>translate</code> and <code>rotate</code>
|
|
354
|
+
methods intervene between <code>g</code> and the block. All the
|
|
355
|
+
transform methods yield when there is an associated block, so I
|
|
356
|
+
can easily chain them to a container constructor and still use a
|
|
357
|
+
block argument to define the graphic objects in the group. Method
|
|
358
|
+
chaining is a common RVG idiom. You'll see it a lot in the
|
|
359
|
+
examples.</p>
|
|
360
|
+
|
|
361
|
+
<p>The next group draws the head.</p>
|
|
362
|
+
|
|
363
|
+
<h2>Lines 15-20</h2>
|
|
364
|
+
<pre class="example">
|
|
365
|
+
15 canvas.g.translate(130, 83) do |head|
|
|
366
|
+
16 head.styles(:stroke=>'black', :stroke_width=>2)
|
|
367
|
+
17 head.circle(30).styles(:fill=>'yellow')
|
|
368
|
+
18 head.circle(5, 10, -5).styles(:fill=>'black')
|
|
369
|
+
19 head.polygon(30,0, 70,5, 30,10, 62,25, 23,20).styles(:fill=>'orange')
|
|
370
|
+
20 end
|
|
371
|
+
</pre>
|
|
372
|
+
|
|
373
|
+
<p>This section is very similar to the previous one. I'm defining
|
|
374
|
+
a group to contain the graphic objects that draw the duck's head,
|
|
375
|
+
eye, and beak. First I use the translate method to move the
|
|
376
|
+
origin to (130,83):</p>
|
|
377
|
+
|
|
378
|
+
<p><img src="ex/images/duck6.gif" width="180" height="180" alt=
|
|
379
|
+
"duck head" /></p>
|
|
380
|
+
|
|
381
|
+
<p>In line 16 I define the <code>stroke</code> and
|
|
382
|
+
<code>stroke_width</code> styles on the group. Styles defined on
|
|
383
|
+
the group propagate to shapes within the group unless you
|
|
384
|
+
override them. To do that, call <code>styles</code> on the
|
|
385
|
+
shapes. In this group each shape has its own fill color. The
|
|
386
|
+
yellow circle forms the head. The <code>circle</code> method
|
|
387
|
+
takes 3 parameters. The first parameter is the radius of the
|
|
388
|
+
circle. The other two parameters are the (x,y) coordinate of the
|
|
389
|
+
center. If omitted, as here, they default to (0,0). I use a small
|
|
390
|
+
black circle for the eye.</p>
|
|
391
|
+
|
|
392
|
+
<p>Last, I use the <code>polygon</code> method to draw the beak.
|
|
393
|
+
This method draws a polygon from a series of (x,y) coordinates.
|
|
394
|
+
If the last coordinate is not the same as the first,
|
|
395
|
+
<code>polygon</code> implicitly adds it to close the polygon.
|
|
396
|
+
Again, I use <code>styles</code> to set the fill color to
|
|
397
|
+
orange.</p>
|
|
398
|
+
|
|
399
|
+
<p><img src="ex/images/duck8.gif" width="180" height="180" alt=
|
|
400
|
+
"duck head final" /></p>
|
|
401
|
+
|
|
402
|
+
<h2>Lines 22-25</h2>
|
|
403
|
+
<pre class="example">
|
|
404
|
+
22 foot = RVG::Group.new do |_foot|
|
|
405
|
+
23 _foot.path('m0,0 v30 l30,10 l5,-10, l-5,-10 l-30,10z').
|
|
406
|
+
24 styles(:stroke_width=>2, :fill=>'orange', :stroke=>'black')
|
|
407
|
+
25 end
|
|
408
|
+
</pre>
|
|
409
|
+
|
|
410
|
+
<p>Here I create a group by directly calling <code>new</code>
|
|
411
|
+
instead of calling the <code>g</code> method on a container. This
|
|
412
|
+
creates a group object that is not contained within the canvas.
|
|
413
|
+
You might think of the foot as not being attached to anything,
|
|
414
|
+
like this:</p>
|
|
415
|
+
|
|
416
|
+
<p><img src="ex/images/duck9.gif" width="180" height="180" alt=
|
|
417
|
+
"duck foot" /></p>
|
|
418
|
+
|
|
419
|
+
<h2>Lines 26-27</h2>
|
|
420
|
+
<pre class="example">
|
|
421
|
+
26 canvas.use(foot).translate(75, 188).rotate(15)
|
|
422
|
+
27 canvas.use(foot).translate(100, 185).rotate(-15)
|
|
423
|
+
</pre>
|
|
424
|
+
|
|
425
|
+
<p>To add the group to the canvas I use the <code>use</code>
|
|
426
|
+
method. The use method can accept any container or graphic object
|
|
427
|
+
as an argument. Optionally you can specify an (x,y) coordinate
|
|
428
|
+
that specifies where to position the objects. In this example,
|
|
429
|
+
however, I let those arguments default to (0,0) and use
|
|
430
|
+
<code>translate</code> to position the feet. Here's how the left
|
|
431
|
+
foot attaches to the duck:</p>
|
|
432
|
+
|
|
433
|
+
<p><img src="ex/images/duck10.gif" width="180" height="180" alt=
|
|
434
|
+
"duck foot 2" /></p>
|
|
435
|
+
|
|
436
|
+
<p>Of course, the duck is walking, so I have to give the foot a
|
|
437
|
+
little slant with <code>rotate</code>:</p>
|
|
438
|
+
|
|
439
|
+
<p><img src="ex/images/duck11.gif" width="180" height="180" alt=
|
|
440
|
+
"duck foot 3" /></p>
|
|
441
|
+
|
|
442
|
+
<p>Attaching the right foot is easy. Call <code>use</code> again
|
|
443
|
+
but give different arguments to <code>translate</code> and
|
|
444
|
+
<code>rotate</code>:</p>
|
|
445
|
+
|
|
446
|
+
<p><img src="ex/images/duck12.gif" width="180" height="180" alt=
|
|
447
|
+
"final duck foot" /></p>
|
|
448
|
+
|
|
449
|
+
<h2>Lines 29-34</h2>
|
|
450
|
+
<pre class="example">
|
|
451
|
+
29 canvas.text(125, 30) do |title|
|
|
452
|
+
30 title.tspan("duck|").styles(:text_anchor=>'end', :font_size=>20,
|
|
453
|
+
31 :font_family=>'helvetica', :fill=>'black')
|
|
454
|
+
32 title.tspan("type").styles(:font_size=>22,
|
|
455
|
+
33 :font_family=>'times', :font_style=>'italic', :fill=>'red')
|
|
456
|
+
34 end
|
|
457
|
+
</pre>
|
|
458
|
+
|
|
459
|
+
<p>All I need now is a title for the picture. Text in RVG is a
|
|
460
|
+
job for the <code>text</code> method. Like the shape methods,
|
|
461
|
+
<code>text</code> can be used with any container object.
|
|
462
|
+
<code>Text</code> itself is a container, except that it can only
|
|
463
|
+
contain text-related objects. The <code>text</code> method takes
|
|
464
|
+
2 or 3 arguments, an (x,y) pair and optionally a string. The
|
|
465
|
+
(x,y) pair define a <em>current text position</em> at which
|
|
466
|
+
rendering starts. If there is a string argument, it will be
|
|
467
|
+
rendered starting at the current text position. Rendering text
|
|
468
|
+
changes the current text position to the end of the text.</p>
|
|
469
|
+
|
|
470
|
+
<p>In the example, text is used as a container. Text objects can
|
|
471
|
+
contain Tspan objects. Each tspan can specify its own styles. By
|
|
472
|
+
default each tspan is rendered starting at the current text
|
|
473
|
+
position.</p>
|
|
474
|
+
|
|
475
|
+
<p>As usual, I can change the appearance of the text with
|
|
476
|
+
<code>styles</code>. Here I choose a font, a font style (the
|
|
477
|
+
default is "normal"), its size in points, and the color.</p>
|
|
478
|
+
|
|
479
|
+
<p><img src="ex/images/duck14.gif" width="180" height="180" alt=
|
|
480
|
+
"duck title" /></p>
|
|
481
|
+
|
|
482
|
+
<h2>Line 35</h2>
|
|
483
|
+
<pre class="example">
|
|
484
|
+
35 canvas.rect(249,249).styles(:stroke=>'blue', :fill=>'none')
|
|
485
|
+
</pre>
|
|
486
|
+
|
|
487
|
+
<p>I'm almost done. All I need to do it add a blue border. (I'm
|
|
488
|
+
going to remove the graph paper background because we don't need
|
|
489
|
+
it any more.)</p>
|
|
490
|
+
|
|
491
|
+
<p><img src="ex/images/duck15.gif" width="180" height="180" alt=
|
|
492
|
+
"duck with border" /></p>
|
|
493
|
+
|
|
494
|
+
<h2>Line 38</h2>
|
|
495
|
+
<pre class="example">
|
|
496
|
+
38 rvg.draw.write('duck.gif')
|
|
497
|
+
</pre>
|
|
498
|
+
|
|
499
|
+
<p>The <code>draw</code> method call doesn't occupy a lot of
|
|
500
|
+
space - just 4 letters - but does a lot of work. The
|
|
501
|
+
<code>draw</code> method goes through all the graphics objects
|
|
502
|
+
that I've added to the outermost RVG container and draws them on
|
|
503
|
+
the background. When the drawing is complete, <code>draw</code>
|
|
504
|
+
returns the drawing in the form of an RMagick Image object. You
|
|
505
|
+
can use any Image class methods on the drawing. Here I simply
|
|
506
|
+
write the image to a GIF file.</p>
|
|
507
|
+
|
|
508
|
+
<h2>Scalable graphics</h2>
|
|
509
|
+
|
|
510
|
+
<p>Are RVG images really scalable? Let's try. Change the RVG.new
|
|
511
|
+
call to make an image that's 4 times as big. That's 5 inches on a
|
|
512
|
+
side:</p>
|
|
513
|
+
<pre class="example">
|
|
514
|
+
6 rvg = RVG.new(5.in, 5.in).viewbox(0,0,250,250) do |canvas|
|
|
515
|
+
</pre>
|
|
516
|
+
|
|
517
|
+
<p>Change nothing else. Run the program again and see what you
|
|
518
|
+
get.</p>
|
|
519
|
+
|
|
520
|
+
<p><img src="ex/images/big-duck.gif" width="360" height="360"
|
|
521
|
+
alt="big duck" /></p>
|
|
522
|
+
|
|
523
|
+
<p class="spacer"> </p>
|
|
524
|
+
|
|
525
|
+
<div class="nav">
|
|
526
|
+
« <a href="constants.html">Prev</a> | <a href=
|
|
527
|
+
"index.html">Contents</a> | <a href="rvg.html">Next</a> »
|
|
528
|
+
</div>
|
|
529
|
+
</body>
|
|
530
|
+
</html>
|