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 id="Raphael">
  28                             Raphael
  29                         </h2>
  30                         <p>
  31                             Function that creates canvas for future drawing.
  32                         </p>
  33                         <h3>Parameters</h3>
  34                         <ol>
  35                             <li>container <em>HTMLElement</em> or <em>string</em></li>
  36                             <li>width <em>number</em></li>
  37                             <li>height <em>number</em></li>
  38                         </ol>
  39                         <p>or</p>
  40                         <ol>
  41                             <li>x <em>number</em></li>
  42                             <li>y <em>number</em></li>
  43                             <li>width <em>number</em></li>
  44                             <li>height <em>number</em></li>
  45                         </ol>
  46                         <h3>Usage</h3>
  47                         <pre class="javascript code"><code>
  48 // Creates canvas 320&nbsp;×&nbsp;200 at 10, 50</code>
  49 <code>var paper = Raphael(10, 50, 320, 200);</code>
  50 <code>var paper = Raphael(document.getElementById("notepad"), 320, 200);</code>
  51 <code>var paper = Raphael("notepad", 320, 200);</code></pre>
  52                         <h2 id="Element">
  53                             Element
  54                         </h2>
  55                         <p>
  56                             Object-wrapper for SVG/VML elements. Returned by Raphael methods.
  57                         </p>
  58                         <h2 id="zero">
  59                             Element[0]
  60                         </h2>
  61                         <p>
  62                             Gives you reference to DOM object, so you can assign event handlers or just randomly mess around.
  63                         </p>
  64                         <h3>Usage</h3>
  65                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
  66 <code>c[0].onclick = function () { c.attr("fill", "red"); };</code></pre>
  67                         <h2 id="rotate">
  68                             Element.rotate
  69                         </h2>
  70                         <p>
  71                             Rotates element by given degree around its center.
  72                         </p>
  73                         <h3>Parameters</h3>
  74                         <ol>
  75                             <li>degree <em>number</em></li>
  76                         </ol>
  77                         <h3>Usage</h3>
  78                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
  79 <code>c.rotate(45);</code></pre>
  80                         <h2 id="translate">
  81                             Element.translate
  82                         </h2>
  83                         <p>
  84                             Moves element around the canvas by given dimensions.
  85                         </p>
  86                         <h3>Parameters</h3>
  87                         <ol>
  88                             <li>dx <em>number</em></li>
  89                             <li>dy <em>number</em></li>
  90                         </ol>
  91                         <h3>Usage</h3>
  92                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
  93 <code>c.translate(10, 10);</code></pre>
  94                         <h2 id="matrix">
  95                             Element.matrix
  96                         </h2>
  97                         <p>
  98                             Performs matrix transformation on element.
  99                         </p>
 100                         <h3>Parameters</h3>
 101                         <ol>
 102                             <li>xx <em>number</em></li>
 103                             <li>xy <em>number</em></li>
 104                             <li>yx <em>number</em></li>
 105                             <li>yy <em>number</em></li>
 106                             <li>dx <em>number</em></li>
 107                             <li>dy <em>number</em></li>
 108                         </ol>
 109                         <h3>Usage</h3>
 110                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
 111 <code>// reflects circle down</code>
 112 <code>c.matrix(1, 0, 0, -1, 0, 0);</code></pre>
 113                         <h2 id="scale">
 114                             Element.scale
 115                         </h2>
 116                         <p>
 117                             Scales element by given amount of times.
 118                         </p>
 119                         <h3>Parameters</h3>
 120                         <ol>
 121                             <li>Xtimes <em>number</em></li>
 122                             <li>Ytimes <em>number</em></li>
 123                         </ol>
 124                         <h3>Usage</h3>
 125                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
 126 <code>c.scale(1.5, 1.5);</code></pre>
 127                         <h2 id="attr">
 128                             Element.attr
 129                         </h2>
 130                         <p>
 131                             Sets attributes of elements.
 132                         </p>
 133                         <h3>Parameters</h3>
 134                         <ol>
 135                             <li>params <em>object</em></li>
 136                         </ol>
 137                         <p>or</p>
 138                         <ol>
 139                             <li>attribute <em>string</em></li>
 140                             <li>value <em>string</em></li>
 141                         </ol>
 142                         <h3>Possible parameters</h3>
 143                         <ul>
 144                             <li>cx</li>
 145                             <li>cy</li>
 146                             <li>dasharray</li>
 147                             <li>fill-opacity</li>
 148                             <li>fill</li>
 149                             <li>font-family</li>
 150                             <li>font-size</li>
 151                             <li>font-weight</li>
 152                             <li>font</li>
 153                             <li>gradient</li>
 154                             <li>height</li>
 155                             <li>joinstyle</li>
 156                             <li>opacity</li>
 157                             <li>r</li>
 158                             <li>rx</li>
 159                             <li>ry</li>
 160                             <li>stroke-opacity</li>
 161                             <li>stroke-width</li>
 162                             <li>stroke</li>
 163                             <li>width</li>
 164                             <li>x</li>
 165                             <li>y</li>
 166                         </ul>
 167                         <h3>Usage</h3>
 168                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
 169 <code>c.attr("fill", "black");</code>
 170 <code>c.attr({fill: "#000", stroke: "#f00", opacity: 0.5});</code></pre>
 171                         <h2 id="getBBox">
 172                             Element.getBBox
 173                         </h2>
 174                         <p>
 175                             Returns dimensions of given element.
 176                         </p>
 177                         <h3>Parameters</h3>
 178                         <ol>
 179                             <li>n/a</li>
 180                         </ol>
 181                         <h3>Usage</h3>
 182                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
 183 <code>var width = c.getBBox().width;</code></pre>
 184                         <h2 id="toFront">
 185                             Element.toFront
 186                         </h2>
 187                         <p>
 188                             Moves element to front in hierarchy.
 189                         </p>
 190                         <h3>Parameters</h3>
 191                         <ol>
 192                             <li>n/a</li>
 193                         </ol>
 194                         <h3>Usage</h3>
 195                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
 196 <code>c.toFront();</code></pre>
 197                         <h2 id="circle">
 198                             circle
 199                         </h2>
 200                         <p>
 201                             Creates circle.
 202                         </p>
 203                         <h3>Parameters</h3>
 204                         <ol>
 205                             <li>x <em>number</em></li>
 206                             <li>y <em>number</em></li>
 207                             <li>r <em>number</em></li>
 208                         </ol>
 209                         <h3>Usage</h3>
 210                         <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code></pre>
 211                         <h2 id="rect">
 212                             rect
 213                         </h2>
 214                         <p>
 215                             Creates rectangle.
 216                         </p>
 217                         <h3>Parameters</h3>
 218                         <ol>
 219                             <li>x <em>number</em></li>
 220                             <li>y <em>number</em></li>
 221                             <li>width <em>number</em></li>
 222                             <li>height <em>number</em></li>
 223                             <li>r <em>number</em> [optional]</li>
 224                         </ol>
 225                         <h3>Usage</h3>
 226                         <pre class="javascript code"><code>// regular rectangle</code>
 227 <code>var c = paper.rect(10, 10, 10, 10);</code>
 228 <code>// rounded rectangle</code>
 229 <code>var c = paper.rect(10, 10, 100, 50, 10);</code></pre>
 230                         <h2 id="ellipse">
 231                             ellipse
 232                         </h2>
 233                         <p>
 234                             Creates an ellipse.
 235                         </p>
 236                         <h3>Parameters</h3>
 237                         <ol>
 238                             <li>x <em>number</em></li>
 239                             <li>y <em>number</em></li>
 240                             <li>rx <em>number</em></li>
 241                             <li>ry <em>number</em></li>
 242                         </ol>
 243                         <h3>Usage</h3>
 244                         <pre class="javascript code"><code>var c = paper.ellipse(100, 100, 30, 40);</code></pre>
 245                         <h2 id="path">
 246                             path
 247                         </h2>
 248                         <p>
 249                             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>.
 250                         </p>
 251                         <h3>Parameters</h3>
 252                         <ol>
 253                             <li>params <em>object</em> Similar to object for <code><a href="#attr">attr</a></code> method</li>
 254                             <li>pathString <em>string</em> [optional] path in SVG path string format. See SVG documentation.</li>
 255                         </ol>
 256                         <h3>Usage</h3>
 257                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);</code></pre>
 258                         <h2 id="absolutely">
 259                             absolutely
 260                         </h2>
 261                         <p>
 262                             Sets trigger to count all following units as absolute ones, unless said otherwise. [<em>on by default</em>]
 263                         </p>
 264                         <h3>Usage</h3>
 265                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).absolutely()
 266     .moveTo(10, 10).lineTo(50, 50);</code></pre>
 267                         <h2 id="relatively">
 268                             relatively
 269                         </h2>
 270                         <p>
 271                             Sets trigger to count all following units as relative ones, unless said otherwise.
 272                         </p>
 273                         <h3>Usage</h3>
 274                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).relatively()
 275     .moveTo(10, 10).lineTo(50, 50);</code></pre>
 276                         <h2 id="redraw">
 277                             redraw
 278                         </h2>
 279                         <p>
 280                             Redraws the path. Make sense to use when points has been changed. This is possible via accessing <code>path</code>
 281                             property of the object. This property is array of objects representing commands given to path.
 282                         </p>
 283                         <h3>Usage</h3>
 284                         <pre class="javascript code"><code>c.path[3].arg[2] = 20;</code>
 285 <code>c.redraw();</code></pre>
 286                         <h2 id="moveTo">
 287                             moveTo
 288                         </h2>
 289                         <p>
 290                             Moves drawing point to given coordinates.
 291                         </p>
 292                         <h3>Parameters</h3>
 293                         <ol>
 294                             <li>x <em>number</em></li>
 295                             <li>y <em>number</em></li>
 296                         </ol>
 297                         <h3>Usage</h3>
 298                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);</code></pre>
 299                         <h2 id="lineTo">
 300                             lineTo
 301                         </h2>
 302                         <p>
 303                             Draws straight line to given coordinates.
 304                         </p>
 305                         <h3>Parameters</h3>
 306                         <ol>
 307                             <li>x <em>number</em></li>
 308                             <li>y <em>number</em></li>
 309                         </ol>
 310                         <h3>Usage</h3>
 311                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);</code></pre>
 312                         <h2 id="cplineTo">
 313                             cplineTo
 314                         </h2>
 315                         <p>
 316                             Draws curved line to given coordinates. Line will have horizontal anchors on start and on finish.
 317                         </p>
 318                         <h3>Parameters</h3>
 319                         <ol>
 320                             <li>x <em>number</em></li>
 321                             <li>y <em>number</em></li>
 322                             <li>width <em>number</em></li>
 323                         </ol>
 324                         <h3>Usage</h3>
 325                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).cplineTo(50, 50);</code></pre>
 326                         <h2 id="curveTo">
 327                             curveTo
 328                         </h2>
 329                         <p>
 330                             Draws curved line to given coordinates.
 331                         </p>
 332                         <h3>Parameters</h3>
 333                         <ol>
 334                             <li>x1 <em>number</em></li>
 335                             <li>y1 <em>number</em></li>
 336                             <li>x2 <em>number</em></li>
 337                             <li>y2 <em>number</em></li>
 338                             <li>x3 <em>number</em></li>
 339                             <li>y3 <em>number</em></li>
 340                         </ol>
 341                         <h3>Usage</h3>
 342                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);</code></pre>
 343                         <h2 id="addRoundedCorner">
 344                             addRoundedCorner
 345                         </h2>
 346                         <p>
 347                             Draws quarter of circle form current point.
 348                         </p>
 349                         <h3>Parameters</h3>
 350                         <ol>
 351                             <li>r <em>number</em></li>
 352                             <li>dir <em>string</em> two letters direction</li>
 353                         </ol>
 354                         <h3>Possible dir values</h3>
 355                         <dl>
 356                             <dt>lu</dt>
 357                             <dd>left up</dd>
 358                             <dt>ld</dt>
 359                             <dd>left down</dd>
 360                             <dt>ru</dt>
 361                             <dd>right up</dd>
 362                             <dt>rd</dt>
 363                             <dd>right down</dd>
 364                             <dt>ur</dt>
 365                             <dd>up right</dd>
 366                             <dt>ul</dt>
 367                             <dd>up left</dd>
 368                             <dt>dr</dt>
 369                             <dd>down right</dd>
 370                             <dt>dl</dt>
 371                             <dd>down left</dd>
 372                         </dl>
 373                         <h3>Usage</h3>
 374                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).addRoundedCorner(10, "rd");</code></pre>
 375                         <h2 id="andClose">
 376                             andClose
 377                         </h2>
 378                         <p>
 379                             Closes the path.
 380                         </p>
 381                         <h3>Usage</h3>
 382                         <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).andClose();</code></pre>
 383                         <h2 id="image">
 384                             image
 385                         </h2>
 386                         <p>
 387                             Embeds an image in SVG/VML area.
 388                         </p>
 389                         <h3>Parameters</h3>
 390                         <ol>
 391                             <li>src <em>string</em></li>
 392                             <li>x <em>number</em></li>
 393                             <li>y <em>number</em></li>
 394                             <li>width <em>number</em></li>
 395                             <li>height <em>number</em></li>
 396                         </ol>
 397                         <h3>Usage</h3>
 398                         <pre class="javascript code"><code>var c = paper.image("apple.png", 10, 10, 100, 100);</code></pre>
 399                         <h2 id="group">
 400                             group
 401                         </h2>
 402                         <p>
 403                             Creates a group. Could be useful if you want to group your objects in layers, etc.
 404                         </p>
 405                         <h3>Usage</h3>
 406                         <pre class="javascript code"><code>var c = paper.group();</code></pre>
 407                     </div>
 408                     <div id="column-2">
 409                         <h2>
 410                             <a href="index.html">Home</a>
 411                         </h2>
 412                         <h2>
 413                             Contents
 414                         </h2>
 415                         <ul>
 416                             <li>
 417                                 <a href="reference.html#Raphael"><code>Raphael</code></a>
 418                             </li>
 419                             <li>
 420                                 <a href="reference.html#Element"><code>Element</code></a>
 421                                 <ul>
 422                                     <li>
 423                                         <a href="reference.html#zero"><code>0</code></a>
 424                                     </li>
 425                                     <li>
 426                                         <a href="reference.html#rotate"><code>rotate</code></a>
 427                                     </li>
 428                                     <li>
 429                                         <a href="reference.html#translate"><code>translate</code></a>
 430                                     </li>
 431                                     <li>
 432                                         <a href="reference.html#matrix"><code>matrix</code></a>
 433                                     </li>
 434                                     <li>
 435                                         <a href="reference.html#scale"><code>scale</code></a>
 436                                     </li>
 437                                     <li>
 438                                         <a href="reference.html#attr"><code>attr</code></a>
 439                                     </li>
 440                                     <li>
 441                                         <a href="reference.html#getBBox"><code>getBBox</code></a>
 442                                     </li>
 443                                     <li>
 444                                         <a href="reference.html#toFront"><code>toFront</code></a>
 445                                     </li>
 446                                 </ul>
 447                             </li>
 448                             <li>
 449                                 <a href="reference.html#circle"><code>circle</code></a>
 450                             </li>
 451                             <li>
 452                                 <a href="reference.html#rect"><code>rect</code></a>
 453                             </li>
 454                             <li>
 455                                 <a href="reference.html#ellipse"><code>ellipse</code></a>
 456                             </li>
 457                             <li>
 458                                 <a href="reference.html#path"><code>path</code></a>
 459                                 <ul>
 460                                     <li>
 461                                         <a href="reference.html#absolutely"><code>absolutely</code></a>
 462                                     </li>
 463                                     <li>
 464                                         <a href="reference.html#relatively"><code>relatively</code></a>
 465                                     </li>
 466                                     <li>
 467                                         <a href="reference.html#redraw"><code>redraw</code></a>
 468                                     </li>
 469                                     <li>
 470                                         <a href="reference.html#moveTo"><code>moveTo</code></a>
 471                                     </li>
 472                                     <li>
 473                                         <a href="reference.html#lineTo"><code>lineTo</code></a>
 474                                     </li>
 475                                     <li>
 476                                         <a href="reference.html#cplineTo"><code>cplineTo</code></a>
 477                                     </li>
 478                                     <li>
 479                                         <a href="reference.html#curveTo"><code>curveTo</code></a>
 480                                     </li>
 481                                     <li>
 482                                         <a href="reference.html#addRoundedCorner"><code>addRoundedCorner</code></a>
 483                                     </li>
 484                                     <li>
 485                                         <a href="reference.html#andClose"><code>andClose</code></a>
 486                                     </li>
 487                                 </ul>
 488                             </li>
 489                             <li>
 490                                 <a href="reference.html#image"><code>image</code></a>
 491                             </li>
 492                             <li>
 493                                 <a href="reference.html#group"><code>group</code></a>
 494                             </li>
 495                             <li>
 496                                 <a href="reference.html#linerect"><code>linerect</code></a>
 497                             </li>
 498                         </ul>
 499                     </div>
 500                     <div  id="footer">
 501                         <h3 id="copyright">
 502                             <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>
 503                         </h3>
 504                         <h3 id="font">
 505                             A font by <a href="http://www.exljbris.nl">Jos Buivenga</a> | Logo by <a href="http://wasabicube.com/">Wasabicube</a>
 506                         </h3>
 507                     </div>
 508                 </div>
 509             </div>
 510         </div>
 511         <script type="text/javascript">
 512         var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
 513         document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
 514         </script>
 515         <script type="text/javascript">
 516         var pageTracker = _gat._getTracker("UA-616618-3");
 517         pageTracker._trackPageview();
 518         </script>
 519     </body>
 520 </html>