git.roojs.org Git - raphael/blob - reference.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2    "http://www.w3.org/TR/html4/strict.dtd">
   3 <html lang="en">
   4     <head>
   5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   6         <title>Raphaël Reference</title>
   7         <meta name="author" content="Dmitry Baranovskiy">
   8         <meta name="description" content="Vector Graphics JavaScript™ Library">
   9         <link rel="stylesheet" href="raphael.css" type="text/css" charset="utf-8" media="screen,projection">
  10         <link rel="stylesheet" type="text/css" media="print" href="/dmitry-print.css">
  11         <link rel="shortcut icon" href="/favicon16.png" type="image/x-icon">
  12         <link rel="apple-touch-icon" href="/favicon.png">
  13         <script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
  14         <script src="../dmitry.js" type="text/javascript" charset="utf-8"></script>
  15     </head>
  16     <body class="raphael" id="raphael.dmitry.baranovskiy.com">
  17         <div id="header">
  18             <a href="http://twitter.com/statuses/user_timeline/17180567.atom" id="rss" name="rss">rss</a>
  19             <h1>
  20                 Raphaël—JavaScript Library
  21             </h1>
  22         </div>
  23         <div id="content">
  24             <div>
  25                 <div>
  26                     <div id="column-1">
  27                         <h2>Main Function</h2>
  28                         <h3 id="Raphael">
  29                             Raphael
  30                         </h3>
  31                         <p>
  32                             Function that creates canvas for future drawing.
  33                         </p>
  34                         <h4>Parameters</h4>
  35                         <ol>
  36                             <li>container <em>HTMLElement</em> or <em>string</em></li>
  37                             <li>width <em>number</em></li>
  38                             <li>height <em>number</em></li>
  39                         </ol>
  40                         <p>or</p>
  41                         <ol>
  42                             <li>x <em>number</em></li>
  43                             <li>y <em>number</em></li>
  44                             <li>width <em>number</em></li>
  45                             <li>height <em>number</em></li>
  46                         </ol>
  47                         <h4>Usage</h4>
  48                         <pre class="javascript code"><code>
  49 // Creates canvas 320&nbsp;×&nbsp;200 at 10, 50</code>
  50 <code>var paper = Raphael(10, 50, 320, 200);</code>
  51 <code>var paper = Raphael(document.getElementById("notepad"), 320, 200);</code>
  52 <code>var paper = Raphael("notepad", 320, 200);</code></pre>
  53                         <h2 id="Element">
  54                             Element’s generic methods
  55                         </h2>
  56                         <p>
  57                             Each object created on the canvas share the same generic methods:
  58                         </p>
  59                         <h3 id="node">
  60                             node
  61                         </h3>
  62                         <p>
  63                             Gives you reference to DOM object, so you can assign event handlers or just randomly mess around.
  64                         </p>
  65                         <h4>Usage</h4>
  66                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
  67 <code>c.node.onclick = function () { c.attr("fill", "red"); };</code></pre>
  68                         <h3 id="rotate">
  69                             rotate
  70                         </h3>
  71                         <p>
  72                             Rotates element by given degree around its center.
  73                         </p>
  74                         <h4>Parameters</h4>
  75                         <ol>
  76                             <li>degree <em>number</em> Degree of rotation (0 – 360°)</li>
  77                             <li>isAbsolute <em>boolean</em> [optional] Will rotation be relative or absolute</li>
  78                         </ol>
  79                         <h4>Usage</h4>
  80                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
  81 <code>c.rotate(45);</code></pre>
  82                         <h3 id="translate">
  83                             translate
  84                         </h3>
  85                         <p>
  86                             Moves element around the canvas by given dimensions.
  87                         </p>
  88                         <h4>Parameters</h4>
  89                         <ol>
  90                             <li>dx <em>number</em> Pixels of translation by X</li>
  91                             <li>dy <em>number</em> Pixels of translation by Y</li>
  92                         </ol>
  93                         <h4>Usage</h4>
  94                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
  95 <code>c.translate(10, 10);</code></pre>
  96                         <h3 id="scale">
  97                             scale
  98                         </h3>
  99                         <p>
 100                             Scales element by given amount of times.
 101                         </p>
 102                         <h4>Parameters</h4>
 103                         <ol>
 104                             <li>Xtimes <em>number</em></li>
 105                             <li>Ytimes <em>number</em></li>
 106                         </ol>
 107                         <h4>Usage</h4>
 108                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
 109 <code>c.scale(1.5, 1.5);</code></pre>
 110                         <h3 id="attr">
 111                             attr
 112                         </h3>
 113                         <p>
 114                             Sets attributes of elements.
 115                         </p>
 116                         <h4>Parameters</h4>
 117                         <ol>
 118                             <li>params <em>object</em></li>
 119                         </ol>
 120                         <p>or</p>
 121                         <ol>
 122                             <li>attributeName <em>string</em></li>
 123                             <li>value <em>string</em></li>
 124                         </ol>
 125                         <h4>Possible parameters</h4>
 126                         <ul>
 127                             <li>cx <em>number</em></li>
 128                             <li>cy <em>number</em></li>
 129                             <li>dasharray <em>string</em> [“-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]</li>
 130                             <li>fill <em>colour</em></li>
 131                             <li>fill-opacity <em>number</em></li>
 132                             <li>font <em>string</em></li>
 133                             <li>font-family <em>string</em></li>
 134                             <li>font-size <em>number</em></li>
 135                             <li>font-weight <em>string</em></li>
 136                             <li>gradient <em>object</em></li>
 137                             <li>height <em>number</em></li>
 138                             <li>opacity <em>number</em></li>
 139                             <li>path <em>pathString</em></li>
 140                             <li>r <em>number</em></li>
 141                             <li>rotation <em>number</em></li>
 142                             <li>rx <em>number</em></li>
 143                             <li>ry <em>number</em></li>
 144                             <li>scale <em>CSV</em></li>
 145                             <li>stroke <em>colour</em></li>
 146                             <li>stroke-linecap <em>string</em> [“butt”, “square”, “round”, “miter”]</li>
 147                             <li>stroke-linejoin <em>string</em> [“butt”, “square”, “round”, “miter”]</li>
 148                             <li>stroke-miterlimit <em>number</em></li>
 149                             <li>stroke-opacity <em>number</em></li>
 150                             <li>stroke-width <em>number</em></li>
 151                             <li>translation <em>CSV</em></li>
 152                             <li>width <em>number</em></li>
 153                             <li>x <em>number</em></li>
 154                             <li>y <em>number</em></li>
 155                         </ul>
 156                         <h4>Usage</h4>
 157                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
 158 <code>c.attr("fill", "black");</code>
 159 <code>c.attr({fill: "#000", stroke: "#f00", opacity: 0.5});</code></pre>
 160                         <h3 id="animate">
 161                             animate
 162                         </h3>
 163                         <p>
 164                             Linearly changes attribute from current to specified in given amount of milliseconds.
 165                         </p>
 166                         <h4>Parameters</h4>
 167                         <ol>
 168                             <li>newAttrs <em>object</em></li>
 169                             <li>ms <em>number</em></li>
 170                             <li>callback <em>function</em> [optional]</li>
 171                         </ol>
 172                         <h4>Usage</h4>
 173                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
 174 <code>c.animate({cx: 20, r: 20}, 2000);</code></pre>
 175                         <h3 id="getBBox">
 176                             getBBox
 177                         </h3>
 178                         <p>
 179                             Returns dimensions of given element.
 180                         </p>
 181                         <h4>Usage</h4>
 182                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
 183 <code>var width = c.getBBox().width;</code></pre>
 184                         <h3 id="toFront">
 185                             toFront
 186                         </h3>
 187                         <p>
 188                             Moves element to front in hierarchy.
 189                         </p>
 190                         <h4>Usage</h4>
 191                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
 192 <code>c.toFront();</code></pre>
 193                         <h3 id="toBack">
 194                             toBack
 195                         </h3>
 196                         <p>
 197                             Moves element to back in hierarchy.
 198                         </p>
 199                         <h4>Usage</h4>
 200                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
 201 <code>c.toBack();</code></pre>
 202                         <h3 id="insertBefore">
 203                             insertBefore
 204                         </h3>
 205                         <p>
 206                             Inserts current object before the given one.
 207                         </p>
 208                         <h4>Usage</h4>
 209                         <pre class="javascript code"><code>var r = paper.rect(10, 10, 10, 10);</code>
 210 <code>var c = paper.circle(10, 10, 10);</code>
 211 <code>c.insertBefore(r);</code></pre>
 212                         <h3 id="insertAfter">
 213                             insertAfter
 214                         </h3>
 215                         <p>
 216                             Inserts current object after the given one
 217                         </p>
 218                         <h4>Usage</h4>
 219                         <pre class="javascript code"><code>var r = paper.rect(10, 10, 10, 10);</code>
 220 <code>var c = paper.circle(10, 10, 10);</code>
 221 <code>r.insertAfter(c);</code></pre>
 222                         <h2>Graphic Primitives</h2>
 223                         <h3 id="circle">
 224                             circle
 225                         </h3>
 226                         <p>
 227                             Creates circle.
 228                         </p>
 229                         <h4>Parameters</h4>
 230                         <ol>
 231                             <li>x <em>number</em> X coordinate of the centre</li>
 232                             <li>y <em>number</em> Y coordinate of the centre</li>
 233                             <li>r <em>number</em> radius</li>
 234                         </ol>
 235                         <h4>Usage</h4>
 236                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code></pre>
 237                         <h3 id="rect">
 238                             rect
 239                         </h3>
 240                         <p>
 241                             Creates rectangle.
 242                         </p>
 243                         <h4>Parameters</h4>
 244                         <ol>
 245                             <li>x <em>number</em> X coordinate of top left corner</li>
 246                             <li>y <em>number</em> Y coordinate of top left corner</li>
 247                             <li>width <em>number</em></li>
 248                             <li>height <em>number</em></li>
 249                             <li>r <em>number</em> [optional] radius for rounded corners, default is 0</li>
 250                         </ol>
 251                         <h4>Usage</h4>
 252                         <pre class="javascript code"><code>// regular rectangle</code>
 253 <code>var c = paper.rect(10, 10, 10, 10);</code>
 254 <code>// rounded rectangle</code>
 255 <code>var c = paper.rect(10, 10, 100, 50, 10);</code></pre>
 256                         <h3 id="ellipse">
 257                             ellipse
 258                         </h3>
 259                         <p>
 260                             Creates an ellipse.
 261                         </p>
 262                         <h4>Parameters</h4>
 263                         <ol>
 264                             <li>x <em>number</em> X coordinate of the centre</li>
 265                             <li>y <em>number</em> X coordinate of the centre</li>
 266                             <li>rx <em>number</em> Horisontal radius</li>
 267                             <li>ry <em>number</em> Vertical radius</li>
 268                         </ol>
 269                         <h4>Usage</h4>
 270                         <pre class="javascript code"><code>var c = paper.ellipse(100, 100, 30, 40);</code></pre>
 271                         <h3 id="image">
 272                             image
 273                         </h3>
 274                         <p>
 275                             Embeds an image in SVG/VML area.
 276                         </p>
 277                         <h4>Parameters</h4>
 278                         <ol>
 279                             <li>src <em>string</em></li>
 280                             <li>x <em>number</em></li>
 281                             <li>y <em>number</em></li>
 282                             <li>width <em>number</em></li>
 283                             <li>height <em>number</em></li>
 284                         </ol>
 285                         <h4>Usage</h4>
 286                         <pre class="javascript code"><code>var c = paper.image("apple.png", 10, 10, 100, 100);</code></pre>
 287                         <h3 id="path">
 288                             path
 289                         </h3>
 290                         <p>
 291                             Initialise path drawing. In general case this function returns empty path object. To draw path use built in methods like <code>lineTo</code> and <code>curveTo</code>.
 292                         </p>
 293                         <h4>Parameters</h4>
 294                         <ol>
 295                             <li>params <em>object</em> Similar to object for <code><a href="#attr">attr</a></code> method</li>
 296                             <li>pathString <em>string</em> [optional] path in SVG path string format. See SVG documentation.</li>
 297                         </ol>
 298                         <h4>Usage</h4>
 299                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);</code></pre>
 300                         <h2>Path Methods</h2>
 301                         <h3 id="absolutely">
 302                             absolutely
 303                         </h3>
 304                         <p>
 305                             Sets trigger to count all following units as absolute ones, unless said otherwise. [<em>on by default</em>]
 306                         </p>
 307                         <h4>Usage</h4>
 308                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).absolutely()
 309     .moveTo(10, 10).lineTo(50, 50);</code></pre>
 310                         <h3 id="relatively">
 311                             relatively
 312                         </h3>
 313                         <p>
 314                             Sets trigger to count all following units as relative ones, unless said otherwise.
 315                         </p>
 316                         <h4>Usage</h4>
 317                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).relatively()
 318     .moveTo(10, 10).lineTo(50, 50);</code></pre>
 319                         <h3 id="moveTo">
 320                             moveTo
 321                         </h3>
 322                         <p>
 323                             Moves drawing point to given coordinates.
 324                         </p>
 325                         <h4>Parameters</h4>
 326                         <ol>
 327                             <li>x <em>number</em></li>
 328                             <li>y <em>number</em></li>
 329                         </ol>
 330                         <h4>Usage</h4>
 331                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);</code></pre>
 332                         <h3 id="lineTo">
 333                             lineTo
 334                         </h3>
 335                         <p>
 336                             Draws straight line to given coordinates.
 337                         </p>
 338                         <h4>Parameters</h4>
 339                         <ol>
 340                             <li>x <em>number</em></li>
 341                             <li>y <em>number</em></li>
 342                         </ol>
 343                         <h4>Usage</h4>
 344                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);</code></pre>
 345                         <h3 id="cplineTo">
 346                             cplineTo
 347                         </h3>
 348                         <p>
 349                             Draws curved line to given coordinates. Line will have horizontal anchors on start and on finish.
 350                         </p>
 351                         <h4>Parameters</h4>
 352                         <ol>
 353                             <li>x <em>number</em></li>
 354                             <li>y <em>number</em></li>
 355                             <li>width <em>number</em></li>
 356                         </ol>
 357                         <h4>Usage</h4>
 358                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).cplineTo(50, 50);</code></pre>
 359                         <h3 id="curveTo">
 360                             curveTo
 361                         </h3>
 362                         <p>
 363                             Draws bicubic curve to given coordinates.
 364                         </p>
 365                         <h4>Parameters</h4>
 366                         <ol>
 367                             <li>x1 <em>number</em></li>
 368                             <li>y1 <em>number</em></li>
 369                             <li>x2 <em>number</em></li>
 370                             <li>y2 <em>number</em></li>
 371                             <li>x3 <em>number</em></li>
 372                             <li>y3 <em>number</em></li>
 373                         </ol>
 374                         <h4>Usage</h4>
 375                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);</code></pre>
 376                         <h3 id="qcurveTo">
 377                             qcurveTo
 378                         </h3>
 379                         <p>
 380                             Draws quadratic curve to given coordinates.
 381                         </p>
 382                         <h4>Parameters</h4>
 383                         <ol>
 384                             <li>x1 <em>number</em></li>
 385                             <li>y1 <em>number</em></li>
 386                             <li>x2 <em>number</em></li>
 387                             <li>y2 <em>number</em></li>
 388                         </ol>
 389                         <h4>Usage</h4>
 390                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);</code></pre>
 391                         <h3 id="addRoundedCorner">
 392                             addRoundedCorner
 393                         </h3>
 394                         <p>
 395                             Draws quarter of circle form current point.
 396                         </p>
 397                         <h4>Parameters</h4>
 398                         <ol>
 399                             <li>r <em>number</em></li>
 400                             <li>dir <em>string</em> two letters direction</li>
 401                         </ol>
 402                         <h4>Possible dir values</h4>
 403                         <dl>
 404                             <dt>lu</dt>
 405                             <dd>left up</dd>
 406                             <dt>ld</dt>
 407                             <dd>left down</dd>
 408                             <dt>ru</dt>
 409                             <dd>right up</dd>
 410                             <dt>rd</dt>
 411                             <dd>right down</dd>
 412                             <dt>ur</dt>
 413                             <dd>up right</dd>
 414                             <dt>ul</dt>
 415                             <dd>up left</dd>
 416                             <dt>dr</dt>
 417                             <dd>down right</dd>
 418                             <dt>dl</dt>
 419                             <dd>down left</dd>
 420                         </dl>
 421                         <h4>Usage</h4>
 422                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).addRoundedCorner(10, "rd");</code></pre>
 423                         <h3 id="andClose">
 424                             andClose
 425                         </h3>
 426                         <p>
 427                             Closes the path.
 428                         </p>
 429                         <h4>Usage</h4>
 430                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).andClose();</code></pre>
 431                     </div>
 432                     <div id="column-2">
 433                         <h2>
 434                             <a href="index.html">Home</a>
 435                         </h2>
 436                         <h2>
 437                             Contents
 438                         </h2>
 439                         <ul id="contents">
 440                             <li>
 441                                 <a href="reference.html#Raphael"><code>Raphael</code></a>
 442                             </li>
 443                             <li>
 444                                 <a href="reference.html#node"><code>node</code></a>
 445                             </li>
 446                             <li>
 447                                 <a href="reference.html#rotate"><code>rotate</code></a>
 448                             </li>
 449                             <li>
 450                                 <a href="reference.html#translate"><code>translate</code></a>
 451                             </li>
 452                             <li>
 453                                 <a href="reference.html#scale"><code>scale</code></a>
 454                             </li>
 455                             <li>
 456                                 <a href="reference.html#attr"><code>attr</code></a>
 457                             </li>
 458                             <li>
 459                                 <a href="reference.html#attr"><code>animate</code></a>
 460                             </li>
 461                             <li>
 462                                 <a href="reference.html#getBBox"><code>getBBox</code></a>
 463                             </li>
 464                             <li>
 465                                 <a href="reference.html#toFront"><code>toFront</code></a>
 466                             </li>
 467                             <li>
 468                                 <a href="reference.html#toBack"><code>toBack</code></a>
 469                             </li>
 470                             <li>
 471                                 <a href="reference.html#circle"><code>circle</code></a>
 472                             </li>
 473                             <li>
 474                                 <a href="reference.html#rect"><code>rect</code></a>
 475                             </li>
 476                             <li>
 477                                 <a href="reference.html#ellipse"><code>ellipse</code></a>
 478                             </li>
 479                             <li>
 480                                 <a href="reference.html#image"><code>image</code></a>
 481                             </li>
 482                             <li>
 483                                 <a href="reference.html#path"><code>path</code></a>
 484                                 <ul>
 485                                     <li>
 486                                         <a href="reference.html#absolutely"><code>absolutely</code></a>
 487                                     </li>
 488                                     <li>
 489                                         <a href="reference.html#relatively"><code>relatively</code></a>
 490                                     </li>
 491                                     <li>
 492                                         <a href="reference.html#moveTo"><code>moveTo</code></a>
 493                                     </li>
 494                                     <li>
 495                                         <a href="reference.html#lineTo"><code>lineTo</code></a>
 496                                     </li>
 497                                     <li>
 498                                         <a href="reference.html#cplineTo"><code>cplineTo</code></a>
 499                                     </li>
 500                                     <li>
 501                                         <a href="reference.html#curveTo"><code>curveTo</code></a>
 502                                     </li>
 503                                     <li>
 504                                         <a href="reference.html#qcurveTo"><code>qcurveTo</code></a>
 505                                     </li>
 506                                     <li>
 507                                         <a href="reference.html#addRoundedCorner"><code>addRoundedCorner</code></a>
 508                                     </li>
 509                                     <li>
 510                                         <a href="reference.html#andClose"><code>andClose</code></a>
 511                                     </li>
 512                                 </ul>
 513                             </li>
 514                         </ul>
 515                     </div>
 516                     <div  id="footer">
 517                         <h3 id="copyright">
 518                             <a href="http://creativecommons.org/licenses/by-sa/3.0/" title="Creative Commons Attribution-ShareAlike 3.0 Unported" rel="license">Some Rights Reserved</a> by <a href="http://dmitry.baranovskiy.com/">Dmitry Baranovskiy</a>
 519                         </h3>
 520                         <h3 id="font">
 521                             A font by <a href="http://www.exljbris.nl">Jos Buivenga</a> | Logo by <a href="http://wasabicube.com/">Wasabicube</a>
 522                         </h3>
 523                     </div>
 524                 </div>
 525             </div>
 526         </div>
 527         <script type="text/javascript">
 528         var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
 529         document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
 530         </script>
 531         <script type="text/javascript">
 532         var pageTracker = _gat._getTracker("UA-616618-3");
 533         pageTracker._trackPageview();
 534         </script>
 535     </body>
 536 </html>