evolve-js

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>EvolveJS Class: Helpers</title>  <link type="text/css" rel="stylesheet" href="styles/sunlight.default.css"> <link type="text/css" rel="stylesheet" href="styles/site.spacelab.css"> </head> <body> <div class="navbar navbar-default navbar-fixed-top "> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="index.html">EvolveJS</a> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse" id="topNavigation"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="modules.list.html" class="dropdown-toggle" data-toggle="dropdown">Modules<b class="caret"></b></a> <ul class="dropdown-menu "> <li><a href="module-Elements.html">Elements</a></li> </ul> </li> <li class="dropdown"> <a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b class="caret"></b></a> <ul class="dropdown-menu "> <li><a href="BoxElement.html">BoxElement</a></li><li><a href="ButtonElement.html">ButtonElement</a></li><li><a href="Element.html">Element</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="ImageElement.html">ImageElement</a></li><li><a href="LabelElement.html">LabelElement</a></li><li><a href="ListElement.html">ListElement</a></li><li><a href="ListItemElement.html">ListItemElement</a></li><li><a href="Preloader.html">Preloader</a></li><li><a href="SpriteElement.html">SpriteElement</a></li><li><a href="TextElement.html">TextElement</a></li> </ul> </li> </ul> <div class="col-sm-3 col-md-3"> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="q" id="search-input"> <div class="input-group-btn"> <button class="btn btn-default" id="search-submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> </div> </div> </div> <div class="container" id="toc-content"> <div class="row"> <div class="col-md-8"> <div id="main"> <h1 class="page-title">Class: Helpers</h1> <section> <header> <h2> Helpers </h2> <div class="class-description">all the helpers we need to draw the elements</div> </header> <article> <div class="container-overview"> <hr> <dt> <h4 class="name" id="Helpers"><span class="type-signature"></span>new Helpers()</h4> </dt> <dd> <dl class="details"> </dl> </dd> </div> <h3 class="subsection-title">Methods</h3> <dl> <hr> <dt> <h4 class="name" id=".align"><span class="type-signature"><static> </span>align(element, parent, mode, regPoint, regPointMode)</h4> </dt> <dd> <div class="description"> Aligns an element (horizontally, vertically or both) based on it's parent bounds. </div> <h5>Parameters:</h5> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>element</code></td> <td class="type"> <span class="param-type">Object</span> | <span class="param-type">Container</span> | <span class="param-type"><a href="Element.html">Element</a></span> </td> <td class="description last">can be an Object, an DrawJS instance, a CreateJS Core Elements instance</td> </tr> <tr> <td class="name"><code>parent</code></td> <td class="type"> <span class="param-type">null</span> | <span class="param-type">Object</span> | <span class="param-type">Container</span> | <span class="param-type"><a href="Element.html">Element</a></span> </td> <td class="description last">can be an Object, an DrawJS instance, a CreateJS Core Elements instance<br> if null, it takes automatically the parent property of element parameter</td> </tr> <tr> <td class="name"><code>mode</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last">can be a couple of word for horizontal or vertical align, in any order<br> accepts the following modes<br> <ul> <li><b>Horizontal Modes</b>: left, center, right</li> <li><b>Vertical Modes</b>: top, middle, bottom</li> </ul></td> </tr> <tr> <td class="name"><code>regPoint</code></td> <td class="type"> <span class="param-type">Boolean</span> </td> <td class="description last">enabled alignment also on registration point</td> </tr> <tr> <td class="name"><code>regPointMode</code></td> <td class="type"> <span class="param-type">null</span> | <span class="param-type">String</span> </td> <td class="description last">can be a couple of word for horizontal or vertical align, in any order<br> accepts the following modes<br> <ul> <li><b>Horizontal Modes</b>: left, center, right</li> <li><b>Vertical Modes</b>: top, middle, bottom</li> </ul><br> if null it considers mode parameter as fallback</td> </tr> </tbody> </table> <dl class="details"> </dl> <h5>Returns:</h5> <dl> <dt> Type </dt> <dd> <span class="param-type">Object</span> | <span class="param-type">Container</span> | <span class="param-type"><a href="Element.html">Element</a></span> </dd> </dl> </dd> <hr> <dt> <h4 class="name" id=".alignRegPoint"><span class="type-signature"><static> </span>alignRegPoint(element, mode)</h4> </dt> <dd> <div class="description"> aligns the reg point or an element </div> <h5>Parameters:</h5> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>element</code></td> <td class="type"> <span class="param-type">Object</span> | <span class="param-type">Container</span> | <span class="param-type"><a href="Element.html">Element</a></span> </td> <td class="description last">can be an Object, an DrawJS instance, a CreateJS Core Elements instance</td> </tr> <tr> <td class="name"><code>mode</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last">can be a couple of word for horizontal or vertical align, in any order<br> accepts the following modes<br> <ul> <li><b>Horizontal Modes</b>: left, center, right</li> <li><b>Vertical Modes</b>: top, middle, bottom</li> </ul></td> </tr> </tbody> </table> <dl class="details"> </dl> <h5>Returns:</h5> <dl> <dt> Type </dt> <dd> <span class="param-type">Object</span> | <span class="param-type">Container</span> | <span class="param-type"><a href="Element.html">Element</a></span> </dd> </dl> </dd> <hr> <dt> <h4 class="name" id=".createCircle"><span class="type-signature"><static> </span>createCircle(options, bounds)</h4> </dt> <dd> <div class="description"> creates an DrawJS Circle Shape instance </div> <h5>Parameters:</h5> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last">the options can contain <h6 class="method-params-label method-subparams-label">Properties</h6> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>fill</code></td> <td class="type"> <span class="param-type">String</span> | <span class="param-type">Object</span> </td> <td class="description last">color for filling graphics <h6 class="method-params-label method-subparams-label">Properties</h6> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>colors</code></td> <td class="type"> <span class="param-type">Array</span> </td> <td class="description last">colors to create a linear gradient fill</td> </tr> <tr> <td class="name"><code>ratios</code></td> <td class="type"> <span class="param-type">Array</span> </td> <td class="description last">color ratios to create a linear gradient fill</td> </tr> <tr> <td class="name"><code>points</code></td> <td class="type"> <span class="param-type">Array</span> </td> <td class="description last">start & stop points to create a linear gradient fill</td> </tr> </tbody> </table> </td> </tr> <tr> <td class="name"><code>stroke</code></td> <td class="type"> <span class="param-type">String</span> | <span class="param-type">Object</span> </td> <td class="description last">stroke options, if string it creates a stroke with size 1 <h6 class="method-params-label method-subparams-label">Properties</h6> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>size</code></td> <td class="type"> <span class="param-type">Number</span> </td> <td class="description last">the size</td> </tr> <tr> <td class="name"><code>color</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last">the color</td> </tr> </tbody> </table> </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> </tbody> </table> </td> </tr> <tr> <td class="name"><code>bounds</code></td> <td class="type"> <span class="param-type">Arguments</span> </td> <td class="description last">the bounds parameter will be passed to setBounds method of DrawJS Container class<br> so it has to be an array with this sequence<br> <ul> <li>{Number} x</li> <li>{Number} y</li> <li>{Number} width</li> <li>{Number} height</li> </ul></td> </tr> </tbody> </table> <dl class="details"> </dl> <h5>Returns:</h5> <dl> <dt> Type </dt> <dd> <span class="param-type">Shape</span> </dd> </dl> </dd> <hr> <dt> <h4 class="name" id=".createContainer"><span class="type-signature"><static> </span>createContainer(bounds)</h4> </dt> <dd> <div class="description"> creates an DrawJS Container instance based on bounds parameters </div> <h5>Parameters:</h5> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>bounds</code></td> <td class="type"> <span class="param-type">Arguments</span> </td> <td class="description last">the bounds parameter will be passed to setBounds method of DrawJS Container class<br> so it has to be an array with this sequence<br> <ul> <li>{Number} x</li> <li>{Number} y</li> <li>{Number} width</li> <li>{Number} height</li> </ul></td> </tr> </tbody> </table> <dl class="details"> </dl> <h5>Returns:</h5> <dl> <dt> Type </dt> <dd> <span class="param-type">Container</span> </dd> </dl> </dd> <hr> <dt> <h4 class="name" id=".createGraphics"><span class="type-signature"><static> </span>createGraphics(options, bounds)</h4> </dt> <dd> <div class="description"> creates an DrawJS Graphics instance </div> <h5>Parameters:</h5> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last">the options can contain <h6 class="method-params-label method-subparams-label">Properties</h6> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>fill</code></td> <td class="type"> <span class="param-type">String</span> | <span class="param-type">Object</span> </td> <td class="description last">color for filling graphics<br> <h6 class="method-params-label method-subparams-label">Properties</h6> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>colors</code></td> <td class="type"> <span class="param-type">Array</span> </td> <td class="description last">colors to create a linear gradient fill</td> </tr> <tr> <td class="name"><code>ratios</code></td> <td class="type"> <span class="param-type">Array</span> </td> <td class="description last">color ratios to create a linear gradient fill</td> </tr> <tr> <td class="name"><code>points</code></td> <td class="type"> <span class="param-type">Array</span> </td> <td class="description last">start & stop points to create a linear gradient fill</td> </tr> </tbody> </table> </td> </tr> <tr> <td class="name"><code>stroke</code></td> <td class="type"> <span class="param-type">String</span> | <span class="param-type">Object</span> </td> <td class="description last">stroke options, if string it creates a stroke with size 1 <h6 class="method-params-label method-subparams-label">Properties</h6> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>size</code></td> <td class="type"> <span class="param-type">Number</span> </td> <td class="description last">the size</td> </tr> <tr> <td class="name"><code>color</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last">the color</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="name"><code>bounds</code></td> <td class="type"> <span class="param-type">Arguments</span> </td> <td class="description last">the bounds parameter will be passed to setBounds method of DrawJS Container class<br> so it has to be an array with this sequence<br> <ul> <li>{Number} x</li> <li>{Number} y</li> <li>{Number} width</li> <li>{Number} height</li> </ul></td> </tr> </tbody> </table> <dl class="details"> </dl> <h5>Returns:</h5> <dl> <dt> Type </dt> <dd> <span class="param-type">Graphics</span> </dd> </dl> </dd> <hr> <dt> <h4 class="name" id=".createImage"><span class="type-signature"><static> </span>createImage(image)</h4> </dt> <dd> <div class="description"> creates an DrawJS Bitmap instance </div> <h5>Parameters:</h5> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>image</code></td> <td class="type"> <span class="param-type">HTMLElement</span> </td> <td class="description last">the preloaded DOM element representing the image</td> </tr> </tbody> </table> <dl class="details"> </dl> <h5>Returns:</h5> <dl> <dt> Type </dt> <dd> <span class="param-type">Bitmap</span> </dd> </dl> </dd> <hr> <dt> <h4 class="name" id=".createRect"><span class="type-signature"><static> </span>createRect(options, bounds)</h4> </dt> <dd> <div class="description"> creates an DrawJS Rect Shape instance </div> <h5>Parameters:</h5> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last">the options can contain <h6 class="method-params-label method-subparams-label">Properties</h6> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>fill</code></td> <td class="type"> <span class="param-type">String</span> | <span class="param-type">Object</span> </td> <td class="description last">color for filling graphics<br> <h6 class="method-params-label method-subparams-label">Properties</h6> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>colors</code></td> <td class="type"> <span class="param-type">Array</span> </td> <td class="description last">colors to create a linear gradient fill</td> </tr> <tr> <td class="name"><code>ratios</code></td> <td class="type"> <span class="param-type">Array</span> </td> <td class="description last">color ratios to create a linear gradient fill</td> </tr> <tr> <td class="name"><code>points</code></td> <td class="type"> <span class="param-type">Array</span> </td> <td class="description last">start & stop points to create a linear gradient fill</td> </tr> </tbody> </table> </td> </tr> <tr> <td class="name"><code>stroke</code></td> <td class="type"> <span class="param-type">String</span> | <span class="param-type">Object</span> </td> <td class="description last">stroke options, if string it creates a stroke with size 1 <h6 class="method-params-label method-subparams-label">Properties</h6> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>size</code></td> <td class="type"> <span class="param-type">Number</span> </td> <td class="description last">the size</td> </tr> <tr> <td class="name"><code>color</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last">the color</td> </tr> <tr> <td class="name"><code>radius</code></td> <td class="type"> <span class="param-type">Boolean</span> | <span class="param-type">Number</span> | <span class="param-type">Array</span> </td> <td class="description last"><br>if false it draws a rect <br>if Number it draws a round rect <br>if Array it draws a round rect complex (array has to respect the arguments sequence of drawRoundRectComplex method of DrawJS Graphics class</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="name"><code>bounds</code></td> <td class="type"> <span class="param-type">Arguments</span> </td> <td class="description last">the bounds parameter will be passed to setBounds method of DrawJS Container class<br> so it has to be an array with this sequence<br> <ul> <li>{Number} x</li> <li>{Number} y</li> <li>{Number} width</li> <li>{Number} height</li> </ul></td> </tr> </tbody> </table> <dl class="details"> </dl> <h5>Returns:</h5> <dl> <dt> Type </dt> <dd> <span class="param-type">Shape</span> </dd> </dl> </dd> <hr> <dt> <h4 class="name" id=".createSprite"><span class="type-signature"><static> </span>createSprite(spritesheet)</h4> </dt> <dd> <div class="description"> creates an DrawJS Sprite instance </div> <h5>Parameters:</h5> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>spritesheet</code></td> <td class="type"> <span class="param-type">HTMLElement</span> </td> <td class="description last">the preloaded DOM element representing the sprite</td> </tr> </tbody> </table> <dl class="details"> </dl> <h5>Returns:</h5> <dl> <dt> Type </dt> <dd> <span class="param-type">Sprite</span> </dd> </dl> </dd> <hr> <dt> <h4 class="name" id=".createText"><span class="type-signature"><static> </span>createText(text, font, color)</h4> </dt> <dd> <div class="description"> creates an DrawJS Text instance </div> <h5>Parameters:</h5> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>text</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last">the text to be rendered</td> </tr> <tr> <td class="name"><code>font</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last">font options as expected by the DrawJS Text class</td> </tr> <tr> <td class="name"><code>color</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last">the color of the text</td> </tr> </tbody> </table> <dl class="details"> </dl> <h5>Returns:</h5> <dl> <dt> Type </dt> <dd> <span class="param-type">Text</span> </dd> </dl> </dd> <hr> <dt> <h4 class="name" id=".scale"><span class="type-signature"><static> </span>scale(element, scale)</h4> </dt> <dd> <div class="description"> sets the scale factor of an DrawJS element </div> <h5>Parameters:</h5> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>element</code></td> <td class="type"> <span class="param-type">Object</span> | <span class="param-type">Container</span> | <span class="param-type"><a href="Element.html">Element</a></span> </td> <td class="description last">can be an Object, an DrawJS instance, a CreateJS Core Elements instance</td> </tr> <tr> <td class="name"><code>scale</code></td> <td class="type"> <span class="param-type">Number</span> | <span class="param-type">Object</span> </td> <td class="description last">the scale factor to be used for both scaleX and scaleY</td> </tr> </tbody> </table> <dl class="details"> </dl> <h5>Returns:</h5> <dl> <dt> Type </dt> <dd> <span class="param-type">Object</span> | <span class="param-type">Container</span> | <span class="param-type"><a href="Element.html">Element</a></span> </dd> </dl> </dd> <hr> <dt> <h4 class="name" id=".setBoxSize"><span class="type-signature"><static> </span>setBoxSize(element, width, height, css)</h4> </dt> <dd> <div class="description"> sets the box size of an DrawJS element </div> <h5>Parameters:</h5> <table class="params table table-striped"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>element</code></td> <td class="type"> <span class="param-type">Object</span> | <span class="param-type">Container</span> | <span class="param-type"><a href="Element.html">Element</a></span> </td> <td class="description last">can be an Object, an DrawJS instance, a CreateJS Core Elements instance</td> </tr> <tr> <td class="name"><code>width</code></td> <td class="type"> <span class="param-type">Number</span> </td> <td class="description last">the 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</td> </tr> <tr> <td class="name"><code>css</code></td> <td class="type"> <span class="param-type">Boolean</span> </td> <td class="description last">specity if you want to override also the css box size properties</td> </tr> </tbody> </table> <dl class="details"> </dl> <h5>Returns:</h5> <dl> <dt> Type </dt> <dd> <span class="param-type">Object</span> | <span class="param-type">Container</span> | <span class="param-type"><a href="Element.html">Element</a></span> </dd> </dl> </dd> </dl> </article> </section> </div> </div> <div class="clearfix"></div> <div class="col-md-3"> <div id="toc" class="col-md-3 hidden-xs hidden-sm hidden-md"></div> </div> </div> </div> <div class="modal fade" id="searchResults"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Search results</h4> </div> <div class="modal-body"></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <footer> <span class="copyright"> 2017 © Created by blackmirror1980 </span> <span class="jsdoc-message"> Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a> on 2017-08-22T15:05:31+02:00 using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>. </span> </footer> <script src="scripts/docstrap.lib.js"></script> <script src="scripts/toc.js"></script> <script type="text/javascript" src="scripts/fulltext-search-ui.js"></script> <script> $( function () { $( "[id*='$']" ).each( function () { var $this = $( this ); $this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) ); } ); $( ".tutorial-section pre, .readme-section pre, pre.prettyprint.source" ).each( function () { var $this = $( this ); var example = $this.find( "code" ); exampleText = example.html(); var lang = /{@lang (.*?)}/.exec( exampleText ); if ( lang && lang[1] ) { exampleText = exampleText.replace( lang[0], "" ); example.html( exampleText ); lang = lang[1]; } else { var langClassMatch = example.parent()[0].className.match(/lang\-(\S+)/); lang = langClassMatch ? langClassMatch[1] : "javascript"; } if ( lang ) { $this .addClass( "sunlight-highlight-" + lang ) .addClass( "linenums" ) .html( example.html() ); } } ); Sunlight.highlightAll( { lineNumbers : true, showMenu : true, enableDoclinks : true } ); $.catchAnchorLinks( { navbarOffset: 10 } ); $( "#toc" ).toc( { anchorName : function ( i, heading, prefix ) { return $( heading ).attr( "id" ) || ( prefix + i ); }, selectors : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4", showAndHide : false, smoothScrolling: true } ); $( "#main span[id^='toc']" ).addClass( "toc-shim" ); $( '.dropdown-toggle' ).dropdown(); $( "table" ).each( function () { var $this = $( this ); $this.addClass('table'); } ); } ); </script>   <script type="text/javascript"> $(document).ready(function() { SearcherDisplay.init(); }); </script> </body> </html>