evolve-js
Version:
EvolveJS An Elements framework built over CreateJS
2,930 lines (938 loc) • 33.6 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>EvolveJS Class: SpriteElement</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<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: SpriteElement</h1>
<section>
<header>
<h2>
SpriteElement
</h2>
<div class="class-description">SpriteElement class, extending Element</div>
</header>
<article>
<div class="container-overview">
<hr>
<dt>
<h4 class="name" id="SpriteElement"><span class="type-signature"></span>new SpriteElement(options)</h4>
</dt>
<dd>
<div class="description">
constructs an SpriteElement 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 object to be merged with defaults</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
</div>
<h3 class="subsection-title">Extends</h3>
<ul>
<li><a href="Element.html">Element</a></li>
</ul>
<h3 class="subsection-title">Methods</h3>
<dl>
<hr>
<dt>
<h4 class="name" id="align"><span class="type-signature"></span>align(parentElement, mode)</h4>
</dt>
<dd>
<div class="description">
Aligns the Element instance, based on it's parent bounds or specified parentElement bounds and mode parameter
</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>parentElement</code></td>
<td class="type">
<span class="param-type">Object</span>
|
<span class="param-type">null</span>
</td>
<td class="description last">if null, it considers the actual Element instance parent, otherwise it aligns in base of the specified parentElement</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 set of one or two strings (blank separated) in any order, for horizontalModes (left, center, right), for verticalModes (top, middle, bottom)</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from method-doc-label method-doc-details-label">Inherited From:</dt>
<dd class="inherited-from">
<ul class="dummy">
<li>
<a href="Element.html#align">Element#align</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
to make chainable the method
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Element.html">Element</a></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="animate"><span class="type-signature"></span>animate(options)</h4>
</dt>
<dd>
<div class="description">
animates the sprite
</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 animate options including<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>animationName</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">the animation name in the spritesheet json to start</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="name"><code></code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last"></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="SpriteElement.html">SpriteElement</a></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="bindEvents"><span class="type-signature"></span>bindEvents()</h4>
</dt>
<dd>
<div class="description">
binds all events specified in the settings object for the Element instance, it supports all DrawJS classes events (eg. click, mouseover, etc...)
</div>
<dl class="details">
<dt class="inherited-from method-doc-label method-doc-details-label">Inherited From:</dt>
<dd class="inherited-from">
<ul class="dummy">
<li>
<a href="Element.html#bindEvents">Element#bindEvents</a>
</li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="draw"><span class="type-signature"></span>draw()</h4>
</dt>
<dd>
<div class="description">
draws all graphic elements of the Element instance
</div>
<dl class="details">
<dt class="inherited-from method-doc-label method-doc-details-label">Inherited From:</dt>
<dd class="inherited-from">
<ul class="dummy">
<li>
<a href="Element.html#draw">Element#draw</a>
</li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="drawElements"><span class="type-signature"></span>drawElements()</h4>
</dt>
<dd>
<div class="description">
draws all graphic elements of the SpriteElement instance
</div>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="getComputedBounds"><span class="type-signature"></span>getComputedBounds()</h4>
</dt>
<dd>
<div class="description">
returns the actual computed bounds of the Element instance, including scale factor and top, right, bottom, left coordinates
</div>
<dl class="details">
<dt class="inherited-from method-doc-label method-doc-details-label">Inherited From:</dt>
<dd class="inherited-from">
<ul class="dummy">
<li>
<a href="Element.html#getComputedBounds">Element#getComputedBounds</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
the actual Element instance computed bounds object<br>
<pre>
{
{
top: number,
right: number,
bottom: number,
left: number,
x: number,
y: number,
width: number,
height: number
}
}
</pre>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="init"><span class="type-signature"></span>init()</h4>
</dt>
<dd>
<div class="description">
empty init method, to be overriden in classes that extends Element, to use for all those initializations you might need after having rendered the Element
</div>
<dl class="details">
<dt class="inherited-from method-doc-label method-doc-details-label">Inherited From:</dt>
<dd class="inherited-from">
<ul class="dummy">
<li>
<a href="Element.html#init">Element#init</a>
</li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="initData"><span class="type-signature"></span>initData()</h4>
</dt>
<dd>
<div class="description">
initializes data object for the Element instance
</div>
<dl class="details">
<dt class="inherited-from method-doc-label method-doc-details-label">Inherited From:</dt>
<dd class="inherited-from">
<ul class="dummy">
<li>
<a href="Element.html#initData">Element#initData</a>
</li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="initDefaults"><span class="type-signature"></span>initDefaults()</h4>
</dt>
<dd>
<div class="description">
Initialize default settings for SpriteElement
</div>
<dl class="details">
<dt class="tag-overrides">Overrides:</dt>
<dd class="tag-overrides"><ul class="dummy"><li>
<a href="Element.html#initDefaults">Element#initDefaults</a>
</li></ul></dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="initSettings"><span class="type-signature"></span>initSettings(options)</h4>
</dt>
<dd>
<div class="description">
initializes settings object for the Element 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 object to be merged with defaults</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from method-doc-label method-doc-details-label">Inherited From:</dt>
<dd class="inherited-from">
<ul class="dummy">
<li>
<a href="Element.html#initSettings">Element#initSettings</a>
</li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="setCache"><span class="type-signature"></span>setCache(cacheOptions, force)</h4>
</dt>
<dd>
<div class="description">
sets or updates the Cache of the Element 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>cacheOptions</code></td>
<td class="type">
<span class="param-type">Object</span>
|
<span class="param-type">Shadow</span>
</td>
<td class="description last">..</td>
</tr>
<tr>
<td class="name"><code>force</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="description last">....</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from method-doc-label method-doc-details-label">Inherited From:</dt>
<dd class="inherited-from">
<ul class="dummy">
<li>
<a href="Element.html#setCache">Element#setCache</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
to make chainable the method
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Element.html">Element</a></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="setComputedBounds"><span class="type-signature"></span>setComputedBounds(boundsOptions)</h4>
</dt>
<dd>
<div class="description">
sets or updates the bounds of the Element 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>boundsOptions</code></td>
<td class="type">
<span class="param-type">Object</span>
|
<span class="param-type">Number</span>
</td>
<td class="description last">...</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from method-doc-label method-doc-details-label">Inherited From:</dt>
<dd class="inherited-from">
<ul class="dummy">
<li>
<a href="Element.html#setComputedBounds">Element#setComputedBounds</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
to make chainable the method
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Element.html">Element</a></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="setMask"><span class="type-signature"></span>setMask(maskOptions, force)</h4>
</dt>
<dd>
<div class="description">
sets or updates the Mask of the Element 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>maskOptions</code></td>
<td class="type">
<span class="param-type">Object</span>
|
<span class="param-type">Shadow</span>
</td>
<td class="description last">can be an object with {color, x, y, blur}<br>or directly an instance of Shadow (DrawJS)</td>
</tr>
<tr>
<td class="name"><code>force</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="description last">....</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from method-doc-label method-doc-details-label">Inherited From:</dt>
<dd class="inherited-from">
<ul class="dummy">
<li>
<a href="Element.html#setMask">Element#setMask</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
to make chainable the method
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Element.html">Element</a></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="setPosition"><span class="type-signature"></span>setPosition( [positionOptions] [, override] [, force])</h4>
</dt>
<dd>
<div class="description">
sets or updates the position of the Element instance
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>positionOptions</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
null
</td>
<td class="description last">can contain x and y or only one or them
<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>Argument</th>
<th>Default</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="attributes">
<optional><br>
</td>
<td class="default">
0
</td>
<td class="description last">the x position</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
0
</td>
<td class="description last">the y position</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="name"><code>override</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">specify to override actual Element position</td>
</tr>
<tr>
<td class="name"><code>force</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">...</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from method-doc-label method-doc-details-label">Inherited From:</dt>
<dd class="inherited-from">
<ul class="dummy">
<li>
<a href="Element.html#setPosition">Element#setPosition</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
to make chainable the method
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Element.html">Element</a></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="setReg"><span class="type-signature"></span>setReg()</h4>
</dt>
<dd>
<div class="description">
sets to center/middle the regPoint of the Element instance
</div>
<dl class="details">
<dt class="inherited-from method-doc-label method-doc-details-label">Inherited From:</dt>
<dd class="inherited-from">
<ul class="dummy">
<li>
<a href="Element.html#setReg">Element#setReg</a>
</li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="setScale"><span class="type-signature"></span>setScale(scaleOptions)</h4>
</dt>
<dd>
<div class="description">
sets or updates the scaling of the Element 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>scaleOptions</code></td>
<td class="type">
<span class="param-type">Object</span>
|
<span class="param-type">Number</span>
</td>
<td class="description last">can be an object with x and y couple or only a number to be used for both</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from method-doc-label method-doc-details-label">Inherited From:</dt>
<dd class="inherited-from">
<ul class="dummy">
<li>
<a href="Element.html#setScale">Element#setScale</a>
</li>
</ul>
</dd>
<dt class="tag-overrides">Overrides:</dt>
<dd class="tag-overrides"><ul class="dummy"><li>
<a href="Element.html#setScale">Element#setScale</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
to make chainable the method
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Element.html">Element</a></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="setShadow"><span class="type-signature"></span>setShadow(shadowOptions, force)</h4>
</dt>
<dd>
<div class="description">
sets or updates the Shadow of the Element 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>shadowOptions</code></td>
<td class="type">
<span class="param-type">Object</span>
|
<span class="param-type">Shadow</span>
</td>
<td class="description last">can be an object with {color, x, y, blur}<br>or directly an instance of Shadow (DrawJS)</td>
</tr>
<tr>
<td class="name"><code>force</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="description last">....</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from method-doc-label method-doc-details-label">Inherited From:</dt>
<dd class="inherited-from">
<ul class="dummy">
<li>
<a href="Element.html#setShadow">Element#setShadow</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
to make chainable the method
</div>
<dl>
<dt>
Type
</dt>
<dd>
<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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</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:32+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>
<!--Navigation and Symbol Display-->
<!--Google Analytics-->
<script type="text/javascript">
$(document).ready(function() {
SearcherDisplay.init();
});
</script>
</body>
</html>