granicus.if.org Git - imagemagick/blob - www/magick-vector-graphics.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"\r
   2     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\r
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">\r
   4 <head>\r
   5   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
   6   <meta name="verify-v1" content="g222frIIxcQTrvDR3NBRUSKP3AnMNoqxOkIniCEkV7U=" />\r
   7   <link rel="meta" type="application/rdf+xml" title="ICI" href="http://imagemagick.org/ici.rdf" />\r
   8   <style type="text/css" media="all">\r
   9     @import url("../www/magick.css");\r
  10   </style>\r
  11   <link rel="shortcut icon" href="../images/wand.ico"  type="images/vnd.microsoft.icon"/>
  12   <title>ImageMagick: Magick Vector Graphics</title>
  13   <meta http-equiv="Content-Language" content="en-US"/>
  14   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  15   <meta http-equiv="Reply-to" content="magick-users@imagemagick.org"/>
  16   <meta name="Generator" content="PHP"/>
  17   <meta name="Keywords" content="magick, vector, graphics, ImageMagick, ImageMagic, MagickCore, MagickWand, PerlMagick, Magick++, RMagick, PythonMagick, JMagick, TclMagick, Image, Magick, Magic, Wand, ImageMagickObject, Swiss, Army, Knife, Image, Processing"/>
  18   <meta name="Description" content="ImageMagick® is a software suite to create, edit, and compose bitmap images. It can read, convert and write images in a variety of formats (about 100) including GIF, JPEG, JPEG-2000, PNG, PDF, PhotoCD, TIFF, and DPX. Use ImageMagick to translate, flip, mirror, rotate, scale, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves.  ImageMagick is free software delivered as a ready-to-run binary distribution or as source code that you can freely use, copy, modify, and distribute. Its license is compatible with the GPL. It runs on all major operating systems.  The functionality of ImageMagick is typically utilized from the command line or you can use the features from programs written in your favorite programming language. Choose from these interfaces: MagickCore (C), MagickWand (C), ChMagick (Ch), Magick++ (C++), JMagick (Java), L-Magick (Lisp), PascalMagick (Pascal), PerlMagick (Perl), MagickWand for PHP (PHP), PythonMagick (Python), RMagick (Ruby), or TclMagick (Tcl/TK). With a language interface, use ImageMagick to modify or create images automagically and dynamically."/>
  19   <meta name="Rating" content="GENERAL"/>
  20   <meta name="Robots" content="INDEX, FOLLOW"/>
  21   <meta name="Generator" content="ImageMagick Studio LLC"/>
  22   <meta name="Author" content="ImageMagick Studio LLC"/>
  23   <meta name="Revisit-after" content="2 DAYS"/>
  24   <meta name="Resource-type" content="document"/>
  25   <meta name="Copyright" content="Copyright (c) 1999-2010 ImageMagick Studio LLC"/>
  26   <meta name="Distribution" content="Global"/>
  27 </head>\r
  28 \r
  29 <body id="www-imagemagick-org">\r
  30 <div class="titlebar">\r
  31 <a href="../index.html">\r
  32   <img src="../images/script.png" alt="[ImageMagick]"\r
  33   style="width: 350px; height: 60px; margin: 28px auto; float: left;" /></a>\r
  34 <a href="http://www.networkredux.com">\r
  35   <img src="../images/networkredux.png" alt="[sponsor]"\r
  36   style="margin: 45px auto; border: 0px; float: left;" /></a>\r
  37 <a href="http://www.imagemagick.org/discourse-server/">\r
  38   <img src="../images/logo.jpg" alt=""\r
  39   style="width: 114px; height: 118px; border: 0px; float: right;" /></a>\r
  40 <a href="../index.html">\r
  41   <img src="../images/sprite.jpg" alt=""\r
  42   style="width: 114px; height: 118px; border: 0px; float: right;" /></a>\r
  43 </div>\r
  44 \r
  45 <div class="eastbar">\r
  46 \r
  47 <div class="menu">
  48   <a title="About ImageMagick" href="../index.html">About ImageMagick</a>
  49 </div>
  50 <div class="sep"></div>\r
  51 <div class="menu">
  52   <a title="Binary Releases" href="../www/binary-releases.html">Binary Releases</a>
  53 </div>
  54 <div class="sub">
  55     <a title="Binary Release: Unix" href="../www/binary-releases.html#unix">Unix</a>
  56 </div>
  57 <div class="sub">
  58     <a title="Binary Release: MacOS X" href="../www/binary-releases.html#macosx">Mac OS X</a>
  59 </div>
  60 <div class="sub">
  61     <a title="Binary Release: Windows" href="../www/binary-releases.html#windows">Windows</a>
  62 </div>
  63 <div class="sep"></div>\r
  64 <div class="menu">
  65   <a title="Command-line Tools" href="../www/command-line-tools.html">Command-line Tools</a>
  66 </div>
  67 <div class="sub">
  68     <a title="Command-line Tools: Processing" href="../www/command-line-processing.html">Processing</a>
  69 </div>
  70 <div class="sub">
  71     <a title="Command-line Tools: Options" href="../www/command-line-options.html">Options</a>
  72 </div>
  73 <div class="sub">
  74     <a title="Command-line Tools: Usage" href="http://www.imagemagick.org/Usage/">Usage</a>
  75 </div>
  76 <div class="menu">
  77   <a title="Program Interfaces" href="../www/api.html">Program Interfaces</a>
  78 </div>
  79 <div class="sub">
  80     <a title="Program Interface: MagickWand" href="../www/magick-wand.html">MagickWand</a>
  81 </div>
  82 <div class="sub">
  83     <a title="Program Interface: MagickCore" href="../www/magick-core.html">MagickCore</a>
  84 </div>
  85 <div class="sub">
  86     <a title="Program Interface: PerlMagick" href="../www/perl-magick.html">PerlMagick</a>
  87 </div>
  88 <div class="sub">
  89     <a title="Program Interface: Magick++" href="../Magick++/">Magick++</a>
  90 </div>
  91 <div class="sep"></div>\r
  92 <div  class="menu">
  93    <a title="Install from Source" href="../www/install-source.html">Install from Source</a>
  94 </div>
  95 <div class="sub">
  96     <a title="Install from Source: Unix" href="../www/install-source.html#unix">Unix</a>
  97 </div>
  98 <div class="sub">
  99     <a title="Install from Source: Windows" href="../www/install-source.html#windows">Windows</a>
 100  </div>
 101 <div class="menu">
 102   <a title="Resources" href="../www/resources.html">Resources</a>
 103 </div>
 104 <div class="menu">
 105   <a title="Architecture" href="../www/architecture.html">Architecture</a>
 106 </div>
 107 <div class="menu">
 108   <a title="Download" href="../www/download.html">Download</a>
 109 </div>
 110 <div class="sep"></div>\r
 111 <div class="menu">
 112   <a title="Search" href="http://www.imagemagick.org/script/search.php">Search</a>
 113 </div>
 114 <div class="sep"></div>\r
 115 <div class="menu">
 116   <a title="Site Map"href="../www/sitemap.html">Site Map</a>
 117 </div>
 118 <div  class="sub">
 119     <a title="Site Map: Links"href="../www/links.html">Links</a>
 120 </div>
 121 <div class="sep"></div>\r
 122 <div  class="menu">
 123   <a title="Sponsors" href="../www/sponsors.html">Sponsors:</a>
 124
 125 <div class="sponsbox">
 126 <div  class="sponsor">
 127   <a title="Sponsor: Webdesign Agentur" href="http://www.ventzke-partner.de">Webdesign Agentur</a><!-- 201101010480 invendio.de-->
 128 </div>
 129 <div  class="sponsor">
 130   <a title="Sponsor: LVM Versicherung" href="http://www.neu-reich.de">LVM Versicherung</a><!-- 201101010480 -->
 131 </div>
 132 <div  class="sponsor">
 133   <a title="Sponsor: Deko.net" href="http://www.deko.net">Deko.net</a><!-- 201101010600 Peterssen-->
 134 </div>
 135 <div  class="sponsor">
 136   <a title="Sponsor: Kredit" href="http://www.online-kredit-index.de">Kredit</a><!-- 201007010120 Buchhorn -->
 137 </div>
 138 <div  class="sponsor">
 139   <a title="Sponsor: Druckerei" href="http://www.print24.de/">Druckerei</a><!-- 201009010720 -->
 140 </div>
 141 <div  class="sponsor">
 142    <a title="Sponsor: Druckerei Online" href="http://www.allesdruck.de">Druckerei Online</a><!-- 201012011200 allesdruck.de-->
 143 </div>
 144 </div>
 145 </div>
 146 \r
 147 \r
 148 </div>\r
 149 \r
 150 <div class="main">\r
 151 \r
 152 \r
 153 <p class="navigation-index">[<a href="#intro">Introduction to Vector Graphics</a> &bull; <a href="#overview">MVG Overview</a> &bull; <a href="#primitives">Drawing Primitives</a>]</p>
 154
 155 <h2><a name="intro"></a>Introduction to Vector Graphics</h2>
 156 <div class="doc-section">
 157
 158 <p>This specification defines the features and syntax for Magick Vector Graphics (MVG), a modularized language for describing two-dimensional vector and mixed vector/raster graphics in ImageMagick.  You can use the language to draw from the
 159 command line, from an MVG file, from an <a href="http://www.w3.org/TR/SVG/" >SVG -- Scalable Vector Graphics</a> file or from one of the ImageMagick <a href="../www/api.html">program interfaces</a>.  Use this command, for example, to render an arc:</p>
 160
 161 <p class='crt'><span class="crtprompt"> $magick&gt; </span><span class='crtin'>convert -size 100x60 xc:skyblue -fill white -stroke black \  <br/>
 162     -draw "path 'M 30,40  A 30,20  20  0,0 70,20 A 30,20  20  1,0 30,40 Z '" \ <br/>
 163     arc.png</span></p>
 164 <p>and here is the result:</p>
 165
 166 <p class="image">
 167   <a href="../images/arc.png"><img src="../images/arc.png" width="100" height="60" alt="arc" /></a>
 168 </p>
 169
 170 <p>When the drawing gets sufficiently complex, we recommend you assemble the graphic primitives into a MVG file. For our example, we use <a href="../www/source/piechart.mvg">piechart.mvg</a>:</p>
 171
 172 <div class="viewport">
 173 <pre class="code">
 174   push graphic-context
 175     viewbox 0 0 624 369
 176     affine 0.283636 0 0 0.283846 -0 -0
 177     push graphic-context
 178       push graphic-context
 179         fill 'darkslateblue'
 180         stroke 'blue'
 181         stroke-width 1
 182         rectangle 1,1 2199,1299
 183       pop graphic-context
 184       push graphic-context
 185         font-size 40
 186         fill 'white'
 187         stroke-width 1
 188         text 600,1100 'Average: 20.0'
 189       pop graphic-context
 190       push graphic-context
 191         fill 'red'
 192         stroke 'black'
 193         stroke-width 5
 194         path 'M700.0,600.0 L340.0,600.0 A360.0,360.0 0 0,1 408.1452123287954,389.2376150414973 z'
 195       pop graphic-context
 196       push graphic-context
 197         font-size 40
 198         fill 'white'
 199         stroke-width 1
 200         text 1400,140 'MagickWand for PHP'
 201       pop graphic-context
 202       push graphic-context
 203         font-size 30
 204         fill 'white'
 205         stroke-width 1
 206         text 1800,140 '(10.0%)'
 207       pop graphic-context
 208       push graphic-context
 209         fill 'red'
 210         stroke 'black'
 211         stroke-width 4
 212         rectangle 1330,100 1370,140
 213       pop graphic-context
 214       push graphic-context
 215         fill 'yellow'
 216         stroke 'black'
 217         stroke-width 5
 218         path 'M700.0,600.0 L408.1452123287954,389.2376150414973 A360.0,360.0 0 0,1 976.5894480359858,369.56936567559273 z'
 219       pop graphic-context
 220       push graphic-context
 221         font-size 40
 222         fill 'white'
 223         stroke-width 1
 224         text 1400,220 'MagickCore'
 225       pop graphic-context
 226       push graphic-context
 227         font-size 30
 228         fill 'white'
 229         stroke-width 1
 230         text 1800,220 '(29.0%)'
 231       pop graphic-context
 232       push graphic-context
 233         fill 'yellow'
 234         stroke 'black'
 235         stroke-width 4
 236         rectangle 1330,180 1370,220
 237       pop graphic-context
 238       push graphic-context
 239         fill 'fuchsia'
 240         stroke 'black'
 241         stroke-width 5
 242         path 'M700.0,600.0 L976.5894480359858,369.56936567559273 A360.0,360.0 0 0,1 964.2680466142854,844.4634932636567 z'
 243       pop graphic-context
 244       push graphic-context
 245         font-size 40
 246         fill 'white'
 247         stroke-width 1
 248         text 1400,300 'MagickWand'
 249       pop graphic-context
 250       push graphic-context
 251         font-size 30
 252         fill 'white'
 253         stroke-width 1
 254         text 1800,300 '(22.9%)'
 255       pop graphic-context
 256       push graphic-context
 257         fill 'fuchsia'
 258         stroke 'black'
 259         stroke-width 4
 260         rectangle 1330,260 1370,300
 261       pop graphic-context
 262       push graphic-context
 263         fill 'blue'
 264         stroke 'black'
 265         stroke-width 5
 266         path 'M700.0,600.0 L964.2680466142854,844.4634932636567 A360.0,360.0 0 0,1 757.853099990584,955.3210081341651 z'
 267       pop graphic-context
 268       push graphic-context
 269         font-size 40
 270         fill 'white'
 271         stroke-width 1
 272         text 1400,380 'JMagick'
 273       pop graphic-context
 274       push graphic-context
 275         font-size 30
 276         fill 'white'
 277         stroke-width 1
 278         text 1800,380 '(10.6%)'
 279       pop graphic-context
 280       push graphic-context
 281         fill 'blue'
 282         stroke 'black'
 283         stroke-width 4
 284         rectangle 1330,340 1370,380
 285       pop graphic-context
 286       push graphic-context
 287         fill 'lime'
 288         stroke 'black'
 289         stroke-width 5
 290         path 'M700.0,600.0 L757.853099990584,955.3210081341651 A360.0,360.0 0 0,1 340.0,600.0 z'
 291       pop graphic-context
 292       push graphic-context
 293         font-size 40
 294         fill 'white'
 295         stroke-width 1
 296         text 1400,460 'Magick++'
 297       pop graphic-context
 298       push graphic-context
 299         font-size 30
 300         fill 'white'
 301         stroke-width 1
 302         text 1800,460 '(27.5%)'
 303       pop graphic-context
 304       push graphic-context
 305         fill 'lime'
 306         stroke 'black'
 307         stroke-width 4
 308         rectangle 1330,420 1370,460
 309       pop graphic-context
 310       push graphic-context
 311         font-size 100
 312         fill 'white'
 313         stroke-width 1
 314         text 100,150 'ImageMagick'
 315       pop graphic-context
 316       push graphic-context
 317         fill 'none'
 318         stroke 'black'
 319         stroke-width 5
 320         circle 700,600 700,960
 321       pop graphic-context
 322     pop graphic-context
 323   pop graphic-context
 324 </pre>
 325 </div>
 326
 327 <p>to render a pie chart with this command:</p>
 328
 329 <p class='crt'><span class="crtprompt"> $magick&gt; </span><span class='crtin'>convert piechart.mvg piechart.png</span></p>
 330 <p>which produces this rendering:</p>
 331
 332 <p class="image">
 333   <a href="../images/piechart.png"><img src="../images/piechart.png" width="624" height="369" alt="piechart" /></a>
 334 </p>
 335
 336 <p>However, in general, MVG is sufficiently difficult to work with that you probably want to use a program to generate your graphics in the SVG format.  ImageMagick automagically converts SVG to MVG and renders your image, for example, we render <a href="../www/source/piechart.svg">piechart.svg</a> with this command:</p>
 337
 338 <p class='crt'><span class="crtprompt"> $magick&gt; </span><span class='crtin'>convert piechart.svg piechart.jpg</span></p>
 339
 340 <p>to produce the same pie chart we created with the MVG language.</p>
 341
 342 <p>Drawing is available from many of the ImageMagick <a href="../www/api.html">program interfaces</a> as well.  ImageMagick converts the drawing API calls to MVG and renders it.  Here is example code written in the <a href="../www/magick-wand.html">MagickWand</a> language: </p>
 343
 344 <div class="viewport">
 345 <pre class="code">
 346    (void) PushDrawingWand(draw_wand);
 347    {
 348      const PointInfo points[6] =
 349      {
 350        { 180,504 },
 351        { 282.7,578.6 },
 352        { 243.5,699.4 },
 353        { 116.5,699.4 },
 354        { 77.26,578.6 },
 355        { 180,504 }
 356      };
 357
 358      DrawSetStrokeAntialias(draw_wand,True);
 359      DrawSetStrokeWidth(draw_wand,9);
 360      DrawSetStrokeLineCap(draw_wand,RoundCap);
 361      DrawSetStrokeLineJoin(draw_wand,RoundJoin);
 362      (void) DrawSetStrokeDashArray(draw_wand,0,(const double *)NULL);
 363      (void) PixelSetColor(color,"#4000c2");
 364      DrawSetStrokeColor(draw_wand,color);
 365      DrawSetFillRule(draw_wand,EvenOddRule);
 366      (void) PixelSetColor(color,"#800000");
 367      DrawSetFillColor(draw_wand,color);
 368      DrawPolygon(draw_wand,6,points);
 369    }
 370    (void) PopDrawingWand(draw_wand);
 371 </pre>
 372 </div>
 373
 374 </div>
 375
 376 <h2><a name="overview"></a>MVG Overview</h2>
 377 <div class="doc-section">
 378
 379 <p>MVG ignores all white-space between commands. This allows multiple MVG commands per line. It is common convention to terminate each MVG command with a new line to make MVG easier to edit and read. This syntax description uses indentation in MVG sequences to aid with understanding. Indentation is supported but is not required.</p>
 380
 381 <p>Metafile wrapper syntax (to support stand-alone MVG files):</p>
 382
 383 <pre class="text">
 384   push graphic-context
 385     viewbox 0 0 width height
 386     [ any other MVG commands ]
 387   pop graphic-context
 388 </pre>
 389
 390 <p>Pattern syntax (saving and restoring context):</p>
 391
 392 <pre class="text">
 393   push pattern id x,y width,height
 394    push graphic-context
 395     [ drawing commands ]
 396    pop graphic-context
 397   pop pattern
 398 </pre>
 399
 400 <p>an example is (%s is a identifier string):</p>
 401
 402 <pre class="text">
 403   push defs
 404    push pattern %s 10,10 20,20
 405     push graphic-context
 406      fill red
 407      rectangle 5,5 15,15
 408     pop graphic-context
 409     push graphic-context
 410      fill green
 411      rectangle 10,10 20,20
 412     pop graphic-context
 413    pop pattern
 414   pop defs
 415 </pre>
 416
 417 <p>For image tiling use:</p>
 418
 419 <pre class="text">
 420   push pattern id x,y width,height
 421    image Copy ...
 422   pop pattern
 423 </pre>
 424
 425 <p>Note you can use the pattern for either the fill or stroke like:</p>
 426
 427 <pre class="text">
 428   stroke url(#%s)
 429 </pre>
 430
 431 <p>or</p>
 432
 433 <pre class="text">
 434   fill url(#%s)
 435 </pre>
 436
 437 <p>The clip path defines a clipping area, where only the contained area to be drawn upon.  Areas outside of the clipping areare masked.</p>
 438
 439 <pre class="text">
 440   push defs
 441    push clip-path %s
 442     push graphic-context
 443      rectangle 10,10 20,20
 444     pop graphic-context
 445    pop clip-path
 446   pop defs
 447   clip-path url(#%s)
 448 </pre>
 449
 450 </div>
 451
 452 <h2><a name="primitives"></a>Drawing Primitives</h2>
 453 <div class="doc-section">
 454
 455 <p>Here is a complete description of the MVG drawing primitives:</p>
 456
 457 <dl class="doc">
 458
 459   <dt class="doc"><a name="affine" id="affine"></a>affine <em class="option">s<sub>x</sub></em>,<em class="option">r<sub>x</sub></em>,<em class="option">r<sub>y</sub></em>,<em class="option">s<sub>y</sub></em>,<em class="option">t<sub>x</sub></em>,<em class="option">t<sub>y</sub></em></dt>
 460
 461   <dd></dd>
 462
 463
 464
 465   <dt class="doc"><a name="arc" id="arc"></a>arc <em class="option">x<sub>0</sub></em>,<em class="option">y<sub>0</sub></em>&nbsp; &nbsp;<em class="option">x<sub>1</sub></em>,<em class="option">y<sub>1</sub></em>&nbsp; &nbsp;<em class="option">a<sub>0</sub></em>,<em class="option">a<sub>1</sub></em></dt>
 466
 467   <dd></dd>
 468
 469   <dt class="doc"><a name="bezier" id="bezier"></a>bezier <em class="option">x<sub>0</sub></em>,<em class="option">y<sub>0</sub></em> ... <em class="option">x<sub>n</sub></em>,<em class="option">y<sub>n</sub></em></dt>
 470
 471   <dd>
 472   <p><kbd>Bezier</kbd> (spline) requires three or more x,y coordinates to define its shape. The first and last points are the knots (preserved coordinates) and any intermediate coordinates are the control points. If two control points are specified, the line between each end knot and its sequentially respective control point determines the tangent direction of the curve at that end. If one control point is specified, the lines from the end knots to the one control point determines the tangent directions of the curve at each end. If more than two control points are specified, then the additional control points act in combination to determine the intermediate shape of the curve. In order to
 473   draw complex curves, it is highly recommended either to use the <kbd>Path</kbd> primitive or to draw multiple four-point bezier segments with the start and end knots of each successive segment repeated.</p>
 474   </dd>
 475
 476   <dt class="doc"><a name="border-color" id="border-color"></a>border-color <em class="option">color</em></dt>
 477
 478   <dd></dd>
 479
 480   <dt class="doc"><a name="circle" id="circle"></a>circle <em class="option">origin<sub>x</sub></em>,<em class="option">origin<sub>y</sub></em>&nbsp; &nbsp;<em class="option">perimeter<sub>x</sub></em>,<em class="option">perimeter<sub>y</sub></em></dt>
 481
 482   <dd></dd>
 483
 484   <dt class="doc"><a name="clip-path" id="clip-path"></a>clip-path url(<em class="option">name</em>)</dt>
 485
 486   <dd></dd>
 487
 488   <dt class="doc"><a name="clip-rule" id="clip-rule"></a>clip-rule <em class="option">rule</em></dt>
 489
 490   <dd>Choose from these rule types:
 491
 492         <p class="text">
 493           evenodd <br/>
 494           nonzero
 495         </p>
 496    </dd>
 497
 498   <dt class="doc"><a name="clip-units" id="clip-units"></a>clip-units <em class="option">units</em></dt>
 499
 500   <dd>Choose from these unit types:
 501
 502         <p class="text">
 503           userSpace <br/>
 504           userSpaceOnUse  <br/>
 505           objectBoundingBox <br/>
 506         </p>
 507   </dd>
 508
 509   <dt class="doc"><a name="color" id="color"></a>color <em class="option">x</em>,<em class="option">y</em> <em class="option">method</em></dt>
 510
 511
 512
 513
 514
 515
 516
 517
 518
 519
 520
 521 <dd>Choose from these method types:
 522
 523 <pre class="text">
 524   point
 525   replace
 526   floodfill
 527   filltoborder
 528   reset
 529 </pre>
 530
 531 </dd>
 532
 533   <dt class="doc"><a name="decorate" id="decorate"></a>decorate <em class="option">type</em></dt>
 534
 535
 536 <dd>Choose from these types of decorations:
 537
 538 <pre class="text">
 539   none
 540   line-through
 541   overline
 542   underline
 543 </pre>
 544
 545 </dd>
 546
 547   <dt class="doc"><a name="ellipse" id="ellipse"></a>ellipse <em class="option">center<sub>x</sub></em>,<em class="option">center<sub>y</sub></em>&nbsp; &nbsp;<em class="option">radius<sub>x</sub></em>,<em class="option">radius<sub>y</sub></em>&nbsp; &nbsp;<em class="option">arc<sub>start</sub></em>,<em class="option">arc<sub>stop</sub></em></dt>
 548
 549   <dt class="doc"><a name="fill" id="fill"></a>fill <em class="option">color</em></dt>
 550
 551 <dd>Choose from any of these <a href="../www/color.html">colors</a>.
 552 </dd>
 553
 554   <dt class="doc"><a name="fill-opacity" id="fill-opacity"></a>fill-opacity <em class="option">opacity</em></dt>
 555
 556
 557 <dd>The opacity ranges from 0.0 (fully transparent) to 1.0 (fully opaque) or as a percentage (e.g. 50%).
 558 </dd>
 559
 560   <dt class="doc"><a name="fill-rule" id="fill-rule"></a>fill-rule <em class="option">rule</em></dt>
 561
 562
 563 <dd>Choose from these rule types:
 564
 565 <pre class="text">
 566   evenodd
 567   nonzero
 568 </pre>
 569
 570 </dd>
 571
 572   <dt class="doc"><a name="font" id="font"></a>font <em class="option">name</em></dt>
 573
 574 <dd></dd>
 575
 576   <dt class="doc"><a name="font-family" id="font-family"></a>font-family <em class="option">family</em></dt>
 577
 578 <dd></dd>
 579
 580   <dt class="doc"><a name="font-size" id="font-size"></a>font-size <em class="option">point-size</em></dt>
 581
 582 <dd></dd>
 583
 584   <dt class="doc"><a name="font-stretch" id="font-stretch"></a>font-stretch <em class="option">type</em></dt>
 585
 586 <dd>Choose from these stretch types:
 587
 588 <pre class="text">
 589   all
 590   normal
 591   ultra-condensed
 592   extra-condensed
 593   condensed
 594   semi-condensed
 595   semi-expanded
 596   expanded
 597   extra-expanded
 598   ultra-expanded
 599 </pre>
 600
 601 </dd>
 602
 603   <dt class="doc"><a name="font-style" id="font-style"></a>font-style <em class="option">style</em></dt>
 604
 605
 606 <dd>Choose from these styles:
 607
 608 <pre class="text">
 609   all
 610   normal
 611   italic
 612   oblique
 613 </pre>
 614
 615 </dd>
 616
 617   <dt class="doc"><a name="font-weight" id="font-weight"></a>font-weight <em class="option">weight</em></dt>
 618
 619 <dd>Choose from these weights:
 620
 621 <pre class="text">
 622   all
 623   normal
 624   bold
 625   100
 626   200
 627   300
 628   400
 629   500
 630   600
 631   700
 632   800
 633   900
 634 </pre>
 635
 636 </dd>
 637
 638   <dt class="doc"><a name="gradient-units" id="gradient-units"></a>gradient-units <em class="option">units</em></dt>
 639
 640 <dd>Choose from these units:
 641
 642 <pre class="text">
 643   userSpace
 644   userSpaceOnUse
 645   objectBoundingBox
 646 </pre>
 647
 648 </dd>
 649
 650   <dt class="doc"><a name="gravity" id="gravity"></a>gravity <em class="option">type</em></dt>
 651
 652 <dd>Choose from these gravity types:
 653
 654 <pre class="text">
 655   NorthWest
 656   North
 657   NorthEast
 658   West
 659   Center
 660   East
 661   SouthWest
 662   South
 663   SouthEast
 664 </pre>
 665
 666 </dd>
 667
 668   <dt class="doc"><a name="image" id="image"></a>image <em class="option">compose x,y width,height 'filename'</em></dt>
 669
 670 <dd>Choose from these compose operations:
 671
 672 <table id="table" cellpadding="2" cellspacing="0" style="width: 93%">
 673   <tbody>
 674   <tr valign="top">
 675     <th align="left" style="width: 8%">Method</th>
 676     <th align="left">Description</th>
 677   </tr>
 678
 679   <tr valign="top">
 680     <td valign="top">clear</td>
 681     <td valign="top">Both the color and the alpha of the destination are cleared. Neither the source nor the destination are used as input.</td>
 682   </tr>
 683
 684   <tr valign="top">
 685     <td valign="top">src</td>
 686     <td valign="top">The source is copied to the destination. The destination is not used as input.</td>
 687   </tr>
 688
 689   <tr valign="top">
 690     <td valign="top">dst</td>
 691     <td valign="top">The destination is left untouched.</td>
 692   </tr>
 693
 694   <tr valign="top">
 695     <td valign="top"><b>src-over</b></td>
 696     <td valign="top">The source is composited over the destination.</td>
 697   </tr>
 698
 699   <tr valign="top">
 700     <td valign="top">dst-over</td>
 701     <td valign="top">The destination is composited over the source and the result replaces the destination.</td>
 702   </tr>
 703
 704   <tr valign="top">
 705     <td valign="top">src-in</td>
 706     <td valign="top">The part of the source lying inside of the destination replaces the destination.</td>
 707   </tr>
 708
 709   <tr valign="top">
 710     <td valign="top">dst-in</td>
 711     <td valign="top">The part of the destination lying inside of the source replaces the destination.</td>
 712   </tr>
 713
 714   <tr valign="top">
 715     <td valign="top">src-out</td>
 716     <td valign="top">The part of the source lying outside of the destination replaces the destination.</td>
 717   </tr>
 718
 719   <tr valign="top">
 720     <td valign="top">dst-out</td>
 721     <td valign="top">The part of the destination lying outside of the source         replaces the destination.</td>
 722   </tr>
 723
 724   <tr valign="top">
 725     <td valign="top">src-atop</td>
 726     <td valign="top">The part of the source lying inside of the destination is  composited onto the destination.</td>
 727   </tr>
 728
 729   <tr valign="top">
 730     <td valign="top">dst-atop</td>
 731     <td valign="top">The part of the destination lying inside of the source is composited over the source and replaces the destination.</td>
 732   </tr>
 733
 734   <tr valign="top">
 735     <td valign="top">multiply</td>
 736     <td valign="top">The source is multiplied by the destination and replaces the destination. The resultant color is always at least as dark as either of the two constituent colors. Multiplying any color with black produces black. Multiplying any color with white leaves the original color unchanged.</td>
 737   </tr>
 738
 739   <tr valign="top">
 740     <td valign="top">screen</td>
 741     <td valign="top">The source and destination are complemented and then multiplied and then replace the destination. The resultant color is always at least as light as either of the two constituent colors. Screening any color with white produces white. Screening any color with black leaves the original color unchanged.</td>
 742   </tr>
 743
 744   <tr valign="top">
 745     <td valign="top">overlay</td>
 746     <td valign="top">Multiplies or screens the colors, dependent on the destination color. Source colors overlay the destination whilst preserving its highlights and shadows. The destination color is not replaced, but is mixed with the source color to reflect the lightness or darkness of the destination.</td>
 747   </tr>
 748
 749   <tr valign="top">
 750     <td valign="top">darken</td>
 751     <td valign="top">Selects the darker of the destination and source colors.  The destination is replaced with the source when the source is darker, otherwise it is left unchanged.</td>
 752   </tr>
 753
 754   <tr valign="top">
 755     <td valign="top">lighten</td>
 756     <td valign="top">Selects the lighter of the destination and source colors.  The destination is replaced with the source when the source is lighter, otherwise it is left unchanged.</td>
 757   </tr>
 758
 759   <tr valign="top">
 760     <td valign="top">linear-light</td>
 761     <td valign="top">Increase contrast slightly with an impact on the foreground's tonal values.</td>
 762   </tr>
 763
 764   <tr valign="top">
 765     <td valign="top">color-dodge</td>
 766     <td valign="top">Brightens the destination color to reflect the source color. Painting with black produces no change.</td>
 767   </tr>
 768
 769   <tr valign="top">
 770     <td valign="top">color-burn</td>
 771     <td valign="top">Darkens the destination color to reflect the source color.  Painting with white produces no change.</td>
 772   </tr>
 773
 774   <tr valign="top">
 775     <td valign="top">hard-light</td>
 776     <td valign="top">Multiplies or screens the colors, dependent on the source color value. If the source color is lighter than 0.5, the destination is lightened as if it were screened. If the source color is darker than 0.5, the destination is darkened, as if it were multiplied. The degree of lightening or darkening is proportional to the difference between the source color and 0.5. If it is equal to 0.5 the destination is unchanged. Painting with pure black or white produces black or white.</td>
 777   </tr>
 778
 779   <tr valign="top">
 780     <td valign="top">soft-light</td>
 781     <td valign="top">Darkens or lightens the colors, dependent on the source color value. If the source color is lighter than 0.5, the destination is lightened. If the source color is darker than 0.5, the destination is darkened, as if it were burned in. The degree of darkening or lightening is proportional to the difference between the source color and 0.5. If it is equal to 0.5, the destination is unchanged. Painting with pure black or white produces a distinctly darker or lighter area, but does not result in pure black or white.</td>
 782   </tr>
 783
 784   <tr valign="top">
 785     <td valign="top">plus</td>
 786     <td valign="top">The source is added to the destination and replaces the destination. This operator is useful for animating a dissolve between two images.</td>
 787   </tr>
 788
 789   <tr valign="top">
 790     <td valign="top">add</td>
 791     <td valign="top">As per 'plus' but transparency data is treated as matte
 792         values. As such any transparent areas in either image remain
 793         transparent. </td>
 794   </tr>
 795
 796   <tr valign="top">
 797     <td valign="top">minus</td>
 798     <td valign="top">Subtract the colors in the source image from the
 799         destination image. When transparency is involved, Opaque areas will be
 800         subtracted from any destination opaque areas. </td>
 801   </tr>
 802
 803   <tr valign="top">
 804     <td valign="top">subtract</td>
 805     <td valign="top">Subtract the colors in the source image from the
 806         destination image. When transparency is involved transparent areas are
 807         subtracted, so only the opaque areas in the source remain opaque in
 808         the destination image. </td>
 809   </tr>
 810
 811   <tr valign="top">
 812     <td valign="top">difference</td>
 813     <td valign="top">Subtracts the darker of the two constituent colors from the lighter. Painting with white inverts the destination color. Painting with black produces no change.</td>
 814   </tr>
 815
 816   <tr valign="top">
 817     <td valign="top">exclusion</td>
 818     <td valign="top">Produces an effect similar to that of 'difference', but appears as lower contrast. Painting with white inverts the destination color. Painting with black produces no change.</td>
 819   </tr>
 820
 821   <tr valign="top">
 822     <td valign="top">xor</td>
 823     <td valign="top">The part of the source that lies outside of the destination is combined with the part of the destination that lies outside of the source.</td>
 824   </tr>
 825
 826   <tr valign="top">
 827     <td valign="top">copy-*</td>
 828     <td valign="top">Copy the specificed channel in the source image to the
 829         same channel in the destination image.  If the channel specified in
 830         the source image does not exist, (which can only happen for methods,
 831         '<kbd>copy-opacity</kbd>' or '<kbd>copy-black</kbd>') then it is
 832         assumed that the source image is a special grayscale channel image
 833         of the values to be copied. </td>
 834     </tr>
 835
 836   <tr valign="top">
 837     <td valign="top">change-mask</td>
 838     <td valign="top">Replace any destination pixel that is the similar to the source images pixel (as defined by the current <a href="#fuzz">-fuzz</a> factor), with transparency. </td>
 839   </tr>
 840   </tbody>
 841 </table>
 842
 843 </dd>
 844
 845   <dt class="doc"><a name="interline-spacing" id="interline-spacing"></a>interline-spacing <em class="option">pixels</em></dt>
 846
 847   <dd></dd>
 848
 849   <dt class="doc"><a name="interword-spacing" id="interword-spacing"></a>interword-spacing <em class="option">pixels</em></dt>
 850
 851   <dd></dd>
 852
 853   <dt class="doc"><a name="kerning" id="kerning"></a>kerning <em class="option">pixels</em></dt>
 854
 855   <dd></dd>
 856
 857   <dt class="doc"><a name="line" id="line"></a>line <em class="option">x,y x<sub>1</sub>,y<sub>1</sub></em></dt>
 858
 859   <dd></dd>
 860
 861   <dt class="doc"><a name="matte" id="matte"></a>matte <em class="option">x,y method</em></dt>
 862
 863 <dd>Choose from these methods:
 864
 865 <pre class="text">
 866   point
 867   replace
 868   floodfill
 869   filltoborder
 870   reset
 871 </pre>
 872
 873 </dd>
 874
 875   <dt class="doc"><a name="offset" id="offset"></a>offset <em class="option">offset</em></dt>
 876
 877   <dd></dd>
 878
 879   <dt class="doc"><a name="opacity" id="opacity"></a>opacity <em class="option">opacity</em></dt>
 880
 881 <dd>Use percent (e.g. 50%).</dd>
 882
 883   <dt class="doc"><a name="path" id="path"></a>path <em class="option">path</em></dt>
 884
 885   <dd></dd>
 886
 887   <dt class="doc"><a name="point" id="point"></a>point <em class="option">x,y</em></dt>
 888
 889   <dd></dd>
 890
 891   <dt class="doc"><a name="polygon" id="polygon"></a>polygon <em class="option">x,y x<sub>1</sub>,y<sub>1</sub>, ..., x<sub>n</sub>,y<sub>n</sub></em></dt>
 892
 893   <dd></dd>
 894
 895   <dt class="doc"><a name="polyline" id="polyline"></a>polyline <em class="option">x,y x<sub>1</sub>,y<sub>1</sub>, ..., x<sub>n</sub>,y<sub>n</sub></em></dt>
 896
 897   <dd></dd>
 898
 899   <dt class="doc"><a name="pop-clip-path" id="pop-clip-path"></a>pop clip-path</dt>
 900
 901   <dd></dd>
 902
 903   <dt class="doc"><a name="pop-defs" id="pop-defs"></a>pop defs</dt>
 904
 905   <dd></dd>
 906
 907   <dt class="doc"><a name="pop-gradient" id="pop-gradient"></a>pop gradient</dt>
 908
 909   <dd></dd>
 910
 911   <dt class="doc"><a name="pop-graphic-context" id="pop-graphic-context"></a>pop graphic-context</dt>
 912
 913   <dd></dd>
 914
 915   <dt class="doc"><a name="pop-pattern" id="pop-pattern"></a>pop pattern</dt>
 916
 917   <dd></dd>
 918
 919   <dt class="doc"><a name="push" id="push"></a>push clip-path <em class="option">name</em></dt>
 920
 921   <dd></dd>
 922
 923   <dt class="doc"><a name="push-defs" id="push-defs"></a>push defs</dt>
 924
 925   <dd></dd>
 926
 927   <dt class="doc"><a name="push-gradient-linear" id="push-gradient-linear"></a>push gradient <em class="option">id linear x,y x<sub>1</sub>,y<sub>1</sub></em></dt>
 928
 929   <dd></dd>
 930
 931   <dt class="doc"><a name="push-gradient-radial" id="push-gradient-radial"></a>push gradient <em class="option">id radial x<sub>c</sub>,c<sub>y</sub> x<sub>f</sub>,y<sub>f</sub> radius</em></dt>
 932
 933   <dd></dd>
 934
 935   <dt class="doc"><a name="push-graphic-context" id="push-graphic-context"></a>push graphic-context</dt>
 936
 937   <dd></dd>
 938
 939   <dt class="doc"><a name="push-pattern" id="push-pattern"></a>push pattern <em class="option">id radial x,y width,height</em></dt>
 940
 941   <dd></dd>
 942
 943   <dt class="doc"><a name="rectangle" id="rectangle"></a>rectangle <em class="option">x,y x<sub>1</sub>,y<sub>1</sub></em></dt>
 944
 945   <dd></dd>
 946
 947   <dt class="doc"><a name="rotate" id="rotate"></a>rotate <em class="option">angle</em></dt>
 948
 949   <dd></dd>
 950
 951   <dt class="doc"><a name="roundrectangle" id="roundrectangle"></a>roundrectangle <em class="option">x,y x<sub>1</sub>,y<sub>1</sub> width,height</em></dt>
 952
 953   <dd></dd>
 954
 955   <dt class="doc"><a name="scale" id="scale"></a>scale <em class="option">x,y</em></dt>
 956
 957   <dd></dd>
 958
 959   <dt class="doc"><a name="skewX" id="skewX"></a>skewX <em class="option">angle</em></dt>
 960
 961   <dd></dd>
 962
 963   <dt class="doc"><a name="skewY" id="skewY"></a>skewX <em class="option">angle</em></dt>
 964
 965   <dd></dd>
 966
 967   <dt class="doc"><a name="stop-color" id="stop-color"></a>stop-color <em class="option">color offset</em></dt>
 968
 969   <dd></dd>
 970
 971   <dt class="doc"><a name="stroke" id="stroke"></a>stroke <em class="option">color</em></dt>
 972
 973   <dd></dd>
 974
 975   <dt class="doc"><a name="stroke-antialias" id="stroke-antialias"></a>stroke-antialias <em class="option">0 &bull; 1</em></dt>
 976
 977   <dd></dd>
 978
 979   <dt class="doc"><a name="stroke-dasharray" id="stroke-dasharray"></a>stroke-dasharray <em class="option">none &bull; numeric-list</em></dt>
 980
 981   <dd></dd>
 982
 983   <dt class="doc"><a name="stroke-dashoffset" id="stroke-dashoffset"></a>stroke-dashoffset <em class="option">offset</em></dt>
 984
 985   <dd></dd>
 986
 987   <dt class="doc"><a name="stroke-linecap" id="stroke-linecap"></a>stroke-linecap <em class="option">type</em></dt>
 988
 989
 990   <dd>Choose from these cap types:
 991
 992 <pre class="text">
 993   butt
 994   round
 995   square
 996 </pre>
 997
 998   </dd>
 999
1000   <dt class="doc"><a name="stroke-linejoin" id="stroke-linejoin"></a>stroke-linejoin <em class="option">type</em></dt>
1001
1002   <dd>Choose from these join types:
1003
1004 <pre class="text">
1005   bevel
1006   miter
1007   round
1008 </pre>
1009
1010   </dd>
1011
1012   <dt class="doc"><a name="stroke-miterlimit" id="stroke-miterlimit"></a>stroke-miterlimit <em class="option">limit</em></dt>
1013
1014   <dd></dd>
1015
1016   <dt class="doc"><a name="stroke-opacity" id="stroke-opacity"></a>stroke-opacity <em class="option">opacity</em></dt>
1017
1018   <dd>The opacity ranges from 0.0 (fully transparent) to 1.0 (fully opaque) or as a percentage (e.g. 50%).
1019   </dd>
1020
1021   <dt class="doc"><a name="stroke-width" id="stroke-width"></a>stroke-width <em class="option">width</em></dt>
1022
1023   <dd></dd>
1024
1025   <dt class="doc"><a name="text" id="text"></a>text <em class="option">"text"</em></dt>
1026
1027   <dd></dd>
1028
1029   <dt class="doc"><a name="text-antialias" id="text-antialias"></a>text-antialias <em class="option">0 &bull; 1</em></dt>
1030
1031   <dd></dd>
1032
1033   <dt class="doc"><a name="text-undercolor" id="text-undercolor"></a>text-undercolor <em class="option">color</em></dt>
1034
1035   <dd></dd>
1036
1037   <dt class="doc"><a name="translate" id="translate"></a>translate <em class="option">x,y</em></dt>
1038
1039   <dd></dd>
1040
1041   <dt class="doc"><a name="viewbox" id="viewbox"></a>viewbox <em class="option">x,y x<sub>1</sub>,y<sub>1</sub></em></dt>
1042
1043   <dd></dd>
1044
1045 </dl>
1046
1047 </div>
1048
1049
1050 \r
1051 </div>\r
1052 \r
1053 <div id="linkbar">\r
1054  <!--    <span id="linkbar-west">&nbsp;</span>  -->\r
1055     <span id="linkbar-center">\r
1056       <a href="http://www.imagemagick.org/discourse-server/">Discourse Server</a> &bull;\r
1057     <a href="http://www.imagemagick.org/MagickStudio/scripts/MagickStudio.cgi">Studio</a>\r
1058     </span>\r
1059     <span id="linkbar-east">&nbsp;</span>\r
1060   </div>\r
1061   <div class="footer">\r
1062     <span id="footer-west">&copy; 1999-2010 ImageMagick Studio LLC</span>\r
1063     <span id="footer-east"> <a href="http://www.imagemagick.org/script/contact.php">Contact the Wizards</a></span>\r
1064   </div>\r
1065   <div style="clear: both; margin: 0; width: 100%; "></div>\r
1066 </body>\r
1067 </html>\r