http://git-wip-us.apache.org/repos/asf/incubator-guacamole-website/blob/eff0fb8d/content/doc/0.9.13-incubating/guacamole-common-js/Guacamole.Display.VisibleLayer.html ---------------------------------------------------------------------- diff --git a/content/doc/0.9.13-incubating/guacamole-common-js/Guacamole.Display.VisibleLayer.html b/content/doc/0.9.13-incubating/guacamole-common-js/Guacamole.Display.VisibleLayer.html new file mode 100644 index 0000000..4c76a4c --- /dev/null +++ b/content/doc/0.9.13-incubating/guacamole-common-js/Guacamole.Display.VisibleLayer.html @@ -0,0 +1,6470 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>JSDoc: Class: VisibleLayer</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: VisibleLayer</h1> + + + + + + +<section> + +<header> + + <h2> + <span class="ancestors"><a href="Guacamole.html">Guacamole</a><a href="Guacamole.Display.html">.Display</a>.</span>VisibleLayer</h2> + + +</header> + +<article> + <div class="container-overview"> + + + + + + <h4 class="name" id="VisibleLayer"><span class="type-signature"></span>new VisibleLayer<span class="signature">(width, height)</span><span class="type-signature"></span></h4> + + + + + +<div class="description"> + Simple container for Guacamole.Layer, allowing layers to be easily +repositioned and nested. This allows certain operations to be accelerated +through DOM manipulation, rather than raster operations. +</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="Display.js.html">Display.js</a>, <a href="Display.js.html#line1223">line 1223</a> + </li></ul></dd> + + + + + + + +</dl> + + + + + + + + + + + + + + + + + + </div> + + + <h3 class="subsection-title">Extends</h3> + + + + + <ul> + <li><a href="Guacamole.Layer.html">Guacamole.Layer</a></li> + </ul> + + + + + + + + + + + + + + <h3 class="subsection-title">Members</h3> + + + +<h4 class="name" id="alpha"><span class="type-signature"></span>alpha<span class="type-signature"></span></h4> + + + + +<div class="description"> + The opacity of the layer container, where 255 is fully opaque and 0 is +fully transparent. +</div> + + + + + + + +<dl class="details"> + + + + + + + + + + + + + + + + + + + + + + + + + + + <dt class="tag-source">Source:</dt> + <dd class="tag-source"><ul class="dummy"><li> + <a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1247">line 1247</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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#autosize">Guacamole.Layer#autosize</a> + </li></ul></dd> + + + + + + + + + + + + + + + + + + + + <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="children"><span class="type-signature"></span>children<span class="type-signature"></span></h4> + + + + +<div class="description"> + Set of all children of this layer, indexed by layer index. This object +will have one property per child. +</div> + + + + + + + +<dl class="details"> + + + + + + + + + + + + + + + + + + + + + + + + + + + <dt class="tag-source">Source:</dt> + <dd class="tag-source"><ul class="dummy"><li> + <a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1289">line 1289</a> + </li></ul></dd> + + + + + + + +</dl> + + + + + + + + +<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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#height">Guacamole.Layer#height</a> + </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#line267">line 267</a> + </li></ul></dd> + + + + + + + +</dl> + + + + + + + + +<h4 class="name" id="matrix"><span class="type-signature"></span>matrix<span class="type-signature"> :Array.<Number></span></h4> + + + + +<div class="description"> + The affine transformation applied to this layer container. Each element +corresponds to a value from the transformation matrix, with the first +three values being the first row, and the last three values being the +second row. There are six values total. +</div> + + + + <h5>Type:</h5> + <ul> + <li> + +<span class="param-type">Array.<Number></span> + + + </li> + </ul> + + + + + +<dl class="details"> + + + + + + + + + + + + + + + + + + + + + + + + + + + <dt class="tag-source">Source:</dt> + <dd class="tag-source"><ul class="dummy"><li> + <a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1277">line 1277</a> + </li></ul></dd> + + + + + + + +</dl> + + + + + + + + +<h4 class="name" id="parent"><span class="type-signature"></span>parent<span class="type-signature"> :<a href="Guacamole.Display.VisibleLayer.html">Guacamole.Display.VisibleLayer</a></span></h4> + + + + +<div class="description"> + The parent layer container of this layer, if any. +</div> + + + + <h5>Type:</h5> + <ul> + <li> + +<span class="param-type"><a href="Guacamole.Display.VisibleLayer.html">Guacamole.Display.VisibleLayer</a></span> + + + </li> + </ul> + + + + + +<dl class="details"> + + + + + + + + + + + + + + + + + + + + + + + + + + + <dt class="tag-source">Source:</dt> + <dd class="tag-source"><ul class="dummy"><li> + <a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1283">line 1283</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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#width">Guacamole.Layer#width</a> + </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#line261">line 261</a> + </li></ul></dd> + + + + + + + +</dl> + + + + + + + + +<h4 class="name" id="x"><span class="type-signature"></span>x<span class="type-signature"> :Number</span></h4> + + + + +<div class="description"> + X coordinate of the upper-left corner of this layer container within +its parent, in pixels. +</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="Display.js.html">Display.js</a>, <a href="Display.js.html#line1254">line 1254</a> + </li></ul></dd> + + + + + + + +</dl> + + + + + + + + +<h4 class="name" id="y"><span class="type-signature"></span>y<span class="type-signature"> :Number</span></h4> + + + + +<div class="description"> + Y coordinate of the upper-left corner of this layer container within +its parent, in pixels. +</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="Display.js.html">Display.js</a>, <a href="Display.js.html#line1261">line 1261</a> + </li></ul></dd> + + + + + + + +</dl> + + + + + + + + +<h4 class="name" id="z"><span class="type-signature"></span>z<span class="type-signature"> :Number</span></h4> + + + + +<div class="description"> + Z stacking order of this layer relative to other sibling layers. +</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="Display.js.html">Display.js</a>, <a href="Display.js.html#line1267">line 1267</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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#arc">Guacamole.Layer#arc</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#clip">Guacamole.Layer#clip</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#close">Guacamole.Layer#close</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#copy">Guacamole.Layer#copy</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#curveTo">Guacamole.Layer#curveTo</a> + </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#line575">line 575</a> + </li></ul></dd> + + + + + + + +</dl> + + + + + + + + + + + + + + + + + + + + + + <h4 class="name" id="dispose"><span class="type-signature"></span>dispose<span class="signature">()</span><span class="type-signature"></span></h4> + + + + + +<div class="description"> + Removes this layer container entirely, such that it is no longer +contained within its parent layer, if any. +</div> + + + + + + + + + + + + + +<dl class="details"> + + + + + + + + + + + + + + + + + + + + + + + + + + + <dt class="tag-source">Source:</dt> + <dd class="tag-source"><ul class="dummy"><li> + <a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1421">line 1421</a> + </li></ul></dd> + + + + + + + +</dl> + + + + + + + + + + + + + + + + + + + + + + <h4 class="name" id="distort"><span class="type-signature"></span>distort<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="Display.js.html">Display.js</a>, <a href="Display.js.html#line1446">line 1446</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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#drawImage">Guacamole.Layer#drawImage</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#fillColor">Guacamole.Layer#fillColor</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#fillLayer">Guacamole.Layer#fillLayer</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#getCanvas">Guacamole.Layer#getCanvas</a> + </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#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="getElement"><span class="type-signature"></span>getElement<span class="signature">()</span><span class="type-signature"> → {Element}</span></h4> + + + + + +<div class="description"> + Returns the element containing the canvas and any other elements +associated with this layer. +</div> + + + + + + + + + + + + + +<dl class="details"> + + + + + + + + + + + + + + + + + + + + + + + + + + + <dt class="tag-source">Source:</dt> + <dd class="tag-source"><ul class="dummy"><li> + <a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1328">line 1328</a> + </li></ul></dd> + + + + + + + +</dl> + + + + + + + + + + + + + +<h5>Returns:</h5> + + +<div class="param-desc"> + The element containing this layer's canvas. +</div> + + + +<dl> + <dt> + Type + </dt> + <dd> + +<span class="param-type">Element</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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#lineTo">Guacamole.Layer#lineTo</a> + </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#line526">line 526</a> + </li></ul></dd> + + + + + + + +</dl> + + + + + + + + + + + + + + + + + + + + + + <h4 class="name" id="move"><span class="type-signature"></span>move<span class="signature">(parent, x, y, z)</span><span class="type-signature"></span></h4> + + + + + +<div class="description"> + Moves the upper-left corner of this VisibleLayer to the given X and Y +coordinate, sets the Z stacking order, and reparents this VisibleLayer +to the given VisibleLayer. +</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>parent</code></td> + + + <td class="type"> + + +<span class="param-type"><a href="Guacamole.Display.VisibleLayer.html">Guacamole.Display.VisibleLayer</a></span> + + + + </td> + + + + + + <td class="description last">The parent to set.</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 to move to.</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 to move to.</td> + </tr> + + + + <tr> + + <td class="name"><code>z</code></td> + + + <td class="type"> + + +<span class="param-type">Number</span> + + + + </td> + + + + + + <td class="description last">The Z coordinate to move to.</td> + </tr> + + + </tbody> +</table> + + + + + + +<dl class="details"> + + + + + + + + + + + + + + + + + + + + + + + + + + + <dt class="tag-source">Source:</dt> + <dd class="tag-source"><ul class="dummy"><li> + <a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1382">line 1382</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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#moveTo">Guacamole.Layer#moveTo</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#pop">Guacamole.Layer#pop</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#push">Guacamole.Layer#push</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#put">Guacamole.Layer#put</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#rect">Guacamole.Layer#rect</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#reset">Guacamole.Layer#reset</a> + </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#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-overrides">Overrides:</dt> + <dd class="tag-overrides"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#resize">Guacamole.Layer#resize</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#setChannelMask">Guacamole.Layer#setChannelMask</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#setMiterLimit">Guacamole.Layer#setMiterLimit</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#setTransform">Guacamole.Layer#setTransform</a> + </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#line805">line 805</a> + </li></ul></dd> + + + + + + + +</dl> + + + + + + + + + + + + + + + + + + + + + + <h4 class="name" id="shade"><span class="type-signature"></span>shade<span class="signature">(a)</span><span class="type-signature"></span></h4> + + + + + +<div class="description"> + Sets the opacity of this layer to the given value, where 255 is fully +opaque and 0 is fully transparent. +</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 opacity to set.</td> + </tr> + + + </tbody> +</table> + + + + + + +<dl class="details"> + + + + + + + + + + + + + + + + + + + + + + + + + + + <dt class="tag-source">Source:</dt> + <dd class="tag-source"><ul class="dummy"><li> + <a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1412">line 1412</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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#strokeColor">Guacamole.Layer#strokeColor</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#strokeLayer">Guacamole.Layer#strokeLayer</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#toCanvas">Guacamole.Layer#toCanvas</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#transfer">Guacamole.Layer#transfer</a> + </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#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="inherited-from">Inherited From:</dt> + <dd class="inherited-from"><ul class="dummy"><li> + <a href="Guacamole.Layer.html#transform">Guacamole.Layer#transform</a> + </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#line824">line 824</a> + </li></ul></dd> + + + + + + + +</dl> + + + + + + + + + + + + + + + + + + + + + + <h4 class="name" id="translate"><span class="type-signature"></span>translate<span class="signature">(x, y)</span><span class="type-signature"></span></h4> + + + + + +<div class="description"> + Moves the upper-left corner of this layer to the given X and Y +coordinate. +</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 to move to.</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 to move to.</td> + </tr> + + + </tbody> +</table> + + + + + + +<dl class="details"> + + + + + + + + + + + + + + + + + + + + + + + + + + + <dt class="tag-source">Source:</dt> + <dd class="tag-source"><ul class="dummy"><li> + <a href="Display.js.html">Display.js</a>, <a href="Display.js.html#line1351">line 1351</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.HTT
<TRUNCATED>