doc/0.9.4/guacamole-common-js/symbols/Guacamole.Layer.html (1,381 lines of code) (raw):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="generator" content="JsDoc Toolkit" /> <title>JsDoc Reference - Guacamole.Layer</title> <style type="text/css"> /* default.css */ body { font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif; width: 800px; } .header { clear: both; background-color: #ccc; padding: 8px; } h1 { font-size: 150%; font-weight: bold; padding: 0; margin: 1em 0 0 .3em; } hr { border: none 0; border-top: 1px solid #7F8FB1; height: 1px; } pre.code { display: block; padding: 8px; border: 1px dashed #ccc; } #index { margin-top: 24px; float: left; width: 160px; position: absolute; left: 8px; background-color: #F3F3F3; padding: 8px; } #content { margin-left: 190px; width: 600px; } .classList { list-style-type: none; padding: 0; margin: 0 0 0 8px; font-family: arial, sans-serif; font-size: 1em; overflow: auto; } .classList li { padding: 0; margin: 0 0 8px 0; } .summaryTable { width: 100%; } h1.classTitle { font-size:170%; line-height:130%; } h2 { font-size: 110%; } caption, div.sectionTitle { background-color: #7F8FB1; color: #fff; font-size:130%; text-align: left; padding: 2px 6px 2px 6px; border: 1px #7F8FB1 solid; } div.sectionTitle { margin-bottom: 8px; } .summaryTable thead { display: none; } .summaryTable td { vertical-align: top; padding: 4px; border-bottom: 1px #7F8FB1 solid; border-right: 1px #7F8FB1 solid; } /*col#summaryAttributes {}*/ .summaryTable td.attributes { border-left: 1px #7F8FB1 solid; width: 140px; text-align: right; } td.attributes, .fixedFont { line-height: 15px; color: #002EBE; font-family: "Courier New",Courier,monospace; font-size: 13px; } .summaryTable td.nameDescription { text-align: left; font-size: 13px; line-height: 15px; } .summaryTable td.nameDescription, .description { line-height: 15px; padding: 4px; padding-left: 4px; } .summaryTable { margin-bottom: 8px; } ul.inheritsList { list-style: square; margin-left: 20px; padding-left: 0; } .detailList { margin-left: 20px; line-height: 15px; } .detailList dt { margin-left: 20px; } .detailList .heading { font-weight: bold; padding-bottom: 6px; margin-left: 0; } .light, td.attributes, .light a:link, .light a:visited { color: #777; font-style: italic; } .fineprint { text-align: right; font-size: 10px; } </style> </head> <body> <!-- ============================== header ================================= --> <!-- begin static/header.html --> <div id="header"> </div> <!-- end static/header.html --> <!-- ============================== classes index ============================ --> <div id="index"> <!-- begin publish.classesIndex --> <div align="center"><a href="../index.html">Class Index</a> | <a href="../files.html">File Index</a></div> <hr /> <h2>Classes</h2> <ul class="classList"> <li><i><a href="../symbols/_global_.html">_global_</a></i></li> <li><a href="../symbols/Guacamole.ArrayBufferReader.html">Guacamole.ArrayBufferReader</a></li> <li><a href="../symbols/Guacamole.ArrayBufferWriter.html">Guacamole.ArrayBufferWriter</a></li> <li><a href="../symbols/Guacamole.AudioChannel.html">Guacamole.AudioChannel</a></li> <li><a href="../symbols/Guacamole.AudioChannel.Packet.html">Guacamole.AudioChannel.Packet</a></li> <li><a href="../symbols/Guacamole.BlobReader.html">Guacamole.BlobReader</a></li> <li><a href="../symbols/Guacamole.ChainedTunnel.html">Guacamole.ChainedTunnel</a></li> <li><a href="../symbols/Guacamole.Client.html">Guacamole.Client</a></li> <li><a href="../symbols/Guacamole.Display.html">Guacamole.Display</a></li> <li><a href="../symbols/Guacamole.Display.VisibleLayer.html">Guacamole.Display.VisibleLayer</a></li> <li><a href="../symbols/Guacamole.HTTPTunnel.html">Guacamole.HTTPTunnel</a></li> <li><a href="../symbols/Guacamole.InputStream.html">Guacamole.InputStream</a></li> <li><a href="../symbols/Guacamole.IntegerPool.html">Guacamole.IntegerPool</a></li> <li><a href="../symbols/Guacamole.Keyboard.html">Guacamole.Keyboard</a></li> <li><a href="../symbols/Guacamole.Keyboard.ModifierState.html">Guacamole.Keyboard.ModifierState</a></li> <li><a href="../symbols/Guacamole.Layer.html">Guacamole.Layer</a></li> <li><a href="../symbols/Guacamole.Layer.Pixel.html">Guacamole.Layer.Pixel</a></li> <li><a href="../symbols/Guacamole.Mouse.html">Guacamole.Mouse</a></li> <li><a href="../symbols/Guacamole.Mouse.State.html">Guacamole.Mouse.State</a></li> <li><a href="../symbols/Guacamole.Mouse.Touchpad.html">Guacamole.Mouse.Touchpad</a></li> <li><a href="../symbols/Guacamole.Mouse.Touchscreen.html">Guacamole.Mouse.Touchscreen</a></li> <li><a href="../symbols/Guacamole.OnScreenKeyboard.html">Guacamole.OnScreenKeyboard</a></li> <li><a href="../symbols/Guacamole.OnScreenKeyboard.Cap.html">Guacamole.OnScreenKeyboard.Cap</a></li> <li><a href="../symbols/Guacamole.OnScreenKeyboard.Key.html">Guacamole.OnScreenKeyboard.Key</a></li> <li><a href="../symbols/Guacamole.OutputStream.html">Guacamole.OutputStream</a></li> <li><a href="../symbols/Guacamole.Parser.html">Guacamole.Parser</a></li> <li><a href="../symbols/Guacamole.StringReader.html">Guacamole.StringReader</a></li> <li><a href="../symbols/Guacamole.StringWriter.html">Guacamole.StringWriter</a></li> <li><a href="../symbols/Guacamole.Tunnel.html">Guacamole.Tunnel</a></li> <li><a href="../symbols/Guacamole.WebSocketTunnel.html">Guacamole.WebSocketTunnel</a></li> </ul> <hr /> <!-- end publish.classesIndex --> </div> <div id="content"> <!-- ============================== class title ============================ --> <h1 class="classTitle"> Class Guacamole.Layer </h1> <!-- ============================== class summary ========================== --> <p class="description"> <br /><i>Defined in: </i> <a href="../symbols/src/src_main_webapp_modules_Layer.js.html">Layer.js</a>. </p> <!-- ============================== constructor summary ==================== --> <table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class Guacamole.Layer."> <caption>Class Summary</caption> <thead> <tr> <th scope="col">Constructor Attributes</th> <th scope="col">Constructor Name and Description</th> </tr> </thead> <tbody> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription" > <div class="fixedFont"> <b><a href="../symbols/Guacamole.Layer.html#constructor">Guacamole.Layer</a></b>(width, height) </div> <div class="description">Abstract ordered drawing surface.</div> </td> </tr> </tbody> </table> <!-- ============================== properties summary ===================== --> <table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class Guacamole.Layer."> <caption>Field Summary</caption> <thead> <tr> <th scope="col">Field Attributes</th> <th scope="col">Field Name and Description</th> </tr> </thead> <tbody> <tr> <td class="attributes">&lt;static&gt; &nbsp;</td> <td class="nameDescription"> <div class="fixedFont"> Guacamole.Layer.<b><a href="../symbols/Guacamole.Layer.html#.ATOP">ATOP</a></b> </div> <div class="description">Channel mask for the composite operation "atop".</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"> <b><a href="../symbols/Guacamole.Layer.html#autosize">autosize</a></b> </div> <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.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"> <b><a href="../symbols/Guacamole.Layer.html#height">height</a></b> </div> <div class="description">The current height of this layer.</div> </td> </tr> <tr> <td class="attributes">&lt;static&gt; &nbsp;</td> <td class="nameDescription"> <div class="fixedFont"> Guacamole.Layer.<b><a href="../symbols/Guacamole.Layer.html#.IN">IN</a></b> </div> <div class="description">Channel mask for the composite operation "in".</div> </td> </tr> <tr> <td class="attributes">&lt;static&gt; &nbsp;</td> <td class="nameDescription"> <div class="fixedFont"> Guacamole.Layer.<b><a href="../symbols/Guacamole.Layer.html#.OUT">OUT</a></b> </div> <div class="description">Channel mask for the composite operation "out".</div> </td> </tr> <tr> <td class="attributes">&lt;static&gt; &nbsp;</td> <td class="nameDescription"> <div class="fixedFont"> Guacamole.Layer.<b><a href="../symbols/Guacamole.Layer.html#.OVER">OVER</a></b> </div> <div class="description">Channel mask for the composite operation "over".</div> </td> </tr> <tr> <td class="attributes">&lt;static&gt; &nbsp;</td> <td class="nameDescription"> <div class="fixedFont"> Guacamole.Layer.<b><a href="../symbols/Guacamole.Layer.html#.PLUS">PLUS</a></b> </div> <div class="description">Channel mask for the composite operation "plus".</div> </td> </tr> <tr> <td class="attributes">&lt;static&gt; &nbsp;</td> <td class="nameDescription"> <div class="fixedFont"> Guacamole.Layer.<b><a href="../symbols/Guacamole.Layer.html#.RATOP">RATOP</a></b> </div> <div class="description">Channel mask for the composite operation "ratop".</div> </td> </tr> <tr> <td class="attributes">&lt;static&gt; &nbsp;</td> <td class="nameDescription"> <div class="fixedFont"> Guacamole.Layer.<b><a href="../symbols/Guacamole.Layer.html#.RIN">RIN</a></b> </div> <div class="description">Channel mask for the composite operation "rin".</div> </td> </tr> <tr> <td class="attributes">&lt;static&gt; &nbsp;</td> <td class="nameDescription"> <div class="fixedFont"> Guacamole.Layer.<b><a href="../symbols/Guacamole.Layer.html#.ROUT">ROUT</a></b> </div> <div class="description">Channel mask for the composite operation "rout".</div> </td> </tr> <tr> <td class="attributes">&lt;static&gt; &nbsp;</td> <td class="nameDescription"> <div class="fixedFont"> Guacamole.Layer.<b><a href="../symbols/Guacamole.Layer.html#.ROVER">ROVER</a></b> </div> <div class="description">Channel mask for the composite operation "rover".</div> </td> </tr> <tr> <td class="attributes">&lt;static&gt; &nbsp;</td> <td class="nameDescription"> <div class="fixedFont"> Guacamole.Layer.<b><a href="../symbols/Guacamole.Layer.html#.SRC">SRC</a></b> </div> <div class="description">Channel mask for the composite operation "src".</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"> <b><a href="../symbols/Guacamole.Layer.html#width">width</a></b> </div> <div class="description">The current width of this layer.</div> </td> </tr> <tr> <td class="attributes">&lt;static&gt; &nbsp;</td> <td class="nameDescription"> <div class="fixedFont"> Guacamole.Layer.<b><a href="../symbols/Guacamole.Layer.html#.XOR">XOR</a></b> </div> <div class="description">Channel mask for the composite operation "xor".</div> </td> </tr> </tbody> </table> <!-- ============================== methods summary ======================== --> <table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class Guacamole.Layer."> <caption>Method Summary</caption> <thead> <tr> <th scope="col">Method Attributes</th> <th scope="col">Method Name and Description</th> </tr> </thead> <tbody> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#arc">arc</a></b>(x, y, radius, startAngle, endAngle, negative) </div> <div class="description">Add the specified arc to the current path.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#clip">clip</a></b>() </div> <div class="description">Clip all future drawing operations by the current path.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#close">close</a></b>() </div> <div class="description">Closes the current path by connecting the end point with the start point (if any) with a straight line.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#copy">copy</a></b>(srcLayer, srcx, srcy, srcw, srch, x, y) </div> <div class="description">Copy a rectangle of image data from one Layer to this Layer.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#curveTo">curveTo</a></b>(cp1x, cp1y, cp2x, cp2y, x, y) </div> <div class="description">Starts a new path at the specified point.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#drawImage">drawImage</a></b>(x, y, image) </div> <div class="description">Draws the specified image at the given coordinates.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#fillColor">fillColor</a></b>(r, g, b, a) </div> <div class="description">Fills the current path with the specified color.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#fillLayer">fillLayer</a></b>(srcLayer) </div> <div class="description">Fills the current path with the image within the specified layer.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#getCanvas">getCanvas</a></b>() </div> <div class="description">Returns the canvas element backing this Layer.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#lineTo">lineTo</a></b>(x, y) </div> <div class="description">Add the specified line to the current path.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#moveTo">moveTo</a></b>(x, y) </div> <div class="description">Starts a new path at the specified point.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#pop">pop</a></b>() </div> <div class="description">Pop layer state off stack.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#push">push</a></b>() </div> <div class="description">Push current layer state onto stack.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#put">put</a></b>(srcLayer, srcx, srcy, srcw, srch, x, y) </div> <div class="description">Put a rectangle of image data from one Layer to this Layer directly without performing any alpha blending.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#rect">rect</a></b>(x, y, w, h) </div> <div class="description">Add the specified rectangle to the current path.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#reset">reset</a></b>() </div> <div class="description">Reset the layer, clearing the stack, the current path, and any transform matrix.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#resize">resize</a></b>(newWidth, newHeight) </div> <div class="description">Changes the size of this Layer to the given width and height.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#setChannelMask">setChannelMask</a></b>(mask) </div> <div class="description">Sets the channel mask for future operations on this Layer.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#setMiterLimit">setMiterLimit</a></b>(limit) </div> <div class="description">Sets the miter limit for stroke operations using the miter join.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#setTransform">setTransform</a></b>(a, b, c, d, e, f) </div> <div class="description">Sets the given affine transform (defined with six values from the transform's matrix).</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#strokeColor">strokeColor</a></b>(cap, join, thickness, r, g, b, a) </div> <div class="description">Stroke the current path with the specified color.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#strokeLayer">strokeLayer</a></b>(cap, join, thickness, srcLayer) </div> <div class="description">Stroke the current path with the image within the specified layer.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#transfer">transfer</a></b>(srcLayer, srcx, srcy, srcw, srch, x, y, transferFunction) </div> <div class="description">Transfer a rectangle of image data from one Layer to this Layer using the specified transfer function.</div> </td> </tr> <tr> <td class="attributes">&nbsp;</td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/Guacamole.Layer.html#transform">transform</a></b>(a, b, c, d, e, f) </div> <div class="description">Applies the given affine transform (defined with six values from the transform's matrix).</div> </td> </tr> </tbody> </table> <!-- ============================== events summary ======================== --> <!-- ============================== constructor details ==================== --> <div class="details"><a name="constructor"> </a> <div class="sectionTitle"> Class Detail </div> <div class="fixedFont"> <b>Guacamole.Layer</b>(width, height) </div> <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> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Number}</span> <b>width</b> </dt> <dd>The width of the Layer, in pixels. The canvas element backing this Layer will be given this width.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>height</b> </dt> <dd>The height of the Layer, in pixels. The canvas element backing this Layer will be given this height.</dd> </dl> </div> <!-- ============================== field details ========================== --> <div class="sectionTitle"> Field Detail </div> <a name=".ATOP"> </a> <div class="fixedFont">&lt;static&gt; <span class="light">Guacamole.Layer.</span><b>ATOP</b> </div> <div class="description"> Channel mask for the composite operation "atop". </div> <hr /> <a name="autosize"> </a> <div class="fixedFont"> <span class="light">{Boolean}</span> <b>autosize</b> </div> <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> <pre class="code">// Set autosize to true for all future operations layer.sync(function() { layer.autosize = true; });</pre> <dl class="detailList"> <dt class="heading">Default Value:</dt> <dd> false </dd> </dl> <hr /> <a name="height"> </a> <div class="fixedFont"> <span class="light">{Number}</span> <b>height</b> </div> <div class="description"> The current height of this layer. </div> <hr /> <a name=".IN"> </a> <div class="fixedFont">&lt;static&gt; <span class="light">Guacamole.Layer.</span><b>IN</b> </div> <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> <hr /> <a name=".OUT"> </a> <div class="fixedFont">&lt;static&gt; <span class="light">Guacamole.Layer.</span><b>OUT</b> </div> <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> <hr /> <a name=".OVER"> </a> <div class="fixedFont">&lt;static&gt; <span class="light">Guacamole.Layer.</span><b>OVER</b> </div> <div class="description"> Channel mask for the composite operation "over". </div> <hr /> <a name=".PLUS"> </a> <div class="fixedFont">&lt;static&gt; <span class="light">Guacamole.Layer.</span><b>PLUS</b> </div> <div class="description"> Channel mask for the composite operation "plus". </div> <hr /> <a name=".RATOP"> </a> <div class="fixedFont">&lt;static&gt; <span class="light">Guacamole.Layer.</span><b>RATOP</b> </div> <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> <hr /> <a name=".RIN"> </a> <div class="fixedFont">&lt;static&gt; <span class="light">Guacamole.Layer.</span><b>RIN</b> </div> <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> <hr /> <a name=".ROUT"> </a> <div class="fixedFont">&lt;static&gt; <span class="light">Guacamole.Layer.</span><b>ROUT</b> </div> <div class="description"> Channel mask for the composite operation "rout". </div> <hr /> <a name=".ROVER"> </a> <div class="fixedFont">&lt;static&gt; <span class="light">Guacamole.Layer.</span><b>ROVER</b> </div> <div class="description"> Channel mask for the composite operation "rover". </div> <hr /> <a name=".SRC"> </a> <div class="fixedFont">&lt;static&gt; <span class="light">Guacamole.Layer.</span><b>SRC</b> </div> <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> <hr /> <a name="width"> </a> <div class="fixedFont"> <span class="light">{Number}</span> <b>width</b> </div> <div class="description"> The current width of this layer. </div> <hr /> <a name=".XOR"> </a> <div class="fixedFont">&lt;static&gt; <span class="light">Guacamole.Layer.</span><b>XOR</b> </div> <div class="description"> Channel mask for the composite operation "xor". </div> <!-- ============================== method details ========================= --> <div class="sectionTitle"> Method Detail </div> <a name="arc"> </a> <div class="fixedFont"> <b>arc</b>(x, y, radius, startAngle, endAngle, negative) </div> <div class="description"> Add the specified arc to the current path. </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Number}</span> <b>x</b> </dt> <dd>The X coordinate of the center of the circle which will contain the arc.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>y</b> </dt> <dd>The Y coordinate of the center of the circle which will contain the arc.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>radius</b> </dt> <dd>The radius of the circle.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>startAngle</b> </dt> <dd>The starting angle of the arc, in radians.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>endAngle</b> </dt> <dd>The ending angle of the arc, in radians.</dd> <dt> <span class="light fixedFont">{Boolean}</span> <b>negative</b> </dt> <dd>Whether the arc should be drawn in order of decreasing angle.</dd> </dl> <hr /> <a name="clip"> </a> <div class="fixedFont"> <b>clip</b>() </div> <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> <hr /> <a name="close"> </a> <div class="fixedFont"> <b>close</b>() </div> <div class="description"> Closes the current path by connecting the end point with the start point (if any) with a straight line. </div> <hr /> <a name="copy"> </a> <div class="fixedFont"> <b>copy</b>(srcLayer, srcx, srcy, srcw, srch, x, y) </div> <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> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{<a href="../symbols/Guacamole.Layer.html">Guacamole.Layer</a>}</span> <b>srcLayer</b> </dt> <dd>The Layer to copy image data from.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>srcx</b> </dt> <dd>The X coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>srcy</b> </dt> <dd>The Y coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>srcw</b> </dt> <dd>The width of the rectangle within the source Layer's coordinate space to copy data from.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>srch</b> </dt> <dd>The height of the rectangle within the source Layer's coordinate space to copy data from.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>x</b> </dt> <dd>The destination X coordinate.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>y</b> </dt> <dd>The destination Y coordinate.</dd> </dl> <hr /> <a name="curveTo"> </a> <div class="fixedFont"> <b>curveTo</b>(cp1x, cp1y, cp2x, cp2y, x, y) </div> <div class="description"> Starts a new path at the specified point. </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Number}</span> <b>cp1x</b> </dt> <dd>The X coordinate of the first control point.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>cp1y</b> </dt> <dd>The Y coordinate of the first control point.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>cp2x</b> </dt> <dd>The X coordinate of the second control point.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>cp2y</b> </dt> <dd>The Y coordinate of the second control point.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>x</b> </dt> <dd>The X coordinate of the endpoint of the curve.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>y</b> </dt> <dd>The Y coordinate of the endpoint of the curve.</dd> </dl> <hr /> <a name="drawImage"> </a> <div class="fixedFont"> <b>drawImage</b>(x, y, image) </div> <div class="description"> Draws the specified image at the given coordinates. The image specified must already be loaded. </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Number}</span> <b>x</b> </dt> <dd>The destination X coordinate.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>y</b> </dt> <dd>The destination Y coordinate.</dd> <dt> <span class="light fixedFont">{Image}</span> <b>image</b> </dt> <dd>The image to draw. Note that this is an Image object - not a URL.</dd> </dl> <hr /> <a name="fillColor"> </a> <div class="fixedFont"> <b>fillColor</b>(r, g, b, a) </div> <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> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Number}</span> <b>r</b> </dt> <dd>The red component of the color to fill.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>g</b> </dt> <dd>The green component of the color to fill.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>b</b> </dt> <dd>The blue component of the color to fill.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>a</b> </dt> <dd>The alpha component of the color to fill.</dd> </dl> <hr /> <a name="fillLayer"> </a> <div class="fixedFont"> <b>fillLayer</b>(srcLayer) </div> <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> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{<a href="../symbols/Guacamole.Layer.html">Guacamole.Layer</a>}</span> <b>srcLayer</b> </dt> <dd>The layer to use as a repeating pattern within the fill.</dd> </dl> <hr /> <a name="getCanvas"> </a> <div class="fixedFont"> <span class="light">{Element}</span> <b>getCanvas</b>() </div> <div class="description"> Returns the canvas element backing this Layer. </div> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd><span class="light fixedFont">{Element}</span> The canvas element backing this Layer.</dd> </dl> <hr /> <a name="lineTo"> </a> <div class="fixedFont"> <b>lineTo</b>(x, y) </div> <div class="description"> Add the specified line to the current path. </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Number}</span> <b>x</b> </dt> <dd>The X coordinate of the endpoint of the line to draw.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>y</b> </dt> <dd>The Y coordinate of the endpoint of the line to draw.</dd> </dl> <hr /> <a name="moveTo"> </a> <div class="fixedFont"> <b>moveTo</b>(x, y) </div> <div class="description"> Starts a new path at the specified point. </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Number}</span> <b>x</b> </dt> <dd>The X coordinate of the point to draw.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>y</b> </dt> <dd>The Y coordinate of the point to draw.</dd> </dl> <hr /> <a name="pop"> </a> <div class="fixedFont"> <b>pop</b>() </div> <div class="description"> Pop layer state off stack. </div> <hr /> <a name="push"> </a> <div class="fixedFont"> <b>push</b>() </div> <div class="description"> Push current layer state onto stack. </div> <hr /> <a name="put"> </a> <div class="fixedFont"> <b>put</b>(srcLayer, srcx, srcy, srcw, srch, x, y) </div> <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> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{<a href="../symbols/Guacamole.Layer.html">Guacamole.Layer</a>}</span> <b>srcLayer</b> </dt> <dd>The Layer to copy image data from.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>srcx</b> </dt> <dd>The X coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>srcy</b> </dt> <dd>The Y coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>srcw</b> </dt> <dd>The width of the rectangle within the source Layer's coordinate space to copy data from.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>srch</b> </dt> <dd>The height of the rectangle within the source Layer's coordinate space to copy data from.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>x</b> </dt> <dd>The destination X coordinate.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>y</b> </dt> <dd>The destination Y coordinate.</dd> </dl> <hr /> <a name="rect"> </a> <div class="fixedFont"> <b>rect</b>(x, y, w, h) </div> <div class="description"> Add the specified rectangle to the current path. </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Number}</span> <b>x</b> </dt> <dd>The X coordinate of the upper-left corner of the rectangle to draw.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>y</b> </dt> <dd>The Y coordinate of the upper-left corner of the rectangle to draw.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>w</b> </dt> <dd>The width of the rectangle to draw.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>h</b> </dt> <dd>The height of the rectangle to draw.</dd> </dl> <hr /> <a name="reset"> </a> <div class="fixedFont"> <b>reset</b>() </div> <div class="description"> Reset the layer, clearing the stack, the current path, and any transform matrix. </div> <hr /> <a name="resize"> </a> <div class="fixedFont"> <b>resize</b>(newWidth, newHeight) </div> <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> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Number}</span> <b>newWidth</b> </dt> <dd>The new width to assign to this Layer.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>newHeight</b> </dt> <dd>The new height to assign to this Layer.</dd> </dl> <hr /> <a name="setChannelMask"> </a> <div class="fixedFont"> <b>setChannelMask</b>(mask) </div> <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> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Number}</span> <b>mask</b> </dt> <dd>The channel mask for future operations on this Layer.</dd> </dl> <hr /> <a name="setMiterLimit"> </a> <div class="fixedFont"> <b>setMiterLimit</b>(limit) </div> <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> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Number}</span> <b>limit</b> </dt> <dd>The miter limit for stroke operations using the miter join.</dd> </dl> <hr /> <a name="setTransform"> </a> <div class="fixedFont"> <b>setTransform</b>(a, b, c, d, e, f) </div> <div class="description"> Sets the given affine transform (defined with six values from the transform's matrix). </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Number}</span> <b>a</b> </dt> <dd>The first value in the affine transform's matrix.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>b</b> </dt> <dd>The second value in the affine transform's matrix.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>c</b> </dt> <dd>The third value in the affine transform's matrix.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>d</b> </dt> <dd>The fourth value in the affine transform's matrix.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>e</b> </dt> <dd>The fifth value in the affine transform's matrix.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>f</b> </dt> <dd>The sixth value in the affine transform's matrix.</dd> </dl> <hr /> <a name="strokeColor"> </a> <div class="fixedFont"> <b>strokeColor</b>(cap, join, thickness, r, g, b, a) </div> <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> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{String}</span> <b>cap</b> </dt> <dd>The line cap style. Can be "round", "square", or "butt".</dd> <dt> <span class="light fixedFont">{String}</span> <b>join</b> </dt> <dd>The line join style. Can be "round", "bevel", or "miter".</dd> <dt> <span class="light fixedFont">{Number}</span> <b>thickness</b> </dt> <dd>The line thickness in pixels.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>r</b> </dt> <dd>The red component of the color to fill.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>g</b> </dt> <dd>The green component of the color to fill.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>b</b> </dt> <dd>The blue component of the color to fill.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>a</b> </dt> <dd>The alpha component of the color to fill.</dd> </dl> <hr /> <a name="strokeLayer"> </a> <div class="fixedFont"> <b>strokeLayer</b>(cap, join, thickness, srcLayer) </div> <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> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{String}</span> <b>cap</b> </dt> <dd>The line cap style. Can be "round", "square", or "butt".</dd> <dt> <span class="light fixedFont">{String}</span> <b>join</b> </dt> <dd>The line join style. Can be "round", "bevel", or "miter".</dd> <dt> <span class="light fixedFont">{Number}</span> <b>thickness</b> </dt> <dd>The line thickness in pixels.</dd> <dt> <span class="light fixedFont">{<a href="../symbols/Guacamole.Layer.html">Guacamole.Layer</a>}</span> <b>srcLayer</b> </dt> <dd>The layer to use as a repeating pattern within the stroke.</dd> </dl> <hr /> <a name="transfer"> </a> <div class="fixedFont"> <b>transfer</b>(srcLayer, srcx, srcy, srcw, srch, x, y, transferFunction) </div> <div class="description"> Transfer a rectangle of image data from one Layer to this Layer using the specified transfer function. </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{<a href="../symbols/Guacamole.Layer.html">Guacamole.Layer</a>}</span> <b>srcLayer</b> </dt> <dd>The Layer to copy image data from.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>srcx</b> </dt> <dd>The X coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>srcy</b> </dt> <dd>The Y coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>srcw</b> </dt> <dd>The width of the rectangle within the source Layer's coordinate space to copy data from.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>srch</b> </dt> <dd>The height of the rectangle within the source Layer's coordinate space to copy data from.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>x</b> </dt> <dd>The destination X coordinate.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>y</b> </dt> <dd>The destination Y coordinate.</dd> <dt> <span class="light fixedFont">{Function}</span> <b>transferFunction</b> </dt> <dd>The transfer function to use to transfer data from source to destination.</dd> </dl> <hr /> <a name="transform"> </a> <div class="fixedFont"> <b>transform</b>(a, b, c, d, e, f) </div> <div class="description"> Applies the given affine transform (defined with six values from the transform's matrix). </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Number}</span> <b>a</b> </dt> <dd>The first value in the affine transform's matrix.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>b</b> </dt> <dd>The second value in the affine transform's matrix.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>c</b> </dt> <dd>The third value in the affine transform's matrix.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>d</b> </dt> <dd>The fourth value in the affine transform's matrix.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>e</b> </dt> <dd>The fifth value in the affine transform's matrix.</dd> <dt> <span class="light fixedFont">{Number}</span> <b>f</b> </dt> <dd>The sixth value in the affine transform's matrix.</dd> </dl> <!-- ============================== event details ========================= --> <hr /> </div> <!-- ============================== footer ================================= --> <div class="fineprint" style="clear:both"> Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Thu Jan 08 2015 04:14:45 GMT-0800 (PST) </div> </body> </html>