| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <title>JSDoc: Class: Layer</title> |
| |
| <script src="scripts/prettify/prettify.js"> </script> |
| <script src="scripts/prettify/lang-css.js"> </script> |
| <!--[if lt IE 9]> |
| <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> |
| <![endif]--> |
| <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> |
| <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> |
| </head> |
| |
| <body> |
| |
| <div id="main"> |
| |
| <h1 class="page-title">Class: Layer</h1> |
| |
| |
| |
| |
| |
| |
| <section> |
| |
| <header> |
| |
| <h2> |
| <span class="ancestors"><a href="Guacamole.html">Guacamole</a>.</span>Layer</h2> |
| |
| |
| </header> |
| |
| <article> |
| <div class="container-overview"> |
| |
| |
| |
| |
| |
| <h4 class="name" id="Layer"><span class="type-signature"></span>new Layer<span class="signature">(width, height)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Abstract ordered drawing surface. Each Layer contains a canvas element and |
| provides simple drawing instructions for drawing to that canvas element, |
| however unlike the canvas element itself, drawing operations on a Layer are |
| guaranteed to run in order, even if such an operation must wait for an image |
| to load before completing. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>width</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The width of the Layer, in pixels. The canvas element |
| backing this Layer will be given this width.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>height</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The height of the Layer, in pixels. The canvas element |
| backing this Layer will be given this height.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line37">line 37</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| </div> |
| |
| |
| |
| |
| |
| |
| <h3 class="subsection-title">Classes</h3> |
| |
| <dl> |
| <dt><a href="Guacamole.Layer.Pixel.html">Pixel</a></dt> |
| <dd></dd> |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| <h3 class="subsection-title">Members</h3> |
| |
| |
| |
| <h4 class="name" id=".ATOP"><span class="type-signature">(static) </span>ATOP<span class="type-signature"></span></h4> |
| |
| |
| |
| |
| <div class="description"> |
| Channel mask for the composite operation "atop". |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line879">line 879</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id=".IN"><span class="type-signature">(static) </span>IN<span class="type-signature"></span></h4> |
| |
| |
| |
| |
| <div class="description"> |
| Channel mask for the composite operation "in". |
| Beware that WebKit-based browsers may leave the contents of the destionation |
| layer where the source layer is transparent, despite the definition of this |
| operation. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line915">line 915</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id=".OUT"><span class="type-signature">(static) </span>OUT<span class="type-signature"></span></h4> |
| |
| |
| |
| |
| <div class="description"> |
| Channel mask for the composite operation "out". |
| Beware that WebKit-based browsers may leave the contents of the destionation |
| layer where the source layer is transparent, despite the definition of this |
| operation. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line923">line 923</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id=".OVER"><span class="type-signature">(static) </span>OVER<span class="type-signature"></span></h4> |
| |
| |
| |
| |
| <div class="description"> |
| Channel mask for the composite operation "over". |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line894">line 894</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id=".PLUS"><span class="type-signature">(static) </span>PLUS<span class="type-signature"></span></h4> |
| |
| |
| |
| |
| <div class="description"> |
| Channel mask for the composite operation "plus". |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line899">line 899</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id=".RATOP"><span class="type-signature">(static) </span>RATOP<span class="type-signature"></span></h4> |
| |
| |
| |
| |
| <div class="description"> |
| Channel mask for the composite operation "ratop". |
| Beware that WebKit-based browsers may leave the contents of the destionation |
| layer where the source layer is transparent, despite the definition of this |
| operation. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line931">line 931</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id=".RIN"><span class="type-signature">(static) </span>RIN<span class="type-signature"></span></h4> |
| |
| |
| |
| |
| <div class="description"> |
| Channel mask for the composite operation "rin". |
| Beware that WebKit-based browsers may leave the contents of the destionation |
| layer where the source layer is transparent, despite the definition of this |
| operation. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line907">line 907</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id=".ROUT"><span class="type-signature">(static) </span>ROUT<span class="type-signature"></span></h4> |
| |
| |
| |
| |
| <div class="description"> |
| Channel mask for the composite operation "rout". |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line874">line 874</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id=".ROVER"><span class="type-signature">(static) </span>ROVER<span class="type-signature"></span></h4> |
| |
| |
| |
| |
| <div class="description"> |
| Channel mask for the composite operation "rover". |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line889">line 889</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id=".SRC"><span class="type-signature">(static) </span>SRC<span class="type-signature"></span></h4> |
| |
| |
| |
| |
| <div class="description"> |
| Channel mask for the composite operation "src". |
| Beware that WebKit-based browsers may leave the contents of the destionation |
| layer where the source layer is transparent, despite the definition of this |
| operation. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line939">line 939</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id=".XOR"><span class="type-signature">(static) </span>XOR<span class="type-signature"></span></h4> |
| |
| |
| |
| |
| <div class="description"> |
| Channel mask for the composite operation "xor". |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line884">line 884</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="autosize"><span class="type-signature"></span>autosize<span class="type-signature"> :Boolean</span></h4> |
| |
| |
| |
| |
| <div class="description"> |
| Set to true if this Layer should resize itself to accomodate the |
| dimensions of any drawing operation, and false (the default) otherwise. |
| |
| Note that setting this property takes effect immediately, and thus may |
| take effect on operations that were started in the past but have not |
| yet completed. If you wish the setting of this flag to only modify |
| future operations, you will need to make the setting of this flag an |
| operation with sync(). |
| </div> |
| |
| |
| |
| <h5>Type:</h5> |
| <ul> |
| <li> |
| |
| <span class="param-type">Boolean</span> |
| |
| |
| </li> |
| </ul> |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-default">Default Value:</dt> |
| <dd class="tag-default"><ul class="dummy"> |
| <li>false</li> |
| </ul></dd> |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line255">line 255</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| <h5>Example</h5> |
| |
| <pre class="prettyprint"><code>// Set autosize to true for all future operations |
| layer.sync(function() { |
| layer.autosize = true; |
| });</code></pre> |
| |
| |
| |
| |
| |
| <h4 class="name" id="height"><span class="type-signature"></span>height<span class="type-signature"> :Number</span></h4> |
| |
| |
| |
| |
| <div class="description"> |
| The current height of this layer. |
| </div> |
| |
| |
| |
| <h5>Type:</h5> |
| <ul> |
| <li> |
| |
| <span class="param-type">Number</span> |
| |
| |
| </li> |
| </ul> |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line267">line 267</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="width"><span class="type-signature"></span>width<span class="type-signature"> :Number</span></h4> |
| |
| |
| |
| |
| <div class="description"> |
| The current width of this layer. |
| </div> |
| |
| |
| |
| <h5>Type:</h5> |
| <ul> |
| <li> |
| |
| <span class="param-type">Number</span> |
| |
| |
| </li> |
| </ul> |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line261">line 261</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h3 class="subsection-title">Methods</h3> |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="arc"><span class="type-signature"></span>arc<span class="signature">(x, y, radius, startAngle, endAngle, negative)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Add the specified arc to the current path. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>x</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The X coordinate of the center of the circle which |
| will contain the arc.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>y</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The Y coordinate of the center of the circle which |
| will contain the arc.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>radius</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The radius of the circle.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>startAngle</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The starting angle of the arc, in radians.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>endAngle</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The ending angle of the arc, in radians.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>negative</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Boolean</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">Whether the arc should be drawn in order of |
| decreasing angle.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line552">line 552</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="clip"><span class="type-signature"></span>clip<span class="signature">()</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Clip all future drawing operations by the current path. The current path |
| is implicitly closed. The current path can continue to be reused |
| for other operations (such as fillColor()) but a new path will be started |
| once a path drawing operation (path() or rect()) is used. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line626">line 626</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="close"><span class="type-signature"></span>close<span class="signature">()</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Closes the current path by connecting the end point with the start |
| point (if any) with a straight line. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line592">line 592</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="copy"><span class="type-signature"></span>copy<span class="signature">(srcLayer, srcx, srcy, srcw, srch, x, y)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Copy a rectangle of image data from one Layer to this Layer. This |
| operation will copy exactly the image data that will be drawn once all |
| operations of the source Layer that were pending at the time this |
| function was called are complete. This operation will not alter the |
| size of the source Layer even if its autosize property is set to true. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>srcLayer</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type"><a href="Guacamole.Layer.html">Guacamole.Layer</a></span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The Layer to copy image data from.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>srcx</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The X coordinate of the upper-left corner of the |
| rectangle within the source Layer's coordinate |
| space to copy data from.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>srcy</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The Y coordinate of the upper-left corner of the |
| rectangle within the source Layer's coordinate |
| space to copy data from.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>srcw</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The width of the rectangle within the source Layer's |
| coordinate space to copy data from.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>srch</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The height of the rectangle within the source |
| Layer's coordinate space to copy data from.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>x</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The destination X coordinate.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>y</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The destination Y coordinate.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line478">line 478</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="curveTo"><span class="type-signature"></span>curveTo<span class="signature">(cp1x, cp1y, cp2x, cp2y, x, y)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Starts a new path at the specified point. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>cp1x</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The X coordinate of the first control point.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>cp1y</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The Y coordinate of the first control point.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>cp2x</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The X coordinate of the second control point.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>cp2y</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The Y coordinate of the second control point.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>x</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The X coordinate of the endpoint of the curve.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>y</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The Y coordinate of the endpoint of the curve.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line575">line 575</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="drawImage"><span class="type-signature"></span>drawImage<span class="signature">(x, y, image)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Draws the specified image at the given coordinates. The image specified |
| must already be loaded. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>x</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The destination X coordinate.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>y</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The destination Y coordinate.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>image</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Image</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The image to draw. Note that this is an Image |
| object - not a URL.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line327">line 327</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="fillColor"><span class="type-signature"></span>fillColor<span class="signature">(r, g, b, a)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Fills the current path with the specified color. The current path |
| is implicitly closed. The current path can continue to be reused |
| for other operations (such as clip()) but a new path will be started |
| once a path drawing operation (path() or rect()) is used. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>r</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The red component of the color to fill.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>g</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The green component of the color to fill.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>b</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The blue component of the color to fill.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>a</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The alpha component of the color to fill.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line678">line 678</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="fillLayer"><span class="type-signature"></span>fillLayer<span class="signature">(srcLayer)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Fills the current path with the image within the specified layer. The |
| image data will be tiled infinitely within the stroke. The current path |
| is implicitly closed. The current path can continue to be reused |
| for other operations (such as clip()) but a new path will be started |
| once a path drawing operation (path() or rect()) is used. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>srcLayer</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type"><a href="Guacamole.Layer.html">Guacamole.Layer</a></span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The layer to use as a repeating pattern |
| within the fill.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line733">line 733</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="getCanvas"><span class="type-signature"></span>getCanvas<span class="signature">()</span><span class="type-signature"> → {HTMLCanvasElement}</span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Returns the canvas element backing this Layer. Note that the dimensions |
| of the canvas may not exactly match those of the Layer, as resizing a |
| canvas while maintaining its state is an expensive operation. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line277">line 277</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Returns:</h5> |
| |
| |
| <div class="param-desc"> |
| The canvas element backing this Layer. |
| </div> |
| |
| |
| |
| <dl> |
| <dt> |
| Type |
| </dt> |
| <dd> |
| |
| <span class="param-type">HTMLCanvasElement</span> |
| |
| |
| </dd> |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="lineTo"><span class="type-signature"></span>lineTo<span class="signature">(x, y)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Add the specified line to the current path. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>x</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The X coordinate of the endpoint of the line to draw.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>y</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The Y coordinate of the endpoint of the line to draw.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line526">line 526</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="moveTo"><span class="type-signature"></span>moveTo<span class="signature">(x, y)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Starts a new path at the specified point. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>x</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The X coordinate of the point to draw.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>y</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The Y coordinate of the point to draw.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line507">line 507</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="pop"><span class="type-signature"></span>pop<span class="signature">()</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Pop layer state off stack. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line762">line 762</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="push"><span class="type-signature"></span>push<span class="signature">()</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Push current layer state onto stack. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line751">line 751</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="put"><span class="type-signature"></span>put<span class="signature">(srcLayer, srcx, srcy, srcw, srch, x, y)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Put a rectangle of image data from one Layer to this Layer directly |
| without performing any alpha blending. Simply copy the data. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>srcLayer</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type"><a href="Guacamole.Layer.html">Guacamole.Layer</a></span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The Layer to copy image data from.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>srcx</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The X coordinate of the upper-left corner of the |
| rectangle within the source Layer's coordinate |
| space to copy data from.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>srcy</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The Y coordinate of the upper-left corner of the |
| rectangle within the source Layer's coordinate |
| space to copy data from.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>srcw</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The width of the rectangle within the source Layer's |
| coordinate space to copy data from.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>srch</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The height of the rectangle within the source |
| Layer's coordinate space to copy data from.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>x</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The destination X coordinate.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>y</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The destination Y coordinate.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line431">line 431</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="rect"><span class="type-signature"></span>rect<span class="signature">(x, y, w, h)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Add the specified rectangle to the current path. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>x</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The X coordinate of the upper-left corner of the |
| rectangle to draw.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>y</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The Y coordinate of the upper-left corner of the |
| rectangle to draw.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>w</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The width of the rectangle to draw.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>h</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The height of the rectangle to draw.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line607">line 607</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="reset"><span class="type-signature"></span>reset<span class="signature">()</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Reset the layer, clearing the stack, the current path, and any transform |
| matrix. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line776">line 776</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="resize"><span class="type-signature"></span>resize<span class="signature">(newWidth, newHeight)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Changes the size of this Layer to the given width and height. Resizing |
| is only attempted if the new size provided is actually different from |
| the current size. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>newWidth</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The new width to assign to this Layer.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>newHeight</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The new height to assign to this Layer.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line313">line 313</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="setChannelMask"><span class="type-signature"></span>setChannelMask<span class="signature">(mask)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Sets the channel mask for future operations on this Layer. |
| |
| The channel mask is a Guacamole-specific compositing operation identifier |
| with a single bit representing each of four channels (in order): source |
| image where destination transparent, source where destination opaque, |
| destination where source transparent, and destination where source |
| opaque. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>mask</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The channel mask for future operations on this |
| Layer.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line844">line 844</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="setMiterLimit"><span class="type-signature"></span>setMiterLimit<span class="signature">(limit)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Sets the miter limit for stroke operations using the miter join. This |
| limit is the maximum ratio of the size of the miter join to the stroke |
| width. If this ratio is exceeded, the miter will not be drawn for that |
| joint of the path. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>limit</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The miter limit for stroke operations using the |
| miter join.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line857">line 857</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="setTransform"><span class="type-signature"></span>setTransform<span class="signature">(a, b, c, d, e, f)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Sets the given affine transform (defined with six values from the |
| transform's matrix). |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>a</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The first value in the affine transform's matrix.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>b</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The second value in the affine transform's matrix.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>c</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The third value in the affine transform's matrix.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>d</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The fourth value in the affine transform's matrix.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>e</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The fifth value in the affine transform's matrix.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>f</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The sixth value in the affine transform's matrix.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line805">line 805</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="strokeColor"><span class="type-signature"></span>strokeColor<span class="signature">(cap, join, thickness, r, g, b, a)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Stroke the current path with the specified color. The current path |
| is implicitly closed. The current path can continue to be reused |
| for other operations (such as clip()) but a new path will be started |
| once a path drawing operation (path() or rect()) is used. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>cap</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">String</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The line cap style. Can be "round", "square", |
| or "butt".</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>join</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">String</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The line join style. Can be "round", "bevel", |
| or "miter".</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>thickness</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The line thickness in pixels.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>r</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The red component of the color to fill.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>g</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The green component of the color to fill.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>b</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The blue component of the color to fill.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>a</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The alpha component of the color to fill.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line652">line 652</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="strokeLayer"><span class="type-signature"></span>strokeLayer<span class="signature">(cap, join, thickness, srcLayer)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Stroke the current path with the image within the specified layer. The |
| image data will be tiled infinitely within the stroke. The current path |
| is implicitly closed. The current path can continue to be reused |
| for other operations (such as clip()) but a new path will be started |
| once a path drawing operation (path() or rect()) is used. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>cap</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">String</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The line cap style. Can be "round", "square", |
| or "butt".</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>join</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">String</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The line join style. Can be "round", "bevel", |
| or "miter".</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>thickness</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The line thickness in pixels.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>srcLayer</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type"><a href="Guacamole.Layer.html">Guacamole.Layer</a></span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The layer to use as a repeating pattern |
| within the stroke.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line705">line 705</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="toCanvas"><span class="type-signature"></span>toCanvas<span class="signature">()</span><span class="type-signature"> → {HTMLCanvasElement}</span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Returns a new canvas element containing the same image as this Layer. |
| Unlike getCanvas(), the canvas element returned is guaranteed to have |
| the exact same dimensions as the Layer. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line290">line 290</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Returns:</h5> |
| |
| |
| <div class="param-desc"> |
| A new canvas element containing a copy of the image content this |
| Layer. |
| </div> |
| |
| |
| |
| <dl> |
| <dt> |
| Type |
| </dt> |
| <dd> |
| |
| <span class="param-type">HTMLCanvasElement</span> |
| |
| |
| </dd> |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="transfer"><span class="type-signature"></span>transfer<span class="signature">(srcLayer, srcx, srcy, srcw, srch, x, y, transferFunction)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Transfer a rectangle of image data from one Layer to this Layer using the |
| specified transfer function. |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>srcLayer</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type"><a href="Guacamole.Layer.html">Guacamole.Layer</a></span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The Layer to copy image data from.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>srcx</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The X coordinate of the upper-left corner of the |
| rectangle within the source Layer's coordinate |
| space to copy data from.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>srcy</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The Y coordinate of the upper-left corner of the |
| rectangle within the source Layer's coordinate |
| space to copy data from.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>srcw</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The width of the rectangle within the source Layer's |
| coordinate space to copy data from.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>srch</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The height of the rectangle within the source |
| Layer's coordinate space to copy data from.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>x</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The destination X coordinate.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>y</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The destination Y coordinate.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>transferFunction</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">function</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The transfer function to use to |
| transfer data from source to |
| destination.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line354">line 354</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(a, b, c, d, e, f)</span><span class="type-signature"></span></h4> |
| |
| |
| |
| |
| |
| <div class="description"> |
| Applies the given affine transform (defined with six values from the |
| transform's matrix). |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <h5>Parameters:</h5> |
| |
| |
| <table class="params"> |
| <thead> |
| <tr> |
| |
| <th>Name</th> |
| |
| |
| <th>Type</th> |
| |
| |
| |
| |
| |
| <th class="last">Description</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| |
| |
| <tr> |
| |
| <td class="name"><code>a</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The first value in the affine transform's matrix.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>b</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The second value in the affine transform's matrix.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>c</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The third value in the affine transform's matrix.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>d</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The fourth value in the affine transform's matrix.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>e</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The fifth value in the affine transform's matrix.</td> |
| </tr> |
| |
| |
| |
| <tr> |
| |
| <td class="name"><code>f</code></td> |
| |
| |
| <td class="type"> |
| |
| |
| <span class="param-type">Number</span> |
| |
| |
| |
| </td> |
| |
| |
| |
| |
| |
| <td class="description last">The sixth value in the affine transform's matrix.</td> |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| |
| |
| |
| |
| |
| <dl class="details"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <dt class="tag-source">Source:</dt> |
| <dd class="tag-source"><ul class="dummy"><li> |
| <a href="Layer.js.html">Layer.js</a>, <a href="Layer.js.html#line824">line 824</a> |
| </li></ul></dd> |
| |
| |
| |
| |
| |
| |
| |
| </dl> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| </article> |
| |
| </section> |
| |
| |
| |
| |
| </div> |
| |
| <nav> |
| <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Guacamole.ArrayBufferReader.html">ArrayBufferReader</a></li><li><a href="Guacamole.ArrayBufferWriter.html">ArrayBufferWriter</a></li><li><a href="Guacamole.AudioPlayer.html">AudioPlayer</a></li><li><a href="Guacamole.AudioRecorder.html">AudioRecorder</a></li><li><a href="Guacamole.BlobReader.html">BlobReader</a></li><li><a href="Guacamole.BlobWriter.html">BlobWriter</a></li><li><a href="Guacamole.ChainedTunnel.html">ChainedTunnel</a></li><li><a href="Guacamole.Client.html">Client</a></li><li><a href="Guacamole.DataURIReader.html">DataURIReader</a></li><li><a href="Guacamole.Display.html">Display</a></li><li><a href="Guacamole.Display.VisibleLayer.html">VisibleLayer</a></li><li><a href="Guacamole.HTTPTunnel.html">HTTPTunnel</a></li><li><a href="Guacamole.InputStream.html">InputStream</a></li><li><a href="Guacamole.IntegerPool.html">IntegerPool</a></li><li><a href="Guacamole.JSONReader.html">JSONReader</a></li><li><a href="Guacamole.Keyboard.html">Keyboard</a></li><li><a href="Guacamole.Keyboard.ModifierState.html">ModifierState</a></li><li><a href="Guacamole.Layer.html">Layer</a></li><li><a href="Guacamole.Layer.Pixel.html">Pixel</a></li><li><a href="Guacamole.Mouse.html">Mouse</a></li><li><a href="Guacamole.Mouse.State.html">State</a></li><li><a href="Guacamole.Mouse.Touchpad.html">Touchpad</a></li><li><a href="Guacamole.Mouse.Touchscreen.html">Touchscreen</a></li><li><a href="Guacamole.Object.html">Object</a></li><li><a href="Guacamole.OnScreenKeyboard.html">OnScreenKeyboard</a></li><li><a href="Guacamole.OnScreenKeyboard.Key.html">Key</a></li><li><a href="Guacamole.OnScreenKeyboard.Layout.html">Layout</a></li><li><a href="Guacamole.OutputStream.html">OutputStream</a></li><li><a href="Guacamole.Parser.html">Parser</a></li><li><a href="Guacamole.RawAudioFormat.html">RawAudioFormat</a></li><li><a href="Guacamole.RawAudioPlayer.html">RawAudioPlayer</a></li><li><a href="Guacamole.RawAudioRecorder.html">RawAudioRecorder</a></li><li><a href="Guacamole.SessionRecording.html">SessionRecording</a></li><li><a href="Guacamole.StaticHTTPTunnel.html">StaticHTTPTunnel</a></li><li><a href="Guacamole.Status.html">Status</a></li><li><a href="Guacamole.StringReader.html">StringReader</a></li><li><a href="Guacamole.StringWriter.html">StringWriter</a></li><li><a href="Guacamole.Tunnel.html">Tunnel</a></li><li><a href="Guacamole.VideoPlayer.html">VideoPlayer</a></li><li><a href="Guacamole.WebSocketTunnel.html">WebSocketTunnel</a></li></ul><h3>Events</h3><ul><li><a href="Guacamole.ArrayBufferReader.html#event:ondata">ondata</a></li><li><a href="Guacamole.ArrayBufferReader.html#event:onend">onend</a></li><li><a href="Guacamole.ArrayBufferWriter.html#event:onack">onack</a></li><li><a href="Guacamole.AudioRecorder.html#event:onclose">onclose</a></li><li><a href="Guacamole.AudioRecorder.html#event:onerror">onerror</a></li><li><a href="Guacamole.BlobReader.html#event:onend">onend</a></li><li><a href="Guacamole.BlobReader.html#event:onprogress">onprogress</a></li><li><a href="Guacamole.BlobWriter.html#event:onack">onack</a></li><li><a href="Guacamole.BlobWriter.html#event:oncomplete">oncomplete</a></li><li><a href="Guacamole.BlobWriter.html#event:onerror">onerror</a></li><li><a href="Guacamole.BlobWriter.html#event:onprogress">onprogress</a></li><li><a href="Guacamole.ChainedTunnel.html#event:onerror">onerror</a></li><li><a href="Guacamole.ChainedTunnel.html#event:oninstruction">oninstruction</a></li><li><a href="Guacamole.ChainedTunnel.html#event:onstatechange">onstatechange</a></li><li><a href="Guacamole.Client.html#event:onaudio">onaudio</a></li><li><a href="Guacamole.Client.html#event:onclipboard">onclipboard</a></li><li><a href="Guacamole.Client.html#event:onerror">onerror</a></li><li><a href="Guacamole.Client.html#event:onfile">onfile</a></li><li><a href="Guacamole.Client.html#event:onfilesystem">onfilesystem</a></li><li><a href="Guacamole.Client.html#event:onname">onname</a></li><li><a href="Guacamole.Client.html#event:onpipe">onpipe</a></li><li><a href="Guacamole.Client.html#event:onstatechange">onstatechange</a></li><li><a href="Guacamole.Client.html#event:onsync">onsync</a></li><li><a href="Guacamole.Client.html#event:onvideo">onvideo</a></li><li><a href="Guacamole.DataURIReader.html#event:onend">onend</a></li><li><a href="Guacamole.Display.html#event:oncursor">oncursor</a></li><li><a href="Guacamole.Display.html#event:onresize">onresize</a></li><li><a href="Guacamole.HTTPTunnel.html#event:onerror">onerror</a></li><li><a href="Guacamole.HTTPTunnel.html#event:oninstruction">oninstruction</a></li><li><a href="Guacamole.HTTPTunnel.html#event:onstatechange">onstatechange</a></li><li><a href="Guacamole.InputStream.html#event:onblob">onblob</a></li><li><a href="Guacamole.InputStream.html#event:onend">onend</a></li><li><a href="Guacamole.JSONReader.html#event:onend">onend</a></li><li><a href="Guacamole.JSONReader.html#event:onprogress">onprogress</a></li><li><a href="Guacamole.Keyboard.html#event:onkeydown">onkeydown</a></li><li><a href="Guacamole.Keyboard.html#event:onkeyup">onkeyup</a></li><li><a href="Guacamole.Mouse.Touchpad.html#event:onmousedown">onmousedown</a></li><li><a href="Guacamole.Mouse.Touchpad.html#event:onmousemove">onmousemove</a></li><li><a href="Guacamole.Mouse.Touchpad.html#event:onmouseup">onmouseup</a></li><li><a href="Guacamole.Mouse.Touchscreen.html#event:onmousedown">onmousedown</a></li><li><a href="Guacamole.Mouse.Touchscreen.html#event:onmousemove">onmousemove</a></li><li><a href="Guacamole.Mouse.Touchscreen.html#event:onmouseup">onmouseup</a></li><li><a href="Guacamole.Mouse.html#event:onmousedown">onmousedown</a></li><li><a href="Guacamole.Mouse.html#event:onmousemove">onmousemove</a></li><li><a href="Guacamole.Mouse.html#event:onmouseout">onmouseout</a></li><li><a href="Guacamole.Mouse.html#event:onmouseup">onmouseup</a></li><li><a href="Guacamole.Object.html#event:onbody">onbody</a></li><li><a href="Guacamole.Object.html#event:onundefine">onundefine</a></li><li><a href="Guacamole.OnScreenKeyboard.html#event:onkeydown">onkeydown</a></li><li><a href="Guacamole.OnScreenKeyboard.html#event:onkeyup">onkeyup</a></li><li><a href="Guacamole.OutputStream.html#event:onack">onack</a></li><li><a href="Guacamole.Parser.html#event:oninstruction">oninstruction</a></li><li><a href="Guacamole.RawAudioRecorder.html#event:onclose">onclose</a></li><li><a href="Guacamole.RawAudioRecorder.html#event:onerror">onerror</a></li><li><a href="Guacamole.SessionRecording._PlaybackTunnel.html#event:onerror">onerror</a></li><li><a href="Guacamole.SessionRecording._PlaybackTunnel.html#event:oninstruction">oninstruction</a></li><li><a href="Guacamole.SessionRecording._PlaybackTunnel.html#event:onstatechange">onstatechange</a></li><li><a href="Guacamole.SessionRecording.html#event:onpause">onpause</a></li><li><a href="Guacamole.SessionRecording.html#event:onplay">onplay</a></li><li><a href="Guacamole.SessionRecording.html#event:onprogress">onprogress</a></li><li><a href="Guacamole.SessionRecording.html#event:onseek">onseek</a></li><li><a href="Guacamole.StaticHTTPTunnel.html#event:onerror">onerror</a></li><li><a href="Guacamole.StaticHTTPTunnel.html#event:oninstruction">oninstruction</a></li><li><a href="Guacamole.StaticHTTPTunnel.html#event:onstatechange">onstatechange</a></li><li><a href="Guacamole.StringReader.html#event:onend">onend</a></li><li><a href="Guacamole.StringReader.html#event:ontext">ontext</a></li><li><a href="Guacamole.StringWriter.html#event:onack">onack</a></li><li><a href="Guacamole.Tunnel.html#event:onerror">onerror</a></li><li><a href="Guacamole.Tunnel.html#event:oninstruction">oninstruction</a></li><li><a href="Guacamole.Tunnel.html#event:onstatechange">onstatechange</a></li><li><a href="Guacamole.WebSocketTunnel.html#event:onerror">onerror</a></li><li><a href="Guacamole.WebSocketTunnel.html#event:oninstruction">oninstruction</a></li><li><a href="Guacamole.WebSocketTunnel.html#event:onstatechange">onstatechange</a></li></ul><h3>Namespaces</h3><ul><li><a href="Guacamole.html">Guacamole</a></li><li><a href="Guacamole.AudioContextFactory.html">AudioContextFactory</a></li></ul> |
| </nav> |
| |
| <br class="clear"> |
| |
| <footer> |
| Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a> on Sun Jul 02 2017 12:09:54 GMT-0700 (PDT) |
| </footer> |
| |
| <script> prettyPrint(); </script> |
| <script src="scripts/linenumber.js"> </script> |
| <!-- Google Analytics --> |
| <script type="text/javascript"> |
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
| })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
| |
| ga('create', 'UA-75289145-1', 'auto'); |
| ga('send', 'pageview'); |
| </script> |
| </body> |
| </html> |