Path: blob/main/projects/basketball-stars/assets/box2dweb/easeljs-0.8.2.combined.js
4627 views
/*!1* EaselJS2* Visit http://createjs.com/ for documentation, updates and examples.3*4* Copyright (c) 2010 gskinner.com, inc.5*6* Permission is hereby granted, free of charge, to any person7* obtaining a copy of this software and associated documentation8* files (the "Software"), to deal in the Software without9* restriction, including without limitation the rights to use,10* copy, modify, merge, publish, distribute, sublicense, and/or sell11* copies of the Software, and to permit persons to whom the12* Software is furnished to do so, subject to the following13* conditions:14*15* The above copyright notice and this permission notice shall be16* included in all copies or substantial portions of the Software.17*18* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,19* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES20* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND21* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT22* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,23* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING24* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR25* OTHER DEALINGS IN THE SOFTWARE.26*/272829//##############################################################################30// extend.js31//##############################################################################3233this.createjs = this.createjs||{};3435/**36* @class Utility Methods37*/3839/**40* Sets up the prototype chain and constructor property for a new class.41*42* This should be called right after creating the class constructor.43*44* function MySubClass() {}45* createjs.extend(MySubClass, MySuperClass);46* MySubClass.prototype.doSomething = function() { }47*48* var foo = new MySubClass();49* console.log(foo instanceof MySuperClass); // true50* console.log(foo.prototype.constructor === MySubClass); // true51*52* @method extend53* @param {Function} subclass The subclass.54* @param {Function} superclass The superclass to extend.55* @return {Function} Returns the subclass's new prototype.56*/57createjs.extend = function(subclass, superclass) {58"use strict";5960function o() { this.constructor = subclass; }61o.prototype = superclass.prototype;62return (subclass.prototype = new o());63};6465//##############################################################################66// promote.js67//##############################################################################6869this.createjs = this.createjs||{};7071/**72* @class Utility Methods73*/7475/**76* Promotes any methods on the super class that were overridden, by creating an alias in the format `prefix_methodName`.77* It is recommended to use the super class's name as the prefix.78* An alias to the super class's constructor is always added in the format `prefix_constructor`.79* This allows the subclass to call super class methods without using `function.call`, providing better performance.80*81* For example, if `MySubClass` extends `MySuperClass`, and both define a `draw` method, then calling `promote(MySubClass, "MySuperClass")`82* would add a `MySuperClass_constructor` method to MySubClass and promote the `draw` method on `MySuperClass` to the83* prototype of `MySubClass` as `MySuperClass_draw`.84*85* This should be called after the class's prototype is fully defined.86*87* function ClassA(name) {88* this.name = name;89* }90* ClassA.prototype.greet = function() {91* return "Hello "+this.name;92* }93*94* function ClassB(name, punctuation) {95* this.ClassA_constructor(name);96* this.punctuation = punctuation;97* }98* createjs.extend(ClassB, ClassA);99* ClassB.prototype.greet = function() {100* return this.ClassA_greet()+this.punctuation;101* }102* createjs.promote(ClassB, "ClassA");103*104* var foo = new ClassB("World", "!?!");105* console.log(foo.greet()); // Hello World!?!106*107* @method promote108* @param {Function} subclass The class to promote super class methods on.109* @param {String} prefix The prefix to add to the promoted method names. Usually the name of the superclass.110* @return {Function} Returns the subclass.111*/112createjs.promote = function(subclass, prefix) {113"use strict";114115var subP = subclass.prototype, supP = (Object.getPrototypeOf&&Object.getPrototypeOf(subP))||subP.__proto__;116if (supP) {117subP[(prefix+="_") + "constructor"] = supP.constructor; // constructor is not always innumerable118for (var n in supP) {119if (subP.hasOwnProperty(n) && (typeof supP[n] == "function")) { subP[prefix + n] = supP[n]; }120}121}122return subclass;123};124125//##############################################################################126// indexOf.js127//##############################################################################128129this.createjs = this.createjs||{};130131/**132* @class Utility Methods133*/134135/**136* Finds the first occurrence of a specified value searchElement in the passed in array, and returns the index of137* that value. Returns -1 if value is not found.138*139* var i = createjs.indexOf(myArray, myElementToFind);140*141* @method indexOf142* @param {Array} array Array to search for searchElement143* @param searchElement Element to find in array.144* @return {Number} The first index of searchElement in array.145*/146createjs.indexOf = function (array, searchElement){147"use strict";148149for (var i = 0,l=array.length; i < l; i++) {150if (searchElement === array[i]) {151return i;152}153}154return -1;155};156157//##############################################################################158// Event.js159//##############################################################################160161this.createjs = this.createjs||{};162163(function() {164"use strict";165166// constructor:167/**168* Contains properties and methods shared by all events for use with169* {{#crossLink "EventDispatcher"}}{{/crossLink}}.170*171* Note that Event objects are often reused, so you should never172* rely on an event object's state outside of the call stack it was received in.173* @class Event174* @param {String} type The event type.175* @param {Boolean} bubbles Indicates whether the event will bubble through the display list.176* @param {Boolean} cancelable Indicates whether the default behaviour of this event can be cancelled.177* @constructor178**/179function Event(type, bubbles, cancelable) {180181182// public properties:183/**184* The type of event.185* @property type186* @type String187**/188this.type = type;189190/**191* The object that generated an event.192* @property target193* @type Object194* @default null195* @readonly196*/197this.target = null;198199/**200* The current target that a bubbling event is being dispatched from. For non-bubbling events, this will201* always be the same as target. For example, if childObj.parent = parentObj, and a bubbling event202* is generated from childObj, then a listener on parentObj would receive the event with203* target=childObj (the original target) and currentTarget=parentObj (where the listener was added).204* @property currentTarget205* @type Object206* @default null207* @readonly208*/209this.currentTarget = null;210211/**212* For bubbling events, this indicates the current event phase:<OL>213* <LI> capture phase: starting from the top parent to the target</LI>214* <LI> at target phase: currently being dispatched from the target</LI>215* <LI> bubbling phase: from the target to the top parent</LI>216* </OL>217* @property eventPhase218* @type Number219* @default 0220* @readonly221*/222this.eventPhase = 0;223224/**225* Indicates whether the event will bubble through the display list.226* @property bubbles227* @type Boolean228* @default false229* @readonly230*/231this.bubbles = !!bubbles;232233/**234* Indicates whether the default behaviour of this event can be cancelled via235* {{#crossLink "Event/preventDefault"}}{{/crossLink}}. This is set via the Event constructor.236* @property cancelable237* @type Boolean238* @default false239* @readonly240*/241this.cancelable = !!cancelable;242243/**244* The epoch time at which this event was created.245* @property timeStamp246* @type Number247* @default 0248* @readonly249*/250this.timeStamp = (new Date()).getTime();251252/**253* Indicates if {{#crossLink "Event/preventDefault"}}{{/crossLink}} has been called254* on this event.255* @property defaultPrevented256* @type Boolean257* @default false258* @readonly259*/260this.defaultPrevented = false;261262/**263* Indicates if {{#crossLink "Event/stopPropagation"}}{{/crossLink}} or264* {{#crossLink "Event/stopImmediatePropagation"}}{{/crossLink}} has been called on this event.265* @property propagationStopped266* @type Boolean267* @default false268* @readonly269*/270this.propagationStopped = false;271272/**273* Indicates if {{#crossLink "Event/stopImmediatePropagation"}}{{/crossLink}} has been called274* on this event.275* @property immediatePropagationStopped276* @type Boolean277* @default false278* @readonly279*/280this.immediatePropagationStopped = false;281282/**283* Indicates if {{#crossLink "Event/remove"}}{{/crossLink}} has been called on this event.284* @property removed285* @type Boolean286* @default false287* @readonly288*/289this.removed = false;290}291var p = Event.prototype;292293/**294* <strong>REMOVED</strong>. Removed in favor of using `MySuperClass_constructor`.295* See {{#crossLink "Utility Methods/extend"}}{{/crossLink}} and {{#crossLink "Utility Methods/promote"}}{{/crossLink}}296* for details.297*298* There is an inheritance tutorial distributed with EaselJS in /tutorials/Inheritance.299*300* @method initialize301* @protected302* @deprecated303*/304// p.initialize = function() {}; // searchable for devs wondering where it is.305306// public methods:307/**308* Sets {{#crossLink "Event/defaultPrevented"}}{{/crossLink}} to true if the event is cancelable.309* Mirrors the DOM level 2 event standard. In general, cancelable events that have `preventDefault()` called will310* cancel the default behaviour associated with the event.311* @method preventDefault312**/313p.preventDefault = function() {314this.defaultPrevented = this.cancelable&&true;315};316317/**318* Sets {{#crossLink "Event/propagationStopped"}}{{/crossLink}} to true.319* Mirrors the DOM event standard.320* @method stopPropagation321**/322p.stopPropagation = function() {323this.propagationStopped = true;324};325326/**327* Sets {{#crossLink "Event/propagationStopped"}}{{/crossLink}} and328* {{#crossLink "Event/immediatePropagationStopped"}}{{/crossLink}} to true.329* Mirrors the DOM event standard.330* @method stopImmediatePropagation331**/332p.stopImmediatePropagation = function() {333this.immediatePropagationStopped = this.propagationStopped = true;334};335336/**337* Causes the active listener to be removed via removeEventListener();338*339* myBtn.addEventListener("click", function(evt) {340* // do stuff...341* evt.remove(); // removes this listener.342* });343*344* @method remove345**/346p.remove = function() {347this.removed = true;348};349350/**351* Returns a clone of the Event instance.352* @method clone353* @return {Event} a clone of the Event instance.354**/355p.clone = function() {356return new Event(this.type, this.bubbles, this.cancelable);357};358359/**360* Provides a chainable shortcut method for setting a number of properties on the instance.361*362* @method set363* @param {Object} props A generic object containing properties to copy to the instance.364* @return {Event} Returns the instance the method is called on (useful for chaining calls.)365* @chainable366*/367p.set = function(props) {368for (var n in props) { this[n] = props[n]; }369return this;370};371372/**373* Returns a string representation of this object.374* @method toString375* @return {String} a string representation of the instance.376**/377p.toString = function() {378return "[Event (type="+this.type+")]";379};380381createjs.Event = Event;382}());383384//##############################################################################385// EventDispatcher.js386//##############################################################################387388this.createjs = this.createjs||{};389390(function() {391"use strict";392393394// constructor:395/**396* EventDispatcher provides methods for managing queues of event listeners and dispatching events.397*398* You can either extend EventDispatcher or mix its methods into an existing prototype or instance by using the399* EventDispatcher {{#crossLink "EventDispatcher/initialize"}}{{/crossLink}} method.400*401* Together with the CreateJS Event class, EventDispatcher provides an extended event model that is based on the402* DOM Level 2 event model, including addEventListener, removeEventListener, and dispatchEvent. It supports403* bubbling / capture, preventDefault, stopPropagation, stopImmediatePropagation, and handleEvent.404*405* EventDispatcher also exposes a {{#crossLink "EventDispatcher/on"}}{{/crossLink}} method, which makes it easier406* to create scoped listeners, listeners that only run once, and listeners with associated arbitrary data. The407* {{#crossLink "EventDispatcher/off"}}{{/crossLink}} method is merely an alias to408* {{#crossLink "EventDispatcher/removeEventListener"}}{{/crossLink}}.409*410* Another addition to the DOM Level 2 model is the {{#crossLink "EventDispatcher/removeAllEventListeners"}}{{/crossLink}}411* method, which can be used to listeners for all events, or listeners for a specific event. The Event object also412* includes a {{#crossLink "Event/remove"}}{{/crossLink}} method which removes the active listener.413*414* <h4>Example</h4>415* Add EventDispatcher capabilities to the "MyClass" class.416*417* EventDispatcher.initialize(MyClass.prototype);418*419* Add an event (see {{#crossLink "EventDispatcher/addEventListener"}}{{/crossLink}}).420*421* instance.addEventListener("eventName", handlerMethod);422* function handlerMethod(event) {423* console.log(event.target + " Was Clicked");424* }425*426* <b>Maintaining proper scope</b><br />427* Scope (ie. "this") can be be a challenge with events. Using the {{#crossLink "EventDispatcher/on"}}{{/crossLink}}428* method to subscribe to events simplifies this.429*430* instance.addEventListener("click", function(event) {431* console.log(instance == this); // false, scope is ambiguous.432* });433*434* instance.on("click", function(event) {435* console.log(instance == this); // true, "on" uses dispatcher scope by default.436* });437*438* If you want to use addEventListener instead, you may want to use function.bind() or a similar proxy to manage439* scope.440*441* <b>Browser support</b>442* The event model in CreateJS can be used separately from the suite in any project, however the inheritance model443* requires modern browsers (IE9+).444*445*446* @class EventDispatcher447* @constructor448**/449function EventDispatcher() {450451452// private properties:453/**454* @protected455* @property _listeners456* @type Object457**/458this._listeners = null;459460/**461* @protected462* @property _captureListeners463* @type Object464**/465this._captureListeners = null;466}467var p = EventDispatcher.prototype;468469/**470* <strong>REMOVED</strong>. Removed in favor of using `MySuperClass_constructor`.471* See {{#crossLink "Utility Methods/extend"}}{{/crossLink}} and {{#crossLink "Utility Methods/promote"}}{{/crossLink}}472* for details.473*474* There is an inheritance tutorial distributed with EaselJS in /tutorials/Inheritance.475*476* @method initialize477* @protected478* @deprecated479*/480// p.initialize = function() {}; // searchable for devs wondering where it is.481482483// static public methods:484/**485* Static initializer to mix EventDispatcher methods into a target object or prototype.486*487* EventDispatcher.initialize(MyClass.prototype); // add to the prototype of the class488* EventDispatcher.initialize(myObject); // add to a specific instance489*490* @method initialize491* @static492* @param {Object} target The target object to inject EventDispatcher methods into. This can be an instance or a493* prototype.494**/495EventDispatcher.initialize = function(target) {496target.addEventListener = p.addEventListener;497target.on = p.on;498target.removeEventListener = target.off = p.removeEventListener;499target.removeAllEventListeners = p.removeAllEventListeners;500target.hasEventListener = p.hasEventListener;501target.dispatchEvent = p.dispatchEvent;502target._dispatchEvent = p._dispatchEvent;503target.willTrigger = p.willTrigger;504};505506507// public methods:508/**509* Adds the specified event listener. Note that adding multiple listeners to the same function will result in510* multiple callbacks getting fired.511*512* <h4>Example</h4>513*514* displayObject.addEventListener("click", handleClick);515* function handleClick(event) {516* // Click happened.517* }518*519* @method addEventListener520* @param {String} type The string type of the event.521* @param {Function | Object} listener An object with a handleEvent method, or a function that will be called when522* the event is dispatched.523* @param {Boolean} [useCapture] For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.524* @return {Function | Object} Returns the listener for chaining or assignment.525**/526p.addEventListener = function(type, listener, useCapture) {527var listeners;528if (useCapture) {529listeners = this._captureListeners = this._captureListeners||{};530} else {531listeners = this._listeners = this._listeners||{};532}533var arr = listeners[type];534if (arr) { this.removeEventListener(type, listener, useCapture); }535arr = listeners[type]; // remove may have deleted the array536if (!arr) { listeners[type] = [listener]; }537else { arr.push(listener); }538return listener;539};540541/**542* A shortcut method for using addEventListener that makes it easier to specify an execution scope, have a listener543* only run once, associate arbitrary data with the listener, and remove the listener.544*545* This method works by creating an anonymous wrapper function and subscribing it with addEventListener.546* The wrapper function is returned for use with `removeEventListener` (or `off`).547*548* <b>IMPORTANT:</b> To remove a listener added with `on`, you must pass in the returned wrapper function as the listener, or use549* {{#crossLink "Event/remove"}}{{/crossLink}}. Likewise, each time you call `on` a NEW wrapper function is subscribed, so multiple calls550* to `on` with the same params will create multiple listeners.551*552* <h4>Example</h4>553*554* var listener = myBtn.on("click", handleClick, null, false, {count:3});555* function handleClick(evt, data) {556* data.count -= 1;557* console.log(this == myBtn); // true - scope defaults to the dispatcher558* if (data.count == 0) {559* alert("clicked 3 times!");560* myBtn.off("click", listener);561* // alternately: evt.remove();562* }563* }564*565* @method on566* @param {String} type The string type of the event.567* @param {Function | Object} listener An object with a handleEvent method, or a function that will be called when568* the event is dispatched.569* @param {Object} [scope] The scope to execute the listener in. Defaults to the dispatcher/currentTarget for function listeners, and to the listener itself for object listeners (ie. using handleEvent).570* @param {Boolean} [once=false] If true, the listener will remove itself after the first time it is triggered.571* @param {*} [data] Arbitrary data that will be included as the second parameter when the listener is called.572* @param {Boolean} [useCapture=false] For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.573* @return {Function} Returns the anonymous function that was created and assigned as the listener. This is needed to remove the listener later using .removeEventListener.574**/575p.on = function(type, listener, scope, once, data, useCapture) {576if (listener.handleEvent) {577scope = scope||listener;578listener = listener.handleEvent;579}580scope = scope||this;581return this.addEventListener(type, function(evt) {582listener.call(scope, evt, data);583once&&evt.remove();584}, useCapture);585};586587/**588* Removes the specified event listener.589*590* <b>Important Note:</b> that you must pass the exact function reference used when the event was added. If a proxy591* function, or function closure is used as the callback, the proxy/closure reference must be used - a new proxy or592* closure will not work.593*594* <h4>Example</h4>595*596* displayObject.removeEventListener("click", handleClick);597*598* @method removeEventListener599* @param {String} type The string type of the event.600* @param {Function | Object} listener The listener function or object.601* @param {Boolean} [useCapture] For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.602**/603p.removeEventListener = function(type, listener, useCapture) {604var listeners = useCapture ? this._captureListeners : this._listeners;605if (!listeners) { return; }606var arr = listeners[type];607if (!arr) { return; }608for (var i=0,l=arr.length; i<l; i++) {609if (arr[i] == listener) {610if (l==1) { delete(listeners[type]); } // allows for faster checks.611else { arr.splice(i,1); }612break;613}614}615};616617/**618* A shortcut to the removeEventListener method, with the same parameters and return value. This is a companion to the619* .on method.620*621* <b>IMPORTANT:</b> To remove a listener added with `on`, you must pass in the returned wrapper function as the listener. See622* {{#crossLink "EventDispatcher/on"}}{{/crossLink}} for an example.623*624* @method off625* @param {String} type The string type of the event.626* @param {Function | Object} listener The listener function or object.627* @param {Boolean} [useCapture] For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.628**/629p.off = p.removeEventListener;630631/**632* Removes all listeners for the specified type, or all listeners of all types.633*634* <h4>Example</h4>635*636* // Remove all listeners637* displayObject.removeAllEventListeners();638*639* // Remove all click listeners640* displayObject.removeAllEventListeners("click");641*642* @method removeAllEventListeners643* @param {String} [type] The string type of the event. If omitted, all listeners for all types will be removed.644**/645p.removeAllEventListeners = function(type) {646if (!type) { this._listeners = this._captureListeners = null; }647else {648if (this._listeners) { delete(this._listeners[type]); }649if (this._captureListeners) { delete(this._captureListeners[type]); }650}651};652653/**654* Dispatches the specified event to all listeners.655*656* <h4>Example</h4>657*658* // Use a string event659* this.dispatchEvent("complete");660*661* // Use an Event instance662* var event = new createjs.Event("progress");663* this.dispatchEvent(event);664*665* @method dispatchEvent666* @param {Object | String | Event} eventObj An object with a "type" property, or a string type.667* While a generic object will work, it is recommended to use a CreateJS Event instance. If a string is used,668* dispatchEvent will construct an Event instance if necessary with the specified type. This latter approach can669* be used to avoid event object instantiation for non-bubbling events that may not have any listeners.670* @param {Boolean} [bubbles] Specifies the `bubbles` value when a string was passed to eventObj.671* @param {Boolean} [cancelable] Specifies the `cancelable` value when a string was passed to eventObj.672* @return {Boolean} Returns false if `preventDefault()` was called on a cancelable event, true otherwise.673**/674p.dispatchEvent = function(eventObj, bubbles, cancelable) {675if (typeof eventObj == "string") {676// skip everything if there's no listeners and it doesn't bubble:677var listeners = this._listeners;678if (!bubbles && (!listeners || !listeners[eventObj])) { return true; }679eventObj = new createjs.Event(eventObj, bubbles, cancelable);680} else if (eventObj.target && eventObj.clone) {681// redispatching an active event object, so clone it:682eventObj = eventObj.clone();683}684685// TODO: it would be nice to eliminate this. Maybe in favour of evtObj instanceof Event? Or !!evtObj.createEvent686try { eventObj.target = this; } catch (e) {} // try/catch allows redispatching of native events687688if (!eventObj.bubbles || !this.parent) {689this._dispatchEvent(eventObj, 2);690} else {691var top=this, list=[top];692while (top.parent) { list.push(top = top.parent); }693var i, l=list.length;694695// capture & atTarget696for (i=l-1; i>=0 && !eventObj.propagationStopped; i--) {697list[i]._dispatchEvent(eventObj, 1+(i==0));698}699// bubbling700for (i=1; i<l && !eventObj.propagationStopped; i++) {701list[i]._dispatchEvent(eventObj, 3);702}703}704return !eventObj.defaultPrevented;705};706707/**708* Indicates whether there is at least one listener for the specified event type.709* @method hasEventListener710* @param {String} type The string type of the event.711* @return {Boolean} Returns true if there is at least one listener for the specified event.712**/713p.hasEventListener = function(type) {714var listeners = this._listeners, captureListeners = this._captureListeners;715return !!((listeners && listeners[type]) || (captureListeners && captureListeners[type]));716};717718/**719* Indicates whether there is at least one listener for the specified event type on this object or any of its720* ancestors (parent, parent's parent, etc). A return value of true indicates that if a bubbling event of the721* specified type is dispatched from this object, it will trigger at least one listener.722*723* This is similar to {{#crossLink "EventDispatcher/hasEventListener"}}{{/crossLink}}, but it searches the entire724* event flow for a listener, not just this object.725* @method willTrigger726* @param {String} type The string type of the event.727* @return {Boolean} Returns `true` if there is at least one listener for the specified event.728**/729p.willTrigger = function(type) {730var o = this;731while (o) {732if (o.hasEventListener(type)) { return true; }733o = o.parent;734}735return false;736};737738/**739* @method toString740* @return {String} a string representation of the instance.741**/742p.toString = function() {743return "[EventDispatcher]";744};745746747// private methods:748/**749* @method _dispatchEvent750* @param {Object | String | Event} eventObj751* @param {Object} eventPhase752* @protected753**/754p._dispatchEvent = function(eventObj, eventPhase) {755var l, listeners = (eventPhase==1) ? this._captureListeners : this._listeners;756if (eventObj && listeners) {757var arr = listeners[eventObj.type];758if (!arr||!(l=arr.length)) { return; }759try { eventObj.currentTarget = this; } catch (e) {}760try { eventObj.eventPhase = eventPhase; } catch (e) {}761eventObj.removed = false;762763arr = arr.slice(); // to avoid issues with items being removed or added during the dispatch764for (var i=0; i<l && !eventObj.immediatePropagationStopped; i++) {765var o = arr[i];766if (o.handleEvent) { o.handleEvent(eventObj); }767else { o(eventObj); }768if (eventObj.removed) {769this.off(eventObj.type, o, eventPhase==1);770eventObj.removed = false;771}772}773}774};775776777createjs.EventDispatcher = EventDispatcher;778}());779780//##############################################################################781// Ticker.js782//##############################################################################783784this.createjs = this.createjs||{};785786(function() {787"use strict";788789790// constructor:791/**792* The Ticker provides a centralized tick or heartbeat broadcast at a set interval. Listeners can subscribe to the tick793* event to be notified when a set time interval has elapsed.794*795* Note that the interval that the tick event is called is a target interval, and may be broadcast at a slower interval796* when under high CPU load. The Ticker class uses a static interface (ex. `Ticker.framerate = 30;`) and797* can not be instantiated.798*799* <h4>Example</h4>800*801* createjs.Ticker.addEventListener("tick", handleTick);802* function handleTick(event) {803* // Actions carried out each tick (aka frame)804* if (!event.paused) {805* // Actions carried out when the Ticker is not paused.806* }807* }808*809* @class Ticker810* @uses EventDispatcher811* @static812**/813function Ticker() {814throw "Ticker cannot be instantiated.";815}816817818// constants:819/**820* In this mode, Ticker uses the requestAnimationFrame API, but attempts to synch the ticks to target framerate. It821* uses a simple heuristic that compares the time of the RAF return to the target time for the current frame and822* dispatches the tick when the time is within a certain threshold.823*824* This mode has a higher variance for time between frames than {{#crossLink "Ticker/TIMEOUT:property"}}{{/crossLink}},825* but does not require that content be time based as with {{#crossLink "Ticker/RAF:property"}}{{/crossLink}} while826* gaining the benefits of that API (screen synch, background throttling).827*828* Variance is usually lowest for framerates that are a divisor of the RAF frequency. This is usually 60, so829* framerates of 10, 12, 15, 20, and 30 work well.830*831* Falls back to {{#crossLink "Ticker/TIMEOUT:property"}}{{/crossLink}} if the requestAnimationFrame API is not832* supported.833* @property RAF_SYNCHED834* @static835* @type {String}836* @default "synched"837* @readonly838**/839Ticker.RAF_SYNCHED = "synched";840841/**842* In this mode, Ticker passes through the requestAnimationFrame heartbeat, ignoring the target framerate completely.843* Because requestAnimationFrame frequency is not deterministic, any content using this mode should be time based.844* You can leverage {{#crossLink "Ticker/getTime"}}{{/crossLink}} and the {{#crossLink "Ticker/tick:event"}}{{/crossLink}}845* event object's "delta" properties to make this easier.846*847* Falls back on {{#crossLink "Ticker/TIMEOUT:property"}}{{/crossLink}} if the requestAnimationFrame API is not848* supported.849* @property RAF850* @static851* @type {String}852* @default "raf"853* @readonly854**/855Ticker.RAF = "raf";856857/**858* In this mode, Ticker uses the setTimeout API. This provides predictable, adaptive frame timing, but does not859* provide the benefits of requestAnimationFrame (screen synch, background throttling).860* @property TIMEOUT861* @static862* @type {String}863* @default "timeout"864* @readonly865**/866Ticker.TIMEOUT = "timeout";867868869// static events:870/**871* Dispatched each tick. The event will be dispatched to each listener even when the Ticker has been paused using872* {{#crossLink "Ticker/setPaused"}}{{/crossLink}}.873*874* <h4>Example</h4>875*876* createjs.Ticker.addEventListener("tick", handleTick);877* function handleTick(event) {878* console.log("Paused:", event.paused, event.delta);879* }880*881* @event tick882* @param {Object} target The object that dispatched the event.883* @param {String} type The event type.884* @param {Boolean} paused Indicates whether the ticker is currently paused.885* @param {Number} delta The time elapsed in ms since the last tick.886* @param {Number} time The total time in ms since Ticker was initialized.887* @param {Number} runTime The total time in ms that Ticker was not paused since it was initialized. For example,888* you could determine the amount of time that the Ticker has been paused since initialization with `time-runTime`.889* @since 0.6.0890*/891892893// public static properties:894/**895* Deprecated in favour of {{#crossLink "Ticker/timingMode"}}{{/crossLink}}, and will be removed in a future version. If true, timingMode will896* use {{#crossLink "Ticker/RAF_SYNCHED"}}{{/crossLink}} by default.897* @deprecated Deprecated in favour of {{#crossLink "Ticker/timingMode"}}{{/crossLink}}.898* @property useRAF899* @static900* @type {Boolean}901* @default false902**/903Ticker.useRAF = false;904905/**906* Specifies the timing api (setTimeout or requestAnimationFrame) and mode to use. See907* {{#crossLink "Ticker/TIMEOUT"}}{{/crossLink}}, {{#crossLink "Ticker/RAF"}}{{/crossLink}}, and908* {{#crossLink "Ticker/RAF_SYNCHED"}}{{/crossLink}} for mode details.909* @property timingMode910* @static911* @type {String}912* @default Ticker.TIMEOUT913**/914Ticker.timingMode = null;915916/**917* Specifies a maximum value for the delta property in the tick event object. This is useful when building time918* based animations and systems to prevent issues caused by large time gaps caused by background tabs, system sleep,919* alert dialogs, or other blocking routines. Double the expected frame duration is often an effective value920* (ex. maxDelta=50 when running at 40fps).921*922* This does not impact any other values (ex. time, runTime, etc), so you may experience issues if you enable maxDelta923* when using both delta and other values.924*925* If 0, there is no maximum.926* @property maxDelta927* @static928* @type {number}929* @default 0930*/931Ticker.maxDelta = 0;932933/**934* When the ticker is paused, all listeners will still receive a tick event, but the <code>paused</code> property935* of the event will be `true`. Also, while paused the `runTime` will not increase. See {{#crossLink "Ticker/tick:event"}}{{/crossLink}},936* {{#crossLink "Ticker/getTime"}}{{/crossLink}}, and {{#crossLink "Ticker/getEventTime"}}{{/crossLink}} for more937* info.938*939* <h4>Example</h4>940*941* createjs.Ticker.addEventListener("tick", handleTick);942* createjs.Ticker.paused = true;943* function handleTick(event) {944* console.log(event.paused,945* createjs.Ticker.getTime(false),946* createjs.Ticker.getTime(true));947* }948*949* @property paused950* @static951* @type {Boolean}952* @default false953**/954Ticker.paused = false;955956957// mix-ins:958// EventDispatcher methods:959Ticker.removeEventListener = null;960Ticker.removeAllEventListeners = null;961Ticker.dispatchEvent = null;962Ticker.hasEventListener = null;963Ticker._listeners = null;964createjs.EventDispatcher.initialize(Ticker); // inject EventDispatcher methods.965Ticker._addEventListener = Ticker.addEventListener;966Ticker.addEventListener = function() {967!Ticker._inited&&Ticker.init();968return Ticker._addEventListener.apply(Ticker, arguments);969};970971972// private static properties:973/**974* @property _inited975* @static976* @type {Boolean}977* @protected978**/979Ticker._inited = false;980981/**982* @property _startTime983* @static984* @type {Number}985* @protected986**/987Ticker._startTime = 0;988989/**990* @property _pausedTime991* @static992* @type {Number}993* @protected994**/995Ticker._pausedTime=0;996997/**998* The number of ticks that have passed999* @property _ticks1000* @static1001* @type {Number}1002* @protected1003**/1004Ticker._ticks = 0;10051006/**1007* The number of ticks that have passed while Ticker has been paused1008* @property _pausedTicks1009* @static1010* @type {Number}1011* @protected1012**/1013Ticker._pausedTicks = 0;10141015/**1016* @property _interval1017* @static1018* @type {Number}1019* @protected1020**/1021Ticker._interval = 50;10221023/**1024* @property _lastTime1025* @static1026* @type {Number}1027* @protected1028**/1029Ticker._lastTime = 0;10301031/**1032* @property _times1033* @static1034* @type {Array}1035* @protected1036**/1037Ticker._times = null;10381039/**1040* @property _tickTimes1041* @static1042* @type {Array}1043* @protected1044**/1045Ticker._tickTimes = null;10461047/**1048* Stores the timeout or requestAnimationFrame id.1049* @property _timerId1050* @static1051* @type {Number}1052* @protected1053**/1054Ticker._timerId = null;10551056/**1057* True if currently using requestAnimationFrame, false if using setTimeout. This may be different than timingMode1058* if that property changed and a tick hasn't fired.1059* @property _raf1060* @static1061* @type {Boolean}1062* @protected1063**/1064Ticker._raf = true;106510661067// static getter / setters:1068/**1069* Use the {{#crossLink "Ticker/interval:property"}}{{/crossLink}} property instead.1070* @method setInterval1071* @static1072* @param {Number} interval1073* @deprecated1074**/1075Ticker.setInterval = function(interval) {1076Ticker._interval = interval;1077if (!Ticker._inited) { return; }1078Ticker._setupTick();1079};10801081/**1082* Use the {{#crossLink "Ticker/interval:property"}}{{/crossLink}} property instead.1083* @method getInterval1084* @static1085* @return {Number}1086* @deprecated1087**/1088Ticker.getInterval = function() {1089return Ticker._interval;1090};10911092/**1093* Use the {{#crossLink "Ticker/framerate:property"}}{{/crossLink}} property instead.1094* @method setFPS1095* @static1096* @param {Number} value1097* @deprecated1098**/1099Ticker.setFPS = function(value) {1100Ticker.setInterval(1000/value);1101};11021103/**1104* Use the {{#crossLink "Ticker/framerate:property"}}{{/crossLink}} property instead.1105* @method getFPS1106* @static1107* @return {Number}1108* @deprecated1109**/1110Ticker.getFPS = function() {1111return 1000/Ticker._interval;1112};11131114/**1115* Indicates the target time (in milliseconds) between ticks. Default is 50 (20 FPS).1116* Note that actual time between ticks may be more than specified depending on CPU load.1117* This property is ignored if the ticker is using the `RAF` timing mode.1118* @property interval1119* @static1120* @type {Number}1121**/11221123/**1124* Indicates the target frame rate in frames per second (FPS). Effectively just a shortcut to `interval`, where1125* `framerate == 1000/interval`.1126* @property framerate1127* @static1128* @type {Number}1129**/1130try {1131Object.defineProperties(Ticker, {1132interval: { get: Ticker.getInterval, set: Ticker.setInterval },1133framerate: { get: Ticker.getFPS, set: Ticker.setFPS }1134});1135} catch (e) { console.log(e); }113611371138// public static methods:1139/**1140* Starts the tick. This is called automatically when the first listener is added.1141* @method init1142* @static1143**/1144Ticker.init = function() {1145if (Ticker._inited) { return; }1146Ticker._inited = true;1147Ticker._times = [];1148Ticker._tickTimes = [];1149Ticker._startTime = Ticker._getTime();1150Ticker._times.push(Ticker._lastTime = 0);1151Ticker.interval = Ticker._interval;1152};11531154/**1155* Stops the Ticker and removes all listeners. Use init() to restart the Ticker.1156* @method reset1157* @static1158**/1159Ticker.reset = function() {1160if (Ticker._raf) {1161var f = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame;1162f&&f(Ticker._timerId);1163} else {1164clearTimeout(Ticker._timerId);1165}1166Ticker.removeAllEventListeners("tick");1167Ticker._timerId = Ticker._times = Ticker._tickTimes = null;1168Ticker._startTime = Ticker._lastTime = Ticker._ticks = 0;1169Ticker._inited = false;1170};11711172/**1173* Returns the average time spent within a tick. This can vary significantly from the value provided by getMeasuredFPS1174* because it only measures the time spent within the tick execution stack.1175*1176* Example 1: With a target FPS of 20, getMeasuredFPS() returns 20fps, which indicates an average of 50ms between1177* the end of one tick and the end of the next. However, getMeasuredTickTime() returns 15ms. This indicates that1178* there may be up to 35ms of "idle" time between the end of one tick and the start of the next.1179*1180* Example 2: With a target FPS of 30, getFPS() returns 10fps, which indicates an average of 100ms between the end of1181* one tick and the end of the next. However, getMeasuredTickTime() returns 20ms. This would indicate that something1182* other than the tick is using ~80ms (another script, DOM rendering, etc).1183* @method getMeasuredTickTime1184* @static1185* @param {Number} [ticks] The number of previous ticks over which to measure the average time spent in a tick.1186* Defaults to the number of ticks per second. To get only the last tick's time, pass in 1.1187* @return {Number} The average time spent in a tick in milliseconds.1188**/1189Ticker.getMeasuredTickTime = function(ticks) {1190var ttl=0, times=Ticker._tickTimes;1191if (!times || times.length < 1) { return -1; }11921193// by default, calculate average for the past ~1 second:1194ticks = Math.min(times.length, ticks||(Ticker.getFPS()|0));1195for (var i=0; i<ticks; i++) { ttl += times[i]; }1196return ttl/ticks;1197};11981199/**1200* Returns the actual frames / ticks per second.1201* @method getMeasuredFPS1202* @static1203* @param {Number} [ticks] The number of previous ticks over which to measure the actual frames / ticks per second.1204* Defaults to the number of ticks per second.1205* @return {Number} The actual frames / ticks per second. Depending on performance, this may differ1206* from the target frames per second.1207**/1208Ticker.getMeasuredFPS = function(ticks) {1209var times = Ticker._times;1210if (!times || times.length < 2) { return -1; }12111212// by default, calculate fps for the past ~1 second:1213ticks = Math.min(times.length-1, ticks||(Ticker.getFPS()|0));1214return 1000/((times[0]-times[ticks])/ticks);1215};12161217/**1218* Use the {{#crossLink "Ticker/paused:property"}}{{/crossLink}} property instead.1219* @method setPaused1220* @static1221* @param {Boolean} value1222* @deprecated1223**/1224Ticker.setPaused = function(value) {1225// TODO: deprecated.1226Ticker.paused = value;1227};12281229/**1230* Use the {{#crossLink "Ticker/paused:property"}}{{/crossLink}} property instead.1231* @method getPaused1232* @static1233* @return {Boolean}1234* @deprecated1235**/1236Ticker.getPaused = function() {1237// TODO: deprecated.1238return Ticker.paused;1239};12401241/**1242* Returns the number of milliseconds that have elapsed since Ticker was initialized via {{#crossLink "Ticker/init"}}.1243* Returns -1 if Ticker has not been initialized. For example, you could use1244* this in a time synchronized animation to determine the exact amount of time that has elapsed.1245* @method getTime1246* @static1247* @param {Boolean} [runTime=false] If true only time elapsed while Ticker was not paused will be returned.1248* If false, the value returned will be total time elapsed since the first tick event listener was added.1249* @return {Number} Number of milliseconds that have elapsed since Ticker was initialized or -1.1250**/1251Ticker.getTime = function(runTime) {1252return Ticker._startTime ? Ticker._getTime() - (runTime ? Ticker._pausedTime : 0) : -1;1253};12541255/**1256* Similar to the {{#crossLink "Ticker/getTime"}}{{/crossLink}} method, but returns the time on the most recent {{#crossLink "Ticker/tick:event"}}{{/crossLink}}1257* event object.1258* @method getEventTime1259* @static1260* @param runTime {Boolean} [runTime=false] If true, the runTime property will be returned instead of time.1261* @returns {number} The time or runTime property from the most recent tick event or -1.1262*/1263Ticker.getEventTime = function(runTime) {1264return Ticker._startTime ? (Ticker._lastTime || Ticker._startTime) - (runTime ? Ticker._pausedTime : 0) : -1;1265};12661267/**1268* Returns the number of ticks that have been broadcast by Ticker.1269* @method getTicks1270* @static1271* @param {Boolean} pauseable Indicates whether to include ticks that would have been broadcast1272* while Ticker was paused. If true only tick events broadcast while Ticker is not paused will be returned.1273* If false, tick events that would have been broadcast while Ticker was paused will be included in the return1274* value. The default value is false.1275* @return {Number} of ticks that have been broadcast.1276**/1277Ticker.getTicks = function(pauseable) {1278return Ticker._ticks - (pauseable ? Ticker._pausedTicks : 0);1279};128012811282// private static methods:1283/**1284* @method _handleSynch1285* @static1286* @protected1287**/1288Ticker._handleSynch = function() {1289Ticker._timerId = null;1290Ticker._setupTick();12911292// run if enough time has elapsed, with a little bit of flexibility to be early:1293if (Ticker._getTime() - Ticker._lastTime >= (Ticker._interval-1)*0.97) {1294Ticker._tick();1295}1296};12971298/**1299* @method _handleRAF1300* @static1301* @protected1302**/1303Ticker._handleRAF = function() {1304Ticker._timerId = null;1305Ticker._setupTick();1306Ticker._tick();1307};13081309/**1310* @method _handleTimeout1311* @static1312* @protected1313**/1314Ticker._handleTimeout = function() {1315Ticker._timerId = null;1316Ticker._setupTick();1317Ticker._tick();1318};13191320/**1321* @method _setupTick1322* @static1323* @protected1324**/1325Ticker._setupTick = function() {1326if (Ticker._timerId != null) { return; } // avoid duplicates13271328var mode = Ticker.timingMode||(Ticker.useRAF&&Ticker.RAF_SYNCHED);1329if (mode == Ticker.RAF_SYNCHED || mode == Ticker.RAF) {1330var f = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;1331if (f) {1332Ticker._timerId = f(mode == Ticker.RAF ? Ticker._handleRAF : Ticker._handleSynch);1333Ticker._raf = true;1334return;1335}1336}1337Ticker._raf = false;1338Ticker._timerId = setTimeout(Ticker._handleTimeout, Ticker._interval);1339};13401341/**1342* @method _tick1343* @static1344* @protected1345**/1346Ticker._tick = function() {1347var paused = Ticker.paused;1348var time = Ticker._getTime();1349var elapsedTime = time-Ticker._lastTime;1350Ticker._lastTime = time;1351Ticker._ticks++;13521353if (paused) {1354Ticker._pausedTicks++;1355Ticker._pausedTime += elapsedTime;1356}13571358if (Ticker.hasEventListener("tick")) {1359var event = new createjs.Event("tick");1360var maxDelta = Ticker.maxDelta;1361event.delta = (maxDelta && elapsedTime > maxDelta) ? maxDelta : elapsedTime;1362event.paused = paused;1363event.time = time;1364event.runTime = time-Ticker._pausedTime;1365Ticker.dispatchEvent(event);1366}13671368Ticker._tickTimes.unshift(Ticker._getTime()-time);1369while (Ticker._tickTimes.length > 100) { Ticker._tickTimes.pop(); }13701371Ticker._times.unshift(time);1372while (Ticker._times.length > 100) { Ticker._times.pop(); }1373};13741375/**1376* @method _getTime1377* @static1378* @protected1379**/1380var now = window.performance && (performance.now || performance.mozNow || performance.msNow || performance.oNow || performance.webkitNow);1381Ticker._getTime = function() {1382return ((now&&now.call(performance))||(new Date().getTime())) - Ticker._startTime;1383};138413851386createjs.Ticker = Ticker;1387}());13881389//##############################################################################1390// UID.js1391//##############################################################################13921393this.createjs = this.createjs||{};13941395(function() {1396"use strict";139713981399// constructor:1400/**1401* Global utility for generating sequential unique ID numbers. The UID class uses a static interface (ex. <code>UID.get()</code>)1402* and should not be instantiated.1403* @class UID1404* @static1405**/1406function UID() {1407throw "UID cannot be instantiated";1408}140914101411// private static properties:1412/**1413* @property _nextID1414* @type Number1415* @protected1416**/1417UID._nextID = 0;141814191420// public static methods:1421/**1422* Returns the next unique id.1423* @method get1424* @return {Number} The next unique id1425* @static1426**/1427UID.get = function() {1428return UID._nextID++;1429};143014311432createjs.UID = UID;1433}());14341435//##############################################################################1436// MouseEvent.js1437//##############################################################################14381439this.createjs = this.createjs||{};14401441(function() {1442"use strict";144314441445// constructor:1446/**1447* Passed as the parameter to all mouse/pointer/touch related events. For a listing of mouse events and their properties,1448* see the {{#crossLink "DisplayObject"}}{{/crossLink}} and {{#crossLink "Stage"}}{{/crossLink}} event listings.1449* @class MouseEvent1450* @param {String} type The event type.1451* @param {Boolean} bubbles Indicates whether the event will bubble through the display list.1452* @param {Boolean} cancelable Indicates whether the default behaviour of this event can be cancelled.1453* @param {Number} stageX The normalized x position relative to the stage.1454* @param {Number} stageY The normalized y position relative to the stage.1455* @param {MouseEvent} nativeEvent The native DOM event related to this mouse event.1456* @param {Number} pointerID The unique id for the pointer.1457* @param {Boolean} primary Indicates whether this is the primary pointer in a multitouch environment.1458* @param {Number} rawX The raw x position relative to the stage.1459* @param {Number} rawY The raw y position relative to the stage.1460* @param {DisplayObject} relatedTarget The secondary target for the event.1461* @extends Event1462* @constructor1463**/1464function MouseEvent(type, bubbles, cancelable, stageX, stageY, nativeEvent, pointerID, primary, rawX, rawY, relatedTarget) {1465this.Event_constructor(type, bubbles, cancelable);146614671468// public properties:1469/**1470* The normalized x position on the stage. This will always be within the range 0 to stage width.1471* @property stageX1472* @type Number1473*/1474this.stageX = stageX;14751476/**1477* The normalized y position on the stage. This will always be within the range 0 to stage height.1478* @property stageY1479* @type Number1480**/1481this.stageY = stageY;14821483/**1484* The raw x position relative to the stage. Normally this will be the same as the stageX value, unless1485* stage.mouseMoveOutside is true and the pointer is outside of the stage bounds.1486* @property rawX1487* @type Number1488*/1489this.rawX = (rawX==null)?stageX:rawX;14901491/**1492* The raw y position relative to the stage. Normally this will be the same as the stageY value, unless1493* stage.mouseMoveOutside is true and the pointer is outside of the stage bounds.1494* @property rawY1495* @type Number1496*/1497this.rawY = (rawY==null)?stageY:rawY;14981499/**1500* The native MouseEvent generated by the browser. The properties and API for this1501* event may differ between browsers. This property will be null if the1502* EaselJS property was not directly generated from a native MouseEvent.1503* @property nativeEvent1504* @type HtmlMouseEvent1505* @default null1506**/1507this.nativeEvent = nativeEvent;15081509/**1510* The unique id for the pointer (touch point or cursor). This will be either -1 for the mouse, or the system1511* supplied id value.1512* @property pointerID1513* @type {Number}1514*/1515this.pointerID = pointerID;15161517/**1518* Indicates whether this is the primary pointer in a multitouch environment. This will always be true for the mouse.1519* For touch pointers, the first pointer in the current stack will be considered the primary pointer.1520* @property primary1521* @type {Boolean}1522*/1523this.primary = !!primary;15241525/**1526* The secondary target for the event, if applicable. This is used for mouseout/rollout1527* events to indicate the object that the mouse entered from, mouseover/rollover for the object the mouse exited,1528* and stagemousedown/stagemouseup events for the object that was the under the cursor, if any.1529*1530* Only valid interaction targets will be returned (ie. objects with mouse listeners or a cursor set).1531* @property relatedTarget1532* @type {DisplayObject}1533*/1534this.relatedTarget = relatedTarget;1535}1536var p = createjs.extend(MouseEvent, createjs.Event);15371538// TODO: deprecated1539// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.154015411542// getter / setters:1543/**1544* Returns the x position of the mouse in the local coordinate system of the current target (ie. the dispatcher).1545* @property localX1546* @type {Number}1547* @readonly1548*/1549p._get_localX = function() {1550return this.currentTarget.globalToLocal(this.rawX, this.rawY).x;1551};15521553/**1554* Returns the y position of the mouse in the local coordinate system of the current target (ie. the dispatcher).1555* @property localY1556* @type {Number}1557* @readonly1558*/1559p._get_localY = function() {1560return this.currentTarget.globalToLocal(this.rawX, this.rawY).y;1561};15621563/**1564* Indicates whether the event was generated by a touch input (versus a mouse input).1565* @property isTouch1566* @type {Boolean}1567* @readonly1568*/1569p._get_isTouch = function() {1570return this.pointerID !== -1;1571};157215731574try {1575Object.defineProperties(p, {1576localX: { get: p._get_localX },1577localY: { get: p._get_localY },1578isTouch: { get: p._get_isTouch }1579});1580} catch (e) {} // TODO: use Log158115821583// public methods:1584/**1585* Returns a clone of the MouseEvent instance.1586* @method clone1587* @return {MouseEvent} a clone of the MouseEvent instance.1588**/1589p.clone = function() {1590return new MouseEvent(this.type, this.bubbles, this.cancelable, this.stageX, this.stageY, this.nativeEvent, this.pointerID, this.primary, this.rawX, this.rawY);1591};15921593/**1594* Returns a string representation of this object.1595* @method toString1596* @return {String} a string representation of the instance.1597**/1598p.toString = function() {1599return "[MouseEvent (type="+this.type+" stageX="+this.stageX+" stageY="+this.stageY+")]";1600};160116021603createjs.MouseEvent = createjs.promote(MouseEvent, "Event");1604}());16051606//##############################################################################1607// Matrix2D.js1608//##############################################################################16091610this.createjs = this.createjs||{};16111612(function() {1613"use strict";161416151616// constructor:1617/**1618* Represents an affine transformation matrix, and provides tools for constructing and concatenating matrices.1619*1620* This matrix can be visualized as:1621*1622* [ a c tx1623* b d ty1624* 0 0 1 ]1625*1626* Note the locations of b and c.1627*1628* @class Matrix2D1629* @param {Number} [a=1] Specifies the a property for the new matrix.1630* @param {Number} [b=0] Specifies the b property for the new matrix.1631* @param {Number} [c=0] Specifies the c property for the new matrix.1632* @param {Number} [d=1] Specifies the d property for the new matrix.1633* @param {Number} [tx=0] Specifies the tx property for the new matrix.1634* @param {Number} [ty=0] Specifies the ty property for the new matrix.1635* @constructor1636**/1637function Matrix2D(a, b, c, d, tx, ty) {1638this.setValues(a,b,c,d,tx,ty);16391640// public properties:1641// assigned in the setValues method.1642/**1643* Position (0, 0) in a 3x3 affine transformation matrix.1644* @property a1645* @type Number1646**/16471648/**1649* Position (0, 1) in a 3x3 affine transformation matrix.1650* @property b1651* @type Number1652**/16531654/**1655* Position (1, 0) in a 3x3 affine transformation matrix.1656* @property c1657* @type Number1658**/16591660/**1661* Position (1, 1) in a 3x3 affine transformation matrix.1662* @property d1663* @type Number1664**/16651666/**1667* Position (2, 0) in a 3x3 affine transformation matrix.1668* @property tx1669* @type Number1670**/16711672/**1673* Position (2, 1) in a 3x3 affine transformation matrix.1674* @property ty1675* @type Number1676**/1677}1678var p = Matrix2D.prototype;16791680/**1681* <strong>REMOVED</strong>. Removed in favor of using `MySuperClass_constructor`.1682* See {{#crossLink "Utility Methods/extend"}}{{/crossLink}} and {{#crossLink "Utility Methods/promote"}}{{/crossLink}}1683* for details.1684*1685* There is an inheritance tutorial distributed with EaselJS in /tutorials/Inheritance.1686*1687* @method initialize1688* @protected1689* @deprecated1690*/1691// p.initialize = function() {}; // searchable for devs wondering where it is.169216931694// constants:1695/**1696* Multiplier for converting degrees to radians. Used internally by Matrix2D.1697* @property DEG_TO_RAD1698* @static1699* @final1700* @type Number1701* @readonly1702**/1703Matrix2D.DEG_TO_RAD = Math.PI/180;170417051706// static public properties:1707/**1708* An identity matrix, representing a null transformation.1709* @property identity1710* @static1711* @type Matrix2D1712* @readonly1713**/1714Matrix2D.identity = null; // set at bottom of class definition.171517161717// public methods:1718/**1719* Sets the specified values on this instance.1720* @method setValues1721* @param {Number} [a=1] Specifies the a property for the new matrix.1722* @param {Number} [b=0] Specifies the b property for the new matrix.1723* @param {Number} [c=0] Specifies the c property for the new matrix.1724* @param {Number} [d=1] Specifies the d property for the new matrix.1725* @param {Number} [tx=0] Specifies the tx property for the new matrix.1726* @param {Number} [ty=0] Specifies the ty property for the new matrix.1727* @return {Matrix2D} This instance. Useful for chaining method calls.1728*/1729p.setValues = function(a, b, c, d, tx, ty) {1730// don't forget to update docs in the constructor if these change:1731this.a = (a == null) ? 1 : a;1732this.b = b || 0;1733this.c = c || 0;1734this.d = (d == null) ? 1 : d;1735this.tx = tx || 0;1736this.ty = ty || 0;1737return this;1738};17391740/**1741* Appends the specified matrix properties to this matrix. All parameters are required.1742* This is the equivalent of multiplying `(this matrix) * (specified matrix)`.1743* @method append1744* @param {Number} a1745* @param {Number} b1746* @param {Number} c1747* @param {Number} d1748* @param {Number} tx1749* @param {Number} ty1750* @return {Matrix2D} This matrix. Useful for chaining method calls.1751**/1752p.append = function(a, b, c, d, tx, ty) {1753var a1 = this.a;1754var b1 = this.b;1755var c1 = this.c;1756var d1 = this.d;1757if (a != 1 || b != 0 || c != 0 || d != 1) {1758this.a = a1*a+c1*b;1759this.b = b1*a+d1*b;1760this.c = a1*c+c1*d;1761this.d = b1*c+d1*d;1762}1763this.tx = a1*tx+c1*ty+this.tx;1764this.ty = b1*tx+d1*ty+this.ty;1765return this;1766};17671768/**1769* Prepends the specified matrix properties to this matrix.1770* This is the equivalent of multiplying `(specified matrix) * (this matrix)`.1771* All parameters are required.1772* @method prepend1773* @param {Number} a1774* @param {Number} b1775* @param {Number} c1776* @param {Number} d1777* @param {Number} tx1778* @param {Number} ty1779* @return {Matrix2D} This matrix. Useful for chaining method calls.1780**/1781p.prepend = function(a, b, c, d, tx, ty) {1782var a1 = this.a;1783var c1 = this.c;1784var tx1 = this.tx;17851786this.a = a*a1+c*this.b;1787this.b = b*a1+d*this.b;1788this.c = a*c1+c*this.d;1789this.d = b*c1+d*this.d;1790this.tx = a*tx1+c*this.ty+tx;1791this.ty = b*tx1+d*this.ty+ty;1792return this;1793};17941795/**1796* Appends the specified matrix to this matrix.1797* This is the equivalent of multiplying `(this matrix) * (specified matrix)`.1798* @method appendMatrix1799* @param {Matrix2D} matrix1800* @return {Matrix2D} This matrix. Useful for chaining method calls.1801**/1802p.appendMatrix = function(matrix) {1803return this.append(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);1804};18051806/**1807* Prepends the specified matrix to this matrix.1808* This is the equivalent of multiplying `(specified matrix) * (this matrix)`.1809* For example, you could calculate the combined transformation for a child object using:1810*1811* var o = myDisplayObject;1812* var mtx = o.getMatrix();1813* while (o = o.parent) {1814* // prepend each parent's transformation in turn:1815* o.prependMatrix(o.getMatrix());1816* }1817* @method prependMatrix1818* @param {Matrix2D} matrix1819* @return {Matrix2D} This matrix. Useful for chaining method calls.1820**/1821p.prependMatrix = function(matrix) {1822return this.prepend(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);1823};18241825/**1826* Generates matrix properties from the specified display object transform properties, and appends them to this matrix.1827* For example, you can use this to generate a matrix representing the transformations of a display object:1828*1829* var mtx = new createjs.Matrix2D();1830* mtx.appendTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation);1831* @method appendTransform1832* @param {Number} x1833* @param {Number} y1834* @param {Number} scaleX1835* @param {Number} scaleY1836* @param {Number} rotation1837* @param {Number} skewX1838* @param {Number} skewY1839* @param {Number} regX Optional.1840* @param {Number} regY Optional.1841* @return {Matrix2D} This matrix. Useful for chaining method calls.1842**/1843p.appendTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {1844if (rotation%360) {1845var r = rotation*Matrix2D.DEG_TO_RAD;1846var cos = Math.cos(r);1847var sin = Math.sin(r);1848} else {1849cos = 1;1850sin = 0;1851}18521853if (skewX || skewY) {1854// TODO: can this be combined into a single append operation?1855skewX *= Matrix2D.DEG_TO_RAD;1856skewY *= Matrix2D.DEG_TO_RAD;1857this.append(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y);1858this.append(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, 0, 0);1859} else {1860this.append(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, x, y);1861}18621863if (regX || regY) {1864// append the registration offset:1865this.tx -= regX*this.a+regY*this.c;1866this.ty -= regX*this.b+regY*this.d;1867}1868return this;1869};18701871/**1872* Generates matrix properties from the specified display object transform properties, and prepends them to this matrix.1873* For example, you could calculate the combined transformation for a child object using:1874*1875* var o = myDisplayObject;1876* var mtx = new createjs.Matrix2D();1877* do {1878* // prepend each parent's transformation in turn:1879* mtx.prependTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation, o.skewX, o.skewY, o.regX, o.regY);1880* } while (o = o.parent);1881*1882* Note that the above example would not account for {{#crossLink "DisplayObject/transformMatrix:property"}}{{/crossLink}}1883* values. See {{#crossLink "Matrix2D/prependMatrix"}}{{/crossLink}} for an example that does.1884* @method prependTransform1885* @param {Number} x1886* @param {Number} y1887* @param {Number} scaleX1888* @param {Number} scaleY1889* @param {Number} rotation1890* @param {Number} skewX1891* @param {Number} skewY1892* @param {Number} regX Optional.1893* @param {Number} regY Optional.1894* @return {Matrix2D} This matrix. Useful for chaining method calls.1895**/1896p.prependTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {1897if (rotation%360) {1898var r = rotation*Matrix2D.DEG_TO_RAD;1899var cos = Math.cos(r);1900var sin = Math.sin(r);1901} else {1902cos = 1;1903sin = 0;1904}19051906if (regX || regY) {1907// prepend the registration offset:1908this.tx -= regX; this.ty -= regY;1909}1910if (skewX || skewY) {1911// TODO: can this be combined into a single prepend operation?1912skewX *= Matrix2D.DEG_TO_RAD;1913skewY *= Matrix2D.DEG_TO_RAD;1914this.prepend(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, 0, 0);1915this.prepend(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y);1916} else {1917this.prepend(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, x, y);1918}1919return this;1920};19211922/**1923* Applies a clockwise rotation transformation to the matrix.1924* @method rotate1925* @param {Number} angle The angle to rotate by, in degrees. To use a value in radians, multiply it by `180/Math.PI`.1926* @return {Matrix2D} This matrix. Useful for chaining method calls.1927**/1928p.rotate = function(angle) {1929angle = angle*Matrix2D.DEG_TO_RAD;1930var cos = Math.cos(angle);1931var sin = Math.sin(angle);19321933var a1 = this.a;1934var b1 = this.b;19351936this.a = a1*cos+this.c*sin;1937this.b = b1*cos+this.d*sin;1938this.c = -a1*sin+this.c*cos;1939this.d = -b1*sin+this.d*cos;1940return this;1941};19421943/**1944* Applies a skew transformation to the matrix.1945* @method skew1946* @param {Number} skewX The amount to skew horizontally in degrees. To use a value in radians, multiply it by `180/Math.PI`.1947* @param {Number} skewY The amount to skew vertically in degrees.1948* @return {Matrix2D} This matrix. Useful for chaining method calls.1949*/1950p.skew = function(skewX, skewY) {1951skewX = skewX*Matrix2D.DEG_TO_RAD;1952skewY = skewY*Matrix2D.DEG_TO_RAD;1953this.append(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), 0, 0);1954return this;1955};19561957/**1958* Applies a scale transformation to the matrix.1959* @method scale1960* @param {Number} x The amount to scale horizontally. E.G. a value of 2 will double the size in the X direction, and 0.5 will halve it.1961* @param {Number} y The amount to scale vertically.1962* @return {Matrix2D} This matrix. Useful for chaining method calls.1963**/1964p.scale = function(x, y) {1965this.a *= x;1966this.b *= x;1967this.c *= y;1968this.d *= y;1969//this.tx *= x;1970//this.ty *= y;1971return this;1972};19731974/**1975* Translates the matrix on the x and y axes.1976* @method translate1977* @param {Number} x1978* @param {Number} y1979* @return {Matrix2D} This matrix. Useful for chaining method calls.1980**/1981p.translate = function(x, y) {1982this.tx += this.a*x + this.c*y;1983this.ty += this.b*x + this.d*y;1984return this;1985};19861987/**1988* Sets the properties of the matrix to those of an identity matrix (one that applies a null transformation).1989* @method identity1990* @return {Matrix2D} This matrix. Useful for chaining method calls.1991**/1992p.identity = function() {1993this.a = this.d = 1;1994this.b = this.c = this.tx = this.ty = 0;1995return this;1996};19971998/**1999* Inverts the matrix, causing it to perform the opposite transformation.2000* @method invert2001* @return {Matrix2D} This matrix. Useful for chaining method calls.2002**/2003p.invert = function() {2004var a1 = this.a;2005var b1 = this.b;2006var c1 = this.c;2007var d1 = this.d;2008var tx1 = this.tx;2009var n = a1*d1-b1*c1;20102011this.a = d1/n;2012this.b = -b1/n;2013this.c = -c1/n;2014this.d = a1/n;2015this.tx = (c1*this.ty-d1*tx1)/n;2016this.ty = -(a1*this.ty-b1*tx1)/n;2017return this;2018};20192020/**2021* Returns true if the matrix is an identity matrix.2022* @method isIdentity2023* @return {Boolean}2024**/2025p.isIdentity = function() {2026return this.tx === 0 && this.ty === 0 && this.a === 1 && this.b === 0 && this.c === 0 && this.d === 1;2027};20282029/**2030* Returns true if this matrix is equal to the specified matrix (all property values are equal).2031* @method equals2032* @param {Matrix2D} matrix The matrix to compare.2033* @return {Boolean}2034**/2035p.equals = function(matrix) {2036return this.tx === matrix.tx && this.ty === matrix.ty && this.a === matrix.a && this.b === matrix.b && this.c === matrix.c && this.d === matrix.d;2037};20382039/**2040* Transforms a point according to this matrix.2041* @method transformPoint2042* @param {Number} x The x component of the point to transform.2043* @param {Number} y The y component of the point to transform.2044* @param {Point | Object} [pt] An object to copy the result into. If omitted a generic object with x/y properties will be returned.2045* @return {Point} This matrix. Useful for chaining method calls.2046**/2047p.transformPoint = function(x, y, pt) {2048pt = pt||{};2049pt.x = x*this.a+y*this.c+this.tx;2050pt.y = x*this.b+y*this.d+this.ty;2051return pt;2052};20532054/**2055* Decomposes the matrix into transform properties (x, y, scaleX, scaleY, and rotation). Note that these values2056* may not match the transform properties you used to generate the matrix, though they will produce the same visual2057* results.2058* @method decompose2059* @param {Object} target The object to apply the transform properties to. If null, then a new object will be returned.2060* @return {Object} The target, or a new generic object with the transform properties applied.2061*/2062p.decompose = function(target) {2063// TODO: it would be nice to be able to solve for whether the matrix can be decomposed into only scale/rotation even when scale is negative2064if (target == null) { target = {}; }2065target.x = this.tx;2066target.y = this.ty;2067target.scaleX = Math.sqrt(this.a * this.a + this.b * this.b);2068target.scaleY = Math.sqrt(this.c * this.c + this.d * this.d);20692070var skewX = Math.atan2(-this.c, this.d);2071var skewY = Math.atan2(this.b, this.a);20722073var delta = Math.abs(1-skewX/skewY);2074if (delta < 0.00001) { // effectively identical, can use rotation:2075target.rotation = skewY/Matrix2D.DEG_TO_RAD;2076if (this.a < 0 && this.d >= 0) {2077target.rotation += (target.rotation <= 0) ? 180 : -180;2078}2079target.skewX = target.skewY = 0;2080} else {2081target.skewX = skewX/Matrix2D.DEG_TO_RAD;2082target.skewY = skewY/Matrix2D.DEG_TO_RAD;2083}2084return target;2085};20862087/**2088* Copies all properties from the specified matrix to this matrix.2089* @method copy2090* @param {Matrix2D} matrix The matrix to copy properties from.2091* @return {Matrix2D} This matrix. Useful for chaining method calls.2092*/2093p.copy = function(matrix) {2094return this.setValues(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);2095};20962097/**2098* Returns a clone of the Matrix2D instance.2099* @method clone2100* @return {Matrix2D} a clone of the Matrix2D instance.2101**/2102p.clone = function() {2103return new Matrix2D(this.a, this.b, this.c, this.d, this.tx, this.ty);2104};21052106/**2107* Returns a string representation of this object.2108* @method toString2109* @return {String} a string representation of the instance.2110**/2111p.toString = function() {2112return "[Matrix2D (a="+this.a+" b="+this.b+" c="+this.c+" d="+this.d+" tx="+this.tx+" ty="+this.ty+")]";2113};21142115// this has to be populated after the class is defined:2116Matrix2D.identity = new Matrix2D();211721182119createjs.Matrix2D = Matrix2D;2120}());21212122//##############################################################################2123// DisplayProps.js2124//##############################################################################21252126this.createjs = this.createjs||{};21272128(function() {2129"use strict";21302131/**2132* Used for calculating and encapsulating display related properties.2133* @class DisplayProps2134* @param {Number} [visible=true] Visible value.2135* @param {Number} [alpha=1] Alpha value.2136* @param {Number} [shadow=null] A Shadow instance or null.2137* @param {Number} [compositeOperation=null] A compositeOperation value or null.2138* @param {Number} [matrix] A transformation matrix. Defaults to a new identity matrix.2139* @constructor2140**/2141function DisplayProps(visible, alpha, shadow, compositeOperation, matrix) {2142this.setValues(visible, alpha, shadow, compositeOperation, matrix);21432144// public properties:2145// assigned in the setValues method.2146/**2147* Property representing the alpha that will be applied to a display object.2148* @property alpha2149* @type Number2150**/21512152/**2153* Property representing the shadow that will be applied to a display object.2154* @property shadow2155* @type Shadow2156**/21572158/**2159* Property representing the compositeOperation that will be applied to a display object.2160* You can find a list of valid composite operations at:2161* <a href="https://developer.mozilla.org/en/Canvas_tutorial/Compositing">https://developer.mozilla.org/en/Canvas_tutorial/Compositing</a>2162* @property compositeOperation2163* @type String2164**/21652166/**2167* Property representing the value for visible that will be applied to a display object.2168* @property visible2169* @type Boolean2170**/21712172/**2173* The transformation matrix that will be applied to a display object.2174* @property matrix2175* @type Matrix2D2176**/2177}2178var p = DisplayProps.prototype;21792180// initialization:2181/**2182* Reinitializes the instance with the specified values.2183* @method setValues2184* @param {Number} [visible=true] Visible value.2185* @param {Number} [alpha=1] Alpha value.2186* @param {Number} [shadow=null] A Shadow instance or null.2187* @param {Number} [compositeOperation=null] A compositeOperation value or null.2188* @param {Number} [matrix] A transformation matrix. Defaults to an identity matrix.2189* @return {DisplayProps} This instance. Useful for chaining method calls.2190* @chainable2191*/2192p.setValues = function (visible, alpha, shadow, compositeOperation, matrix) {2193this.visible = visible == null ? true : !!visible;2194this.alpha = alpha == null ? 1 : alpha;2195this.shadow = shadow;2196this.compositeOperation = compositeOperation;2197this.matrix = matrix || (this.matrix&&this.matrix.identity()) || new createjs.Matrix2D();2198return this;2199};22002201// public methods:2202/**2203* Appends the specified display properties. This is generally used to apply a child's properties its parent's.2204* @method append2205* @param {Boolean} visible desired visible value2206* @param {Number} alpha desired alpha value2207* @param {Shadow} shadow desired shadow value2208* @param {String} compositeOperation desired composite operation value2209* @param {Matrix2D} [matrix] a Matrix2D instance2210* @return {DisplayProps} This instance. Useful for chaining method calls.2211* @chainable2212*/2213p.append = function(visible, alpha, shadow, compositeOperation, matrix) {2214this.alpha *= alpha;2215this.shadow = shadow || this.shadow;2216this.compositeOperation = compositeOperation || this.compositeOperation;2217this.visible = this.visible && visible;2218matrix&&this.matrix.appendMatrix(matrix);2219return this;2220};22212222/**2223* Prepends the specified display properties. This is generally used to apply a parent's properties to a child's.2224* For example, to get the combined display properties that would be applied to a child, you could use:2225*2226* var o = myDisplayObject;2227* var props = new createjs.DisplayProps();2228* do {2229* // prepend each parent's props in turn:2230* props.prepend(o.visible, o.alpha, o.shadow, o.compositeOperation, o.getMatrix());2231* } while (o = o.parent);2232*2233* @method prepend2234* @param {Boolean} visible desired visible value2235* @param {Number} alpha desired alpha value2236* @param {Shadow} shadow desired shadow value2237* @param {String} compositeOperation desired composite operation value2238* @param {Matrix2D} [matrix] a Matrix2D instance2239* @return {DisplayProps} This instance. Useful for chaining method calls.2240* @chainable2241*/2242p.prepend = function(visible, alpha, shadow, compositeOperation, matrix) {2243this.alpha *= alpha;2244this.shadow = this.shadow || shadow;2245this.compositeOperation = this.compositeOperation || compositeOperation;2246this.visible = this.visible && visible;2247matrix&&this.matrix.prependMatrix(matrix);2248return this;2249};22502251/**2252* Resets this instance and its matrix to default values.2253* @method identity2254* @return {DisplayProps} This instance. Useful for chaining method calls.2255* @chainable2256*/2257p.identity = function() {2258this.visible = true;2259this.alpha = 1;2260this.shadow = this.compositeOperation = null;2261this.matrix.identity();2262return this;2263};22642265/**2266* Returns a clone of the DisplayProps instance. Clones the associated matrix.2267* @method clone2268* @return {DisplayProps} a clone of the DisplayProps instance.2269**/2270p.clone = function() {2271return new DisplayProps(this.alpha, this.shadow, this.compositeOperation, this.visible, this.matrix.clone());2272};22732274// private methods:22752276createjs.DisplayProps = DisplayProps;2277})();22782279//##############################################################################2280// Point.js2281//##############################################################################22822283this.createjs = this.createjs||{};22842285(function() {2286"use strict";228722882289// constructor:2290/**2291* Represents a point on a 2 dimensional x / y coordinate system.2292*2293* <h4>Example</h4>2294*2295* var point = new createjs.Point(0, 100);2296*2297* @class Point2298* @param {Number} [x=0] X position.2299* @param {Number} [y=0] Y position.2300* @constructor2301**/2302function Point(x, y) {2303this.setValues(x, y);230423052306// public properties:2307// assigned in the setValues method.2308/**2309* X position.2310* @property x2311* @type Number2312**/23132314/**2315* Y position.2316* @property y2317* @type Number2318**/2319}2320var p = Point.prototype;23212322/**2323* <strong>REMOVED</strong>. Removed in favor of using `MySuperClass_constructor`.2324* See {{#crossLink "Utility Methods/extend"}}{{/crossLink}} and {{#crossLink "Utility Methods/promote"}}{{/crossLink}}2325* for details.2326*2327* There is an inheritance tutorial distributed with EaselJS in /tutorials/Inheritance.2328*2329* @method initialize2330* @protected2331* @deprecated2332*/2333// p.initialize = function() {}; // searchable for devs wondering where it is.233423352336// public methods:2337/**2338* Sets the specified values on this instance.2339* @method setValues2340* @param {Number} [x=0] X position.2341* @param {Number} [y=0] Y position.2342* @return {Point} This instance. Useful for chaining method calls.2343* @chainable2344*/2345p.setValues = function(x, y) {2346this.x = x||0;2347this.y = y||0;2348return this;2349};23502351/**2352* Copies all properties from the specified point to this point.2353* @method copy2354* @param {Point} point The point to copy properties from.2355* @return {Point} This point. Useful for chaining method calls.2356* @chainable2357*/2358p.copy = function(point) {2359this.x = point.x;2360this.y = point.y;2361return this;2362};23632364/**2365* Returns a clone of the Point instance.2366* @method clone2367* @return {Point} a clone of the Point instance.2368**/2369p.clone = function() {2370return new Point(this.x, this.y);2371};23722373/**2374* Returns a string representation of this object.2375* @method toString2376* @return {String} a string representation of the instance.2377**/2378p.toString = function() {2379return "[Point (x="+this.x+" y="+this.y+")]";2380};238123822383createjs.Point = Point;2384}());23852386//##############################################################################2387// Rectangle.js2388//##############################################################################23892390this.createjs = this.createjs||{};23912392(function() {2393"use strict";239423952396// constructor:2397/**2398* Represents a rectangle as defined by the points (x, y) and (x+width, y+height).2399*2400* <h4>Example</h4>2401*2402* var rect = new createjs.Rectangle(0, 0, 100, 100);2403*2404* @class Rectangle2405* @param {Number} [x=0] X position.2406* @param {Number} [y=0] Y position.2407* @param {Number} [width=0] The width of the Rectangle.2408* @param {Number} [height=0] The height of the Rectangle.2409* @constructor2410**/2411function Rectangle(x, y, width, height) {2412this.setValues(x, y, width, height);241324142415// public properties:2416// assigned in the setValues method.2417/**2418* X position.2419* @property x2420* @type Number2421**/24222423/**2424* Y position.2425* @property y2426* @type Number2427**/24282429/**2430* Width.2431* @property width2432* @type Number2433**/24342435/**2436* Height.2437* @property height2438* @type Number2439**/2440}2441var p = Rectangle.prototype;24422443/**2444* <strong>REMOVED</strong>. Removed in favor of using `MySuperClass_constructor`.2445* See {{#crossLink "Utility Methods/extend"}}{{/crossLink}} and {{#crossLink "Utility Methods/promote"}}{{/crossLink}}2446* for details.2447*2448* There is an inheritance tutorial distributed with EaselJS in /tutorials/Inheritance.2449*2450* @method initialize2451* @protected2452* @deprecated2453*/2454// p.initialize = function() {}; // searchable for devs wondering where it is.245524562457// public methods:2458/**2459* Sets the specified values on this instance.2460* @method setValues2461* @param {Number} [x=0] X position.2462* @param {Number} [y=0] Y position.2463* @param {Number} [width=0] The width of the Rectangle.2464* @param {Number} [height=0] The height of the Rectangle.2465* @return {Rectangle} This instance. Useful for chaining method calls.2466* @chainable2467*/2468p.setValues = function(x, y, width, height) {2469// don't forget to update docs in the constructor if these change:2470this.x = x||0;2471this.y = y||0;2472this.width = width||0;2473this.height = height||0;2474return this;2475};24762477/**2478* Extends the rectangle's bounds to include the described point or rectangle.2479* @method extend2480* @param {Number} x X position of the point or rectangle.2481* @param {Number} y Y position of the point or rectangle.2482* @param {Number} [width=0] The width of the rectangle.2483* @param {Number} [height=0] The height of the rectangle.2484* @return {Rectangle} This instance. Useful for chaining method calls.2485* @chainable2486*/2487p.extend = function(x, y, width, height) {2488width = width||0;2489height = height||0;2490if (x+width > this.x+this.width) { this.width = x+width-this.x; }2491if (y+height > this.y+this.height) { this.height = y+height-this.y; }2492if (x < this.x) { this.width += this.x-x; this.x = x; }2493if (y < this.y) { this.height += this.y-y; this.y = y; }2494return this;2495};24962497/**2498* Adds the specified padding to the rectangle's bounds.2499* @method pad2500* @param {Number} top2501* @param {Number} left2502* @param {Number} right2503* @param {Number} bottom2504* @return {Rectangle} This instance. Useful for chaining method calls.2505* @chainable2506*/2507p.pad = function(top, left, bottom, right) {2508this.x -= left;2509this.y -= top;2510this.width += left+right;2511this.height += top+bottom;2512return this;2513};25142515/**2516* Copies all properties from the specified rectangle to this rectangle.2517* @method copy2518* @param {Rectangle} rectangle The rectangle to copy properties from.2519* @return {Rectangle} This rectangle. Useful for chaining method calls.2520* @chainable2521*/2522p.copy = function(rectangle) {2523return this.setValues(rectangle.x, rectangle.y, rectangle.width, rectangle.height);2524};25252526/**2527* Returns true if this rectangle fully encloses the described point or rectangle.2528* @method contains2529* @param {Number} x X position of the point or rectangle.2530* @param {Number} y Y position of the point or rectangle.2531* @param {Number} [width=0] The width of the rectangle.2532* @param {Number} [height=0] The height of the rectangle.2533* @return {Boolean} True if the described point or rectangle is contained within this rectangle.2534*/2535p.contains = function(x, y, width, height) {2536width = width||0;2537height = height||0;2538return (x >= this.x && x+width <= this.x+this.width && y >= this.y && y+height <= this.y+this.height);2539};25402541/**2542* Returns a new rectangle which contains this rectangle and the specified rectangle.2543* @method union2544* @param {Rectangle} rect The rectangle to calculate a union with.2545* @return {Rectangle} A new rectangle describing the union.2546*/2547p.union = function(rect) {2548return this.clone().extend(rect.x, rect.y, rect.width, rect.height);2549};25502551/**2552* Returns a new rectangle which describes the intersection (overlap) of this rectangle and the specified rectangle,2553* or null if they do not intersect.2554* @method intersection2555* @param {Rectangle} rect The rectangle to calculate an intersection with.2556* @return {Rectangle} A new rectangle describing the intersection or null.2557*/2558p.intersection = function(rect) {2559var x1 = rect.x, y1 = rect.y, x2 = x1+rect.width, y2 = y1+rect.height;2560if (this.x > x1) { x1 = this.x; }2561if (this.y > y1) { y1 = this.y; }2562if (this.x + this.width < x2) { x2 = this.x + this.width; }2563if (this.y + this.height < y2) { y2 = this.y + this.height; }2564return (x2 <= x1 || y2 <= y1) ? null : new Rectangle(x1, y1, x2-x1, y2-y1);2565};25662567/**2568* Returns true if the specified rectangle intersects (has any overlap) with this rectangle.2569* @method intersects2570* @param {Rectangle} rect The rectangle to compare.2571* @return {Boolean} True if the rectangles intersect.2572*/2573p.intersects = function(rect) {2574return (rect.x <= this.x+this.width && this.x <= rect.x+rect.width && rect.y <= this.y+this.height && this.y <= rect.y + rect.height);2575};25762577/**2578* Returns true if the width or height are equal or less than 0.2579* @method isEmpty2580* @return {Boolean} True if the rectangle is empty.2581*/2582p.isEmpty = function() {2583return this.width <= 0 || this.height <= 0;2584};25852586/**2587* Returns a clone of the Rectangle instance.2588* @method clone2589* @return {Rectangle} a clone of the Rectangle instance.2590**/2591p.clone = function() {2592return new Rectangle(this.x, this.y, this.width, this.height);2593};25942595/**2596* Returns a string representation of this object.2597* @method toString2598* @return {String} a string representation of the instance.2599**/2600p.toString = function() {2601return "[Rectangle (x="+this.x+" y="+this.y+" width="+this.width+" height="+this.height+")]";2602};260326042605createjs.Rectangle = Rectangle;2606}());26072608//##############################################################################2609// ButtonHelper.js2610//##############################################################################26112612this.createjs = this.createjs||{};26132614(function() {2615"use strict";261626172618// constructor:2619/**2620* The ButtonHelper is a helper class to create interactive buttons from {{#crossLink "MovieClip"}}{{/crossLink}} or2621* {{#crossLink "Sprite"}}{{/crossLink}} instances. This class will intercept mouse events from an object, and2622* automatically call {{#crossLink "Sprite/gotoAndStop"}}{{/crossLink}} or {{#crossLink "Sprite/gotoAndPlay"}}{{/crossLink}},2623* to the respective animation labels, add a pointer cursor, and allows the user to define a hit state frame.2624*2625* The ButtonHelper instance does not need to be added to the stage, but a reference should be maintained to prevent2626* garbage collection.2627*2628* Note that over states will not work unless you call {{#crossLink "Stage/enableMouseOver"}}{{/crossLink}}.2629*2630* <h4>Example</h4>2631*2632* var helper = new createjs.ButtonHelper(myInstance, "out", "over", "down", false, myInstance, "hit");2633* myInstance.addEventListener("click", handleClick);2634* function handleClick(event) {2635* // Click Happened.2636* }2637*2638* @class ButtonHelper2639* @param {Sprite|MovieClip} target The instance to manage.2640* @param {String} [outLabel="out"] The label or animation to go to when the user rolls out of the button.2641* @param {String} [overLabel="over"] The label or animation to go to when the user rolls over the button.2642* @param {String} [downLabel="down"] The label or animation to go to when the user presses the button.2643* @param {Boolean} [play=false] If the helper should call "gotoAndPlay" or "gotoAndStop" on the button when changing2644* states.2645* @param {DisplayObject} [hitArea] An optional item to use as the hit state for the button. If this is not defined,2646* then the button's visible states will be used instead. Note that the same instance as the "target" argument can be2647* used for the hitState.2648* @param {String} [hitLabel] The label or animation on the hitArea instance that defines the hitArea bounds. If this is2649* null, then the default state of the hitArea will be used. *2650* @constructor2651*/2652function ButtonHelper(target, outLabel, overLabel, downLabel, play, hitArea, hitLabel) {2653if (!target.addEventListener) { return; }265426552656// public properties:2657/**2658* The target for this button helper.2659* @property target2660* @type MovieClip | Sprite2661* @readonly2662**/2663this.target = target;26642665/**2666* The label name or frame number to display when the user mouses out of the target. Defaults to "over".2667* @property overLabel2668* @type String | Number2669**/2670this.overLabel = overLabel == null ? "over" : overLabel;26712672/**2673* The label name or frame number to display when the user mouses over the target. Defaults to "out".2674* @property outLabel2675* @type String | Number2676**/2677this.outLabel = outLabel == null ? "out" : outLabel;26782679/**2680* The label name or frame number to display when the user presses on the target. Defaults to "down".2681* @property downLabel2682* @type String | Number2683**/2684this.downLabel = downLabel == null ? "down" : downLabel;26852686/**2687* If true, then ButtonHelper will call gotoAndPlay, if false, it will use gotoAndStop. Default is false.2688* @property play2689* @default false2690* @type Boolean2691**/2692this.play = play;269326942695// private properties2696/**2697* @property _isPressed2698* @type Boolean2699* @protected2700**/2701this._isPressed = false;27022703/**2704* @property _isOver2705* @type Boolean2706* @protected2707**/2708this._isOver = false;27092710/**2711* @property _enabled2712* @type Boolean2713* @protected2714**/2715this._enabled = false;27162717// setup:2718target.mouseChildren = false; // prevents issues when children are removed from the display list when state changes.2719this.enabled = true;2720this.handleEvent({});2721if (hitArea) {2722if (hitLabel) {2723hitArea.actionsEnabled = false;2724hitArea.gotoAndStop&&hitArea.gotoAndStop(hitLabel);2725}2726target.hitArea = hitArea;2727}2728}2729var p = ButtonHelper.prototype;27302731/**2732* <strong>REMOVED</strong>. Removed in favor of using `MySuperClass_constructor`.2733* See {{#crossLink "Utility Methods/extend"}}{{/crossLink}} and {{#crossLink "Utility Methods/promote"}}{{/crossLink}}2734* for details.2735*2736* There is an inheritance tutorial distributed with EaselJS in /tutorials/Inheritance.2737*2738* @method initialize2739* @protected2740* @deprecated2741*/2742// p.initialize = function() {}; // searchable for devs wondering where it is.274327442745// getter / setters:2746/**2747* Use the {{#crossLink "ButtonHelper/enabled:property"}}{{/crossLink}} property instead.2748* @method setEnabled2749* @param {Boolean} value2750* @deprecated2751**/2752p.setEnabled = function(value) { // TODO: deprecated.2753if (value == this._enabled) { return; }2754var o = this.target;2755this._enabled = value;2756if (value) {2757o.cursor = "pointer";2758o.addEventListener("rollover", this);2759o.addEventListener("rollout", this);2760o.addEventListener("mousedown", this);2761o.addEventListener("pressup", this);2762if (o._reset) { o.__reset = o._reset; o._reset = this._reset;}2763} else {2764o.cursor = null;2765o.removeEventListener("rollover", this);2766o.removeEventListener("rollout", this);2767o.removeEventListener("mousedown", this);2768o.removeEventListener("pressup", this);2769if (o.__reset) { o._reset = o.__reset; delete(o.__reset); }2770}2771};2772/**2773* Use the {{#crossLink "ButtonHelper/enabled:property"}}{{/crossLink}} property instead.2774* @method getEnabled2775* @return {Boolean}2776* @deprecated2777**/2778p.getEnabled = function() {2779return this._enabled;2780};27812782/**2783* Enables or disables the button functionality on the target.2784* @property enabled2785* @type {Boolean}2786**/2787try {2788Object.defineProperties(p, {2789enabled: { get: p.getEnabled, set: p.setEnabled }2790});2791} catch (e) {} // TODO: use Log279227932794// public methods:2795/**2796* Returns a string representation of this object.2797* @method toString2798* @return {String} a string representation of the instance.2799**/2800p.toString = function() {2801return "[ButtonHelper]";2802};280328042805// private methods:2806/**2807* @method handleEvent2808* @param {Object} evt The mouse event to handle.2809* @protected2810**/2811p.handleEvent = function(evt) {2812var label, t = this.target, type = evt.type;2813if (type == "mousedown") {2814this._isPressed = true;2815label = this.downLabel;2816} else if (type == "pressup") {2817this._isPressed = false;2818label = this._isOver ? this.overLabel : this.outLabel;2819} else if (type == "rollover") {2820this._isOver = true;2821label = this._isPressed ? this.downLabel : this.overLabel;2822} else { // rollout and default2823this._isOver = false;2824label = this._isPressed ? this.overLabel : this.outLabel;2825}2826if (this.play) {2827t.gotoAndPlay&&t.gotoAndPlay(label);2828} else {2829t.gotoAndStop&&t.gotoAndStop(label);2830}2831};28322833/**2834* Injected into target. Preserves the paused state through a reset.2835* @method _reset2836* @protected2837**/2838p._reset = function() {2839// TODO: explore better ways to handle this issue. This is hacky & disrupts object signatures.2840var p = this.paused;2841this.__reset();2842this.paused = p;2843};284428452846createjs.ButtonHelper = ButtonHelper;2847}());28482849//##############################################################################2850// Shadow.js2851//##############################################################################28522853this.createjs = this.createjs||{};28542855(function() {2856"use strict";285728582859// constructor:2860/**2861* This class encapsulates the properties required to define a shadow to apply to a {{#crossLink "DisplayObject"}}{{/crossLink}}2862* via its <code>shadow</code> property.2863*2864* <h4>Example</h4>2865*2866* myImage.shadow = new createjs.Shadow("#000000", 5, 5, 10);2867*2868* @class Shadow2869* @constructor2870* @param {String} color The color of the shadow. This can be any valid CSS color value.2871* @param {Number} offsetX The x offset of the shadow in pixels.2872* @param {Number} offsetY The y offset of the shadow in pixels.2873* @param {Number} blur The size of the blurring effect.2874**/2875function Shadow(color, offsetX, offsetY, blur) {287628772878// public properties:2879/**2880* The color of the shadow. This can be any valid CSS color value.2881* @property color2882* @type String2883* @default null2884*/2885this.color = color||"black";28862887/** The x offset of the shadow.2888* @property offsetX2889* @type Number2890* @default 02891*/2892this.offsetX = offsetX||0;28932894/** The y offset of the shadow.2895* @property offsetY2896* @type Number2897* @default 02898*/2899this.offsetY = offsetY||0;29002901/** The blur of the shadow.2902* @property blur2903* @type Number2904* @default 02905*/2906this.blur = blur||0;2907}2908var p = Shadow.prototype;29092910/**2911* <strong>REMOVED</strong>. Removed in favor of using `MySuperClass_constructor`.2912* See {{#crossLink "Utility Methods/extend"}}{{/crossLink}} and {{#crossLink "Utility Methods/promote"}}{{/crossLink}}2913* for details.2914*2915* There is an inheritance tutorial distributed with EaselJS in /tutorials/Inheritance.2916*2917* @method initialize2918* @protected2919* @deprecated2920*/2921// p.initialize = function() {}; // searchable for devs wondering where it is.292229232924// static public properties:2925/**2926* An identity shadow object (all properties are set to 0).2927* @property identity2928* @type Shadow2929* @static2930* @final2931* @readonly2932**/2933Shadow.identity = new Shadow("transparent", 0, 0, 0);293429352936// public methods:2937/**2938* Returns a string representation of this object.2939* @method toString2940* @return {String} a string representation of the instance.2941**/2942p.toString = function() {2943return "[Shadow]";2944};29452946/**2947* Returns a clone of this Shadow instance.2948* @method clone2949* @return {Shadow} A clone of the current Shadow instance.2950**/2951p.clone = function() {2952return new Shadow(this.color, this.offsetX, this.offsetY, this.blur);2953};295429552956createjs.Shadow = Shadow;2957}());29582959//##############################################################################2960// SpriteSheet.js2961//##############################################################################29622963this.createjs = this.createjs||{};29642965(function() {2966"use strict";296729682969// constructor:2970/**2971* Encapsulates the properties and methods associated with a sprite sheet. A sprite sheet is a series of images (usually2972* animation frames) combined into a larger image (or images). For example, an animation consisting of eight 100x1002973* images could be combined into a single 400x200 sprite sheet (4 frames across by 2 high).2974*2975* The data passed to the SpriteSheet constructor defines:2976* <ol>2977* <li> The source image or images to use.</li>2978* <li> The positions of individual image frames.</li>2979* <li> Sequences of frames that form named animations. Optional.</li>2980* <li> The target playback framerate. Optional.</li>2981* </ol>2982* <h3>SpriteSheet Format</h3>2983* SpriteSheets are an object with two required properties (`images` and `frames`), and two optional properties2984* (`framerate` and `animations`). This makes them easy to define in javascript code, or in JSON.2985*2986* <h4>images</h4>2987* An array of source images. Images can be either an HTMlimage2988* instance, or a uri to an image. The former is recommended to control preloading.2989*2990* images: [image1, "path/to/image2.png"],2991*2992* <h4>frames</h4>2993* Defines the individual frames. There are two supported formats for frame data:2994* When all of the frames are the same size (in a grid), use an object with `width`, `height`, `regX`, `regY`,2995* and `count` properties.2996*2997* <ul>2998* <li>`width` & `height` are required and specify the dimensions of the frames</li>2999* <li>`regX` & `regY` indicate the registration point or "origin" of the frames</li>3000* <li>`spacing` indicate the spacing between frames</li>3001* <li>`margin` specify the margin around the image(s)</li>3002* <li>`count` allows you to specify the total number of frames in the spritesheet; if omitted, this will3003* be calculated based on the dimensions of the source images and the frames. Frames will be assigned3004* indexes based on their position in the source images (left to right, top to bottom).</li>3005* </ul>3006*3007* frames: {width:64, height:64, count:20, regX: 32, regY:64, spacing:0, margin:0}3008*3009* If the frames are of different sizes, use an array of frame definitions. Each definition is itself an array3010* with 4 required and 3 optional entries, in the order:3011*3012* <ul>3013* <li>The first four, `x`, `y`, `width`, and `height` are required and define the frame rectangle.</li>3014* <li>The fifth, `imageIndex`, specifies the index of the source image (defaults to 0)</li>3015* <li>The last two, `regX` and `regY` specify the registration point of the frame</li>3016* </ul>3017*3018* frames: [3019* // x, y, width, height, imageIndex*, regX*, regY*3020* [64, 0, 96, 64],3021* [0, 0, 64, 64, 1, 32, 32]3022* // etc.3023* ]3024*3025* <h4>animations</h4>3026* Optional. An object defining sequences of frames to play as named animations. Each property corresponds to an3027* animation of the same name. Each animation must specify the frames to play, and may3028* also include a relative playback `speed` (ex. 2 would playback at double speed, 0.5 at half), and3029* the name of the `next` animation to sequence to after it completes.3030*3031* There are three formats supported for defining the frames in an animation, which can be mixed and matched as appropriate:3032* <ol>3033* <li>for a single frame animation, you can simply specify the frame index3034*3035* animations: {3036* sit: 73037* }3038*3039* </li>3040* <li>3041* for an animation of consecutive frames, you can use an array with two required, and two optional entries3042* in the order: `start`, `end`, `next`, and `speed`. This will play the frames from start to end inclusive.3043*3044* animations: {3045* // start, end, next*, speed*3046* run: [0, 8],3047* jump: [9, 12, "run", 2]3048* }3049*3050* </li>3051* <li>3052* for non-consecutive frames, you can use an object with a `frames` property defining an array of frame3053* indexes to play in order. The object can also specify `next` and `speed` properties.3054*3055* animations: {3056* walk: {3057* frames: [1,2,3,3,2,1]3058* },3059* shoot: {3060* frames: [1,4,5,6],3061* next: "walk",3062* speed: 0.53063* }3064* }3065*3066* </li>3067* </ol>3068* <strong>Note:</strong> the `speed` property was added in EaselJS 0.7.0. Earlier versions had a `frequency`3069* property instead, which was the inverse of `speed`. For example, a value of "4" would be 1/4 normal speed in3070* earlier versions, but is 4x normal speed in EaselJS 0.7.0+.3071*3072* <h4>framerate</h4>3073* Optional. Indicates the default framerate to play this spritesheet at in frames per second. See3074* {{#crossLink "SpriteSheet/framerate:property"}}{{/crossLink}} for more information.3075*3076* framerate: 203077*3078* Note that the Sprite framerate will only work if the stage update method is provided with the {{#crossLink "Ticker/tick:event"}}{{/crossLink}}3079* event generated by the {{#crossLink "Ticker"}}{{/crossLink}}.3080*3081* createjs.Ticker.on("tick", handleTick);3082* function handleTick(event) {3083* stage.update(event);3084* }3085*3086* <h3>Example</h3>3087* To define a simple sprite sheet, with a single image "sprites.jpg" arranged in a regular 50x50 grid with three3088* animations: "stand" showing the first frame, "run" looping frame 1-5 inclusive, and "jump" playing frame 6-8 and3089* sequencing back to run.3090*3091* var data = {3092* images: ["sprites.jpg"],3093* frames: {width:50, height:50},3094* animations: {3095* stand:0,3096* run:[1,5],3097* jump:[6,8,"run"]3098* }3099* };3100* var spriteSheet = new createjs.SpriteSheet(data);3101* var animation = new createjs.Sprite(spriteSheet, "run");3102*3103* <h3>Generating SpriteSheet Images</h3>3104* Spritesheets can be created manually by combining images in PhotoShop, and specifying the frame size or3105* coordinates manually, however there are a number of tools that facilitate this.3106* <ul>3107* <li>Exporting SpriteSheets or HTML5 content from Flash Pro supports the EaselJS SpriteSheet format.</li>3108* <li>The popular <a href="https://www.codeandweb.com/texturepacker/easeljs" target="_blank">Texture Packer</a> has3109* EaselJS support.3110* <li>SWF animations in Flash can be exported to SpriteSheets using <a href="http://createjs.com/zoe" target="_blank"></a></li>3111* </ul>3112*3113* <h3>Cross Origin Issues</h3>3114* <strong>Warning:</strong> Images loaded cross-origin will throw cross-origin security errors when interacted with3115* using:3116* <ul>3117* <li>a mouse</li>3118* <li>methods such as {{#crossLink "Container/getObjectUnderPoint"}}{{/crossLink}}</li>3119* <li>Filters (see {{#crossLink "Filter"}}{{/crossLink}})</li>3120* <li>caching (see {{#crossLink "DisplayObject/cache"}}{{/crossLink}})</li>3121* </ul>3122* You can get around this by setting `crossOrigin` property on your images before passing them to EaselJS, or3123* setting the `crossOrigin` property on PreloadJS' LoadQueue or LoadItems.3124*3125* var image = new Image();3126* img.crossOrigin="Anonymous";3127* img.src = "http://server-with-CORS-support.com/path/to/image.jpg";3128*3129* If you pass string paths to SpriteSheets, they will not work cross-origin. The server that stores the image must3130* support cross-origin requests, or this will not work. For more information, check out3131* <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS" target="_blank">CORS overview on MDN</a>.3132*3133* @class SpriteSheet3134* @constructor3135* @param {Object} data An object describing the SpriteSheet data.3136* @extends EventDispatcher3137**/3138function SpriteSheet(data) {3139this.EventDispatcher_constructor();314031413142// public properties:3143/**3144* Indicates whether all images are finished loading.3145* @property complete3146* @type Boolean3147* @readonly3148**/3149this.complete = true;31503151/**3152* Specifies the framerate to use by default for Sprite instances using the SpriteSheet. See the Sprite class3153* {{#crossLink "Sprite/framerate:property"}}{{/crossLink}} for more information.3154* @property framerate3155* @type Number3156**/3157this.framerate = 0;315831593160// private properties:3161/**3162* @property _animations3163* @protected3164* @type Array3165**/3166this._animations = null;31673168/**3169* @property _frames3170* @protected3171* @type Array3172**/3173this._frames = null;31743175/**3176* @property _images3177* @protected3178* @type Array3179**/3180this._images = null;31813182/**3183* @property _data3184* @protected3185* @type Object3186**/3187this._data = null;31883189/**3190* @property _loadCount3191* @protected3192* @type Number3193**/3194this._loadCount = 0;31953196// only used for simple frame defs:3197/**3198* @property _frameHeight3199* @protected3200* @type Number3201**/3202this._frameHeight = 0;32033204/**3205* @property _frameWidth3206* @protected3207* @type Number3208**/3209this._frameWidth = 0;32103211/**3212* @property _numFrames3213* @protected3214* @type Number3215**/3216this._numFrames = 0;32173218/**3219* @property _regX3220* @protected3221* @type Number3222**/3223this._regX = 0;32243225/**3226* @property _regY3227* @protected3228* @type Number3229**/3230this._regY = 0;32313232/**3233* @property _spacing3234* @protected3235* @type Number3236**/3237this._spacing = 0;32383239/**3240* @property _margin3241* @protected3242* @type Number3243**/3244this._margin = 0;32453246// setup:3247this._parseData(data);3248}3249var p = createjs.extend(SpriteSheet, createjs.EventDispatcher);32503251// TODO: deprecated3252// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.325332543255// events:3256/**3257* Dispatched when all images are loaded. Note that this only fires if the images3258* were not fully loaded when the sprite sheet was initialized. You should check the complete property3259* to prior to adding a listener. Ex.3260*3261* var sheet = new createjs.SpriteSheet(data);3262* if (!sheet.complete) {3263* // not preloaded, listen for the complete event:3264* sheet.addEventListener("complete", handler);3265* }3266*3267* @event complete3268* @param {Object} target The object that dispatched the event.3269* @param {String} type The event type.3270* @since 0.6.03271*/32723273/**3274* Dispatched when getFrame is called with a valid frame index. This is primarily intended for use by {{#crossLink "SpriteSheetBuilder"}}{{/crossLink}}3275* when doing on-demand rendering.3276* @event getframe3277* @param {Number} index The frame index.3278* @param {Object} frame The frame object that getFrame will return.3279*/32803281/**3282* Dispatched when an image encounters an error. A SpriteSheet will dispatch an error event for each image that3283* encounters an error, and will still dispatch a {{#crossLink "SpriteSheet/complete:event"}}{{/crossLink}}3284* event once all images are finished processing, even if an error is encountered.3285* @event error3286* @param {String} src The source of the image that failed to load.3287* @since 0.8.23288*/328932903291// getter / setters:3292/**3293* Use the {{#crossLink "SpriteSheet/animations:property"}}{{/crossLink}} property instead.3294* @method getAnimations3295* @return {Array}3296* @deprecated3297**/3298p.getAnimations = function() {3299return this._animations.slice();3300};33013302/**3303* Returns an array of all available animation names available on this sprite sheet as strings.3304* @property animations3305* @type {Array}3306* @readonly3307**/3308try {3309Object.defineProperties(p, {3310animations: { get: p.getAnimations }3311});3312} catch (e) {}331333143315// public methods:3316/**3317* Returns the total number of frames in the specified animation, or in the whole sprite3318* sheet if the animation param is omitted. Returns 0 if the spritesheet relies on calculated frame counts, and3319* the images have not been fully loaded.3320* @method getNumFrames3321* @param {String} animation The name of the animation to get a frame count for.3322* @return {Number} The number of frames in the animation, or in the entire sprite sheet if the animation param is omitted.3323*/3324p.getNumFrames = function(animation) {3325if (animation == null) {3326return this._frames ? this._frames.length : this._numFrames || 0;3327} else {3328var data = this._data[animation];3329if (data == null) { return 0; }3330else { return data.frames.length; }3331}3332};33333334/**3335* Returns an object defining the specified animation. The returned object contains:<UL>3336* <li>frames: an array of the frame ids in the animation</li>3337* <li>speed: the playback speed for this animation</li>3338* <li>name: the name of the animation</li>3339* <li>next: the default animation to play next. If the animation loops, the name and next property will be the3340* same.</li>3341* </UL>3342* @method getAnimation3343* @param {String} name The name of the animation to get.3344* @return {Object} a generic object with frames, speed, name, and next properties.3345**/3346p.getAnimation = function(name) {3347return this._data[name];3348};33493350/**3351* Returns an object specifying the image and source rect of the specified frame. The returned object has:<UL>3352* <li>an image property holding a reference to the image object in which the frame is found</li>3353* <li>a rect property containing a Rectangle instance which defines the boundaries for the frame within that3354* image.</li>3355* <li> A regX and regY property corresponding to the regX/Y values for the frame.3356* </UL>3357* @method getFrame3358* @param {Number} frameIndex The index of the frame.3359* @return {Object} a generic object with image and rect properties. Returns null if the frame does not exist.3360**/3361p.getFrame = function(frameIndex) {3362var frame;3363if (this._frames && (frame=this._frames[frameIndex])) { return frame; }3364return null;3365};33663367/**3368* Returns a {{#crossLink "Rectangle"}}{{/crossLink}} instance defining the bounds of the specified frame relative3369* to the origin. For example, a 90 x 70 frame with a regX of 50 and a regY of 40 would return:3370*3371* [x=-50, y=-40, width=90, height=70]3372*3373* @method getFrameBounds3374* @param {Number} frameIndex The index of the frame.3375* @param {Rectangle} [rectangle] A Rectangle instance to copy the values into. By default a new instance is created.3376* @return {Rectangle} A Rectangle instance. Returns null if the frame does not exist, or the image is not fully loaded.3377**/3378p.getFrameBounds = function(frameIndex, rectangle) {3379var frame = this.getFrame(frameIndex);3380return frame ? (rectangle||new createjs.Rectangle()).setValues(-frame.regX, -frame.regY, frame.rect.width, frame.rect.height) : null;3381};33823383/**3384* Returns a string representation of this object.3385* @method toString3386* @return {String} a string representation of the instance.3387**/3388p.toString = function() {3389return "[SpriteSheet]";3390};33913392/**3393* SpriteSheet cannot be cloned. A SpriteSheet can be shared by multiple Sprite instances without cloning it.3394* @method clone3395**/3396p.clone = function() {3397throw("SpriteSheet cannot be cloned.")3398};33993400// private methods:3401/**3402* @method _parseData3403* @param {Object} data An object describing the SpriteSheet data.3404* @protected3405**/3406p._parseData = function(data) {3407var i,l,o,a;3408if (data == null) { return; }34093410this.framerate = data.framerate||0;34113412// parse images:3413if (data.images && (l=data.images.length) > 0) {3414a = this._images = [];3415for (i=0; i<l; i++) {3416var img = data.images[i];3417if (typeof img == "string") {3418var src = img;3419img = document.createElement("img");3420img.src = src;3421}3422a.push(img);3423if (!img.getContext && !img.naturalWidth) {3424this._loadCount++;3425this.complete = false;3426(function(o, src) { img.onload = function() { o._handleImageLoad(src); } })(this, src);3427(function(o, src) { img.onerror = function() { o._handleImageError(src); } })(this, src);3428}3429}3430}34313432// parse frames:3433if (data.frames == null) { // nothing3434} else if (Array.isArray(data.frames)) {3435this._frames = [];3436a = data.frames;3437for (i=0,l=a.length;i<l;i++) {3438var arr = a[i];3439this._frames.push({image:this._images[arr[4]?arr[4]:0], rect:new createjs.Rectangle(arr[0],arr[1],arr[2],arr[3]), regX:arr[5]||0, regY:arr[6]||0 });3440}3441} else {3442o = data.frames;3443this._frameWidth = o.width;3444this._frameHeight = o.height;3445this._regX = o.regX||0;3446this._regY = o.regY||0;3447this._spacing = o.spacing||0;3448this._margin = o.margin||0;3449this._numFrames = o.count;3450if (this._loadCount == 0) { this._calculateFrames(); }3451}34523453// parse animations:3454this._animations = [];3455if ((o=data.animations) != null) {3456this._data = {};3457var name;3458for (name in o) {3459var anim = {name:name};3460var obj = o[name];3461if (typeof obj == "number") { // single frame3462a = anim.frames = [obj];3463} else if (Array.isArray(obj)) { // simple3464if (obj.length == 1) { anim.frames = [obj[0]]; }3465else {3466anim.speed = obj[3];3467anim.next = obj[2];3468a = anim.frames = [];3469for (i=obj[0];i<=obj[1];i++) {3470a.push(i);3471}3472}3473} else { // complex3474anim.speed = obj.speed;3475anim.next = obj.next;3476var frames = obj.frames;3477a = anim.frames = (typeof frames == "number") ? [frames] : frames.slice(0);3478}3479if (anim.next === true || anim.next === undefined) { anim.next = name; } // loop3480if (anim.next === false || (a.length < 2 && anim.next == name)) { anim.next = null; } // stop3481if (!anim.speed) { anim.speed = 1; }3482this._animations.push(name);3483this._data[name] = anim;3484}3485}3486};34873488/**3489* @method _handleImageLoad3490* @protected3491**/3492p._handleImageLoad = function(src) {3493if (--this._loadCount == 0) {3494this._calculateFrames();3495this.complete = true;3496this.dispatchEvent("complete");3497}3498};34993500/**3501* @method _handleImageError3502* @protected3503*/3504p._handleImageError = function (src) {3505var errorEvent = new createjs.Event("error");3506errorEvent.src = src;3507this.dispatchEvent(errorEvent);35083509// Complete is still dispatched.3510if (--this._loadCount == 0) {3511this.dispatchEvent("complete");3512}3513};35143515/**3516* @method _calculateFrames3517* @protected3518**/3519p._calculateFrames = function() {3520if (this._frames || this._frameWidth == 0) { return; }35213522this._frames = [];35233524var maxFrames = this._numFrames || 100000; // if we go over this, something is wrong.3525var frameCount = 0, frameWidth = this._frameWidth, frameHeight = this._frameHeight;3526var spacing = this._spacing, margin = this._margin;35273528imgLoop:3529for (var i=0, imgs=this._images; i<imgs.length; i++) {3530var img = imgs[i], imgW = img.width, imgH = img.height;35313532var y = margin;3533while (y <= imgH-margin-frameHeight) {3534var x = margin;3535while (x <= imgW-margin-frameWidth) {3536if (frameCount >= maxFrames) { break imgLoop; }3537frameCount++;3538this._frames.push({3539image: img,3540rect: new createjs.Rectangle(x, y, frameWidth, frameHeight),3541regX: this._regX,3542regY: this._regY3543});3544x += frameWidth+spacing;3545}3546y += frameHeight+spacing;3547}3548}3549this._numFrames = frameCount;3550};355135523553createjs.SpriteSheet = createjs.promote(SpriteSheet, "EventDispatcher");3554}());35553556//##############################################################################3557// Graphics.js3558//##############################################################################35593560this.createjs = this.createjs||{};35613562(function() {3563"use strict";356435653566// constructor:3567/**3568* The Graphics class exposes an easy to use API for generating vector drawing instructions and drawing them to a3569* specified context. Note that you can use Graphics without any dependency on the EaselJS framework by calling {{#crossLink "Graphics/draw"}}{{/crossLink}}3570* directly, or it can be used with the {{#crossLink "Shape"}}{{/crossLink}} object to draw vector graphics within the3571* context of an EaselJS display list.3572*3573* There are two approaches to working with Graphics object: calling methods on a Graphics instance (the "Graphics API"), or3574* instantiating Graphics command objects and adding them to the graphics queue via {{#crossLink "Graphics/append"}}{{/crossLink}}.3575* The former abstracts the latter, simplifying beginning and ending paths, fills, and strokes.3576*3577* var g = new createjs.Graphics();3578* g.setStrokeStyle(1);3579* g.beginStroke("#000000");3580* g.beginFill("red");3581* g.drawCircle(0,0,30);3582*3583* All drawing methods in Graphics return the Graphics instance, so they can be chained together. For example,3584* the following line of code would generate the instructions to draw a rectangle with a red stroke and blue fill:3585*3586* myGraphics.beginStroke("red").beginFill("blue").drawRect(20, 20, 100, 50);3587*3588* Each graphics API call generates a command object (see below). The last command to be created can be accessed via3589* {{#crossLink "Graphics/command:property"}}{{/crossLink}}:3590*3591* var fillCommand = myGraphics.beginFill("red").command;3592* // ... later, update the fill style/color:3593* fillCommand.style = "blue";3594* // or change it to a bitmap fill:3595* fillCommand.bitmap(myImage);3596*3597* For more direct control of rendering, you can instantiate and append command objects to the graphics queue directly. In this case, you3598* need to manage path creation manually, and ensure that fill/stroke is applied to a defined path:3599*3600* // start a new path. Graphics.beginCmd is a reusable BeginPath instance:3601* myGraphics.append(createjs.Graphics.beginCmd);3602* // we need to define the path before applying the fill:3603* var circle = new createjs.Graphics.Circle(0,0,30);3604* myGraphics.append(circle);3605* // fill the path we just defined:3606* var fill = new createjs.Graphics.Fill("red");3607* myGraphics.append(fill);3608*3609* These approaches can be used together, for example to insert a custom command:3610*3611* myGraphics.beginFill("red");3612* var customCommand = new CustomSpiralCommand(etc);3613* myGraphics.append(customCommand);3614* myGraphics.beginFill("blue");3615* myGraphics.drawCircle(0, 0, 30);3616*3617* See {{#crossLink "Graphics/append"}}{{/crossLink}} for more info on creating custom commands.3618*3619* <h4>Tiny API</h4>3620* The Graphics class also includes a "tiny API", which is one or two-letter methods that are shortcuts for all of the3621* Graphics methods. These methods are great for creating compact instructions, and is used by the Toolkit for CreateJS3622* to generate readable code. All tiny methods are marked as protected, so you can view them by enabling protected3623* descriptions in the docs.3624*3625* <table>3626* <tr><td><b>Tiny</b></td><td><b>Method</b></td><td><b>Tiny</b></td><td><b>Method</b></td></tr>3627* <tr><td>mt</td><td>{{#crossLink "Graphics/moveTo"}}{{/crossLink}} </td>3628* <td>lt</td> <td>{{#crossLink "Graphics/lineTo"}}{{/crossLink}}</td></tr>3629* <tr><td>a/at</td><td>{{#crossLink "Graphics/arc"}}{{/crossLink}} / {{#crossLink "Graphics/arcTo"}}{{/crossLink}} </td>3630* <td>bt</td><td>{{#crossLink "Graphics/bezierCurveTo"}}{{/crossLink}} </td></tr>3631* <tr><td>qt</td><td>{{#crossLink "Graphics/quadraticCurveTo"}}{{/crossLink}} (also curveTo)</td>3632* <td>r</td><td>{{#crossLink "Graphics/rect"}}{{/crossLink}} </td></tr>3633* <tr><td>cp</td><td>{{#crossLink "Graphics/closePath"}}{{/crossLink}} </td>3634* <td>c</td><td>{{#crossLink "Graphics/clear"}}{{/crossLink}} </td></tr>3635* <tr><td>f</td><td>{{#crossLink "Graphics/beginFill"}}{{/crossLink}} </td>3636* <td>lf</td><td>{{#crossLink "Graphics/beginLinearGradientFill"}}{{/crossLink}} </td></tr>3637* <tr><td>rf</td><td>{{#crossLink "Graphics/beginRadialGradientFill"}}{{/crossLink}} </td>3638* <td>bf</td><td>{{#crossLink "Graphics/beginBitmapFill"}}{{/crossLink}} </td></tr>3639* <tr><td>ef</td><td>{{#crossLink "Graphics/endFill"}}{{/crossLink}} </td>3640* <td>ss / sd</td><td>{{#crossLink "Graphics/setStrokeStyle"}}{{/crossLink}} / {{#crossLink "Graphics/setStrokeDash"}}{{/crossLink}} </td></tr>3641* <tr><td>s</td><td>{{#crossLink "Graphics/beginStroke"}}{{/crossLink}} </td>3642* <td>ls</td><td>{{#crossLink "Graphics/beginLinearGradientStroke"}}{{/crossLink}} </td></tr>3643* <tr><td>rs</td><td>{{#crossLink "Graphics/beginRadialGradientStroke"}}{{/crossLink}} </td>3644* <td>bs</td><td>{{#crossLink "Graphics/beginBitmapStroke"}}{{/crossLink}} </td></tr>3645* <tr><td>es</td><td>{{#crossLink "Graphics/endStroke"}}{{/crossLink}} </td>3646* <td>dr</td><td>{{#crossLink "Graphics/drawRect"}}{{/crossLink}} </td></tr>3647* <tr><td>rr</td><td>{{#crossLink "Graphics/drawRoundRect"}}{{/crossLink}} </td>3648* <td>rc</td><td>{{#crossLink "Graphics/drawRoundRectComplex"}}{{/crossLink}} </td></tr>3649* <tr><td>dc</td><td>{{#crossLink "Graphics/drawCircle"}}{{/crossLink}} </td>3650* <td>de</td><td>{{#crossLink "Graphics/drawEllipse"}}{{/crossLink}} </td></tr>3651* <tr><td>dp</td><td>{{#crossLink "Graphics/drawPolyStar"}}{{/crossLink}} </td>3652* <td>p</td><td>{{#crossLink "Graphics/decodePath"}}{{/crossLink}} </td></tr>3653* </table>3654*3655* Here is the above example, using the tiny API instead.3656*3657* myGraphics.s("red").f("blue").r(20, 20, 100, 50);3658*3659* @class Graphics3660* @constructor3661**/3662function Graphics() {366336643665// public properties3666/**3667* Holds a reference to the last command that was created or appended. For example, you could retain a reference3668* to a Fill command in order to dynamically update the color later by using:3669*3670* var myFill = myGraphics.beginFill("red").command;3671* // update color later:3672* myFill.style = "yellow";3673*3674* @property command3675* @type Object3676**/3677this.command = null;367836793680// private properties3681/**3682* @property _stroke3683* @protected3684* @type {Stroke}3685**/3686this._stroke = null;36873688/**3689* @property _strokeStyle3690* @protected3691* @type {StrokeStyle}3692**/3693this._strokeStyle = null;36943695/**3696* @property _oldStrokeStyle3697* @protected3698* @type {StrokeStyle}3699**/3700this._oldStrokeStyle = null;37013702/**3703* @property _strokeDash3704* @protected3705* @type {StrokeDash}3706**/3707this._strokeDash = null;37083709/**3710* @property _oldStrokeDash3711* @protected3712* @type {StrokeDash}3713**/3714this._oldStrokeDash = null;37153716/**3717* @property _strokeIgnoreScale3718* @protected3719* @type Boolean3720**/3721this._strokeIgnoreScale = false;37223723/**3724* @property _fill3725* @protected3726* @type {Fill}3727**/3728this._fill = null;37293730/**3731* @property _instructions3732* @protected3733* @type {Array}3734**/3735this._instructions = [];37363737/**3738* Indicates the last instruction index that was committed.3739* @property _commitIndex3740* @protected3741* @type {Number}3742**/3743this._commitIndex = 0;37443745/**3746* Uncommitted instructions.3747* @property _activeInstructions3748* @protected3749* @type {Array}3750**/3751this._activeInstructions = [];37523753/**3754* This indicates that there have been changes to the activeInstruction list since the last updateInstructions call.3755* @property _dirty3756* @protected3757* @type {Boolean}3758* @default false3759**/3760this._dirty = false;37613762/**3763* Index to draw from if a store operation has happened.3764* @property _storeIndex3765* @protected3766* @type {Number}3767* @default 03768**/3769this._storeIndex = 0;37703771// setup:3772this.clear();3773}3774var p = Graphics.prototype;3775var G = Graphics; // shortcut37763777/**3778* <strong>REMOVED</strong>. Removed in favor of using `MySuperClass_constructor`.3779* See {{#crossLink "Utility Methods/extend"}}{{/crossLink}} and {{#crossLink "Utility Methods/promote"}}{{/crossLink}}3780* for details.3781*3782* There is an inheritance tutorial distributed with EaselJS in /tutorials/Inheritance.3783*3784* @method initialize3785* @protected3786* @deprecated3787*/3788// p.initialize = function() {}; // searchable for devs wondering where it is.378937903791// static public methods:3792/**3793* Returns a CSS compatible color string based on the specified RGB numeric color values in the format3794* "rgba(255,255,255,1.0)", or if alpha is null then in the format "rgb(255,255,255)". For example,3795*3796* createjs.Graphics.getRGB(50, 100, 150, 0.5);3797* // Returns "rgba(50,100,150,0.5)"3798*3799* It also supports passing a single hex color value as the first param, and an optional alpha value as the second3800* param. For example,3801*3802* createjs.Graphics.getRGB(0xFF00FF, 0.2);3803* // Returns "rgba(255,0,255,0.2)"3804*3805* @method getRGB3806* @static3807* @param {Number} r The red component for the color, between 0 and 0xFF (255).3808* @param {Number} g The green component for the color, between 0 and 0xFF (255).3809* @param {Number} b The blue component for the color, between 0 and 0xFF (255).3810* @param {Number} [alpha] The alpha component for the color where 0 is fully transparent and 1 is fully opaque.3811* @return {String} A CSS compatible color string based on the specified RGB numeric color values in the format3812* "rgba(255,255,255,1.0)", or if alpha is null then in the format "rgb(255,255,255)".3813**/3814Graphics.getRGB = function(r, g, b, alpha) {3815if (r != null && b == null) {3816alpha = g;3817b = r&0xFF;3818g = r>>8&0xFF;3819r = r>>16&0xFF;3820}3821if (alpha == null) {3822return "rgb("+r+","+g+","+b+")";3823} else {3824return "rgba("+r+","+g+","+b+","+alpha+")";3825}3826};38273828/**3829* Returns a CSS compatible color string based on the specified HSL numeric color values in the format "hsla(360,100,100,1.0)",3830* or if alpha is null then in the format "hsl(360,100,100)".3831*3832* createjs.Graphics.getHSL(150, 100, 70);3833* // Returns "hsl(150,100,70)"3834*3835* @method getHSL3836* @static3837* @param {Number} hue The hue component for the color, between 0 and 360.3838* @param {Number} saturation The saturation component for the color, between 0 and 100.3839* @param {Number} lightness The lightness component for the color, between 0 and 100.3840* @param {Number} [alpha] The alpha component for the color where 0 is fully transparent and 1 is fully opaque.3841* @return {String} A CSS compatible color string based on the specified HSL numeric color values in the format3842* "hsla(360,100,100,1.0)", or if alpha is null then in the format "hsl(360,100,100)".3843**/3844Graphics.getHSL = function(hue, saturation, lightness, alpha) {3845if (alpha == null) {3846return "hsl("+(hue%360)+","+saturation+"%,"+lightness+"%)";3847} else {3848return "hsla("+(hue%360)+","+saturation+"%,"+lightness+"%,"+alpha+")";3849}3850};385138523853// static properties:3854/**3855* A reusable instance of {{#crossLink "Graphics/BeginPath"}}{{/crossLink}} to avoid3856* unnecessary instantiation.3857* @property beginCmd3858* @type {Graphics.BeginPath}3859* @static3860**/3861// defined at the bottom of this file.38623863/**3864* Map of Base64 characters to values. Used by {{#crossLink "Graphics/decodePath"}}{{/crossLink}}.3865* @property BASE_643866* @static3867* @final3868* @readonly3869* @type {Object}3870**/3871Graphics.BASE_64 = {"A":0,"B":1,"C":2,"D":3,"E":4,"F":5,"G":6,"H":7,"I":8,"J":9,"K":10,"L":11,"M":12,"N":13,"O":14,"P":15,"Q":16,"R":17,"S":18,"T":19,"U":20,"V":21,"W":22,"X":23,"Y":24,"Z":25,"a":26,"b":27,"c":28,"d":29,"e":30,"f":31,"g":32,"h":33,"i":34,"j":35,"k":36,"l":37,"m":38,"n":39,"o":40,"p":41,"q":42,"r":43,"s":44,"t":45,"u":46,"v":47,"w":48,"x":49,"y":50,"z":51,"0":52,"1":53,"2":54,"3":55,"4":56,"5":57,"6":58,"7":59,"8":60,"9":61,"+":62,"/":63};38723873/**3874* Maps numeric values for the caps parameter of {{#crossLink "Graphics/setStrokeStyle"}}{{/crossLink}} to3875* corresponding string values. This is primarily for use with the tiny API. The mappings are as follows: 0 to3876* "butt", 1 to "round", and 2 to "square".3877* For example, to set the line caps to "square":3878*3879* myGraphics.ss(16, 2);3880*3881* @property STROKE_CAPS_MAP3882* @static3883* @final3884* @readonly3885* @type {Array}3886**/3887Graphics.STROKE_CAPS_MAP = ["butt", "round", "square"];38883889/**3890* Maps numeric values for the joints parameter of {{#crossLink "Graphics/setStrokeStyle"}}{{/crossLink}} to3891* corresponding string values. This is primarily for use with the tiny API. The mappings are as follows: 0 to3892* "miter", 1 to "round", and 2 to "bevel".3893* For example, to set the line joints to "bevel":3894*3895* myGraphics.ss(16, 0, 2);3896*3897* @property STROKE_JOINTS_MAP3898* @static3899* @final3900* @readonly3901* @type {Array}3902**/3903Graphics.STROKE_JOINTS_MAP = ["miter", "round", "bevel"];39043905/**3906* @property _ctx3907* @static3908* @protected3909* @type {CanvasRenderingContext2D}3910**/3911var canvas = (createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"));3912if (canvas.getContext) {3913Graphics._ctx = canvas.getContext("2d");3914canvas.width = canvas.height = 1;3915}391639173918// getter / setters:3919/**3920* Use the {{#crossLink "Graphics/instructions:property"}}{{/crossLink}} property instead.3921* @method getInstructions3922* @return {Array}3923* @deprecated3924**/3925p.getInstructions = function() {3926this._updateInstructions();3927return this._instructions;3928};39293930/**3931* Returns the graphics instructions array. Each entry is a graphics command object (ex. Graphics.Fill, Graphics.Rect)3932* Modifying the returned array directly is not recommended, and is likely to result in unexpected behaviour.3933*3934* This property is mainly intended for introspection of the instructions (ex. for graphics export).3935* @property instructions3936* @type {Array}3937* @readonly3938**/3939try {3940Object.defineProperties(p, {3941instructions: { get: p.getInstructions }3942});3943} catch (e) {}394439453946// public methods:3947/**3948* Returns true if this Graphics instance has no drawing commands.3949* @method isEmpty3950* @return {Boolean} Returns true if this Graphics instance has no drawing commands.3951**/3952p.isEmpty = function() {3953return !(this._instructions.length || this._activeInstructions.length);3954};39553956/**3957* Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.3958* Returns true if the draw was handled (useful for overriding functionality).3959*3960* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.3961* @method draw3962* @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.3963* @param {Object} data Optional data that is passed to graphics command exec methods. When called from a Shape instance, the shape passes itself as the data parameter. This can be used by custom graphic commands to insert contextual data.3964**/3965p.draw = function(ctx, data) {3966this._updateInstructions();3967var instr = this._instructions;3968for (var i=this._storeIndex, l=instr.length; i<l; i++) {3969instr[i].exec(ctx, data);3970}3971};39723973/**3974* Draws only the path described for this Graphics instance, skipping any non-path instructions, including fill and3975* stroke descriptions. Used for <code>DisplayObject.mask</code> to draw the clipping path, for example.3976*3977* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.3978* @method drawAsPath3979* @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.3980**/3981p.drawAsPath = function(ctx) {3982this._updateInstructions();3983var instr, instrs = this._instructions;3984for (var i=this._storeIndex, l=instrs.length; i<l; i++) {3985// the first command is always a beginPath command.3986if ((instr = instrs[i]).path !== false) { instr.exec(ctx); }3987}3988};398939903991// public methods that map directly to context 2D calls:3992/**3993* Moves the drawing point to the specified position. A tiny API method "mt" also exists.3994* @method moveTo3995* @param {Number} x The x coordinate the drawing point should move to.3996* @param {Number} y The y coordinate the drawing point should move to.3997* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls).3998* @chainable3999**/4000p.moveTo = function(x, y) {4001return this.append(new G.MoveTo(x,y), true);4002};40034004/**4005* Draws a line from the current drawing point to the specified position, which become the new current drawing4006* point. Note that you *must* call {{#crossLink "Graphics/moveTo"}}{{/crossLink}} before the first `lineTo()`.4007* A tiny API method "lt" also exists.4008*4009* For detailed information, read the4010* <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#complex-shapes-(paths)">4011* whatwg spec</a>.4012* @method lineTo4013* @param {Number} x The x coordinate the drawing point should draw to.4014* @param {Number} y The y coordinate the drawing point should draw to.4015* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4016* @chainable4017**/4018p.lineTo = function(x, y) {4019return this.append(new G.LineTo(x,y));4020};40214022/**4023* Draws an arc with the specified control points and radius. For detailed information, read the4024* <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-arcto">4025* whatwg spec</a>. A tiny API method "at" also exists.4026* @method arcTo4027* @param {Number} x14028* @param {Number} y14029* @param {Number} x24030* @param {Number} y24031* @param {Number} radius4032* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4033* @chainable4034**/4035p.arcTo = function(x1, y1, x2, y2, radius) {4036return this.append(new G.ArcTo(x1, y1, x2, y2, radius));4037};40384039/**4040* Draws an arc defined by the radius, startAngle and endAngle arguments, centered at the position (x, y). For4041* example, to draw a full circle with a radius of 20 centered at (100, 100):4042*4043* arc(100, 100, 20, 0, Math.PI*2);4044*4045* For detailed information, read the4046* <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-arc">whatwg spec</a>.4047* A tiny API method "a" also exists.4048* @method arc4049* @param {Number} x4050* @param {Number} y4051* @param {Number} radius4052* @param {Number} startAngle Measured in radians.4053* @param {Number} endAngle Measured in radians.4054* @param {Boolean} anticlockwise4055* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4056* @chainable4057**/4058p.arc = function(x, y, radius, startAngle, endAngle, anticlockwise) {4059return this.append(new G.Arc(x, y, radius, startAngle, endAngle, anticlockwise));4060};40614062/**4063* Draws a quadratic curve from the current drawing point to (x, y) using the control point (cpx, cpy). For detailed4064* information, read the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-quadraticcurveto">4065* whatwg spec</a>. A tiny API method "qt" also exists.4066* @method quadraticCurveTo4067* @param {Number} cpx4068* @param {Number} cpy4069* @param {Number} x4070* @param {Number} y4071* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4072* @chainable4073**/4074p.quadraticCurveTo = function(cpx, cpy, x, y) {4075return this.append(new G.QuadraticCurveTo(cpx, cpy, x, y));4076};40774078/**4079* Draws a bezier curve from the current drawing point to (x, y) using the control points (cp1x, cp1y) and (cp2x,4080* cp2y). For detailed information, read the4081* <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-beziercurveto">4082* whatwg spec</a>. A tiny API method "bt" also exists.4083* @method bezierCurveTo4084* @param {Number} cp1x4085* @param {Number} cp1y4086* @param {Number} cp2x4087* @param {Number} cp2y4088* @param {Number} x4089* @param {Number} y4090* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4091* @chainable4092**/4093p.bezierCurveTo = function(cp1x, cp1y, cp2x, cp2y, x, y) {4094return this.append(new G.BezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y));4095};40964097/**4098* Draws a rectangle at (x, y) with the specified width and height using the current fill and/or stroke.4099* For detailed information, read the4100* <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-rect">4101* whatwg spec</a>. A tiny API method "r" also exists.4102* @method rect4103* @param {Number} x4104* @param {Number} y4105* @param {Number} w Width of the rectangle4106* @param {Number} h Height of the rectangle4107* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4108* @chainable4109**/4110p.rect = function(x, y, w, h) {4111return this.append(new G.Rect(x, y, w, h));4112};41134114/**4115* Closes the current path, effectively drawing a line from the current drawing point to the first drawing point specified4116* since the fill or stroke was last set. A tiny API method "cp" also exists.4117* @method closePath4118* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4119* @chainable4120**/4121p.closePath = function() {4122return this._activeInstructions.length ? this.append(new G.ClosePath()) : this;4123};412441254126// public methods that roughly map to Flash graphics APIs:4127/**4128* Clears all drawing instructions, effectively resetting this Graphics instance. Any line and fill styles will need4129* to be redefined to draw shapes following a clear call. A tiny API method "c" also exists.4130* @method clear4131* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4132* @chainable4133**/4134p.clear = function() {4135this._instructions.length = this._activeInstructions.length = this._commitIndex = 0;4136this._strokeStyle = this._oldStrokeStyle = this._stroke = this._fill = this._strokeDash = this._oldStrokeDash = null;4137this._dirty = this._strokeIgnoreScale = false;4138return this;4139};41404141/**4142* Begins a fill with the specified color. This ends the current sub-path. A tiny API method "f" also exists.4143* @method beginFill4144* @param {String} color A CSS compatible color value (ex. "red", "#FF0000", or "rgba(255,0,0,0.5)"). Setting to4145* null will result in no fill.4146* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4147* @chainable4148**/4149p.beginFill = function(color) {4150return this._setFill(color ? new G.Fill(color) : null);4151};41524153/**4154* Begins a linear gradient fill defined by the line (x0, y0) to (x1, y1). This ends the current sub-path. For4155* example, the following code defines a black to white vertical gradient ranging from 20px to 120px, and draws a4156* square to display it:4157*4158* myGraphics.beginLinearGradientFill(["#000","#FFF"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120);4159*4160* A tiny API method "lf" also exists.4161* @method beginLinearGradientFill4162* @param {Array} colors An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient4163* drawing from red to blue.4164* @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw4165* the first color to 10% then interpolating to the second color at 90%.4166* @param {Number} x0 The position of the first point defining the line that defines the gradient direction and size.4167* @param {Number} y0 The position of the first point defining the line that defines the gradient direction and size.4168* @param {Number} x1 The position of the second point defining the line that defines the gradient direction and size.4169* @param {Number} y1 The position of the second point defining the line that defines the gradient direction and size.4170* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4171* @chainable4172**/4173p.beginLinearGradientFill = function(colors, ratios, x0, y0, x1, y1) {4174return this._setFill(new G.Fill().linearGradient(colors, ratios, x0, y0, x1, y1));4175};41764177/**4178* Begins a radial gradient fill. This ends the current sub-path. For example, the following code defines a red to4179* blue radial gradient centered at (100, 100), with a radius of 50, and draws a circle to display it:4180*4181* myGraphics.beginRadialGradientFill(["#F00","#00F"], [0, 1], 100, 100, 0, 100, 100, 50).drawCircle(100, 100, 50);4182*4183* A tiny API method "rf" also exists.4184* @method beginRadialGradientFill4185* @param {Array} colors An array of CSS compatible color values. For example, ["#F00","#00F"] would define4186* a gradient drawing from red to blue.4187* @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,4188* 0.9] would draw the first color to 10% then interpolating to the second color at 90%.4189* @param {Number} x0 Center position of the inner circle that defines the gradient.4190* @param {Number} y0 Center position of the inner circle that defines the gradient.4191* @param {Number} r0 Radius of the inner circle that defines the gradient.4192* @param {Number} x1 Center position of the outer circle that defines the gradient.4193* @param {Number} y1 Center position of the outer circle that defines the gradient.4194* @param {Number} r1 Radius of the outer circle that defines the gradient.4195* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4196* @chainable4197**/4198p.beginRadialGradientFill = function(colors, ratios, x0, y0, r0, x1, y1, r1) {4199return this._setFill(new G.Fill().radialGradient(colors, ratios, x0, y0, r0, x1, y1, r1));4200};42014202/**4203* Begins a pattern fill using the specified image. This ends the current sub-path. A tiny API method "bf" also4204* exists.4205* @method beginBitmapFill4206* @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement} image The Image, Canvas, or Video object to use4207* as the pattern. Must be loaded prior to creating a bitmap fill, or the fill will be empty.4208* @param {String} repetition Optional. Indicates whether to repeat the image in the fill area. One of "repeat",4209* "repeat-x", "repeat-y", or "no-repeat". Defaults to "repeat". Note that Firefox does not support "repeat-x" or4210* "repeat-y" (latest tests were in FF 20.0), and will default to "repeat".4211* @param {Matrix2D} matrix Optional. Specifies a transformation matrix for the bitmap fill. This transformation4212* will be applied relative to the parent transform.4213* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4214* @chainable4215**/4216p.beginBitmapFill = function(image, repetition, matrix) {4217return this._setFill(new G.Fill(null,matrix).bitmap(image, repetition));4218};42194220/**4221* Ends the current sub-path, and begins a new one with no fill. Functionally identical to <code>beginFill(null)</code>.4222* A tiny API method "ef" also exists.4223* @method endFill4224* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4225* @chainable4226**/4227p.endFill = function() {4228return this.beginFill();4229};42304231/**4232* Sets the stroke style. Like all drawing methods, this can be chained, so you can define4233* the stroke style and color in a single line of code like so:4234*4235* myGraphics.setStrokeStyle(8,"round").beginStroke("#F00");4236*4237* A tiny API method "ss" also exists.4238* @method setStrokeStyle4239* @param {Number} thickness The width of the stroke.4240* @param {String | Number} [caps=0] Indicates the type of caps to use at the end of lines. One of butt,4241* round, or square. Defaults to "butt". Also accepts the values 0 (butt), 1 (round), and 2 (square) for use with4242* the tiny API.4243* @param {String | Number} [joints=0] Specifies the type of joints that should be used where two lines meet.4244* One of bevel, round, or miter. Defaults to "miter". Also accepts the values 0 (miter), 1 (round), and 2 (bevel)4245* for use with the tiny API.4246* @param {Number} [miterLimit=10] If joints is set to "miter", then you can specify a miter limit ratio which4247* controls at what point a mitered joint will be clipped.4248* @param {Boolean} [ignoreScale=false] If true, the stroke will be drawn at the specified thickness regardless4249* of active transformations.4250* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4251* @chainable4252**/4253p.setStrokeStyle = function(thickness, caps, joints, miterLimit, ignoreScale) {4254this._updateInstructions(true);4255this._strokeStyle = this.command = new G.StrokeStyle(thickness, caps, joints, miterLimit, ignoreScale);42564257// ignoreScale lives on Stroke, not StrokeStyle, so we do a little trickery:4258if (this._stroke) { this._stroke.ignoreScale = ignoreScale; }4259this._strokeIgnoreScale = ignoreScale;4260return this;4261};42624263/**4264* Sets or clears the stroke dash pattern.4265*4266* myGraphics.setStrokeDash([20, 10], 0);4267*4268* A tiny API method `sd` also exists.4269* @method setStrokeDash4270* @param {Array} [segments] An array specifying the dash pattern, alternating between line and gap.4271* For example, `[20,10]` would create a pattern of 20 pixel lines with 10 pixel gaps between them.4272* Passing null or an empty array will clear the existing stroke dash.4273* @param {Number} [offset=0] The offset of the dash pattern. For example, you could increment this value to create a "marching ants" effect.4274* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4275* @chainable4276**/4277p.setStrokeDash = function(segments, offset) {4278this._updateInstructions(true);4279this._strokeDash = this.command = new G.StrokeDash(segments, offset);4280return this;4281};42824283/**4284* Begins a stroke with the specified color. This ends the current sub-path. A tiny API method "s" also exists.4285* @method beginStroke4286* @param {String} color A CSS compatible color value (ex. "#FF0000", "red", or "rgba(255,0,0,0.5)"). Setting to4287* null will result in no stroke.4288* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4289* @chainable4290**/4291p.beginStroke = function(color) {4292return this._setStroke(color ? new G.Stroke(color) : null);4293};42944295/**4296* Begins a linear gradient stroke defined by the line (x0, y0) to (x1, y1). This ends the current sub-path. For4297* example, the following code defines a black to white vertical gradient ranging from 20px to 120px, and draws a4298* square to display it:4299*4300* myGraphics.setStrokeStyle(10).4301* beginLinearGradientStroke(["#000","#FFF"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120);4302*4303* A tiny API method "ls" also exists.4304* @method beginLinearGradientStroke4305* @param {Array} colors An array of CSS compatible color values. For example, ["#F00","#00F"] would define4306* a gradient drawing from red to blue.4307* @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,4308* 0.9] would draw the first color to 10% then interpolating to the second color at 90%.4309* @param {Number} x0 The position of the first point defining the line that defines the gradient direction and size.4310* @param {Number} y0 The position of the first point defining the line that defines the gradient direction and size.4311* @param {Number} x1 The position of the second point defining the line that defines the gradient direction and size.4312* @param {Number} y1 The position of the second point defining the line that defines the gradient direction and size.4313* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4314* @chainable4315**/4316p.beginLinearGradientStroke = function(colors, ratios, x0, y0, x1, y1) {4317return this._setStroke(new G.Stroke().linearGradient(colors, ratios, x0, y0, x1, y1));4318};43194320/**4321* Begins a radial gradient stroke. This ends the current sub-path. For example, the following code defines a red to4322* blue radial gradient centered at (100, 100), with a radius of 50, and draws a rectangle to display it:4323*4324* myGraphics.setStrokeStyle(10)4325* .beginRadialGradientStroke(["#F00","#00F"], [0, 1], 100, 100, 0, 100, 100, 50)4326* .drawRect(50, 90, 150, 110);4327*4328* A tiny API method "rs" also exists.4329* @method beginRadialGradientStroke4330* @param {Array} colors An array of CSS compatible color values. For example, ["#F00","#00F"] would define4331* a gradient drawing from red to blue.4332* @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,4333* 0.9] would draw the first color to 10% then interpolating to the second color at 90%, then draw the second color4334* to 100%.4335* @param {Number} x0 Center position of the inner circle that defines the gradient.4336* @param {Number} y0 Center position of the inner circle that defines the gradient.4337* @param {Number} r0 Radius of the inner circle that defines the gradient.4338* @param {Number} x1 Center position of the outer circle that defines the gradient.4339* @param {Number} y1 Center position of the outer circle that defines the gradient.4340* @param {Number} r1 Radius of the outer circle that defines the gradient.4341* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4342* @chainable4343**/4344p.beginRadialGradientStroke = function(colors, ratios, x0, y0, r0, x1, y1, r1) {4345return this._setStroke(new G.Stroke().radialGradient(colors, ratios, x0, y0, r0, x1, y1, r1));4346};43474348/**4349* Begins a pattern fill using the specified image. This ends the current sub-path. Note that unlike bitmap fills,4350* strokes do not currently support a matrix parameter due to limitations in the canvas API. A tiny API method "bs"4351* also exists.4352* @method beginBitmapStroke4353* @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement} image The Image, Canvas, or Video object to use4354* as the pattern. Must be loaded prior to creating a bitmap fill, or the fill will be empty.4355* @param {String} [repetition=repeat] Optional. Indicates whether to repeat the image in the fill area. One of4356* "repeat", "repeat-x", "repeat-y", or "no-repeat". Defaults to "repeat".4357* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4358* @chainable4359**/4360p.beginBitmapStroke = function(image, repetition) {4361// NOTE: matrix is not supported for stroke because transforms on strokes also affect the drawn stroke width.4362return this._setStroke(new G.Stroke().bitmap(image, repetition));4363};43644365/**4366* Ends the current sub-path, and begins a new one with no stroke. Functionally identical to <code>beginStroke(null)</code>.4367* A tiny API method "es" also exists.4368* @method endStroke4369* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4370* @chainable4371**/4372p.endStroke = function() {4373return this.beginStroke();4374};43754376/**4377* Maps the familiar ActionScript <code>curveTo()</code> method to the functionally similar {{#crossLink "Graphics/quadraticCurveTo"}}{{/crossLink}}4378* method.4379* @method quadraticCurveTo4380* @param {Number} cpx4381* @param {Number} cpy4382* @param {Number} x4383* @param {Number} y4384* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4385* @chainable4386**/4387p.curveTo = p.quadraticCurveTo;43884389/**4390*4391* Maps the familiar ActionScript <code>drawRect()</code> method to the functionally similar {{#crossLink "Graphics/rect"}}{{/crossLink}}4392* method.4393* @method drawRect4394* @param {Number} x4395* @param {Number} y4396* @param {Number} w Width of the rectangle4397* @param {Number} h Height of the rectangle4398* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4399* @chainable4400**/4401p.drawRect = p.rect;44024403/**4404* Draws a rounded rectangle with all corners with the specified radius.4405* @method drawRoundRect4406* @param {Number} x4407* @param {Number} y4408* @param {Number} w4409* @param {Number} h4410* @param {Number} radius Corner radius.4411* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4412* @chainable4413**/4414p.drawRoundRect = function(x, y, w, h, radius) {4415return this.drawRoundRectComplex(x, y, w, h, radius, radius, radius, radius);4416};44174418/**4419* Draws a rounded rectangle with different corner radii. Supports positive and negative corner radii. A tiny API4420* method "rc" also exists.4421* @method drawRoundRectComplex4422* @param {Number} x The horizontal coordinate to draw the round rect.4423* @param {Number} y The vertical coordinate to draw the round rect.4424* @param {Number} w The width of the round rect.4425* @param {Number} h The height of the round rect.4426* @param {Number} radiusTL Top left corner radius.4427* @param {Number} radiusTR Top right corner radius.4428* @param {Number} radiusBR Bottom right corner radius.4429* @param {Number} radiusBL Bottom left corner radius.4430* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4431* @chainable4432**/4433p.drawRoundRectComplex = function(x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL) {4434return this.append(new G.RoundRect(x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL));4435};44364437/**4438* Draws a circle with the specified radius at (x, y).4439*4440* var g = new createjs.Graphics();4441* g.setStrokeStyle(1);4442* g.beginStroke(createjs.Graphics.getRGB(0,0,0));4443* g.beginFill(createjs.Graphics.getRGB(255,0,0));4444* g.drawCircle(0,0,3);4445*4446* var s = new createjs.Shape(g);4447* s.x = 100;4448* s.y = 100;4449*4450* stage.addChild(s);4451* stage.update();4452*4453* A tiny API method "dc" also exists.4454* @method drawCircle4455* @param {Number} x x coordinate center point of circle.4456* @param {Number} y y coordinate center point of circle.4457* @param {Number} radius Radius of circle.4458* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4459* @chainable4460**/4461p.drawCircle = function(x, y, radius) {4462return this.append(new G.Circle(x, y, radius));4463};44644465/**4466* Draws an ellipse (oval) with a specified width (w) and height (h). Similar to {{#crossLink "Graphics/drawCircle"}}{{/crossLink}},4467* except the width and height can be different. A tiny API method "de" also exists.4468* @method drawEllipse4469* @param {Number} x The left coordinate point of the ellipse. Note that this is different from {{#crossLink "Graphics/drawCircle"}}{{/crossLink}}4470* which draws from center.4471* @param {Number} y The top coordinate point of the ellipse. Note that this is different from {{#crossLink "Graphics/drawCircle"}}{{/crossLink}}4472* which draws from the center.4473* @param {Number} w The height (horizontal diameter) of the ellipse. The horizontal radius will be half of this4474* number.4475* @param {Number} h The width (vertical diameter) of the ellipse. The vertical radius will be half of this number.4476* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4477* @chainable4478**/4479p.drawEllipse = function(x, y, w, h) {4480return this.append(new G.Ellipse(x, y, w, h));4481};44824483/**4484* Draws a star if pointSize is greater than 0, or a regular polygon if pointSize is 0 with the specified number of4485* points. For example, the following code will draw a familiar 5 pointed star shape centered at 100, 100 and with a4486* radius of 50:4487*4488* myGraphics.beginFill("#FF0").drawPolyStar(100, 100, 50, 5, 0.6, -90);4489* // Note: -90 makes the first point vertical4490*4491* A tiny API method "dp" also exists.4492*4493* @method drawPolyStar4494* @param {Number} x Position of the center of the shape.4495* @param {Number} y Position of the center of the shape.4496* @param {Number} radius The outer radius of the shape.4497* @param {Number} sides The number of points on the star or sides on the polygon.4498* @param {Number} pointSize The depth or "pointy-ness" of the star points. A pointSize of 0 will draw a regular4499* polygon (no points), a pointSize of 1 will draw nothing because the points are infinitely pointy.4500* @param {Number} angle The angle of the first point / corner. For example a value of 0 will draw the first point4501* directly to the right of the center.4502* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4503* @chainable4504**/4505p.drawPolyStar = function(x, y, radius, sides, pointSize, angle) {4506return this.append(new G.PolyStar(x, y, radius, sides, pointSize, angle));4507};45084509// TODO: deprecated.4510/**4511* Removed in favour of using custom command objects with {{#crossLink "Graphics/append"}}{{/crossLink}}.4512* @method inject4513* @deprecated4514**/45154516/**4517* Appends a graphics command object to the graphics queue. Command objects expose an "exec" method4518* that accepts two parameters: the Context2D to operate on, and an arbitrary data object passed into4519* {{#crossLink "Graphics/draw"}}{{/crossLink}}. The latter will usually be the Shape instance that called draw.4520*4521* This method is used internally by Graphics methods, such as drawCircle, but can also be used directly to insert4522* built-in or custom graphics commands. For example:4523*4524* // attach data to our shape, so we can access it during the draw:4525* myShape.color = "red";4526*4527* // append a Circle command object:4528* myShape.graphics.append(new createjs.Graphics.Circle(50, 50, 30));4529*4530* // append a custom command object with an exec method that sets the fill style4531* // based on the shape's data, and then fills the circle.4532* myShape.graphics.append({exec:function(ctx, shape) {4533* ctx.fillStyle = shape.color;4534* ctx.fill();4535* }});4536*4537* @method append4538* @param {Object} command A graphics command object exposing an "exec" method.4539* @param {boolean} clean The clean param is primarily for internal use. A value of true indicates that a command does not generate a path that should be stroked or filled.4540* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4541* @chainable4542**/4543p.append = function(command, clean) {4544this._activeInstructions.push(command);4545this.command = command;4546if (!clean) { this._dirty = true; }4547return this;4548};45494550/**4551* Decodes a compact encoded path string into a series of draw instructions.4552* This format is not intended to be human readable, and is meant for use by authoring tools.4553* The format uses a base64 character set, with each character representing 6 bits, to define a series of draw4554* commands.4555*4556* Each command is comprised of a single "header" character followed by a variable number of alternating x and y4557* position values. Reading the header bits from left to right (most to least significant): bits 1 to 3 specify the4558* type of operation (0-moveTo, 1-lineTo, 2-quadraticCurveTo, 3-bezierCurveTo, 4-closePath, 5-7 unused). Bit 44559* indicates whether position values use 12 bits (2 characters) or 18 bits (3 characters), with a one indicating the4560* latter. Bits 5 and 6 are currently unused.4561*4562* Following the header is a series of 0 (closePath), 2 (moveTo, lineTo), 4 (quadraticCurveTo), or 6 (bezierCurveTo)4563* parameters. These parameters are alternating x/y positions represented by 2 or 3 characters (as indicated by the4564* 4th bit in the command char). These characters consist of a 1 bit sign (1 is negative, 0 is positive), followed4565* by an 11 (2 char) or 17 (3 char) bit integer value. All position values are in tenths of a pixel. Except in the4566* case of move operations which are absolute, this value is a delta from the previous x or y position (as4567* appropriate).4568*4569* For example, the string "A3cAAMAu4AAA" represents a line starting at -150,0 and ending at 150,0.4570* <br />A - bits 000000. First 3 bits (000) indicate a moveTo operation. 4th bit (0) indicates 2 chars per4571* parameter.4572* <br />n0 - 110111011100. Absolute x position of -150.0px. First bit indicates a negative value, remaining bits4573* indicate 1500 tenths of a pixel.4574* <br />AA - 000000000000. Absolute y position of 0.4575* <br />I - 001100. First 3 bits (001) indicate a lineTo operation. 4th bit (1) indicates 3 chars per parameter.4576* <br />Au4 - 000000101110111000. An x delta of 300.0px, which is added to the previous x value of -150.0px to4577* provide an absolute position of +150.0px.4578* <br />AAA - 000000000000000000. A y delta value of 0.4579*4580* A tiny API method "p" also exists.4581* @method decodePath4582* @param {String} str The path string to decode.4583* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4584* @chainable4585**/4586p.decodePath = function(str) {4587var instructions = [this.moveTo, this.lineTo, this.quadraticCurveTo, this.bezierCurveTo, this.closePath];4588var paramCount = [2, 2, 4, 6, 0];4589var i=0, l=str.length;4590var params = [];4591var x=0, y=0;4592var base64 = Graphics.BASE_64;45934594while (i<l) {4595var c = str.charAt(i);4596var n = base64[c];4597var fi = n>>3; // highest order bits 1-3 code for operation.4598var f = instructions[fi];4599// check that we have a valid instruction & that the unused bits are empty:4600if (!f || (n&3)) { throw("bad path data (@"+i+"): "+c); }4601var pl = paramCount[fi];4602if (!fi) { x=y=0; } // move operations reset the position.4603params.length = 0;4604i++;4605var charCount = (n>>2&1)+2; // 4th header bit indicates number size for this operation.4606for (var p=0; p<pl; p++) {4607var num = base64[str.charAt(i)];4608var sign = (num>>5) ? -1 : 1;4609num = ((num&31)<<6)|(base64[str.charAt(i+1)]);4610if (charCount == 3) { num = (num<<6)|(base64[str.charAt(i+2)]); }4611num = sign*num/10;4612if (p%2) { x = (num += x); }4613else { y = (num += y); }4614params[p] = num;4615i += charCount;4616}4617f.apply(this,params);4618}4619return this;4620};46214622/**4623* Stores all graphics commands so they won't be executed in future draws. Calling store() a second time adds to4624* the existing store. This also affects `drawAsPath()`.4625*4626* This is useful in cases where you are creating vector graphics in an iterative manner (ex. generative art), so4627* that only new graphics need to be drawn (which can provide huge performance benefits), but you wish to retain all4628* of the vector instructions for later use (ex. scaling, modifying, or exporting).4629*4630* Note that calling store() will force the active path (if any) to be ended in a manner similar to changing4631* the fill or stroke.4632*4633* For example, consider a application where the user draws lines with the mouse. As each line segment (or collection of4634* segments) are added to a Shape, it can be rasterized using {{#crossLink "DisplayObject/updateCache"}}{{/crossLink}},4635* and then stored, so that it can be redrawn at a different scale when the application is resized, or exported to SVG.4636*4637* // set up cache:4638* myShape.cache(0,0,500,500,scale);4639*4640* // when the user drags, draw a new line:4641* myShape.graphics.moveTo(oldX,oldY).lineTo(newX,newY);4642* // then draw it into the existing cache:4643* myShape.updateCache("source-over");4644* // store the new line, so it isn't redrawn next time:4645* myShape.store();4646*4647* // then, when the window resizes, we can re-render at a different scale:4648* // first, unstore all our lines:4649* myShape.unstore();4650* // then cache using the new scale:4651* myShape.cache(0,0,500,500,newScale);4652* // finally, store the existing commands again:4653* myShape.store();4654*4655* @method store4656* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4657* @chainable4658**/4659p.store = function() {4660this._updateInstructions(true);4661this._storeIndex = this._instructions.length;4662return this;4663};46644665/**4666* Unstores any graphics commands that were previously stored using {{#crossLink "Graphics/store"}}{{/crossLink}}4667* so that they will be executed in subsequent draw calls.4668*4669* @method unstore4670* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4671* @chainable4672**/4673p.unstore = function() {4674this._storeIndex = 0;4675return this;4676};46774678/**4679* Returns a clone of this Graphics instance. Note that the individual command objects are not cloned.4680* @method clone4681* @return {Graphics} A clone of the current Graphics instance.4682**/4683p.clone = function() {4684var o = new Graphics();4685o.command = this.command;4686o._stroke = this._stroke;4687o._strokeStyle = this._strokeStyle;4688o._strokeDash = this._strokeDash;4689o._strokeIgnoreScale = this._strokeIgnoreScale;4690o._fill = this._fill;4691o._instructions = this._instructions.slice();4692o._commitIndex = this._commitIndex;4693o._activeInstructions = this._activeInstructions.slice();4694o._dirty = this._dirty;4695o._storeIndex = this._storeIndex;4696return o;4697};46984699/**4700* Returns a string representation of this object.4701* @method toString4702* @return {String} a string representation of the instance.4703**/4704p.toString = function() {4705return "[Graphics]";4706};470747084709// tiny API:4710/**4711* Shortcut to moveTo.4712* @method mt4713* @param {Number} x The x coordinate the drawing point should move to.4714* @param {Number} y The y coordinate the drawing point should move to.4715* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls).4716* @chainable4717* @protected4718**/4719p.mt = p.moveTo;47204721/**4722* Shortcut to lineTo.4723* @method lt4724* @param {Number} x The x coordinate the drawing point should draw to.4725* @param {Number} y The y coordinate the drawing point should draw to.4726* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4727* @chainable4728* @protected4729**/4730p.lt = p.lineTo;47314732/**4733* Shortcut to arcTo.4734* @method at4735* @param {Number} x14736* @param {Number} y14737* @param {Number} x24738* @param {Number} y24739* @param {Number} radius4740* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4741* @chainable4742* @protected4743**/4744p.at = p.arcTo;47454746/**4747* Shortcut to bezierCurveTo.4748* @method bt4749* @param {Number} cp1x4750* @param {Number} cp1y4751* @param {Number} cp2x4752* @param {Number} cp2y4753* @param {Number} x4754* @param {Number} y4755* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4756* @chainable4757* @protected4758**/4759p.bt = p.bezierCurveTo;47604761/**4762* Shortcut to quadraticCurveTo / curveTo.4763* @method qt4764* @param {Number} cpx4765* @param {Number} cpy4766* @param {Number} x4767* @param {Number} y4768* @protected4769* @chainable4770**/4771p.qt = p.quadraticCurveTo;47724773/**4774* Shortcut to arc.4775* @method a4776* @param {Number} x4777* @param {Number} y4778* @param {Number} radius4779* @param {Number} startAngle Measured in radians.4780* @param {Number} endAngle Measured in radians.4781* @param {Boolean} anticlockwise4782* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4783* @protected4784* @chainable4785**/4786p.a = p.arc;47874788/**4789* Shortcut to rect.4790* @method r4791* @param {Number} x4792* @param {Number} y4793* @param {Number} w Width of the rectangle4794* @param {Number} h Height of the rectangle4795* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4796* @chainable4797* @protected4798**/4799p.r = p.rect;48004801/**4802* Shortcut to closePath.4803* @method cp4804* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4805* @chainable4806* @protected4807**/4808p.cp = p.closePath;48094810/**4811* Shortcut to clear.4812* @method c4813* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4814* @chainable4815* @protected4816**/4817p.c = p.clear;48184819/**4820* Shortcut to beginFill.4821* @method f4822* @param {String} color A CSS compatible color value (ex. "red", "#FF0000", or "rgba(255,0,0,0.5)"). Setting to4823* null will result in no fill.4824* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4825* @chainable4826* @protected4827**/4828p.f = p.beginFill;48294830/**4831* Shortcut to beginLinearGradientFill.4832* @method lf4833* @param {Array} colors An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient4834* drawing from red to blue.4835* @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw4836* the first color to 10% then interpolating to the second color at 90%.4837* @param {Number} x0 The position of the first point defining the line that defines the gradient direction and size.4838* @param {Number} y0 The position of the first point defining the line that defines the gradient direction and size.4839* @param {Number} x1 The position of the second point defining the line that defines the gradient direction and size.4840* @param {Number} y1 The position of the second point defining the line that defines the gradient direction and size.4841* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4842* @chainable4843* @protected4844**/4845p.lf = p.beginLinearGradientFill;48464847/**4848* Shortcut to beginRadialGradientFill.4849* @method rf4850* @param {Array} colors An array of CSS compatible color values. For example, ["#F00","#00F"] would define4851* a gradient drawing from red to blue.4852* @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,4853* 0.9] would draw the first color to 10% then interpolating to the second color at 90%.4854* @param {Number} x0 Center position of the inner circle that defines the gradient.4855* @param {Number} y0 Center position of the inner circle that defines the gradient.4856* @param {Number} r0 Radius of the inner circle that defines the gradient.4857* @param {Number} x1 Center position of the outer circle that defines the gradient.4858* @param {Number} y1 Center position of the outer circle that defines the gradient.4859* @param {Number} r1 Radius of the outer circle that defines the gradient.4860* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4861* @chainable4862* @protected4863**/4864p.rf = p.beginRadialGradientFill;48654866/**4867* Shortcut to beginBitmapFill.4868* @method bf4869* @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement} image The Image, Canvas, or Video object to use4870* as the pattern.4871* @param {String} repetition Optional. Indicates whether to repeat the image in the fill area. One of "repeat",4872* "repeat-x", "repeat-y", or "no-repeat". Defaults to "repeat". Note that Firefox does not support "repeat-x" or4873* "repeat-y" (latest tests were in FF 20.0), and will default to "repeat".4874* @param {Matrix2D} matrix Optional. Specifies a transformation matrix for the bitmap fill. This transformation4875* will be applied relative to the parent transform.4876* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4877* @chainable4878* @protected4879**/4880p.bf = p.beginBitmapFill;48814882/**4883* Shortcut to endFill.4884* @method ef4885* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4886* @chainable4887* @protected4888**/4889p.ef = p.endFill;48904891/**4892* Shortcut to setStrokeStyle.4893* @method ss4894* @param {Number} thickness The width of the stroke.4895* @param {String | Number} [caps=0] Indicates the type of caps to use at the end of lines. One of butt,4896* round, or square. Defaults to "butt". Also accepts the values 0 (butt), 1 (round), and 2 (square) for use with4897* the tiny API.4898* @param {String | Number} [joints=0] Specifies the type of joints that should be used where two lines meet.4899* One of bevel, round, or miter. Defaults to "miter". Also accepts the values 0 (miter), 1 (round), and 2 (bevel)4900* for use with the tiny API.4901* @param {Number} [miterLimit=10] If joints is set to "miter", then you can specify a miter limit ratio which4902* controls at what point a mitered joint will be clipped.4903* @param {Boolean} [ignoreScale=false] If true, the stroke will be drawn at the specified thickness regardless4904* of active transformations.4905* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4906* @chainable4907* @protected4908**/4909p.ss = p.setStrokeStyle;49104911/**4912* Shortcut to setStrokeDash.4913* @method sd4914* @param {Array} [segments] An array specifying the dash pattern, alternating between line and gap.4915* For example, [20,10] would create a pattern of 20 pixel lines with 10 pixel gaps between them.4916* Passing null or an empty array will clear any existing dash.4917* @param {Number} [offset=0] The offset of the dash pattern. For example, you could increment this value to create a "marching ants" effect.4918* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4919* @chainable4920* @protected4921**/4922p.sd = p.setStrokeDash;49234924/**4925* Shortcut to beginStroke.4926* @method s4927* @param {String} color A CSS compatible color value (ex. "#FF0000", "red", or "rgba(255,0,0,0.5)"). Setting to4928* null will result in no stroke.4929* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4930* @chainable4931* @protected4932**/4933p.s = p.beginStroke;49344935/**4936* Shortcut to beginLinearGradientStroke.4937* @method ls4938* @param {Array} colors An array of CSS compatible color values. For example, ["#F00","#00F"] would define4939* a gradient drawing from red to blue.4940* @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,4941* 0.9] would draw the first color to 10% then interpolating to the second color at 90%.4942* @param {Number} x0 The position of the first point defining the line that defines the gradient direction and size.4943* @param {Number} y0 The position of the first point defining the line that defines the gradient direction and size.4944* @param {Number} x1 The position of the second point defining the line that defines the gradient direction and size.4945* @param {Number} y1 The position of the second point defining the line that defines the gradient direction and size.4946* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4947* @chainable4948* @protected4949**/4950p.ls = p.beginLinearGradientStroke;49514952/**4953* Shortcut to beginRadialGradientStroke.4954* @method rs4955* @param {Array} colors An array of CSS compatible color values. For example, ["#F00","#00F"] would define4956* a gradient drawing from red to blue.4957* @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,4958* 0.9] would draw the first color to 10% then interpolating to the second color at 90%, then draw the second color4959* to 100%.4960* @param {Number} x0 Center position of the inner circle that defines the gradient.4961* @param {Number} y0 Center position of the inner circle that defines the gradient.4962* @param {Number} r0 Radius of the inner circle that defines the gradient.4963* @param {Number} x1 Center position of the outer circle that defines the gradient.4964* @param {Number} y1 Center position of the outer circle that defines the gradient.4965* @param {Number} r1 Radius of the outer circle that defines the gradient.4966* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4967* @chainable4968* @protected4969**/4970p.rs = p.beginRadialGradientStroke;49714972/**4973* Shortcut to beginBitmapStroke.4974* @method bs4975* @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement} image The Image, Canvas, or Video object to use4976* as the pattern.4977* @param {String} [repetition=repeat] Optional. Indicates whether to repeat the image in the fill area. One of4978* "repeat", "repeat-x", "repeat-y", or "no-repeat". Defaults to "repeat".4979* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4980* @chainable4981* @protected4982**/4983p.bs = p.beginBitmapStroke;49844985/**4986* Shortcut to endStroke.4987* @method es4988* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)4989* @chainable4990* @protected4991**/4992p.es = p.endStroke;49934994/**4995* Shortcut to drawRect.4996* @method dr4997* @param {Number} x4998* @param {Number} y4999* @param {Number} w Width of the rectangle5000* @param {Number} h Height of the rectangle5001* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)5002* @chainable5003* @protected5004**/5005p.dr = p.drawRect;50065007/**5008* Shortcut to drawRoundRect.5009* @method rr5010* @param {Number} x5011* @param {Number} y5012* @param {Number} w5013* @param {Number} h5014* @param {Number} radius Corner radius.5015* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)5016* @chainable5017* @protected5018**/5019p.rr = p.drawRoundRect;50205021/**5022* Shortcut to drawRoundRectComplex.5023* @method rc5024* @param {Number} x The horizontal coordinate to draw the round rect.5025* @param {Number} y The vertical coordinate to draw the round rect.5026* @param {Number} w The width of the round rect.5027* @param {Number} h The height of the round rect.5028* @param {Number} radiusTL Top left corner radius.5029* @param {Number} radiusTR Top right corner radius.5030* @param {Number} radiusBR Bottom right corner radius.5031* @param {Number} radiusBL Bottom left corner radius.5032* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)5033* @chainable5034* @protected5035**/5036p.rc = p.drawRoundRectComplex;50375038/**5039* Shortcut to drawCircle.5040* @method dc5041* @param {Number} x x coordinate center point of circle.5042* @param {Number} y y coordinate center point of circle.5043* @param {Number} radius Radius of circle.5044* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)5045* @chainable5046* @protected5047**/5048p.dc = p.drawCircle;50495050/**5051* Shortcut to drawEllipse.5052* @method de5053* @param {Number} x The left coordinate point of the ellipse. Note that this is different from {{#crossLink "Graphics/drawCircle"}}{{/crossLink}}5054* which draws from center.5055* @param {Number} y The top coordinate point of the ellipse. Note that this is different from {{#crossLink "Graphics/drawCircle"}}{{/crossLink}}5056* which draws from the center.5057* @param {Number} w The height (horizontal diameter) of the ellipse. The horizontal radius will be half of this5058* number.5059* @param {Number} h The width (vertical diameter) of the ellipse. The vertical radius will be half of this number.5060* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)5061* @chainable5062* @protected5063**/5064p.de = p.drawEllipse;50655066/**5067* Shortcut to drawPolyStar.5068* @method dp5069* @param {Number} x Position of the center of the shape.5070* @param {Number} y Position of the center of the shape.5071* @param {Number} radius The outer radius of the shape.5072* @param {Number} sides The number of points on the star or sides on the polygon.5073* @param {Number} pointSize The depth or "pointy-ness" of the star points. A pointSize of 0 will draw a regular5074* polygon (no points), a pointSize of 1 will draw nothing because the points are infinitely pointy.5075* @param {Number} angle The angle of the first point / corner. For example a value of 0 will draw the first point5076* directly to the right of the center.5077* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)5078* @chainable5079* @protected5080**/5081p.dp = p.drawPolyStar;50825083/**5084* Shortcut to decodePath.5085* @method p5086* @param {String} str The path string to decode.5087* @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)5088* @chainable5089* @protected5090**/5091p.p = p.decodePath;509250935094// private methods:5095/**5096* @method _updateInstructions5097* @param commit5098* @protected5099**/5100p._updateInstructions = function(commit) {5101var instr = this._instructions, active = this._activeInstructions, commitIndex = this._commitIndex;51025103if (this._dirty && active.length) {5104instr.length = commitIndex; // remove old, uncommitted commands5105instr.push(Graphics.beginCmd);51065107var l = active.length, ll = instr.length;5108instr.length = ll+l;5109for (var i=0; i<l; i++) { instr[i+ll] = active[i]; }51105111if (this._fill) { instr.push(this._fill); }5112if (this._stroke) {5113// doesn't need to be re-applied if it hasn't changed.5114if (this._strokeDash !== this._oldStrokeDash) {5115this._oldStrokeDash = this._strokeDash;5116instr.push(this._strokeDash);5117}5118if (this._strokeStyle !== this._oldStrokeStyle) {5119this._oldStrokeStyle = this._strokeStyle;5120instr.push(this._strokeStyle);5121}5122instr.push(this._stroke);5123}51245125this._dirty = false;5126}51275128if (commit) {5129active.length = 0;5130this._commitIndex = instr.length;5131}5132};51335134/**5135* @method _setFill5136* @param fill5137* @protected5138**/5139p._setFill = function(fill) {5140this._updateInstructions(true);5141this.command = this._fill = fill;5142return this;5143};51445145/**5146* @method _setStroke5147* @param stroke5148* @protected5149**/5150p._setStroke = function(stroke) {5151this._updateInstructions(true);5152if (this.command = this._stroke = stroke) {5153stroke.ignoreScale = this._strokeIgnoreScale;5154}5155return this;5156};51575158// Command Objects:5159/**5160* @namespace Graphics5161*/5162/**5163* Graphics command object. See {{#crossLink "Graphics/lineTo"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information. See {{#crossLink "Graphics"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information.5164* @class LineTo5165* @constructor5166* @param {Number} x5167* @param {Number} y5168**/5169/**5170* @property x5171* @type Number5172*/5173/**5174* @property y5175* @type Number5176*/5177/**5178* Execute the Graphics command in the provided Canvas context.5179* @method exec5180* @param {CanvasRenderingContext2D} ctx The canvas rendering context5181*/5182(G.LineTo = function(x, y) {5183this.x = x; this.y = y;5184}).prototype.exec = function(ctx) { ctx.lineTo(this.x,this.y); };51855186/**5187* Graphics command object. See {{#crossLink "Graphics/moveTo"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information.5188* @class MoveTo5189* @constructor5190* @param {Number} x5191* @param {Number} y5192**/5193/**5194* @property x5195* @type Number5196*/5197/**5198* @property y5199* @type Number5200*/5201/**5202* @method exec5203* @param {CanvasRenderingContext2D} ctx5204*/5205(G.MoveTo = function(x, y) {5206this.x = x; this.y = y;5207}).prototype.exec = function(ctx) { ctx.moveTo(this.x, this.y); };520852095210/**5211* Graphics command object. See {{#crossLink "Graphics/arcTo"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information.5212* @class ArcTo5213* @constructor5214* @param {Number} x15215* @param {Number} y15216* @param {Number} x25217* @param {Number} y25218* @param {Number} radius5219**/5220/**5221* @property x15222* @type Number5223*/5224/**5225* @property y15226* @type Number5227*/5228/**5229* @property x25230* @type Number5231*/5232/**5233* @property y25234* @type Number5235*/5236/**5237* @property radius5238* @type Number5239*/5240/**5241* Execute the Graphics command in the provided Canvas context.5242* @method exec5243* @param {CanvasRenderingContext2D} ctx The canvas rendering context5244*/5245(G.ArcTo = function(x1, y1, x2, y2, radius) {5246this.x1 = x1; this.y1 = y1;5247this.x2 = x2; this.y2 = y2;5248this.radius = radius;5249}).prototype.exec = function(ctx) { ctx.arcTo(this.x1, this.y1, this.x2, this.y2, this.radius); };52505251/**5252* Graphics command object. See {{#crossLink "Graphics/arc"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information.5253* @class Arc5254* @constructor5255* @param {Number} x5256* @param {Number} y5257* @param {Number} radius5258* @param {Number} startAngle5259* @param {Number} endAngle5260* @param {Number} anticlockwise5261**/5262/**5263* @property x5264* @type Number5265*/5266/**5267* @property y5268* @type Number5269*/5270/**5271* @property radius5272* @type Number5273*/5274/**5275* @property startAngle5276* @type Number5277*/5278/**5279* @property endAngle5280* @type Number5281*/5282/**5283* @property anticlockwise5284* @type Number5285*/5286/**5287* Execute the Graphics command in the provided Canvas context.5288* @method exec5289* @param {CanvasRenderingContext2D} ctx The canvas rendering context5290*/5291(G.Arc = function(x, y, radius, startAngle, endAngle, anticlockwise) {5292this.x = x; this.y = y;5293this.radius = radius;5294this.startAngle = startAngle; this.endAngle = endAngle;5295this.anticlockwise = !!anticlockwise;5296}).prototype.exec = function(ctx) { ctx.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle, this.anticlockwise); };52975298/**5299* Graphics command object. See {{#crossLink "Graphics/quadraticCurveTo"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information.5300* @class QuadraticCurveTo5301* @constructor5302* @param {Number} cpx5303* @param {Number} cpy5304* @param {Number} x5305* @param {Number} y5306**/5307/**5308* @property cpx5309* @type Number5310*/5311/**5312* @property cpy5313* @type Number5314*/5315/**5316* @property x5317* @type Number5318*/5319/**5320* @property y5321* @type Number5322*/5323/**5324* Execute the Graphics command in the provided Canvas context.5325* @method exec5326* @param {CanvasRenderingContext2D} ctx The canvas rendering context5327*/5328(G.QuadraticCurveTo = function(cpx, cpy, x, y) {5329this.cpx = cpx; this.cpy = cpy;5330this.x = x; this.y = y;5331}).prototype.exec = function(ctx) { ctx.quadraticCurveTo(this.cpx, this.cpy, this.x, this.y); };53325333/**5334* Graphics command object. See {{#crossLink "Graphics/bezierCurveTo"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information.5335* @class BezierCurveTo5336* @constructor5337* @param {Number} cp1x5338* @param {Number} cp1y5339* @param {Number} cp2x5340* @param {Number} cp2y5341* @param {Number} x5342* @param {Number} y5343**/5344/**5345* @property cp1x5346* @type Number5347*/5348/**5349* @property cp1y5350* @type Number5351*/5352/**5353* @property cp2x5354* @type Number5355*/5356/**5357* @property cp2y5358* @type Number5359*/5360/**5361* @property x5362* @type Number5363*/5364/**5365* @property y5366* @type Number5367*/5368/**5369* Execute the Graphics command in the provided Canvas context.5370* @method exec5371* @param {CanvasRenderingContext2D} ctx The canvas rendering context5372*/5373(G.BezierCurveTo = function(cp1x, cp1y, cp2x, cp2y, x, y) {5374this.cp1x = cp1x; this.cp1y = cp1y;5375this.cp2x = cp2x; this.cp2y = cp2y;5376this.x = x; this.y = y;5377}).prototype.exec = function(ctx) { ctx.bezierCurveTo(this.cp1x, this.cp1y, this.cp2x, this.cp2y, this.x, this.y); };53785379/**5380* Graphics command object. See {{#crossLink "Graphics/rect"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information.5381* @class Rect5382* @constructor5383* @param {Number} x5384* @param {Number} y5385* @param {Number} w5386* @param {Number} h5387**/5388/**5389* @property x5390* @type Number5391*/5392/**5393* @property y5394* @type Number5395*/5396/**5397* @property w5398* @type Number5399*/5400/**5401* @property h5402* @type Number5403*/5404/**5405* Execute the Graphics command in the provided Canvas context.5406* @method exec5407* @param {CanvasRenderingContext2D} ctx The canvas rendering context5408*/5409(G.Rect = function(x, y, w, h) {5410this.x = x; this.y = y;5411this.w = w; this.h = h;5412}).prototype.exec = function(ctx) { ctx.rect(this.x, this.y, this.w, this.h); };54135414/**5415* Graphics command object. See {{#crossLink "Graphics/closePath"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information.5416* @class ClosePath5417* @constructor5418**/5419/**5420* Execute the Graphics command in the provided Canvas context.5421* @method exec5422* @param {CanvasRenderingContext2D} ctx The canvas rendering context5423*/5424(G.ClosePath = function() {5425}).prototype.exec = function(ctx) { ctx.closePath(); };54265427/**5428* Graphics command object to begin a new path. See {{#crossLink "Graphics"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information.5429* @class BeginPath5430* @constructor5431**/5432/**5433* Execute the Graphics command in the provided Canvas context.5434* @method exec5435* @param {CanvasRenderingContext2D} ctx The canvas rendering context5436*/5437(G.BeginPath = function() {5438}).prototype.exec = function(ctx) { ctx.beginPath(); };54395440/**5441* Graphics command object. See {{#crossLink "Graphics/beginFill"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information.5442* @class Fill5443* @constructor5444* @param {Object} style A valid Context2D fillStyle.5445* @param {Matrix2D} matrix5446**/5447/**5448* A valid Context2D fillStyle.5449* @property style5450* @type Object5451*/5452/**5453* @property matrix5454* @type Matrix2D5455*/5456/**5457* Execute the Graphics command in the provided Canvas context.5458* @method exec5459* @param {CanvasRenderingContext2D} ctx The canvas rendering context5460*/5461p = (G.Fill = function(style, matrix) {5462this.style = style;5463this.matrix = matrix;5464}).prototype;5465p.exec = function(ctx) {5466if (!this.style) { return; }5467ctx.fillStyle = this.style;5468var mtx = this.matrix;5469if (mtx) { ctx.save(); ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty); }5470ctx.fill();5471if (mtx) { ctx.restore(); }5472};5473/**5474* Creates a linear gradient style and assigns it to {{#crossLink "Fill/style:property"}}{{/crossLink}}.5475* See {{#crossLink "Graphics/beginLinearGradientFill"}}{{/crossLink}} for more information.5476* @method linearGradient5477* @param {Array} colors5478*5479* @param {Array} ratios5480* @param {Number} x05481* @param {Number} y05482* @param {Number} x15483* @param {Number} y15484* @return {Fill} Returns this Fill object for chaining or assignment.5485*/5486p.linearGradient = function(colors, ratios, x0, y0, x1, y1) {5487var o = this.style = Graphics._ctx.createLinearGradient(x0, y0, x1, y1);5488for (var i=0, l=colors.length; i<l; i++) { o.addColorStop(ratios[i], colors[i]); }5489o.props = {colors:colors, ratios:ratios, x0:x0, y0:y0, x1:x1, y1:y1, type:"linear"};5490return this;5491};5492/**5493* Creates a radial gradient style and assigns it to {{#crossLink "Fill/style:property"}}{{/crossLink}}.5494* See {{#crossLink "Graphics/beginRadialGradientFill"}}{{/crossLink}} for more information.5495* @method radialGradient5496* @param {Array} colors5497* @param {Array} ratios5498* @param {Number} x05499* @param {Number} y05500* @param {Number} r05501* @param {Number} x15502* @param {Number} y15503* @param {Number} r15504* @return {Fill} Returns this Fill object for chaining or assignment.5505*/5506p.radialGradient = function(colors, ratios, x0, y0, r0, x1, y1, r1) {5507var o = this.style = Graphics._ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);5508for (var i=0, l=colors.length; i<l; i++) { o.addColorStop(ratios[i], colors[i]); }5509o.props = {colors:colors, ratios:ratios, x0:x0, y0:y0, r0:r0, x1:x1, y1:y1, r1:r1, type:"radial"};5510return this;5511};5512/**5513* Creates a bitmap fill style and assigns it to the {{#crossLink "Fill/style:property"}}{{/crossLink}}.5514* See {{#crossLink "Graphics/beginBitmapFill"}}{{/crossLink}} for more information.5515* @method bitmap5516* @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement} image Must be loaded prior to creating a bitmap fill, or the fill will be empty.5517* @param {String} [repetition] One of: repeat, repeat-x, repeat-y, or no-repeat.5518* @return {Fill} Returns this Fill object for chaining or assignment.5519*/5520p.bitmap = function(image, repetition) {5521if (image.naturalWidth || image.getContext || image.readyState >= 2) {5522var o = this.style = Graphics._ctx.createPattern(image, repetition || "");5523o.props = {image: image, repetition: repetition, type: "bitmap"};5524}5525return this;5526};5527p.path = false;55285529/**5530* Graphics command object. See {{#crossLink "Graphics/beginStroke"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information.5531* @class Stroke5532* @constructor5533* @param {Object} style A valid Context2D fillStyle.5534* @param {Boolean} ignoreScale5535**/5536/**5537* A valid Context2D strokeStyle.5538* @property style5539* @type Object5540*/5541/**5542* @property ignoreScale5543* @type Boolean5544*/5545/**5546* Execute the Graphics command in the provided Canvas context.5547* @method exec5548* @param {CanvasRenderingContext2D} ctx The canvas rendering context5549*/5550p = (G.Stroke = function(style, ignoreScale) {5551this.style = style;5552this.ignoreScale = ignoreScale;5553}).prototype;5554p.exec = function(ctx) {5555if (!this.style) { return; }5556ctx.strokeStyle = this.style;5557if (this.ignoreScale) { ctx.save(); ctx.setTransform(1,0,0,1,0,0); }5558ctx.stroke();5559if (this.ignoreScale) { ctx.restore(); }5560};5561/**5562* Creates a linear gradient style and assigns it to {{#crossLink "Stroke/style:property"}}{{/crossLink}}.5563* See {{#crossLink "Graphics/beginLinearGradientStroke"}}{{/crossLink}} for more information.5564* @method linearGradient5565* @param {Array} colors5566* @param {Array} ratios5567* @param {Number} x05568* @param {Number} y05569* @param {Number} x15570* @param {Number} y15571* @return {Fill} Returns this Stroke object for chaining or assignment.5572*/5573p.linearGradient = G.Fill.prototype.linearGradient;5574/**5575* Creates a radial gradient style and assigns it to {{#crossLink "Stroke/style:property"}}{{/crossLink}}.5576* See {{#crossLink "Graphics/beginRadialGradientStroke"}}{{/crossLink}} for more information.5577* @method radialGradient5578* @param {Array} colors5579* @param {Array} ratios5580* @param {Number} x05581* @param {Number} y05582* @param {Number} r05583* @param {Number} x15584* @param {Number} y15585* @param {Number} r15586* @return {Fill} Returns this Stroke object for chaining or assignment.5587*/5588p.radialGradient = G.Fill.prototype.radialGradient;5589/**5590* Creates a bitmap fill style and assigns it to {{#crossLink "Stroke/style:property"}}{{/crossLink}}.5591* See {{#crossLink "Graphics/beginBitmapStroke"}}{{/crossLink}} for more information.5592* @method bitmap5593* @param {HTMLImageElement} image5594* @param {String} [repetition] One of: repeat, repeat-x, repeat-y, or no-repeat.5595* @return {Fill} Returns this Stroke object for chaining or assignment.5596*/5597p.bitmap = G.Fill.prototype.bitmap;5598p.path = false;55995600/**5601* Graphics command object. See {{#crossLink "Graphics/setStrokeStyle"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information.5602* @class StrokeStyle5603* @constructor5604* @param {Number} width5605* @param {String} [caps=butt]5606* @param {String} [joints=miter]5607* @param {Number} [miterLimit=10]5608* @param {Boolean} [ignoreScale=false]5609**/5610/**5611* @property width5612* @type Number5613*/5614/**5615* One of: butt, round, square5616* @property caps5617* @type String5618*/5619/**5620* One of: round, bevel, miter5621* @property joints5622* @type String5623*/5624/**5625* @property miterLimit5626* @type Number5627*/5628/**5629* Execute the Graphics command in the provided Canvas context.5630* @method exec5631* @param {CanvasRenderingContext2D} ctx The canvas rendering context5632*/5633p = (G.StrokeStyle = function(width, caps, joints, miterLimit, ignoreScale) {5634this.width = width;5635this.caps = caps;5636this.joints = joints;5637this.miterLimit = miterLimit;5638this.ignoreScale = ignoreScale;5639}).prototype;5640p.exec = function(ctx) {5641ctx.lineWidth = (this.width == null ? "1" : this.width);5642ctx.lineCap = (this.caps == null ? "butt" : (isNaN(this.caps) ? this.caps : Graphics.STROKE_CAPS_MAP[this.caps]));5643ctx.lineJoin = (this.joints == null ? "miter" : (isNaN(this.joints) ? this.joints : Graphics.STROKE_JOINTS_MAP[this.joints]));5644ctx.miterLimit = (this.miterLimit == null ? "10" : this.miterLimit);5645ctx.ignoreScale = (this.ignoreScale == null ? false : this.ignoreScale);5646};5647p.path = false;56485649/**5650* Graphics command object. See {{#crossLink "Graphics/setStrokeDash"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information.5651* @class StrokeDash5652* @constructor5653* @param {Array} [segments]5654* @param {Number} [offset=0]5655**/5656/**5657* @property segments5658* @type Array5659*/5660/**5661* @property offset5662* @type Number5663*/5664/**5665* Execute the Graphics command in the provided Canvas context.5666* @method exec5667* @param {CanvasRenderingContext2D} ctx The canvas rendering context5668*/5669(G.StrokeDash = function(segments, offset) {5670this.segments = segments;5671this.offset = offset||0;5672}).prototype.exec = function(ctx) {5673if (ctx.setLineDash) { // feature detection.5674ctx.setLineDash(this.segments|| G.StrokeDash.EMPTY_SEGMENTS); // instead of [] to reduce churn.5675ctx.lineDashOffset = this.offset||0;5676}5677};5678/**5679* The default value for segments (ie. no dash).5680* @property EMPTY_SEGMENTS5681* @static5682* @final5683* @readonly5684* @protected5685* @type {Array}5686**/5687G.StrokeDash.EMPTY_SEGMENTS = [];56885689/**5690* Graphics command object. See {{#crossLink "Graphics/drawRoundRectComplex"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information.5691* @class RoundRect5692* @constructor5693* @param {Number} x5694* @param {Number} y5695* @param {Number} w5696* @param {Number} h5697* @param {Number} radiusTL5698* @param {Number} radiusTR5699* @param {Number} radiusBR5700* @param {Number} radiusBL5701**/5702/**5703* @property x5704* @type Number5705*/5706/**5707* @property y5708* @type Number5709*/5710/**5711* @property w5712* @type Number5713*/5714/**5715* @property h5716* @type Number5717*/5718/**5719* @property radiusTL5720* @type Number5721*/5722/**5723* @property radiusTR5724* @type Number5725*/5726/**5727* @property radiusBR5728* @type Number5729*/5730/**5731* @property radiusBL5732* @type Number5733*/5734/**5735* Execute the Graphics command in the provided Canvas context.5736* @method exec5737* @param {CanvasRenderingContext2D} ctx The canvas rendering context5738*/5739(G.RoundRect = function(x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL) {5740this.x = x; this.y = y;5741this.w = w; this.h = h;5742this.radiusTL = radiusTL; this.radiusTR = radiusTR;5743this.radiusBR = radiusBR; this.radiusBL = radiusBL;5744}).prototype.exec = function(ctx) {5745var max = (w<h?w:h)/2;5746var mTL=0, mTR=0, mBR=0, mBL=0;5747var x = this.x, y = this.y, w = this.w, h = this.h;5748var rTL = this.radiusTL, rTR = this.radiusTR, rBR = this.radiusBR, rBL = this.radiusBL;57495750if (rTL < 0) { rTL *= (mTL=-1); }5751if (rTL > max) { rTL = max; }5752if (rTR < 0) { rTR *= (mTR=-1); }5753if (rTR > max) { rTR = max; }5754if (rBR < 0) { rBR *= (mBR=-1); }5755if (rBR > max) { rBR = max; }5756if (rBL < 0) { rBL *= (mBL=-1); }5757if (rBL > max) { rBL = max; }57585759ctx.moveTo(x+w-rTR, y);5760ctx.arcTo(x+w+rTR*mTR, y-rTR*mTR, x+w, y+rTR, rTR);5761ctx.lineTo(x+w, y+h-rBR);5762ctx.arcTo(x+w+rBR*mBR, y+h+rBR*mBR, x+w-rBR, y+h, rBR);5763ctx.lineTo(x+rBL, y+h);5764ctx.arcTo(x-rBL*mBL, y+h+rBL*mBL, x, y+h-rBL, rBL);5765ctx.lineTo(x, y+rTL);5766ctx.arcTo(x-rTL*mTL, y-rTL*mTL, x+rTL, y, rTL);5767ctx.closePath();5768};57695770/**5771* Graphics command object. See {{#crossLink "Graphics/drawCircle"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information.5772* @class Circle5773* @constructor5774* @param {Number} x5775* @param {Number} y5776* @param {Number} radius5777**/5778/**5779* @property x5780* @type Number5781*/5782/**5783* @property y5784* @type Number5785*/5786/**5787* @property radius5788* @type Number5789*/5790/**5791* Execute the Graphics command in the provided Canvas context.5792* @method exec5793* @param {CanvasRenderingContext2D} ctx The canvas rendering context5794*/5795(G.Circle = function(x, y, radius) {5796this.x = x; this.y = y;5797this.radius = radius;5798}).prototype.exec = function(ctx) { ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2); };57995800/**5801* Graphics command object. See {{#crossLink "Graphics/drawEllipse"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information.5802* @class Ellipse5803* @constructor5804* @param {Number} x5805* @param {Number} y5806* @param {Number} w5807* @param {Number} h5808**/5809/**5810* @property x5811* @type Number5812*/5813/**5814* @property y5815* @type Number5816*/5817/**5818* @property w5819* @type Number5820*/5821/**5822* @property h5823* @type Number5824*/5825/**5826* Execute the Graphics command in the provided Canvas context.5827* @method exec5828* @param {CanvasRenderingContext2D} ctx The canvas rendering context5829*/5830(G.Ellipse = function(x, y, w, h) {5831this.x = x; this.y = y;5832this.w = w; this.h = h;5833}).prototype.exec = function(ctx) {5834var x = this.x, y = this.y;5835var w = this.w, h = this.h;58365837var k = 0.5522848;5838var ox = (w / 2) * k;5839var oy = (h / 2) * k;5840var xe = x + w;5841var ye = y + h;5842var xm = x + w / 2;5843var ym = y + h / 2;58445845ctx.moveTo(x, ym);5846ctx.bezierCurveTo(x, ym-oy, xm-ox, y, xm, y);5847ctx.bezierCurveTo(xm+ox, y, xe, ym-oy, xe, ym);5848ctx.bezierCurveTo(xe, ym+oy, xm+ox, ye, xm, ye);5849ctx.bezierCurveTo(xm-ox, ye, x, ym+oy, x, ym);5850};58515852/**5853* Graphics command object. See {{#crossLink "Graphics/drawPolyStar"}}{{/crossLink}} and {{#crossLink "Graphics/append"}}{{/crossLink}} for more information.5854* @class PolyStar5855* @constructor5856* @param {Number} x5857* @param {Number} y5858* @param {Number} radius5859* @param {Number} sides5860* @param {Number} pointSize5861* @param {Number} angle5862**/5863/**5864* @property x5865* @type Number5866*/5867/**5868* @property y5869* @type Number5870*/5871/**5872* @property radius5873* @type Number5874*/5875/**5876* @property sides5877* @type Number5878*/5879/**5880* @property pointSize5881* @type Number5882*/5883/**5884* @property angle5885* @type Number5886*/5887/**5888* Execute the Graphics command in the provided Canvas context.5889* @method exec5890* @param {CanvasRenderingContext2D} ctx The canvas rendering context5891*/5892(G.PolyStar = function(x, y, radius, sides, pointSize, angle) {5893this.x = x; this.y = y;5894this.radius = radius;5895this.sides = sides;5896this.pointSize = pointSize;5897this.angle = angle;5898}).prototype.exec = function(ctx) {5899var x = this.x, y = this.y;5900var radius = this.radius;5901var angle = (this.angle||0)/180*Math.PI;5902var sides = this.sides;5903var ps = 1-(this.pointSize||0);5904var a = Math.PI/sides;59055906ctx.moveTo(x+Math.cos(angle)*radius, y+Math.sin(angle)*radius);5907for (var i=0; i<sides; i++) {5908angle += a;5909if (ps != 1) {5910ctx.lineTo(x+Math.cos(angle)*radius*ps, y+Math.sin(angle)*radius*ps);5911}5912angle += a;5913ctx.lineTo(x+Math.cos(angle)*radius, y+Math.sin(angle)*radius);5914}5915ctx.closePath();5916};59175918// docced above.5919Graphics.beginCmd = new G.BeginPath(); // so we don't have to instantiate multiple instances.592059215922createjs.Graphics = Graphics;5923}());59245925//##############################################################################5926// DisplayObject.js5927//##############################################################################59285929this.createjs = this.createjs||{};59305931(function() {5932"use strict";593359345935// constructor:5936/**5937* DisplayObject is an abstract class that should not be constructed directly. Instead construct subclasses such as5938* {{#crossLink "Container"}}{{/crossLink}}, {{#crossLink "Bitmap"}}{{/crossLink}}, and {{#crossLink "Shape"}}{{/crossLink}}.5939* DisplayObject is the base class for all display classes in the EaselJS library. It defines the core properties and5940* methods that are shared between all display objects, such as transformation properties (x, y, scaleX, scaleY, etc),5941* caching, and mouse handlers.5942* @class DisplayObject5943* @extends EventDispatcher5944* @constructor5945**/5946function DisplayObject() {5947this.EventDispatcher_constructor();594859495950// public properties:5951/**5952* The alpha (transparency) for this display object. 0 is fully transparent, 1 is fully opaque.5953* @property alpha5954* @type {Number}5955* @default 15956**/5957this.alpha = 1;59585959/**5960* If a cache is active, this returns the canvas that holds the cached version of this display object. See {{#crossLink "cache"}}{{/crossLink}}5961* for more information.5962* @property cacheCanvas5963* @type {HTMLCanvasElement | Object}5964* @default null5965* @readonly5966**/5967this.cacheCanvas = null;59685969/**5970* Returns an ID number that uniquely identifies the current cache for this display object. This can be used to5971* determine if the cache has changed since a previous check.5972* @property cacheID5973* @type {Number}5974* @default 05975*/5976this.cacheID = 0;59775978/**5979* Unique ID for this display object. Makes display objects easier for some uses.5980* @property id5981* @type {Number}5982* @default -15983**/5984this.id = createjs.UID.get();59855986/**5987* Indicates whether to include this object when running mouse interactions. Setting this to `false` for children5988* of a {{#crossLink "Container"}}{{/crossLink}} will cause events on the Container to not fire when that child is5989* clicked. Setting this property to `false` does not prevent the {{#crossLink "Container/getObjectsUnderPoint"}}{{/crossLink}}5990* method from returning the child.5991*5992* <strong>Note:</strong> In EaselJS 0.7.0, the mouseEnabled property will not work properly with nested Containers. Please5993* check out the latest NEXT version in <a href="https://github.com/CreateJS/EaselJS/tree/master/lib">GitHub</a> for an updated version with this issue resolved. The fix will be5994* provided in the next release of EaselJS.5995* @property mouseEnabled5996* @type {Boolean}5997* @default true5998**/5999this.mouseEnabled = true;60006001/**6002* If false, the tick will not run on this display object (or its children). This can provide some performance benefits.6003* In addition to preventing the "tick" event from being dispatched, it will also prevent tick related updates6004* on some display objects (ex. Sprite & MovieClip frame advancing, DOMElement visibility handling).6005* @property tickEnabled6006* @type Boolean6007* @default true6008**/6009this.tickEnabled = true;60106011/**6012* An optional name for this display object. Included in {{#crossLink "DisplayObject/toString"}}{{/crossLink}} . Useful for6013* debugging.6014* @property name6015* @type {String}6016* @default null6017**/6018this.name = null;60196020/**6021* A reference to the {{#crossLink "Container"}}{{/crossLink}} or {{#crossLink "Stage"}}{{/crossLink}} object that6022* contains this display object, or null if it has not been added6023* to one.6024* @property parent6025* @final6026* @type {Container}6027* @default null6028* @readonly6029**/6030this.parent = null;60316032/**6033* The left offset for this display object's registration point. For example, to make a 100x100px Bitmap rotate6034* around its center, you would set regX and {{#crossLink "DisplayObject/regY:property"}}{{/crossLink}} to 50.6035* @property regX6036* @type {Number}6037* @default 06038**/6039this.regX = 0;60406041/**6042* The y offset for this display object's registration point. For example, to make a 100x100px Bitmap rotate around6043* its center, you would set {{#crossLink "DisplayObject/regX:property"}}{{/crossLink}} and regY to 50.6044* @property regY6045* @type {Number}6046* @default 06047**/6048this.regY = 0;60496050/**6051* The rotation in degrees for this display object.6052* @property rotation6053* @type {Number}6054* @default 06055**/6056this.rotation = 0;60576058/**6059* The factor to stretch this display object horizontally. For example, setting scaleX to 2 will stretch the display6060* object to twice its nominal width. To horizontally flip an object, set the scale to a negative number.6061* @property scaleX6062* @type {Number}6063* @default 16064**/6065this.scaleX = 1;60666067/**6068* The factor to stretch this display object vertically. For example, setting scaleY to 0.5 will stretch the display6069* object to half its nominal height. To vertically flip an object, set the scale to a negative number.6070* @property scaleY6071* @type {Number}6072* @default 16073**/6074this.scaleY = 1;60756076/**6077* The factor to skew this display object horizontally.6078* @property skewX6079* @type {Number}6080* @default 06081**/6082this.skewX = 0;60836084/**6085* The factor to skew this display object vertically.6086* @property skewY6087* @type {Number}6088* @default 06089**/6090this.skewY = 0;60916092/**6093* A shadow object that defines the shadow to render on this display object. Set to `null` to remove a shadow. If6094* null, this property is inherited from the parent container.6095* @property shadow6096* @type {Shadow}6097* @default null6098**/6099this.shadow = null;61006101/**6102* Indicates whether this display object should be rendered to the canvas and included when running the Stage6103* {{#crossLink "Stage/getObjectsUnderPoint"}}{{/crossLink}} method.6104* @property visible6105* @type {Boolean}6106* @default true6107**/6108this.visible = true;61096110/**6111* The x (horizontal) position of the display object, relative to its parent.6112* @property x6113* @type {Number}6114* @default 06115**/6116this.x = 0;61176118/** The y (vertical) position of the display object, relative to its parent.6119* @property y6120* @type {Number}6121* @default 06122**/6123this.y = 0;61246125/**6126* If set, defines the transformation for this display object, overriding all other transformation properties6127* (x, y, rotation, scale, skew).6128* @property transformMatrix6129* @type {Matrix2D}6130* @default null6131**/6132this.transformMatrix = null;61336134/**6135* The composite operation indicates how the pixels of this display object will be composited with the elements6136* behind it. If `null`, this property is inherited from the parent container. For more information, read the6137* <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#compositing">6138* whatwg spec on compositing</a>.6139* @property compositeOperation6140* @type {String}6141* @default null6142**/6143this.compositeOperation = null;61446145/**6146* Indicates whether the display object should be drawn to a whole pixel when6147* {{#crossLink "Stage/snapToPixelEnabled"}}{{/crossLink}} is true. To enable/disable snapping on whole6148* categories of display objects, set this value on the prototype (Ex. Text.prototype.snapToPixel = true).6149* @property snapToPixel6150* @type {Boolean}6151* @default true6152**/6153this.snapToPixel = true;61546155/**6156* An array of Filter objects to apply to this display object. Filters are only applied / updated when {{#crossLink "cache"}}{{/crossLink}}6157* or {{#crossLink "updateCache"}}{{/crossLink}} is called on the display object, and only apply to the area that is6158* cached.6159* @property filters6160* @type {Array}6161* @default null6162**/6163this.filters = null;61646165/**6166* A Shape instance that defines a vector mask (clipping path) for this display object. The shape's transformation6167* will be applied relative to the display object's parent coordinates (as if it were a child of the parent).6168* @property mask6169* @type {Shape}6170* @default null6171*/6172this.mask = null;61736174/**6175* A display object that will be tested when checking mouse interactions or testing {{#crossLink "Container/getObjectsUnderPoint"}}{{/crossLink}}.6176* The hit area will have its transformation applied relative to this display object's coordinate space (as though6177* the hit test object were a child of this display object and relative to its regX/Y). The hitArea will be tested6178* using only its own `alpha` value regardless of the alpha value on the target display object, or the target's6179* ancestors (parents).6180*6181* If set on a {{#crossLink "Container"}}{{/crossLink}}, children of the Container will not receive mouse events.6182* This is similar to setting {{#crossLink "mouseChildren"}}{{/crossLink}} to false.6183*6184* Note that hitArea is NOT currently used by the `hitTest()` method, nor is it supported for {{#crossLink "Stage"}}{{/crossLink}}.6185* @property hitArea6186* @type {DisplayObject}6187* @default null6188*/6189this.hitArea = null;61906191/**6192* A CSS cursor (ex. "pointer", "help", "text", etc) that will be displayed when the user hovers over this display6193* object. You must enable mouseover events using the {{#crossLink "Stage/enableMouseOver"}}{{/crossLink}} method to6194* use this property. Setting a non-null cursor on a Container will override the cursor set on its descendants.6195* @property cursor6196* @type {String}6197* @default null6198*/6199this.cursor = null;620062016202// private properties:6203/**6204* @property _cacheOffsetX6205* @protected6206* @type {Number}6207* @default 06208**/6209this._cacheOffsetX = 0;62106211/**6212* @property _cacheOffsetY6213* @protected6214* @type {Number}6215* @default 06216**/6217this._cacheOffsetY = 0;62186219/**6220* @property _filterOffsetX6221* @protected6222* @type {Number}6223* @default 06224**/6225this._filterOffsetX = 0;62266227/**6228* @property _filterOffsetY6229* @protected6230* @type {Number}6231* @default 06232**/6233this._filterOffsetY = 0;62346235/**6236* @property _cacheScale6237* @protected6238* @type {Number}6239* @default 16240**/6241this._cacheScale = 1;62426243/**6244* @property _cacheDataURLID6245* @protected6246* @type {Number}6247* @default 06248*/6249this._cacheDataURLID = 0;62506251/**6252* @property _cacheDataURL6253* @protected6254* @type {String}6255* @default null6256*/6257this._cacheDataURL = null;62586259/**6260* @property _props6261* @protected6262* @type {DisplayObject}6263* @default null6264**/6265this._props = new createjs.DisplayProps();62666267/**6268* @property _rectangle6269* @protected6270* @type {Rectangle}6271* @default null6272**/6273this._rectangle = new createjs.Rectangle();62746275/**6276* @property _bounds6277* @protected6278* @type {Rectangle}6279* @default null6280**/6281this._bounds = null;6282}6283var p = createjs.extend(DisplayObject, createjs.EventDispatcher);62846285// TODO: deprecated6286// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.62876288// static properties:6289/**6290* Listing of mouse event names. Used in _hasMouseEventListener.6291* @property _MOUSE_EVENTS6292* @protected6293* @static6294* @type {Array}6295**/6296DisplayObject._MOUSE_EVENTS = ["click","dblclick","mousedown","mouseout","mouseover","pressmove","pressup","rollout","rollover"];62976298/**6299* Suppresses errors generated when using features like hitTest, mouse events, and {{#crossLink "getObjectsUnderPoint"}}{{/crossLink}}6300* with cross domain content.6301* @property suppressCrossDomainErrors6302* @static6303* @type {Boolean}6304* @default false6305**/6306DisplayObject.suppressCrossDomainErrors = false;63076308/**6309* @property _snapToPixelEnabled6310* @protected6311* @static6312* @type {Boolean}6313* @default false6314**/6315DisplayObject._snapToPixelEnabled = false; // stage.snapToPixelEnabled is temporarily copied here during a draw to provide global access.63166317/**6318* @property _hitTestCanvas6319* @type {HTMLCanvasElement | Object}6320* @static6321* @protected6322**/6323/**6324* @property _hitTestContext6325* @type {CanvasRenderingContext2D}6326* @static6327* @protected6328**/6329var canvas = createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"); // prevent errors on load in browsers without canvas.6330if (canvas.getContext) {6331DisplayObject._hitTestCanvas = canvas;6332DisplayObject._hitTestContext = canvas.getContext("2d");6333canvas.width = canvas.height = 1;6334}63356336/**6337* @property _nextCacheID6338* @type {Number}6339* @static6340* @protected6341**/6342DisplayObject._nextCacheID = 1;634363446345// events:6346/**6347* Dispatched when the user presses their left mouse button over the display object. See the6348* {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties.6349* @event mousedown6350* @since 0.6.06351*/63526353/**6354* Dispatched when the user presses their left mouse button and then releases it while over the display object.6355* See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties.6356* @event click6357* @since 0.6.06358*/63596360/**6361* Dispatched when the user double clicks their left mouse button over this display object.6362* See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties.6363* @event dblclick6364* @since 0.6.06365*/63666367/**6368* Dispatched when the user's mouse enters this display object. This event must be enabled using6369* {{#crossLink "Stage/enableMouseOver"}}{{/crossLink}}. See also {{#crossLink "DisplayObject/rollover:event"}}{{/crossLink}}.6370* See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties.6371* @event mouseover6372* @since 0.6.06373*/63746375/**6376* Dispatched when the user's mouse leaves this display object. This event must be enabled using6377* {{#crossLink "Stage/enableMouseOver"}}{{/crossLink}}. See also {{#crossLink "DisplayObject/rollout:event"}}{{/crossLink}}.6378* See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties.6379* @event mouseout6380* @since 0.6.06381*/63826383/**6384* This event is similar to {{#crossLink "DisplayObject/mouseover:event"}}{{/crossLink}}, with the following6385* differences: it does not bubble, and it considers {{#crossLink "Container"}}{{/crossLink}} instances as an6386* aggregate of their content.6387*6388* For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over6389* shapeA and then directly on to shapeB. With a listener for {{#crossLink "mouseover:event"}}{{/crossLink}} on6390* myContainer, two events would be received, each targeting a child element:<OL>6391* <LI>when the mouse enters shapeA (target=shapeA)</LI>6392* <LI>when the mouse enters shapeB (target=shapeB)</LI>6393* </OL>6394* However, with a listener for "rollover" instead, only a single event is received when the mouse first enters6395* the aggregate myContainer content (target=myContainer).6396*6397* This event must be enabled using {{#crossLink "Stage/enableMouseOver"}}{{/crossLink}}.6398* See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties.6399* @event rollover6400* @since 0.7.06401*/64026403/**6404* This event is similar to {{#crossLink "DisplayObject/mouseout:event"}}{{/crossLink}}, with the following6405* differences: it does not bubble, and it considers {{#crossLink "Container"}}{{/crossLink}} instances as an6406* aggregate of their content.6407*6408* For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over6409* shapeA, then directly on to shapeB, then off both. With a listener for {{#crossLink "mouseout:event"}}{{/crossLink}}6410* on myContainer, two events would be received, each targeting a child element:<OL>6411* <LI>when the mouse leaves shapeA (target=shapeA)</LI>6412* <LI>when the mouse leaves shapeB (target=shapeB)</LI>6413* </OL>6414* However, with a listener for "rollout" instead, only a single event is received when the mouse leaves6415* the aggregate myContainer content (target=myContainer).6416*6417* This event must be enabled using {{#crossLink "Stage/enableMouseOver"}}{{/crossLink}}.6418* See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties.6419* @event rollout6420* @since 0.7.06421*/64226423/**6424* After a {{#crossLink "DisplayObject/mousedown:event"}}{{/crossLink}} occurs on a display object, a pressmove6425* event will be generated on that object whenever the mouse moves until the mouse press is released. This can be6426* useful for dragging and similar operations.6427* @event pressmove6428* @since 0.7.06429*/64306431/**6432* After a {{#crossLink "DisplayObject/mousedown:event"}}{{/crossLink}} occurs on a display object, a pressup event6433* will be generated on that object when that mouse press is released. This can be useful for dragging and similar6434* operations.6435* @event pressup6436* @since 0.7.06437*/64386439/**6440* Dispatched when the display object is added to a parent container.6441* @event added6442*/64436444/**6445* Dispatched when the display object is removed from its parent container.6446* @event removed6447*/64486449/**6450* Dispatched on each display object on a stage whenever the stage updates. This occurs immediately before the6451* rendering (draw) pass. When {{#crossLink "Stage/update"}}{{/crossLink}} is called, first all display objects on6452* the stage dispatch the tick event, then all of the display objects are drawn to stage. Children will have their6453* {{#crossLink "tick:event"}}{{/crossLink}} event dispatched in order of their depth prior to the event being6454* dispatched on their parent.6455* @event tick6456* @param {Object} target The object that dispatched the event.6457* @param {String} type The event type.6458* @param {Array} params An array containing any arguments that were passed to the Stage.update() method. For6459* example if you called stage.update("hello"), then the params would be ["hello"].6460* @since 0.6.06461*/646264636464// getter / setters:6465/**6466* Use the {{#crossLink "DisplayObject/stage:property"}}{{/crossLink}} property instead.6467* @method getStage6468* @return {Stage}6469* @deprecated6470**/6471p.getStage = function() {6472// uses dynamic access to avoid circular dependencies;6473var o = this, _Stage = createjs["Stage"];6474while (o.parent) { o = o.parent; }6475if (o instanceof _Stage) { return o; }6476return null;6477};64786479/**6480* Returns the Stage instance that this display object will be rendered on, or null if it has not been added to one.6481* @property stage6482* @type {Stage}6483* @readonly6484**/6485try {6486Object.defineProperties(p, {6487stage: { get: p.getStage }6488});6489} catch (e) {}649064916492// public methods:6493/**6494* Returns true or false indicating whether the display object would be visible if drawn to a canvas.6495* This does not account for whether it would be visible within the boundaries of the stage.6496*6497* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.6498* @method isVisible6499* @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas6500**/6501p.isVisible = function() {6502return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0);6503};65046505/**6506* Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.6507* Returns <code>true</code> if the draw was handled (useful for overriding functionality).6508*6509* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.6510* @method draw6511* @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.6512* @param {Boolean} [ignoreCache=false] Indicates whether the draw operation should ignore any current cache. For example,6513* used for drawing the cache (to prevent it from simply drawing an existing cache back into itself).6514* @return {Boolean}6515**/6516p.draw = function(ctx, ignoreCache) {6517var cacheCanvas = this.cacheCanvas;6518if (ignoreCache || !cacheCanvas) { return false; }6519var scale = this._cacheScale;6520ctx.drawImage(cacheCanvas, this._cacheOffsetX+this._filterOffsetX, this._cacheOffsetY+this._filterOffsetY, cacheCanvas.width/scale, cacheCanvas.height/scale);6521return true;6522};65236524/**6525* Applies this display object's transformation, alpha, globalCompositeOperation, clipping path (mask), and shadow6526* to the specified context. This is typically called prior to {{#crossLink "DisplayObject/draw"}}{{/crossLink}}.6527* @method updateContext6528* @param {CanvasRenderingContext2D} ctx The canvas 2D to update.6529**/6530p.updateContext = function(ctx) {6531var o=this, mask=o.mask, mtx= o._props.matrix;65326533if (mask && mask.graphics && !mask.graphics.isEmpty()) {6534mask.getMatrix(mtx);6535ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty);65366537mask.graphics.drawAsPath(ctx);6538ctx.clip();65396540mtx.invert();6541ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty);6542}65436544this.getMatrix(mtx);6545var tx = mtx.tx, ty = mtx.ty;6546if (DisplayObject._snapToPixelEnabled && o.snapToPixel) {6547tx = tx + (tx < 0 ? -0.5 : 0.5) | 0;6548ty = ty + (ty < 0 ? -0.5 : 0.5) | 0;6549}6550ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, tx, ty);6551ctx.globalAlpha *= o.alpha;6552if (o.compositeOperation) { ctx.globalCompositeOperation = o.compositeOperation; }6553if (o.shadow) { this._applyShadow(ctx, o.shadow); }6554};65556556/**6557* Draws the display object into a new canvas, which is then used for subsequent draws. For complex content6558* that does not change frequently (ex. a Container with many children that do not move, or a complex vector Shape),6559* this can provide for much faster rendering because the content does not need to be re-rendered each tick. The6560* cached display object can be moved, rotated, faded, etc freely, however if its content changes, you must6561* manually update the cache by calling <code>updateCache()</code> or <code>cache()</code> again. You must specify6562* the cache area via the x, y, w, and h parameters. This defines the rectangle that will be rendered and cached6563* using this display object's coordinates.6564*6565* <h4>Example</h4>6566* For example if you defined a Shape that drew a circle at 0, 0 with a radius of 25:6567*6568* var shape = new createjs.Shape();6569* shape.graphics.beginFill("#ff0000").drawCircle(0, 0, 25);6570* myShape.cache(-25, -25, 50, 50);6571*6572* Note that filters need to be defined <em>before</em> the cache is applied. Check out the {{#crossLink "Filter"}}{{/crossLink}}6573* class for more information. Some filters (ex. BlurFilter) will not work as expected in conjunction with the scale param.6574*6575* Usually, the resulting cacheCanvas will have the dimensions width*scale by height*scale, however some filters (ex. BlurFilter)6576* will add padding to the canvas dimensions.6577*6578* @method cache6579* @param {Number} x The x coordinate origin for the cache region.6580* @param {Number} y The y coordinate origin for the cache region.6581* @param {Number} width The width of the cache region.6582* @param {Number} height The height of the cache region.6583* @param {Number} [scale=1] The scale at which the cache will be created. For example, if you cache a vector shape using6584* myShape.cache(0,0,100,100,2) then the resulting cacheCanvas will be 200x200 px. This lets you scale and rotate6585* cached elements with greater fidelity. Default is 1.6586**/6587p.cache = function(x, y, width, height, scale) {6588// draw to canvas.6589scale = scale||1;6590if (!this.cacheCanvas) { this.cacheCanvas = createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"); }6591this._cacheWidth = width;6592this._cacheHeight = height;6593this._cacheOffsetX = x;6594this._cacheOffsetY = y;6595this._cacheScale = scale;6596this.updateCache();6597};65986599/**6600* Redraws the display object to its cache. Calling updateCache without an active cache will throw an error.6601* If compositeOperation is null the current cache will be cleared prior to drawing. Otherwise the display object6602* will be drawn over the existing cache using the specified compositeOperation.6603*6604* <h4>Example</h4>6605* Clear the current graphics of a cached shape, draw some new instructions, and then update the cache. The new line6606* will be drawn on top of the old one.6607*6608* // Not shown: Creating the shape, and caching it.6609* shapeInstance.clear();6610* shapeInstance.setStrokeStyle(3).beginStroke("#ff0000").moveTo(100, 100).lineTo(200,200);6611* shapeInstance.updateCache();6612*6613* @method updateCache6614* @param {String} compositeOperation The compositeOperation to use, or null to clear the cache and redraw it.6615* <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#compositing">6616* whatwg spec on compositing</a>.6617**/6618p.updateCache = function(compositeOperation) {6619var cacheCanvas = this.cacheCanvas;6620if (!cacheCanvas) { throw "cache() must be called before updateCache()"; }6621var scale = this._cacheScale, offX = this._cacheOffsetX*scale, offY = this._cacheOffsetY*scale;6622var w = this._cacheWidth, h = this._cacheHeight, ctx = cacheCanvas.getContext("2d");66236624var fBounds = this._getFilterBounds();6625offX += (this._filterOffsetX = fBounds.x);6626offY += (this._filterOffsetY = fBounds.y);66276628w = Math.ceil(w*scale) + fBounds.width;6629h = Math.ceil(h*scale) + fBounds.height;6630if (w != cacheCanvas.width || h != cacheCanvas.height) {6631// TODO: it would be nice to preserve the content if there is a compositeOperation.6632cacheCanvas.width = w;6633cacheCanvas.height = h;6634} else if (!compositeOperation) {6635ctx.clearRect(0, 0, w+1, h+1);6636}66376638ctx.save();6639ctx.globalCompositeOperation = compositeOperation;6640ctx.setTransform(scale, 0, 0, scale, -offX, -offY);6641this.draw(ctx, true);6642// TODO: filters and cache scale don't play well together at present.6643this._applyFilters();6644ctx.restore();6645this.cacheID = DisplayObject._nextCacheID++;6646};66476648/**6649* Clears the current cache. See {{#crossLink "DisplayObject/cache"}}{{/crossLink}} for more information.6650* @method uncache6651**/6652p.uncache = function() {6653this._cacheDataURL = this.cacheCanvas = null;6654this.cacheID = this._cacheOffsetX = this._cacheOffsetY = this._filterOffsetX = this._filterOffsetY = 0;6655this._cacheScale = 1;6656};66576658/**6659* Returns a data URL for the cache, or null if this display object is not cached.6660* Uses cacheID to ensure a new data URL is not generated if the cache has not changed.6661* @method getCacheDataURL6662* @return {String} The image data url for the cache.6663**/6664p.getCacheDataURL = function() {6665if (!this.cacheCanvas) { return null; }6666if (this.cacheID != this._cacheDataURLID) { this._cacheDataURL = this.cacheCanvas.toDataURL(); }6667return this._cacheDataURL;6668};66696670/**6671* Transforms the specified x and y position from the coordinate space of the display object6672* to the global (stage) coordinate space. For example, this could be used to position an HTML label6673* over a specific point on a nested display object. Returns a Point instance with x and y properties6674* correlating to the transformed coordinates on the stage.6675*6676* <h4>Example</h4>6677*6678* displayObject.x = 300;6679* displayObject.y = 200;6680* stage.addChild(displayObject);6681* var point = displayObject.localToGlobal(100, 100);6682* // Results in x=400, y=3006683*6684* @method localToGlobal6685* @param {Number} x The x position in the source display object to transform.6686* @param {Number} y The y position in the source display object to transform.6687* @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned.6688* @return {Point} A Point instance with x and y properties correlating to the transformed coordinates6689* on the stage.6690**/6691p.localToGlobal = function(x, y, pt) {6692return this.getConcatenatedMatrix(this._props.matrix).transformPoint(x,y, pt||new createjs.Point());6693};66946695/**6696* Transforms the specified x and y position from the global (stage) coordinate space to the6697* coordinate space of the display object. For example, this could be used to determine6698* the current mouse position within the display object. Returns a Point instance with x and y properties6699* correlating to the transformed position in the display object's coordinate space.6700*6701* <h4>Example</h4>6702*6703* displayObject.x = 300;6704* displayObject.y = 200;6705* stage.addChild(displayObject);6706* var point = displayObject.globalToLocal(100, 100);6707* // Results in x=-200, y=-1006708*6709* @method globalToLocal6710* @param {Number} x The x position on the stage to transform.6711* @param {Number} y The y position on the stage to transform.6712* @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned.6713* @return {Point} A Point instance with x and y properties correlating to the transformed position in the6714* display object's coordinate space.6715**/6716p.globalToLocal = function(x, y, pt) {6717return this.getConcatenatedMatrix(this._props.matrix).invert().transformPoint(x,y, pt||new createjs.Point());6718};67196720/**6721* Transforms the specified x and y position from the coordinate space of this display object to the coordinate6722* space of the target display object. Returns a Point instance with x and y properties correlating to the6723* transformed position in the target's coordinate space. Effectively the same as using the following code with6724* {{#crossLink "DisplayObject/localToGlobal"}}{{/crossLink}} and {{#crossLink "DisplayObject/globalToLocal"}}{{/crossLink}}.6725*6726* var pt = this.localToGlobal(x, y);6727* pt = target.globalToLocal(pt.x, pt.y);6728*6729* @method localToLocal6730* @param {Number} x The x position in the source display object to transform.6731* @param {Number} y The y position on the source display object to transform.6732* @param {DisplayObject} target The target display object to which the coordinates will be transformed.6733* @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned.6734* @return {Point} Returns a Point instance with x and y properties correlating to the transformed position6735* in the target's coordinate space.6736**/6737p.localToLocal = function(x, y, target, pt) {6738pt = this.localToGlobal(x, y, pt);6739return target.globalToLocal(pt.x, pt.y, pt);6740};67416742/**6743* Shortcut method to quickly set the transform properties on the display object. All parameters are optional.6744* Omitted parameters will have the default value set.6745*6746* <h4>Example</h4>6747*6748* displayObject.setTransform(100, 100, 2, 2);6749*6750* @method setTransform6751* @param {Number} [x=0] The horizontal translation (x position) in pixels6752* @param {Number} [y=0] The vertical translation (y position) in pixels6753* @param {Number} [scaleX=1] The horizontal scale, as a percentage of 16754* @param {Number} [scaleY=1] the vertical scale, as a percentage of 16755* @param {Number} [rotation=0] The rotation, in degrees6756* @param {Number} [skewX=0] The horizontal skew factor6757* @param {Number} [skewY=0] The vertical skew factor6758* @param {Number} [regX=0] The horizontal registration point in pixels6759* @param {Number} [regY=0] The vertical registration point in pixels6760* @return {DisplayObject} Returns this instance. Useful for chaining commands.6761* @chainable6762*/6763p.setTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {6764this.x = x || 0;6765this.y = y || 0;6766this.scaleX = scaleX == null ? 1 : scaleX;6767this.scaleY = scaleY == null ? 1 : scaleY;6768this.rotation = rotation || 0;6769this.skewX = skewX || 0;6770this.skewY = skewY || 0;6771this.regX = regX || 0;6772this.regY = regY || 0;6773return this;6774};67756776/**6777* Returns a matrix based on this object's current transform.6778* @method getMatrix6779* @param {Matrix2D} matrix Optional. A Matrix2D object to populate with the calculated values. If null, a new6780* Matrix object is returned.6781* @return {Matrix2D} A matrix representing this display object's transform.6782**/6783p.getMatrix = function(matrix) {6784var o = this, mtx = matrix&&matrix.identity() || new createjs.Matrix2D();6785return o.transformMatrix ? mtx.copy(o.transformMatrix) : mtx.appendTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation, o.skewX, o.skewY, o.regX, o.regY);6786};67876788/**6789* Generates a Matrix2D object representing the combined transform of the display object and all of its6790* parent Containers up to the highest level ancestor (usually the {{#crossLink "Stage"}}{{/crossLink}}). This can6791* be used to transform positions between coordinate spaces, such as with {{#crossLink "DisplayObject/localToGlobal"}}{{/crossLink}}6792* and {{#crossLink "DisplayObject/globalToLocal"}}{{/crossLink}}.6793* @method getConcatenatedMatrix6794* @param {Matrix2D} [matrix] A {{#crossLink "Matrix2D"}}{{/crossLink}} object to populate with the calculated values.6795* If null, a new Matrix2D object is returned.6796* @return {Matrix2D} The combined matrix.6797**/6798p.getConcatenatedMatrix = function(matrix) {6799var o = this, mtx = this.getMatrix(matrix);6800while (o = o.parent) {6801mtx.prependMatrix(o.getMatrix(o._props.matrix));6802}6803return mtx;6804};68056806/**6807* Generates a DisplayProps object representing the combined display properties of the object and all of its6808* parent Containers up to the highest level ancestor (usually the {{#crossLink "Stage"}}{{/crossLink}}).6809* @method getConcatenatedDisplayProps6810* @param {DisplayProps} [props] A {{#crossLink "DisplayProps"}}{{/crossLink}} object to populate with the calculated values.6811* If null, a new DisplayProps object is returned.6812* @return {DisplayProps} The combined display properties.6813**/6814p.getConcatenatedDisplayProps = function(props) {6815props = props ? props.identity() : new createjs.DisplayProps();6816var o = this, mtx = o.getMatrix(props.matrix);6817do {6818props.prepend(o.visible, o.alpha, o.shadow, o.compositeOperation);68196820// we do this to avoid problems with the matrix being used for both operations when o._props.matrix is passed in as the props param.6821// this could be simplified (ie. just done as part of the prepend above) if we switched to using a pool.6822if (o != this) { mtx.prependMatrix(o.getMatrix(o._props.matrix)); }6823} while (o = o.parent);6824return props;6825};68266827/**6828* Tests whether the display object intersects the specified point in <em>local</em> coordinates (ie. draws a pixel6829* with alpha > 0 at the specified position). This ignores the alpha, shadow, hitArea, mask, and compositeOperation6830* of the display object.6831*6832* <h4>Example</h4>6833*6834* var myShape = new createjs.Shape();6835* myShape.graphics.beginFill("red").drawRect(100, 100, 20, 50);6836*6837* console.log(myShape.hitTest(10,10); // false6838* console.log(myShape.hitTest(110, 25); // true6839*6840* Note that to use Stage coordinates (such as {{#crossLink "Stage/mouseX:property"}}{{/crossLink}}), they must6841* first be converted to local coordinates:6842*6843* stage.addEventListener("stagemousedown", handleMouseDown);6844* function handleMouseDown(event) {6845* var p = myShape.globalToLocal(stage.mouseX, stage.mouseY);6846* var hit = myShape.hitTest(p.x, p.y);6847* }6848*6849* Shape-to-shape collision is not currently supported by EaselJS.6850*6851* @method hitTest6852* @param {Number} x The x position to check in the display object's local coordinates.6853* @param {Number} y The y position to check in the display object's local coordinates.6854* @return {Boolean} A Boolean indicating whether a visible portion of the DisplayObject intersect the specified6855* local Point.6856*/6857p.hitTest = function(x, y) {6858var ctx = DisplayObject._hitTestContext;6859ctx.setTransform(1, 0, 0, 1, -x, -y);6860this.draw(ctx);68616862var hit = this._testHit(ctx);6863ctx.setTransform(1, 0, 0, 1, 0, 0);6864ctx.clearRect(0, 0, 2, 2);6865return hit;6866};68676868/**6869* Provides a chainable shortcut method for setting a number of properties on the instance.6870*6871* <h4>Example</h4>6872*6873* var myGraphics = new createjs.Graphics().beginFill("#ff0000").drawCircle(0, 0, 25);6874* var shape = stage.addChild(new createjs.Shape()).set({graphics:myGraphics, x:100, y:100, alpha:0.5});6875*6876* @method set6877* @param {Object} props A generic object containing properties to copy to the DisplayObject instance.6878* @return {DisplayObject} Returns the instance the method is called on (useful for chaining calls.)6879* @chainable6880*/6881p.set = function(props) {6882for (var n in props) { this[n] = props[n]; }6883return this;6884};68856886/**6887* Returns a rectangle representing this object's bounds in its local coordinate system (ie. with no transformation).6888* Objects that have been cached will return the bounds of the cache.6889*6890* Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use6891* {{#crossLink "DisplayObject/setBounds"}}{{/crossLink}} so that they are included when calculating Container6892* bounds.6893*6894* <table>6895* <tr><td><b>All</b></td><td>6896* All display objects support setting bounds manually using setBounds(). Likewise, display objects that6897* have been cached using cache() will return the bounds of their cache. Manual and cache bounds will override6898* the automatic calculations listed below.6899* </td></tr>6900* <tr><td><b>Bitmap</b></td><td>6901* Returns the width and height of the sourceRect (if specified) or image, extending from (x=0,y=0).6902* </td></tr>6903* <tr><td><b>Sprite</b></td><td>6904* Returns the bounds of the current frame. May have non-zero x/y if a frame registration point was specified6905* in the spritesheet data. See also {{#crossLink "SpriteSheet/getFrameBounds"}}{{/crossLink}}6906* </td></tr>6907* <tr><td><b>Container</b></td><td>6908* Returns the aggregate (combined) bounds of all children that return a non-null value from getBounds().6909* </td></tr>6910* <tr><td><b>Shape</b></td><td>6911* Does not currently support automatic bounds calculations. Use setBounds() to manually define bounds.6912* </td></tr>6913* <tr><td><b>Text</b></td><td>6914* Returns approximate bounds. Horizontal values (x/width) are quite accurate, but vertical values (y/height) are6915* not, especially when using textBaseline values other than "top".6916* </td></tr>6917* <tr><td><b>BitmapText</b></td><td>6918* Returns approximate bounds. Values will be more accurate if spritesheet frame registration points are close6919* to (x=0,y=0).6920* </td></tr>6921* </table>6922*6923* Bounds can be expensive to calculate for some objects (ex. text, or containers with many children), and6924* are recalculated each time you call getBounds(). You can prevent recalculation on static objects by setting the6925* bounds explicitly:6926*6927* var bounds = obj.getBounds();6928* obj.setBounds(bounds.x, bounds.y, bounds.width, bounds.height);6929* // getBounds will now use the set values, instead of recalculating6930*6931* To reduce memory impact, the returned Rectangle instance may be reused internally; clone the instance or copy its6932* values if you need to retain it.6933*6934* var myBounds = obj.getBounds().clone();6935* // OR:6936* myRect.copy(obj.getBounds());6937*6938* @method getBounds6939* @return {Rectangle} A Rectangle instance representing the bounds, or null if bounds are not available for this6940* object.6941**/6942p.getBounds = function() {6943if (this._bounds) { return this._rectangle.copy(this._bounds); }6944var cacheCanvas = this.cacheCanvas;6945if (cacheCanvas) {6946var scale = this._cacheScale;6947return this._rectangle.setValues(this._cacheOffsetX, this._cacheOffsetY, cacheCanvas.width/scale, cacheCanvas.height/scale);6948}6949return null;6950};69516952/**6953* Returns a rectangle representing this object's bounds in its parent's coordinate system (ie. with transformations applied).6954* Objects that have been cached will return the transformed bounds of the cache.6955*6956* Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use6957* {{#crossLink "DisplayObject/setBounds"}}{{/crossLink}} so that they are included when calculating Container6958* bounds.6959*6960* To reduce memory impact, the returned Rectangle instance may be reused internally; clone the instance or copy its6961* values if you need to retain it.6962*6963* Container instances calculate aggregate bounds for all children that return bounds via getBounds.6964* @method getTransformedBounds6965* @return {Rectangle} A Rectangle instance representing the bounds, or null if bounds are not available for this object.6966**/6967p.getTransformedBounds = function() {6968return this._getBounds();6969};69706971/**6972* Allows you to manually specify the bounds of an object that either cannot calculate their own bounds (ex. Shape &6973* Text) for future reference, or so the object can be included in Container bounds. Manually set bounds will always6974* override calculated bounds.6975*6976* The bounds should be specified in the object's local (untransformed) coordinates. For example, a Shape instance6977* with a 25px radius circle centered at 0,0 would have bounds of (-25, -25, 50, 50).6978* @method setBounds6979* @param {Number} x The x origin of the bounds. Pass null to remove the manual bounds.6980* @param {Number} y The y origin of the bounds.6981* @param {Number} width The width of the bounds.6982* @param {Number} height The height of the bounds.6983**/6984p.setBounds = function(x, y, width, height) {6985if (x == null) { this._bounds = x; }6986this._bounds = (this._bounds || new createjs.Rectangle()).setValues(x, y, width, height);6987};69886989/**6990* Returns a clone of this DisplayObject. Some properties that are specific to this instance's current context are6991* reverted to their defaults (for example .parent). Caches are not maintained across clones, and some elements6992* are copied by reference (masks, individual filter instances, hit area)6993* @method clone6994* @return {DisplayObject} A clone of the current DisplayObject instance.6995**/6996p.clone = function() {6997return this._cloneProps(new DisplayObject());6998};69997000/**7001* Returns a string representation of this object.7002* @method toString7003* @return {String} a string representation of the instance.7004**/7005p.toString = function() {7006return "[DisplayObject (name="+ this.name +")]";7007};700870097010// private methods:7011// separated so it can be used more easily in subclasses:7012/**7013* @method _cloneProps7014* @param {DisplayObject} o The DisplayObject instance which will have properties from the current DisplayObject7015* instance copied into.7016* @return {DisplayObject} o7017* @protected7018**/7019p._cloneProps = function(o) {7020o.alpha = this.alpha;7021o.mouseEnabled = this.mouseEnabled;7022o.tickEnabled = this.tickEnabled;7023o.name = this.name;7024o.regX = this.regX;7025o.regY = this.regY;7026o.rotation = this.rotation;7027o.scaleX = this.scaleX;7028o.scaleY = this.scaleY;7029o.shadow = this.shadow;7030o.skewX = this.skewX;7031o.skewY = this.skewY;7032o.visible = this.visible;7033o.x = this.x;7034o.y = this.y;7035o.compositeOperation = this.compositeOperation;7036o.snapToPixel = this.snapToPixel;7037o.filters = this.filters==null?null:this.filters.slice(0);7038o.mask = this.mask;7039o.hitArea = this.hitArea;7040o.cursor = this.cursor;7041o._bounds = this._bounds;7042return o;7043};70447045/**7046* @method _applyShadow7047* @protected7048* @param {CanvasRenderingContext2D} ctx7049* @param {Shadow} shadow7050**/7051p._applyShadow = function(ctx, shadow) {7052shadow = shadow || Shadow.identity;7053ctx.shadowColor = shadow.color;7054ctx.shadowOffsetX = shadow.offsetX;7055ctx.shadowOffsetY = shadow.offsetY;7056ctx.shadowBlur = shadow.blur;7057};705870597060/**7061* @method _tick7062* @param {Object} evtObj An event object that will be dispatched to all tick listeners. This object is reused between dispatchers to reduce construction & GC costs.7063* @protected7064**/7065p._tick = function(evtObj) {7066// because tick can be really performance sensitive, check for listeners before calling dispatchEvent.7067var ls = this._listeners;7068if (ls && ls["tick"]) {7069// reset & reuse the event object to avoid construction / GC costs:7070evtObj.target = null;7071evtObj.propagationStopped = evtObj.immediatePropagationStopped = false;7072this.dispatchEvent(evtObj);7073}7074};70757076/**7077* @method _testHit7078* @protected7079* @param {CanvasRenderingContext2D} ctx7080* @return {Boolean}7081**/7082p._testHit = function(ctx) {7083try {7084var hit = ctx.getImageData(0, 0, 1, 1).data[3] > 1;7085} catch (e) {7086if (!DisplayObject.suppressCrossDomainErrors) {7087throw "An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.";7088}7089}7090return hit;7091};70927093/**7094* @method _applyFilters7095* @protected7096**/7097p._applyFilters = function() {7098if (!this.filters || this.filters.length == 0 || !this.cacheCanvas) { return; }7099var l = this.filters.length;7100var ctx = this.cacheCanvas.getContext("2d");7101var w = this.cacheCanvas.width;7102var h = this.cacheCanvas.height;7103for (var i=0; i<l; i++) {7104this.filters[i].applyFilter(ctx, 0, 0, w, h);7105}7106};71077108/**7109* @method _getFilterBounds7110* @return {Rectangle}7111* @protected7112**/7113p._getFilterBounds = function(rect) {7114var l, filters = this.filters, bounds = this._rectangle.setValues(0,0,0,0);7115if (!filters || !(l=filters.length)) { return bounds; }71167117for (var i=0; i<l; i++) {7118var f = this.filters[i];7119f.getBounds&&f.getBounds(bounds);7120}7121return bounds;7122};71237124/**7125* @method _getBounds7126* @param {Matrix2D} matrix7127* @param {Boolean} ignoreTransform If true, does not apply this object's transform.7128* @return {Rectangle}7129* @protected7130**/7131p._getBounds = function(matrix, ignoreTransform){7132return this._transformBounds(this.getBounds(), matrix, ignoreTransform);7133};71347135/**7136* @method _transformBounds7137* @param {Rectangle} bounds7138* @param {Matrix2D} matrix7139* @param {Boolean} ignoreTransform7140* @return {Rectangle}7141* @protected7142**/7143p._transformBounds = function(bounds, matrix, ignoreTransform) {7144if (!bounds) { return bounds; }7145var x = bounds.x, y = bounds.y, width = bounds.width, height = bounds.height, mtx = this._props.matrix;7146mtx = ignoreTransform ? mtx.identity() : this.getMatrix(mtx);71477148if (x || y) { mtx.appendTransform(0,0,1,1,0,0,0,-x,-y); } // TODO: simplify this.7149if (matrix) { mtx.prependMatrix(matrix); }71507151var x_a = width*mtx.a, x_b = width*mtx.b;7152var y_c = height*mtx.c, y_d = height*mtx.d;7153var tx = mtx.tx, ty = mtx.ty;71547155var minX = tx, maxX = tx, minY = ty, maxY = ty;71567157if ((x = x_a + tx) < minX) { minX = x; } else if (x > maxX) { maxX = x; }7158if ((x = x_a + y_c + tx) < minX) { minX = x; } else if (x > maxX) { maxX = x; }7159if ((x = y_c + tx) < minX) { minX = x; } else if (x > maxX) { maxX = x; }71607161if ((y = x_b + ty) < minY) { minY = y; } else if (y > maxY) { maxY = y; }7162if ((y = x_b + y_d + ty) < minY) { minY = y; } else if (y > maxY) { maxY = y; }7163if ((y = y_d + ty) < minY) { minY = y; } else if (y > maxY) { maxY = y; }71647165return bounds.setValues(minX, minY, maxX-minX, maxY-minY);7166};71677168/**7169* Indicates whether the display object has any mouse event listeners or a cursor.7170* @method _isMouseOpaque7171* @return {Boolean}7172* @protected7173**/7174p._hasMouseEventListener = function() {7175var evts = DisplayObject._MOUSE_EVENTS;7176for (var i= 0, l=evts.length; i<l; i++) {7177if (this.hasEventListener(evts[i])) { return true; }7178}7179return !!this.cursor;7180};71817182createjs.DisplayObject = createjs.promote(DisplayObject, "EventDispatcher");7183}());71847185//##############################################################################7186// Container.js7187//##############################################################################71887189this.createjs = this.createjs||{};71907191(function() {7192"use strict";719371947195// constructor:7196/**7197* A Container is a nestable display list that allows you to work with compound display elements. For example you could7198* group arm, leg, torso and head {{#crossLink "Bitmap"}}{{/crossLink}} instances together into a Person Container, and7199* transform them as a group, while still being able to move the individual parts relative to each other. Children of7200* containers have their <code>transform</code> and <code>alpha</code> properties concatenated with their parent7201* Container.7202*7203* For example, a {{#crossLink "Shape"}}{{/crossLink}} with x=100 and alpha=0.5, placed in a Container with <code>x=50</code>7204* and <code>alpha=0.7</code> will be rendered to the canvas at <code>x=150</code> and <code>alpha=0.35</code>.7205* Containers have some overhead, so you generally shouldn't create a Container to hold a single child.7206*7207* <h4>Example</h4>7208*7209* var container = new createjs.Container();7210* container.addChild(bitmapInstance, shapeInstance);7211* container.x = 100;7212*7213* @class Container7214* @extends DisplayObject7215* @constructor7216**/7217function Container() {7218this.DisplayObject_constructor();72197220// public properties:7221/**7222* The array of children in the display list. You should usually use the child management methods such as7223* {{#crossLink "Container/addChild"}}{{/crossLink}}, {{#crossLink "Container/removeChild"}}{{/crossLink}},7224* {{#crossLink "Container/swapChildren"}}{{/crossLink}}, etc, rather than accessing this directly, but it is7225* included for advanced uses.7226* @property children7227* @type Array7228* @default null7229**/7230this.children = [];72317232/**7233* Indicates whether the children of this container are independently enabled for mouse/pointer interaction.7234* If false, the children will be aggregated under the container - for example, a click on a child shape would7235* trigger a click event on the container.7236* @property mouseChildren7237* @type Boolean7238* @default true7239**/7240this.mouseChildren = true;72417242/**7243* If false, the tick will not be propagated to children of this Container. This can provide some performance benefits.7244* In addition to preventing the "tick" event from being dispatched, it will also prevent tick related updates7245* on some display objects (ex. Sprite & MovieClip frame advancing, DOMElement visibility handling).7246* @property tickChildren7247* @type Boolean7248* @default true7249**/7250this.tickChildren = true;7251}7252var p = createjs.extend(Container, createjs.DisplayObject);725372547255// getter / setters:7256/**7257* Use the {{#crossLink "Container/numChildren:property"}}{{/crossLink}} property instead.7258* @method getNumChildren7259* @return {Number}7260* @deprecated7261**/7262p.getNumChildren = function() {7263return this.children.length;7264};72657266/**7267* Returns the number of children in the container.7268* @property numChildren7269* @type {Number}7270* @readonly7271**/7272try {7273Object.defineProperties(p, {7274numChildren: { get: p.getNumChildren }7275});7276} catch (e) {}727772787279// public methods:7280/**7281* Constructor alias for backwards compatibility. This method will be removed in future versions.7282* Subclasses should be updated to use {{#crossLink "Utility Methods/extends"}}{{/crossLink}}.7283* @method initialize7284* @deprecated in favour of `createjs.promote()`7285**/7286p.initialize = Container; // TODO: deprecated.72877288/**7289* Returns true or false indicating whether the display object would be visible if drawn to a canvas.7290* This does not account for whether it would be visible within the boundaries of the stage.7291*7292* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.7293* @method isVisible7294* @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas7295**/7296p.isVisible = function() {7297var hasContent = this.cacheCanvas || this.children.length;7298return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);7299};73007301/**7302* Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.7303* Returns true if the draw was handled (useful for overriding functionality).7304*7305* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.7306* @method draw7307* @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.7308* @param {Boolean} [ignoreCache=false] Indicates whether the draw operation should ignore any current cache.7309* For example, used for drawing the cache (to prevent it from simply drawing an existing cache back7310* into itself).7311**/7312p.draw = function(ctx, ignoreCache) {7313if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; }73147315// this ensures we don't have issues with display list changes that occur during a draw:7316var list = this.children.slice();7317for (var i=0,l=list.length; i<l; i++) {7318var child = list[i];7319if (!child.isVisible()) { continue; }73207321// draw the child:7322ctx.save();7323child.updateContext(ctx);7324child.draw(ctx);7325ctx.restore();7326}7327return true;7328};73297330/**7331* Adds a child to the top of the display list.7332*7333* <h4>Example</h4>7334*7335* container.addChild(bitmapInstance);7336*7337* You can also add multiple children at once:7338*7339* container.addChild(bitmapInstance, shapeInstance, textInstance);7340*7341* @method addChild7342* @param {DisplayObject} child The display object to add.7343* @return {DisplayObject} The child that was added, or the last child if multiple children were added.7344**/7345p.addChild = function(child) {7346if (child == null) { return child; }7347var l = arguments.length;7348if (l > 1) {7349for (var i=0; i<l; i++) { this.addChild(arguments[i]); }7350return arguments[l-1];7351}7352if (child.parent) { child.parent.removeChild(child); }7353child.parent = this;7354this.children.push(child);7355child.dispatchEvent("added");7356return child;7357};73587359/**7360* Adds a child to the display list at the specified index, bumping children at equal or greater indexes up one, and7361* setting its parent to this Container.7362*7363* <h4>Example</h4>7364*7365* addChildAt(child1, index);7366*7367* You can also add multiple children, such as:7368*7369* addChildAt(child1, child2, ..., index);7370*7371* The index must be between 0 and numChildren. For example, to add myShape under otherShape in the display list,7372* you could use:7373*7374* container.addChildAt(myShape, container.getChildIndex(otherShape));7375*7376* This would also bump otherShape's index up by one. Fails silently if the index is out of range.7377*7378* @method addChildAt7379* @param {DisplayObject} child The display object to add.7380* @param {Number} index The index to add the child at.7381* @return {DisplayObject} Returns the last child that was added, or the last child if multiple children were added.7382**/7383p.addChildAt = function(child, index) {7384var l = arguments.length;7385var indx = arguments[l-1]; // can't use the same name as the index param or it replaces arguments[1]7386if (indx < 0 || indx > this.children.length) { return arguments[l-2]; }7387if (l > 2) {7388for (var i=0; i<l-1; i++) { this.addChildAt(arguments[i], indx+i); }7389return arguments[l-2];7390}7391if (child.parent) { child.parent.removeChild(child); }7392child.parent = this;7393this.children.splice(index, 0, child);7394child.dispatchEvent("added");7395return child;7396};73977398/**7399* Removes the specified child from the display list. Note that it is faster to use removeChildAt() if the index is7400* already known.7401*7402* <h4>Example</h4>7403*7404* container.removeChild(child);7405*7406* You can also remove multiple children:7407*7408* removeChild(child1, child2, ...);7409*7410* Returns true if the child (or children) was removed, or false if it was not in the display list.7411* @method removeChild7412* @param {DisplayObject} child The child to remove.7413* @return {Boolean} true if the child (or children) was removed, or false if it was not in the display list.7414**/7415p.removeChild = function(child) {7416var l = arguments.length;7417if (l > 1) {7418var good = true;7419for (var i=0; i<l; i++) { good = good && this.removeChild(arguments[i]); }7420return good;7421}7422return this.removeChildAt(createjs.indexOf(this.children, child));7423};74247425/**7426* Removes the child at the specified index from the display list, and sets its parent to null.7427*7428* <h4>Example</h4>7429*7430* container.removeChildAt(2);7431*7432* You can also remove multiple children:7433*7434* container.removeChild(2, 7, ...)7435*7436* Returns true if the child (or children) was removed, or false if any index was out of range.7437* @method removeChildAt7438* @param {Number} index The index of the child to remove.7439* @return {Boolean} true if the child (or children) was removed, or false if any index was out of range.7440**/7441p.removeChildAt = function(index) {7442var l = arguments.length;7443if (l > 1) {7444var a = [];7445for (var i=0; i<l; i++) { a[i] = arguments[i]; }7446a.sort(function(a, b) { return b-a; });7447var good = true;7448for (var i=0; i<l; i++) { good = good && this.removeChildAt(a[i]); }7449return good;7450}7451if (index < 0 || index > this.children.length-1) { return false; }7452var child = this.children[index];7453if (child) { child.parent = null; }7454this.children.splice(index, 1);7455child.dispatchEvent("removed");7456return true;7457};74587459/**7460* Removes all children from the display list.7461*7462* <h4>Example</h4>7463*7464* container.removeAllChildren();7465*7466* @method removeAllChildren7467**/7468p.removeAllChildren = function() {7469var kids = this.children;7470while (kids.length) { this.removeChildAt(0); }7471};74727473/**7474* Returns the child at the specified index.7475*7476* <h4>Example</h4>7477*7478* container.getChildAt(2);7479*7480* @method getChildAt7481* @param {Number} index The index of the child to return.7482* @return {DisplayObject} The child at the specified index. Returns null if there is no child at the index.7483**/7484p.getChildAt = function(index) {7485return this.children[index];7486};74877488/**7489* Returns the child with the specified name.7490* @method getChildByName7491* @param {String} name The name of the child to return.7492* @return {DisplayObject} The child with the specified name.7493**/7494p.getChildByName = function(name) {7495var kids = this.children;7496for (var i=0,l=kids.length;i<l;i++) {7497if(kids[i].name == name) { return kids[i]; }7498}7499return null;7500};75017502/**7503* Performs an array sort operation on the child list.7504*7505* <h4>Example: Display children with a higher y in front.</h4>7506*7507* var sortFunction = function(obj1, obj2, options) {7508* if (obj1.y > obj2.y) { return 1; }7509* if (obj1.y < obj2.y) { return -1; }7510* return 0;7511* }7512* container.sortChildren(sortFunction);7513*7514* @method sortChildren7515* @param {Function} sortFunction the function to use to sort the child list. See JavaScript's <code>Array.sort</code>7516* documentation for details.7517**/7518p.sortChildren = function(sortFunction) {7519this.children.sort(sortFunction);7520};75217522/**7523* Returns the index of the specified child in the display list, or -1 if it is not in the display list.7524*7525* <h4>Example</h4>7526*7527* var index = container.getChildIndex(child);7528*7529* @method getChildIndex7530* @param {DisplayObject} child The child to return the index of.7531* @return {Number} The index of the specified child. -1 if the child is not found.7532**/7533p.getChildIndex = function(child) {7534return createjs.indexOf(this.children, child);7535};75367537/**7538* Swaps the children at the specified indexes. Fails silently if either index is out of range.7539* @method swapChildrenAt7540* @param {Number} index17541* @param {Number} index27542**/7543p.swapChildrenAt = function(index1, index2) {7544var kids = this.children;7545var o1 = kids[index1];7546var o2 = kids[index2];7547if (!o1 || !o2) { return; }7548kids[index1] = o2;7549kids[index2] = o1;7550};75517552/**7553* Swaps the specified children's depth in the display list. Fails silently if either child is not a child of this7554* Container.7555* @method swapChildren7556* @param {DisplayObject} child17557* @param {DisplayObject} child27558**/7559p.swapChildren = function(child1, child2) {7560var kids = this.children;7561var index1,index2;7562for (var i=0,l=kids.length;i<l;i++) {7563if (kids[i] == child1) { index1 = i; }7564if (kids[i] == child2) { index2 = i; }7565if (index1 != null && index2 != null) { break; }7566}7567if (i==l) { return; } // TODO: throw error?7568kids[index1] = child2;7569kids[index2] = child1;7570};75717572/**7573* Changes the depth of the specified child. Fails silently if the child is not a child of this container, or the index is out of range.7574* @param {DisplayObject} child7575* @param {Number} index7576* @method setChildIndex7577**/7578p.setChildIndex = function(child, index) {7579var kids = this.children, l=kids.length;7580if (child.parent != this || index < 0 || index >= l) { return; }7581for (var i=0;i<l;i++) {7582if (kids[i] == child) { break; }7583}7584if (i==l || i == index) { return; }7585kids.splice(i,1);7586kids.splice(index,0,child);7587};75887589/**7590* Returns true if the specified display object either is this container or is a descendent (child, grandchild, etc)7591* of this container.7592* @method contains7593* @param {DisplayObject} child The DisplayObject to be checked.7594* @return {Boolean} true if the specified display object either is this container or is a descendent.7595**/7596p.contains = function(child) {7597while (child) {7598if (child == this) { return true; }7599child = child.parent;7600}7601return false;7602};76037604/**7605* Tests whether the display object intersects the specified local point (ie. draws a pixel with alpha > 0 at the7606* specified position). This ignores the alpha, shadow and compositeOperation of the display object, and all7607* transform properties including regX/Y.7608* @method hitTest7609* @param {Number} x The x position to check in the display object's local coordinates.7610* @param {Number} y The y position to check in the display object's local coordinates.7611* @return {Boolean} A Boolean indicating whether there is a visible section of a DisplayObject that overlaps the specified7612* coordinates.7613**/7614p.hitTest = function(x, y) {7615// TODO: optimize to use the fast cache check where possible.7616return (this.getObjectUnderPoint(x, y) != null);7617};76187619/**7620* Returns an array of all display objects under the specified coordinates that are in this container's display7621* list. This routine ignores any display objects with {{#crossLink "DisplayObject/mouseEnabled:property"}}{{/crossLink}}7622* set to `false`. The array will be sorted in order of visual depth, with the top-most display object at index 0.7623* This uses shape based hit detection, and can be an expensive operation to run, so it is best to use it carefully.7624* For example, if testing for objects under the mouse, test on tick (instead of on {{#crossLink "DisplayObject/mousemove:event"}}{{/crossLink}}),7625* and only if the mouse's position has changed.7626*7627* <ul>7628* <li>By default (mode=0) this method evaluates all display objects.</li>7629* <li>By setting the `mode` parameter to `1`, the {{#crossLink "DisplayObject/mouseEnabled:property"}}{{/crossLink}}7630* and {{#crossLink "mouseChildren:property"}}{{/crossLink}} properties will be respected.</li>7631* <li>Setting the `mode` to `2` additionally excludes display objects that do not have active mouse event7632* listeners or a {{#crossLink "DisplayObject:cursor:property"}}{{/crossLink}} property. That is, only objects7633* that would normally intercept mouse interaction will be included. This can significantly improve performance7634* in some cases by reducing the number of display objects that need to be tested.</li>7635* </li>7636*7637* This method accounts for both {{#crossLink "DisplayObject/hitArea:property"}}{{/crossLink}} and {{#crossLink "DisplayObject/mask:property"}}{{/crossLink}}.7638* @method getObjectsUnderPoint7639* @param {Number} x The x position in the container to test.7640* @param {Number} y The y position in the container to test.7641* @param {Number} [mode=0] The mode to use to determine which display objects to include. 0-all, 1-respect mouseEnabled/mouseChildren, 2-only mouse opaque objects.7642* @return {Array} An Array of DisplayObjects under the specified coordinates.7643**/7644p.getObjectsUnderPoint = function(x, y, mode) {7645var arr = [];7646var pt = this.localToGlobal(x, y);7647this._getObjectsUnderPoint(pt.x, pt.y, arr, mode>0, mode==1);7648return arr;7649};76507651/**7652* Similar to {{#crossLink "Container/getObjectsUnderPoint"}}{{/crossLink}}, but returns only the top-most display7653* object. This runs significantly faster than <code>getObjectsUnderPoint()</code>, but is still potentially an expensive7654* operation. See {{#crossLink "Container/getObjectsUnderPoint"}}{{/crossLink}} for more information.7655* @method getObjectUnderPoint7656* @param {Number} x The x position in the container to test.7657* @param {Number} y The y position in the container to test.7658* @param {Number} mode The mode to use to determine which display objects to include. 0-all, 1-respect mouseEnabled/mouseChildren, 2-only mouse opaque objects.7659* @return {DisplayObject} The top-most display object under the specified coordinates.7660**/7661p.getObjectUnderPoint = function(x, y, mode) {7662var pt = this.localToGlobal(x, y);7663return this._getObjectsUnderPoint(pt.x, pt.y, null, mode>0, mode==1);7664};76657666/**7667* Docced in superclass.7668*/7669p.getBounds = function() {7670return this._getBounds(null, true);7671};767276737674/**7675* Docced in superclass.7676*/7677p.getTransformedBounds = function() {7678return this._getBounds();7679};76807681/**7682* Returns a clone of this Container. Some properties that are specific to this instance's current context are7683* reverted to their defaults (for example .parent).7684* @method clone7685* @param {Boolean} [recursive=false] If true, all of the descendants of this container will be cloned recursively. If false, the7686* properties of the container will be cloned, but the new instance will not have any children.7687* @return {Container} A clone of the current Container instance.7688**/7689p.clone = function(recursive) {7690var o = this._cloneProps(new Container());7691if (recursive) { this._cloneChildren(o); }7692return o;7693};76947695/**7696* Returns a string representation of this object.7697* @method toString7698* @return {String} a string representation of the instance.7699**/7700p.toString = function() {7701return "[Container (name="+ this.name +")]";7702};770377047705// private methods:7706/**7707* @method _tick7708* @param {Object} evtObj An event object that will be dispatched to all tick listeners. This object is reused between dispatchers to reduce construction & GC costs.7709* @protected7710**/7711p._tick = function(evtObj) {7712if (this.tickChildren) {7713for (var i=this.children.length-1; i>=0; i--) {7714var child = this.children[i];7715if (child.tickEnabled && child._tick) { child._tick(evtObj); }7716}7717}7718this.DisplayObject__tick(evtObj);7719};77207721/**7722* Recursively clones all children of this container, and adds them to the target container.7723* @method cloneChildren7724* @protected7725* @param {Container} o The target container.7726**/7727p._cloneChildren = function(o) {7728if (o.children.length) { o.removeAllChildren(); }7729var arr = o.children;7730for (var i=0, l=this.children.length; i<l; i++) {7731var clone = this.children[i].clone(true);7732clone.parent = o;7733arr.push(clone);7734}7735};77367737/**7738* @method _getObjectsUnderPoint7739* @param {Number} x7740* @param {Number} y7741* @param {Array} arr7742* @param {Boolean} mouse If true, it will respect mouse interaction properties like mouseEnabled, mouseChildren, and active listeners.7743* @param {Boolean} activeListener If true, there is an active mouse event listener on a parent object.7744* @param {Number} currentDepth Indicates the current depth of the search.7745* @return {DisplayObject}7746* @protected7747**/7748p._getObjectsUnderPoint = function(x, y, arr, mouse, activeListener, currentDepth) {7749currentDepth = currentDepth || 0;7750if (!currentDepth && !this._testMask(this, x, y)) { return null; }7751var mtx, ctx = createjs.DisplayObject._hitTestContext;7752activeListener = activeListener || (mouse&&this._hasMouseEventListener());77537754// draw children one at a time, and check if we get a hit:7755var children = this.children, l = children.length;7756for (var i=l-1; i>=0; i--) {7757var child = children[i];7758var hitArea = child.hitArea;7759if (!child.visible || (!hitArea && !child.isVisible()) || (mouse && !child.mouseEnabled)) { continue; }7760if (!hitArea && !this._testMask(child, x, y)) { continue; }77617762// if a child container has a hitArea then we only need to check its hitArea, so we can treat it as a normal DO:7763if (!hitArea && child instanceof Container) {7764var result = child._getObjectsUnderPoint(x, y, arr, mouse, activeListener, currentDepth+1);7765if (!arr && result) { return (mouse && !this.mouseChildren) ? this : result; }7766} else {7767if (mouse && !activeListener && !child._hasMouseEventListener()) { continue; }77687769// TODO: can we pass displayProps forward, to avoid having to calculate this backwards every time? It's kind of a mixed bag. When we're only hunting for DOs with event listeners, it may not make sense.7770var props = child.getConcatenatedDisplayProps(child._props);7771mtx = props.matrix;77727773if (hitArea) {7774mtx.appendMatrix(hitArea.getMatrix(hitArea._props.matrix));7775props.alpha = hitArea.alpha;7776}77777778ctx.globalAlpha = props.alpha;7779ctx.setTransform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx-x, mtx.ty-y);7780(hitArea||child).draw(ctx);7781if (!this._testHit(ctx)) { continue; }7782ctx.setTransform(1, 0, 0, 1, 0, 0);7783ctx.clearRect(0, 0, 2, 2);7784if (arr) { arr.push(child); }7785else { return (mouse && !this.mouseChildren) ? this : child; }7786}7787}7788return null;7789};77907791/**7792* @method _testMask7793* @param {DisplayObject} target7794* @param {Number} x7795* @param {Number} y7796* @return {Boolean} Indicates whether the x/y is within the masked region.7797* @protected7798**/7799p._testMask = function(target, x, y) {7800var mask = target.mask;7801if (!mask || !mask.graphics || mask.graphics.isEmpty()) { return true; }78027803var mtx = this._props.matrix, parent = target.parent;7804mtx = parent ? parent.getConcatenatedMatrix(mtx) : mtx.identity();7805mtx = mask.getMatrix(mask._props.matrix).prependMatrix(mtx);78067807var ctx = createjs.DisplayObject._hitTestContext;7808ctx.setTransform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx-x, mtx.ty-y);78097810// draw the mask as a solid fill:7811mask.graphics.drawAsPath(ctx);7812ctx.fillStyle = "#000";7813ctx.fill();78147815if (!this._testHit(ctx)) { return false; }7816ctx.setTransform(1, 0, 0, 1, 0, 0);7817ctx.clearRect(0, 0, 2, 2);78187819return true;7820};78217822/**7823* @method _getBounds7824* @param {Matrix2D} matrix7825* @param {Boolean} ignoreTransform If true, does not apply this object's transform.7826* @return {Rectangle}7827* @protected7828**/7829p._getBounds = function(matrix, ignoreTransform) {7830var bounds = this.DisplayObject_getBounds();7831if (bounds) { return this._transformBounds(bounds, matrix, ignoreTransform); }78327833var mtx = this._props.matrix;7834mtx = ignoreTransform ? mtx.identity() : this.getMatrix(mtx);7835if (matrix) { mtx.prependMatrix(matrix); }78367837var l = this.children.length, rect=null;7838for (var i=0; i<l; i++) {7839var child = this.children[i];7840if (!child.visible || !(bounds = child._getBounds(mtx))) { continue; }7841if (rect) { rect.extend(bounds.x, bounds.y, bounds.width, bounds.height); }7842else { rect = bounds.clone(); }7843}7844return rect;7845};784678477848createjs.Container = createjs.promote(Container, "DisplayObject");7849}());78507851//##############################################################################7852// Stage.js7853//##############################################################################78547855this.createjs = this.createjs||{};78567857(function() {7858"use strict";785978607861// constructor:7862/**7863* A stage is the root level {{#crossLink "Container"}}{{/crossLink}} for a display list. Each time its {{#crossLink "Stage/tick"}}{{/crossLink}}7864* method is called, it will render its display list to its target canvas.7865*7866* <h4>Example</h4>7867* This example creates a stage, adds a child to it, then uses {{#crossLink "Ticker"}}{{/crossLink}} to update the child7868* and redraw the stage using {{#crossLink "Stage/update"}}{{/crossLink}}.7869*7870* var stage = new createjs.Stage("canvasElementId");7871* var image = new createjs.Bitmap("imagePath.png");7872* stage.addChild(image);7873* createjs.Ticker.addEventListener("tick", handleTick);7874* function handleTick(event) {7875* image.x += 10;7876* stage.update();7877* }7878*7879* @class Stage7880* @extends Container7881* @constructor7882* @param {HTMLCanvasElement | String | Object} canvas A canvas object that the Stage will render to, or the string id7883* of a canvas object in the current document.7884**/7885function Stage(canvas) {7886this.Container_constructor();788778887889// public properties:7890/**7891* Indicates whether the stage should automatically clear the canvas before each render. You can set this to <code>false</code>7892* to manually control clearing (for generative art, or when pointing multiple stages at the same canvas for7893* example).7894*7895* <h4>Example</h4>7896*7897* var stage = new createjs.Stage("canvasId");7898* stage.autoClear = false;7899*7900* @property autoClear7901* @type Boolean7902* @default true7903**/7904this.autoClear = true;79057906/**7907* The canvas the stage will render to. Multiple stages can share a single canvas, but you must disable autoClear for all but the7908* first stage that will be ticked (or they will clear each other's render).7909*7910* When changing the canvas property you must disable the events on the old canvas, and enable events on the7911* new canvas or mouse events will not work as expected. For example:7912*7913* myStage.enableDOMEvents(false);7914* myStage.canvas = anotherCanvas;7915* myStage.enableDOMEvents(true);7916*7917* @property canvas7918* @type HTMLCanvasElement | Object7919**/7920this.canvas = (typeof canvas == "string") ? document.getElementById(canvas) : canvas;79217922/**7923* The current mouse X position on the canvas. If the mouse leaves the canvas, this will indicate the most recent7924* position over the canvas, and mouseInBounds will be set to false.7925* @property mouseX7926* @type Number7927* @readonly7928**/7929this.mouseX = 0;79307931/**7932* The current mouse Y position on the canvas. If the mouse leaves the canvas, this will indicate the most recent7933* position over the canvas, and mouseInBounds will be set to false.7934* @property mouseY7935* @type Number7936* @readonly7937**/7938this.mouseY = 0;79397940/**7941* Specifies the area of the stage to affect when calling update. This can be use to selectively7942* re-draw specific regions of the canvas. If null, the whole canvas area is drawn.7943* @property drawRect7944* @type {Rectangle}7945*/7946this.drawRect = null;79477948/**7949* Indicates whether display objects should be rendered on whole pixels. You can set the7950* {{#crossLink "DisplayObject/snapToPixel"}}{{/crossLink}} property of7951* display objects to false to enable/disable this behaviour on a per instance basis.7952* @property snapToPixelEnabled7953* @type Boolean7954* @default false7955**/7956this.snapToPixelEnabled = false;79577958/**7959* Indicates whether the mouse is currently within the bounds of the canvas.7960* @property mouseInBounds7961* @type Boolean7962* @default false7963**/7964this.mouseInBounds = false;79657966/**7967* If true, tick callbacks will be called on all display objects on the stage prior to rendering to the canvas.7968* @property tickOnUpdate7969* @type Boolean7970* @default true7971**/7972this.tickOnUpdate = true;79737974/**7975* If true, mouse move events will continue to be called when the mouse leaves the target canvas. See7976* {{#crossLink "Stage/mouseInBounds:property"}}{{/crossLink}}, and {{#crossLink "MouseEvent"}}{{/crossLink}}7977* x/y/rawX/rawY.7978* @property mouseMoveOutside7979* @type Boolean7980* @default false7981**/7982this.mouseMoveOutside = false;798379847985/**7986* Prevents selection of other elements in the html page if the user clicks and drags, or double clicks on the canvas.7987* This works by calling `preventDefault()` on any mousedown events (or touch equivalent) originating on the canvas.7988* @property preventSelection7989* @type Boolean7990* @default true7991**/7992this.preventSelection = true;79937994/**7995* The hitArea property is not supported for Stage.7996* @property hitArea7997* @type {DisplayObject}7998* @default null7999*/800080018002// private properties:8003/**8004* Holds objects with data for each active pointer id. Each object has the following properties:8005* x, y, event, target, overTarget, overX, overY, inBounds, posEvtObj (native event that last updated position)8006* @property _pointerData8007* @type {Object}8008* @private8009*/8010this._pointerData = {};80118012/**8013* Number of active pointers.8014* @property _pointerCount8015* @type {Object}8016* @private8017*/8018this._pointerCount = 0;80198020/**8021* The ID of the primary pointer.8022* @property _primaryPointerID8023* @type {Object}8024* @private8025*/8026this._primaryPointerID = null;80278028/**8029* @property _mouseOverIntervalID8030* @protected8031* @type Number8032**/8033this._mouseOverIntervalID = null;80348035/**8036* @property _nextStage8037* @protected8038* @type Stage8039**/8040this._nextStage = null;80418042/**8043* @property _prevStage8044* @protected8045* @type Stage8046**/8047this._prevStage = null;804880498050// initialize:8051this.enableDOMEvents(true);8052}8053var p = createjs.extend(Stage, createjs.Container);80548055/**8056* <strong>REMOVED</strong>. Removed in favor of using `MySuperClass_constructor`.8057* See {{#crossLink "Utility Methods/extend"}}{{/crossLink}} and {{#crossLink "Utility Methods/promote"}}{{/crossLink}}8058* for details.8059*8060* There is an inheritance tutorial distributed with EaselJS in /tutorials/Inheritance.8061*8062* @method initialize8063* @protected8064* @deprecated8065*/8066// p.initialize = function() {}; // searchable for devs wondering where it is.806780688069// events:8070/**8071* Dispatched when the user moves the mouse over the canvas.8072* See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties.8073* @event stagemousemove8074* @since 0.6.08075*/80768077/**8078* Dispatched when the user presses their left mouse button on the canvas. See the {{#crossLink "MouseEvent"}}{{/crossLink}}8079* class for a listing of event properties.8080* @event stagemousedown8081* @since 0.6.08082*/80838084/**8085* Dispatched when the user the user presses somewhere on the stage, then releases the mouse button anywhere that the page can detect it (this varies slightly between browsers).8086* You can use {{#crossLink "Stage/mouseInBounds:property"}}{{/crossLink}} to check whether the mouse is currently within the stage bounds.8087* See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties.8088* @event stagemouseup8089* @since 0.6.08090*/80918092/**8093* Dispatched when the mouse moves from within the canvas area (mouseInBounds == true) to outside it (mouseInBounds == false).8094* This is currently only dispatched for mouse input (not touch). See the {{#crossLink "MouseEvent"}}{{/crossLink}}8095* class for a listing of event properties.8096* @event mouseleave8097* @since 0.7.08098*/80998100/**8101* Dispatched when the mouse moves into the canvas area (mouseInBounds == false) from outside it (mouseInBounds == true).8102* This is currently only dispatched for mouse input (not touch). See the {{#crossLink "MouseEvent"}}{{/crossLink}}8103* class for a listing of event properties.8104* @event mouseenter8105* @since 0.7.08106*/81078108/**8109* Dispatched each update immediately before the tick event is propagated through the display list.8110* You can call preventDefault on the event object to cancel propagating the tick event.8111* @event tickstart8112* @since 0.7.08113*/81148115/**8116* Dispatched each update immediately after the tick event is propagated through the display list. Does not fire if8117* tickOnUpdate is false. Precedes the "drawstart" event.8118* @event tickend8119* @since 0.7.08120*/81218122/**8123* Dispatched each update immediately before the canvas is cleared and the display list is drawn to it.8124* You can call preventDefault on the event object to cancel the draw.8125* @event drawstart8126* @since 0.7.08127*/81288129/**8130* Dispatched each update immediately after the display list is drawn to the canvas and the canvas context is restored.8131* @event drawend8132* @since 0.7.08133*/813481358136// getter / setters:8137/**8138* Specifies a target stage that will have mouse / touch interactions relayed to it after this stage handles them.8139* This can be useful in cases where you have multiple layered canvases and want user interactions8140* events to pass through. For example, this would relay mouse events from topStage to bottomStage:8141*8142* topStage.nextStage = bottomStage;8143*8144* To disable relaying, set nextStage to null.8145*8146* MouseOver, MouseOut, RollOver, and RollOut interactions are also passed through using the mouse over settings8147* of the top-most stage, but are only processed if the target stage has mouse over interactions enabled.8148* Considerations when using roll over in relay targets:<OL>8149* <LI> The top-most (first) stage must have mouse over interactions enabled (via enableMouseOver)</LI>8150* <LI> All stages that wish to participate in mouse over interaction must enable them via enableMouseOver</LI>8151* <LI> All relay targets will share the frequency value of the top-most stage</LI>8152* </OL>8153* To illustrate, in this example the targetStage would process mouse over interactions at 10hz (despite passing8154* 30 as it's desired frequency):8155* topStage.nextStage = targetStage;8156* topStage.enableMouseOver(10);8157* targetStage.enableMouseOver(30);8158*8159* If the target stage's canvas is completely covered by this stage's canvas, you may also want to disable its8160* DOM events using:8161*8162* targetStage.enableDOMEvents(false);8163*8164* @property nextStage8165* @type {Stage}8166**/8167p._get_nextStage = function() {8168return this._nextStage;8169};8170p._set_nextStage = function(value) {8171if (this._nextStage) { this._nextStage._prevStage = null; }8172if (value) { value._prevStage = this; }8173this._nextStage = value;8174};81758176try {8177Object.defineProperties(p, {8178nextStage: { get: p._get_nextStage, set: p._set_nextStage }8179});8180} catch (e) {} // TODO: use Log818181828183// public methods:8184/**8185* Each time the update method is called, the stage will call {{#crossLink "Stage/tick"}}{{/crossLink}}8186* unless {{#crossLink "Stage/tickOnUpdate:property"}}{{/crossLink}} is set to false,8187* and then render the display list to the canvas.8188*8189* @method update8190* @param {Object} [props] Props object to pass to `tick()`. Should usually be a {{#crossLink "Ticker"}}{{/crossLink}} event object, or similar object with a delta property.8191**/8192p.update = function(props) {8193if (!this.canvas) { return; }8194if (this.tickOnUpdate) { this.tick(props); }8195if (this.dispatchEvent("drawstart", false, true) === false) { return; }8196createjs.DisplayObject._snapToPixelEnabled = this.snapToPixelEnabled;8197var r = this.drawRect, ctx = this.canvas.getContext("2d");8198ctx.setTransform(1, 0, 0, 1, 0, 0);8199if (this.autoClear) {8200if (r) { ctx.clearRect(r.x, r.y, r.width, r.height); }8201else { ctx.clearRect(0, 0, this.canvas.width+1, this.canvas.height+1); }8202}8203ctx.save();8204if (this.drawRect) {8205ctx.beginPath();8206ctx.rect(r.x, r.y, r.width, r.height);8207ctx.clip();8208}8209this.updateContext(ctx);8210this.draw(ctx, false);8211ctx.restore();8212this.dispatchEvent("drawend");8213};82148215/**8216* Propagates a tick event through the display list. This is automatically called by {{#crossLink "Stage/update"}}{{/crossLink}}8217* unless {{#crossLink "Stage/tickOnUpdate:property"}}{{/crossLink}} is set to false.8218*8219* If a props object is passed to `tick()`, then all of its properties will be copied to the event object that is8220* propagated to listeners.8221*8222* Some time-based features in EaselJS (for example {{#crossLink "Sprite/framerate"}}{{/crossLink}} require that8223* a {{#crossLink "Ticker/tick:event"}}{{/crossLink}} event object (or equivalent object with a delta property) be8224* passed as the `props` parameter to `tick()`. For example:8225*8226* Ticker.on("tick", handleTick);8227* function handleTick(evtObj) {8228* // clone the event object from Ticker, and add some custom data to it:8229* var evt = evtObj.clone().set({greeting:"hello", name:"world"});8230*8231* // pass it to stage.update():8232* myStage.update(evt); // subsequently calls tick() with the same param8233* }8234*8235* // ...8236* myDisplayObject.on("tick", handleDisplayObjectTick);8237* function handleDisplayObjectTick(evt) {8238* console.log(evt.delta); // the delta property from the Ticker tick event object8239* console.log(evt.greeting, evt.name); // custom data: "hello world"8240* }8241*8242* @method tick8243* @param {Object} [props] An object with properties that should be copied to the event object. Should usually be a Ticker event object, or similar object with a delta property.8244**/8245p.tick = function(props) {8246if (!this.tickEnabled || this.dispatchEvent("tickstart", false, true) === false) { return; }8247var evtObj = new createjs.Event("tick");8248if (props) {8249for (var n in props) {8250if (props.hasOwnProperty(n)) { evtObj[n] = props[n]; }8251}8252}8253this._tick(evtObj);8254this.dispatchEvent("tickend");8255};82568257/**8258* Default event handler that calls the Stage {{#crossLink "Stage/update"}}{{/crossLink}} method when a {{#crossLink "DisplayObject/tick:event"}}{{/crossLink}}8259* event is received. This allows you to register a Stage instance as a event listener on {{#crossLink "Ticker"}}{{/crossLink}}8260* directly, using:8261*8262* Ticker.addEventListener("tick", myStage");8263*8264* Note that if you subscribe to ticks using this pattern, then the tick event object will be passed through to8265* display object tick handlers, instead of <code>delta</code> and <code>paused</code> parameters.8266* @property handleEvent8267* @type Function8268**/8269p.handleEvent = function(evt) {8270if (evt.type == "tick") { this.update(evt); }8271};82728273/**8274* Clears the target canvas. Useful if {{#crossLink "Stage/autoClear:property"}}{{/crossLink}} is set to `false`.8275* @method clear8276**/8277p.clear = function() {8278if (!this.canvas) { return; }8279var ctx = this.canvas.getContext("2d");8280ctx.setTransform(1, 0, 0, 1, 0, 0);8281ctx.clearRect(0, 0, this.canvas.width+1, this.canvas.height+1);8282};82838284/**8285* Returns a data url that contains a Base64-encoded image of the contents of the stage. The returned data url can8286* be specified as the src value of an image element.8287* @method toDataURL8288* @param {String} [backgroundColor] The background color to be used for the generated image. Any valid CSS color8289* value is allowed. The default value is a transparent background.8290* @param {String} [mimeType="image/png"] The MIME type of the image format to be create. The default is "image/png". If an unknown MIME type8291* is passed in, or if the browser does not support the specified MIME type, the default value will be used.8292* @return {String} a Base64 encoded image.8293**/8294p.toDataURL = function(backgroundColor, mimeType) {8295var data, ctx = this.canvas.getContext('2d'), w = this.canvas.width, h = this.canvas.height;82968297if (backgroundColor) {8298data = ctx.getImageData(0, 0, w, h);8299var compositeOperation = ctx.globalCompositeOperation;8300ctx.globalCompositeOperation = "destination-over";83018302ctx.fillStyle = backgroundColor;8303ctx.fillRect(0, 0, w, h);8304}83058306var dataURL = this.canvas.toDataURL(mimeType||"image/png");83078308if(backgroundColor) {8309ctx.putImageData(data, 0, 0);8310ctx.globalCompositeOperation = compositeOperation;8311}83128313return dataURL;8314};83158316/**8317* Enables or disables (by passing a frequency of 0) mouse over ({{#crossLink "DisplayObject/mouseover:event"}}{{/crossLink}}8318* and {{#crossLink "DisplayObject/mouseout:event"}}{{/crossLink}}) and roll over events ({{#crossLink "DisplayObject/rollover:event"}}{{/crossLink}}8319* and {{#crossLink "DisplayObject/rollout:event"}}{{/crossLink}}) for this stage's display list. These events can8320* be expensive to generate, so they are disabled by default. The frequency of the events can be controlled8321* independently of mouse move events via the optional `frequency` parameter.8322*8323* <h4>Example</h4>8324*8325* var stage = new createjs.Stage("canvasId");8326* stage.enableMouseOver(10); // 10 updates per second8327*8328* @method enableMouseOver8329* @param {Number} [frequency=20] Optional param specifying the maximum number of times per second to broadcast8330* mouse over/out events. Set to 0 to disable mouse over events completely. Maximum is 50. A lower frequency is less8331* responsive, but uses less CPU.8332**/8333p.enableMouseOver = function(frequency) {8334if (this._mouseOverIntervalID) {8335clearInterval(this._mouseOverIntervalID);8336this._mouseOverIntervalID = null;8337if (frequency == 0) {8338this._testMouseOver(true);8339}8340}8341if (frequency == null) { frequency = 20; }8342else if (frequency <= 0) { return; }8343var o = this;8344this._mouseOverIntervalID = setInterval(function(){ o._testMouseOver(); }, 1000/Math.min(50,frequency));8345};83468347/**8348* Enables or disables the event listeners that stage adds to DOM elements (window, document and canvas). It is good8349* practice to disable events when disposing of a Stage instance, otherwise the stage will continue to receive8350* events from the page.8351*8352* When changing the canvas property you must disable the events on the old canvas, and enable events on the8353* new canvas or mouse events will not work as expected. For example:8354*8355* myStage.enableDOMEvents(false);8356* myStage.canvas = anotherCanvas;8357* myStage.enableDOMEvents(true);8358*8359* @method enableDOMEvents8360* @param {Boolean} [enable=true] Indicates whether to enable or disable the events. Default is true.8361**/8362p.enableDOMEvents = function(enable) {8363if (enable == null) { enable = true; }8364var n, o, ls = this._eventListeners;8365if (!enable && ls) {8366for (n in ls) {8367o = ls[n];8368o.t.removeEventListener(n, o.f, false);8369}8370this._eventListeners = null;8371} else if (enable && !ls && this.canvas) {8372var t = window.addEventListener ? window : document;8373var _this = this;8374ls = this._eventListeners = {};8375ls["mouseup"] = {t:t, f:function(e) { _this._handleMouseUp(e)} };8376ls["mousemove"] = {t:t, f:function(e) { _this._handleMouseMove(e)} };8377ls["dblclick"] = {t:this.canvas, f:function(e) { _this._handleDoubleClick(e)} };8378ls["mousedown"] = {t:this.canvas, f:function(e) { _this._handleMouseDown(e)} };83798380for (n in ls) {8381o = ls[n];8382o.t.addEventListener(n, o.f, false);8383}8384}8385};83868387/**8388* Stage instances cannot be cloned.8389* @method clone8390**/8391p.clone = function() {8392throw("Stage cannot be cloned.");8393};83948395/**8396* Returns a string representation of this object.8397* @method toString8398* @return {String} a string representation of the instance.8399**/8400p.toString = function() {8401return "[Stage (name="+ this.name +")]";8402};840384048405// private methods:8406/**8407* @method _getElementRect8408* @protected8409* @param {HTMLElement} e8410**/8411p._getElementRect = function(e) {8412var bounds;8413try { bounds = e.getBoundingClientRect(); } // this can fail on disconnected DOM elements in IE98414catch (err) { bounds = {top: e.offsetTop, left: e.offsetLeft, width:e.offsetWidth, height:e.offsetHeight}; }84158416var offX = (window.pageXOffset || document.scrollLeft || 0) - (document.clientLeft || document.body.clientLeft || 0);8417var offY = (window.pageYOffset || document.scrollTop || 0) - (document.clientTop || document.body.clientTop || 0);84188419var styles = window.getComputedStyle ? getComputedStyle(e,null) : e.currentStyle; // IE <9 compatibility.8420var padL = parseInt(styles.paddingLeft)+parseInt(styles.borderLeftWidth);8421var padT = parseInt(styles.paddingTop)+parseInt(styles.borderTopWidth);8422var padR = parseInt(styles.paddingRight)+parseInt(styles.borderRightWidth);8423var padB = parseInt(styles.paddingBottom)+parseInt(styles.borderBottomWidth);84248425// note: in some browsers bounds properties are read only.8426return {8427left: bounds.left+offX+padL,8428right: bounds.right+offX-padR,8429top: bounds.top+offY+padT,8430bottom: bounds.bottom+offY-padB8431}8432};84338434/**8435* @method _getPointerData8436* @protected8437* @param {Number} id8438**/8439p._getPointerData = function(id) {8440var data = this._pointerData[id];8441if (!data) { data = this._pointerData[id] = {x:0,y:0}; }8442return data;8443};84448445/**8446* @method _handleMouseMove8447* @protected8448* @param {MouseEvent} e8449**/8450p._handleMouseMove = function(e) {8451if(!e){ e = window.event; }8452this._handlePointerMove(-1, e, e.pageX, e.pageY);8453};84548455/**8456* @method _handlePointerMove8457* @protected8458* @param {Number} id8459* @param {Event} e8460* @param {Number} pageX8461* @param {Number} pageY8462* @param {Stage} owner Indicates that the event has already been captured & handled by the indicated stage.8463**/8464p._handlePointerMove = function(id, e, pageX, pageY, owner) {8465if (this._prevStage && owner === undefined) { return; } // redundant listener.8466if (!this.canvas) { return; }8467var nextStage=this._nextStage, o=this._getPointerData(id);84688469var inBounds = o.inBounds;8470this._updatePointerPosition(id, e, pageX, pageY);8471if (inBounds || o.inBounds || this.mouseMoveOutside) {8472if (id === -1 && o.inBounds == !inBounds) {8473this._dispatchMouseEvent(this, (inBounds ? "mouseleave" : "mouseenter"), false, id, o, e);8474}84758476this._dispatchMouseEvent(this, "stagemousemove", false, id, o, e);8477this._dispatchMouseEvent(o.target, "pressmove", true, id, o, e);8478}84798480nextStage&&nextStage._handlePointerMove(id, e, pageX, pageY, null);8481};84828483/**8484* @method _updatePointerPosition8485* @protected8486* @param {Number} id8487* @param {Event} e8488* @param {Number} pageX8489* @param {Number} pageY8490**/8491p._updatePointerPosition = function(id, e, pageX, pageY) {8492var rect = this._getElementRect(this.canvas);8493pageX -= rect.left;8494pageY -= rect.top;84958496var w = this.canvas.width;8497var h = this.canvas.height;8498pageX /= (rect.right-rect.left)/w;8499pageY /= (rect.bottom-rect.top)/h;8500var o = this._getPointerData(id);8501if (o.inBounds = (pageX >= 0 && pageY >= 0 && pageX <= w-1 && pageY <= h-1)) {8502o.x = pageX;8503o.y = pageY;8504} else if (this.mouseMoveOutside) {8505o.x = pageX < 0 ? 0 : (pageX > w-1 ? w-1 : pageX);8506o.y = pageY < 0 ? 0 : (pageY > h-1 ? h-1 : pageY);8507}85088509o.posEvtObj = e;8510o.rawX = pageX;8511o.rawY = pageY;85128513if (id === this._primaryPointerID || id === -1) {8514this.mouseX = o.x;8515this.mouseY = o.y;8516this.mouseInBounds = o.inBounds;8517}8518};85198520/**8521* @method _handleMouseUp8522* @protected8523* @param {MouseEvent} e8524**/8525p._handleMouseUp = function(e) {8526this._handlePointerUp(-1, e, false);8527};85288529/**8530* @method _handlePointerUp8531* @protected8532* @param {Number} id8533* @param {Event} e8534* @param {Boolean} clear8535* @param {Stage} owner Indicates that the event has already been captured & handled by the indicated stage.8536**/8537p._handlePointerUp = function(id, e, clear, owner) {8538var nextStage = this._nextStage, o = this._getPointerData(id);8539if (this._prevStage && owner === undefined) { return; } // redundant listener.85408541var target=null, oTarget = o.target;8542if (!owner && (oTarget || nextStage)) { target = this._getObjectsUnderPoint(o.x, o.y, null, true); }85438544if (o.down) { this._dispatchMouseEvent(this, "stagemouseup", false, id, o, e, target); o.down = false; }85458546if (target == oTarget) { this._dispatchMouseEvent(oTarget, "click", true, id, o, e); }8547this._dispatchMouseEvent(oTarget, "pressup", true, id, o, e);85488549if (clear) {8550if (id==this._primaryPointerID) { this._primaryPointerID = null; }8551delete(this._pointerData[id]);8552} else { o.target = null; }85538554nextStage&&nextStage._handlePointerUp(id, e, clear, owner || target && this);8555};85568557/**8558* @method _handleMouseDown8559* @protected8560* @param {MouseEvent} e8561**/8562p._handleMouseDown = function(e) {8563this._handlePointerDown(-1, e, e.pageX, e.pageY);8564};85658566/**8567* @method _handlePointerDown8568* @protected8569* @param {Number} id8570* @param {Event} e8571* @param {Number} pageX8572* @param {Number} pageY8573* @param {Stage} owner Indicates that the event has already been captured & handled by the indicated stage.8574**/8575p._handlePointerDown = function(id, e, pageX, pageY, owner) {8576if (this.preventSelection) { e.preventDefault(); }8577if (this._primaryPointerID == null || id === -1) { this._primaryPointerID = id; } // mouse always takes over.85788579if (pageY != null) { this._updatePointerPosition(id, e, pageX, pageY); }8580var target = null, nextStage = this._nextStage, o = this._getPointerData(id);8581if (!owner) { target = o.target = this._getObjectsUnderPoint(o.x, o.y, null, true); }85828583if (o.inBounds) { this._dispatchMouseEvent(this, "stagemousedown", false, id, o, e, target); o.down = true; }8584this._dispatchMouseEvent(target, "mousedown", true, id, o, e);85858586nextStage&&nextStage._handlePointerDown(id, e, pageX, pageY, owner || target && this);8587};85888589/**8590* @method _testMouseOver8591* @param {Boolean} clear If true, clears the mouseover / rollover (ie. no target)8592* @param {Stage} owner Indicates that the event has already been captured & handled by the indicated stage.8593* @param {Stage} eventTarget The stage that the cursor is actively over.8594* @protected8595**/8596p._testMouseOver = function(clear, owner, eventTarget) {8597if (this._prevStage && owner === undefined) { return; } // redundant listener.85988599var nextStage = this._nextStage;8600if (!this._mouseOverIntervalID) {8601// not enabled for mouseover, but should still relay the event.8602nextStage&&nextStage._testMouseOver(clear, owner, eventTarget);8603return;8604}8605var o = this._getPointerData(-1);8606// only update if the mouse position has changed. This provides a lot of optimization, but has some trade-offs.8607if (!o || (!clear && this.mouseX == this._mouseOverX && this.mouseY == this._mouseOverY && this.mouseInBounds)) { return; }86088609var e = o.posEvtObj;8610var isEventTarget = eventTarget || e&&(e.target == this.canvas);8611var target=null, common = -1, cursor="", t, i, l;86128613if (!owner && (clear || this.mouseInBounds && isEventTarget)) {8614target = this._getObjectsUnderPoint(this.mouseX, this.mouseY, null, true);8615this._mouseOverX = this.mouseX;8616this._mouseOverY = this.mouseY;8617}86188619var oldList = this._mouseOverTarget||[];8620var oldTarget = oldList[oldList.length-1];8621var list = this._mouseOverTarget = [];86228623// generate ancestor list and check for cursor:8624t = target;8625while (t) {8626list.unshift(t);8627if (!cursor) { cursor = t.cursor; }8628t = t.parent;8629}8630this.canvas.style.cursor = cursor;8631if (!owner && eventTarget) { eventTarget.canvas.style.cursor = cursor; }86328633// find common ancestor:8634for (i=0,l=list.length; i<l; i++) {8635if (list[i] != oldList[i]) { break; }8636common = i;8637}86388639if (oldTarget != target) {8640this._dispatchMouseEvent(oldTarget, "mouseout", true, -1, o, e, target);8641}86428643for (i=oldList.length-1; i>common; i--) {8644this._dispatchMouseEvent(oldList[i], "rollout", false, -1, o, e, target);8645}86468647for (i=list.length-1; i>common; i--) {8648this._dispatchMouseEvent(list[i], "rollover", false, -1, o, e, oldTarget);8649}86508651if (oldTarget != target) {8652this._dispatchMouseEvent(target, "mouseover", true, -1, o, e, oldTarget);8653}86548655nextStage&&nextStage._testMouseOver(clear, owner || target && this, eventTarget || isEventTarget && this);8656};86578658/**8659* @method _handleDoubleClick8660* @protected8661* @param {MouseEvent} e8662* @param {Stage} owner Indicates that the event has already been captured & handled by the indicated stage.8663**/8664p._handleDoubleClick = function(e, owner) {8665var target=null, nextStage=this._nextStage, o=this._getPointerData(-1);8666if (!owner) {8667target = this._getObjectsUnderPoint(o.x, o.y, null, true);8668this._dispatchMouseEvent(target, "dblclick", true, -1, o, e);8669}8670nextStage&&nextStage._handleDoubleClick(e, owner || target && this);8671};86728673/**8674* @method _dispatchMouseEvent8675* @protected8676* @param {DisplayObject} target8677* @param {String} type8678* @param {Boolean} bubbles8679* @param {Number} pointerId8680* @param {Object} o8681* @param {MouseEvent} [nativeEvent]8682* @param {DisplayObject} [relatedTarget]8683**/8684p._dispatchMouseEvent = function(target, type, bubbles, pointerId, o, nativeEvent, relatedTarget) {8685// TODO: might be worth either reusing MouseEvent instances, or adding a willTrigger method to avoid GC.8686if (!target || (!bubbles && !target.hasEventListener(type))) { return; }8687/*8688// TODO: account for stage transformations?8689this._mtx = this.getConcatenatedMatrix(this._mtx).invert();8690var pt = this._mtx.transformPoint(o.x, o.y);8691var evt = new createjs.MouseEvent(type, bubbles, false, pt.x, pt.y, nativeEvent, pointerId, pointerId==this._primaryPointerID || pointerId==-1, o.rawX, o.rawY);8692*/8693var evt = new createjs.MouseEvent(type, bubbles, false, o.x, o.y, nativeEvent, pointerId, pointerId === this._primaryPointerID || pointerId === -1, o.rawX, o.rawY, relatedTarget);8694target.dispatchEvent(evt);8695};869686978698createjs.Stage = createjs.promote(Stage, "Container");8699}());87008701//##############################################################################8702// Bitmap.js8703//##############################################################################87048705this.createjs = this.createjs||{};87068707(function() {87088709/**8710* A Bitmap represents an Image, Canvas, or Video in the display list. A Bitmap can be instantiated using an existing8711* HTML element, or a string.8712*8713* <h4>Example</h4>8714*8715* var bitmap = new createjs.Bitmap("imagePath.jpg");8716*8717* <strong>Notes:</strong>8718* <ol>8719* <li>When a string path or image tag that is not yet loaded is used, the stage may need to be redrawn before it8720* will be displayed.</li>8721* <li>Bitmaps with an SVG source currently will not respect an alpha value other than 0 or 1. To get around this,8722* the Bitmap can be cached.</li>8723* <li>Bitmaps with an SVG source will taint the canvas with cross-origin data, which prevents interactivity. This8724* happens in all browsers except recent Firefox builds.</li>8725* <li>Images loaded cross-origin will throw cross-origin security errors when interacted with using a mouse, using8726* methods such as `getObjectUnderPoint`, or using filters, or caching. You can get around this by setting8727* `crossOrigin` flags on your images before passing them to EaselJS, eg: `img.crossOrigin="Anonymous";`</li>8728* </ol>8729*8730* @class Bitmap8731* @extends DisplayObject8732* @constructor8733* @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String} imageOrUri The source object or URI to an image to8734* display. This can be either an Image, Canvas, or Video object, or a string URI to an image file to load and use.8735* If it is a URI, a new Image object will be constructed and assigned to the .image property.8736**/8737function Bitmap(imageOrUri) {8738this.DisplayObject_constructor();873987408741// public properties:8742/**8743* The image to render. This can be an Image, a Canvas, or a Video. Not all browsers (especially8744* mobile browsers) support drawing video to a canvas.8745* @property image8746* @type HTMLImageElement | HTMLCanvasElement | HTMLVideoElement8747**/8748if (typeof imageOrUri == "string") {8749this.image = document.createElement("img");8750this.image.src = imageOrUri;8751} else {8752this.image = imageOrUri;8753}87548755/**8756* Specifies an area of the source image to draw. If omitted, the whole image will be drawn.8757* Note that video sources must have a width / height set to work correctly with `sourceRect`.8758* @property sourceRect8759* @type Rectangle8760* @default null8761*/8762this.sourceRect = null;8763}8764var p = createjs.extend(Bitmap, createjs.DisplayObject);876587668767// public methods:8768/**8769* Constructor alias for backwards compatibility. This method will be removed in future versions.8770* Subclasses should be updated to use {{#crossLink "Utility Methods/extends"}}{{/crossLink}}.8771* @method initialize8772* @deprecated in favour of `createjs.promote()`8773**/8774p.initialize = Bitmap; // TODO: deprecated.87758776/**8777* Returns true or false indicating whether the display object would be visible if drawn to a canvas.8778* This does not account for whether it would be visible within the boundaries of the stage.8779*8780* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.8781* @method isVisible8782* @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas8783**/8784p.isVisible = function() {8785var image = this.image;8786var hasContent = this.cacheCanvas || (image && (image.naturalWidth || image.getContext || image.readyState >= 2));8787return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);8788};87898790/**8791* Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.8792* Returns true if the draw was handled (useful for overriding functionality).8793*8794* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.8795* @method draw8796* @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.8797* @param {Boolean} [ignoreCache=false] Indicates whether the draw operation should ignore any current cache.8798* For example, used for drawing the cache (to prevent it from simply drawing an existing cache back8799* into itself).8800* @return {Boolean}8801**/8802p.draw = function(ctx, ignoreCache) {8803if (this.DisplayObject_draw(ctx, ignoreCache) || !this.image) { return true; }8804var img = this.image, rect = this.sourceRect;8805if (rect) {8806// some browsers choke on out of bound values, so we'll fix them:8807var x1 = rect.x, y1 = rect.y, x2 = x1 + rect.width, y2 = y1 + rect.height, x = 0, y = 0, w = img.width, h = img.height;8808if (x1 < 0) { x -= x1; x1 = 0; }8809if (x2 > w) { x2 = w; }8810if (y1 < 0) { y -= y1; y1 = 0; }8811if (y2 > h) { y2 = h; }8812ctx.drawImage(img, x1, y1, x2-x1, y2-y1, x, y, x2-x1, y2-y1);8813} else {8814ctx.drawImage(img, 0, 0);8815}8816return true;8817};88188819//Note, the doc sections below document using the specified APIs (from DisplayObject) from8820//Bitmap. This is why they have no method implementations.88218822/**8823* Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances.8824* You should <b>not</b> cache Bitmap instances as it can degrade performance.8825*8826* <strong>However: If you want to use a filter on a Bitmap, you <em>MUST</em> cache it, or it will not work.</strong>8827* To see the API for caching, please visit the DisplayObject {{#crossLink "DisplayObject/cache"}}{{/crossLink}}8828* method.8829* @method cache8830**/88318832/**8833* Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances.8834* You should <b>not</b> cache Bitmap instances as it can degrade performance.8835*8836* <strong>However: If you want to use a filter on a Bitmap, you <em>MUST</em> cache it, or it will not work.</strong>8837* To see the API for caching, please visit the DisplayObject {{#crossLink "DisplayObject/cache"}}{{/crossLink}}8838* method.8839* @method updateCache8840**/88418842/**8843* Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances.8844* You should <b>not</b> cache Bitmap instances as it can degrade performance.8845*8846* <strong>However: If you want to use a filter on a Bitmap, you <em>MUST</em> cache it, or it will not work.</strong>8847* To see the API for caching, please visit the DisplayObject {{#crossLink "DisplayObject/cache"}}{{/crossLink}}8848* method.8849* @method uncache8850**/88518852/**8853* Docced in superclass.8854*/8855p.getBounds = function() {8856var rect = this.DisplayObject_getBounds();8857if (rect) { return rect; }8858var image = this.image, o = this.sourceRect || image;8859var hasContent = (image && (image.naturalWidth || image.getContext || image.readyState >= 2));8860return hasContent ? this._rectangle.setValues(0, 0, o.width, o.height) : null;8861};88628863/**8864* Returns a clone of the Bitmap instance.8865* @method clone8866* @return {Bitmap} a clone of the Bitmap instance.8867**/8868p.clone = function() {8869var o = new Bitmap(this.image);8870if (this.sourceRect) { o.sourceRect = this.sourceRect.clone(); }8871this._cloneProps(o);8872return o;8873};88748875/**8876* Returns a string representation of this object.8877* @method toString8878* @return {String} a string representation of the instance.8879**/8880p.toString = function() {8881return "[Bitmap (name="+ this.name +")]";8882};888388848885createjs.Bitmap = createjs.promote(Bitmap, "DisplayObject");8886}());88878888//##############################################################################8889// Sprite.js8890//##############################################################################88918892this.createjs = this.createjs||{};88938894(function() {8895"use strict";889688978898// constructor:8899/**8900* Displays a frame or sequence of frames (ie. an animation) from a SpriteSheet instance. A sprite sheet is a series of8901* images (usually animation frames) combined into a single image. For example, an animation consisting of 8 100x1008902* images could be combined into a 400x200 sprite sheet (4 frames across by 2 high). You can display individual frames,8903* play frames as an animation, and even sequence animations together.8904*8905* See the {{#crossLink "SpriteSheet"}}{{/crossLink}} class for more information on setting up frames and animations.8906*8907* <h4>Example</h4>8908*8909* var instance = new createjs.Sprite(spriteSheet);8910* instance.gotoAndStop("frameName");8911*8912* Until {{#crossLink "Sprite/gotoAndStop"}}{{/crossLink}} or {{#crossLink "Sprite/gotoAndPlay"}}{{/crossLink}} is called,8913* only the first defined frame defined in the sprite sheet will be displayed.8914*8915* @class Sprite8916* @extends DisplayObject8917* @constructor8918* @param {SpriteSheet} spriteSheet The SpriteSheet instance to play back. This includes the source image(s), frame8919* dimensions, and frame data. See {{#crossLink "SpriteSheet"}}{{/crossLink}} for more information.8920* @param {String|Number} [frameOrAnimation] The frame number or animation to play initially.8921**/8922function Sprite(spriteSheet, frameOrAnimation) {8923this.DisplayObject_constructor();892489258926// public properties:8927/**8928* The frame index that will be drawn when draw is called. Note that with some {{#crossLink "SpriteSheet"}}{{/crossLink}}8929* definitions, this will advance non-sequentially. This will always be an integer value.8930* @property currentFrame8931* @type {Number}8932* @default 08933* @readonly8934**/8935this.currentFrame = 0;89368937/**8938* Returns the name of the currently playing animation.8939* @property currentAnimation8940* @type {String}8941* @final8942* @readonly8943**/8944this.currentAnimation = null;89458946/**8947* Prevents the animation from advancing each tick automatically. For example, you could create a sprite8948* sheet of icons, set paused to true, and display the appropriate icon by setting <code>currentFrame</code>.8949* @property paused8950* @type {Boolean}8951* @default false8952**/8953this.paused = true;89548955/**8956* The SpriteSheet instance to play back. This includes the source image, frame dimensions, and frame8957* data. See {{#crossLink "SpriteSheet"}}{{/crossLink}} for more information.8958* @property spriteSheet8959* @type {SpriteSheet}8960* @readonly8961**/8962this.spriteSheet = spriteSheet;89638964/**8965* Specifies the current frame index within the currently playing animation. When playing normally, this will increase8966* from 0 to n-1, where n is the number of frames in the current animation.8967*8968* This could be a non-integer value if8969* using time-based playback (see {{#crossLink "Sprite/framerate"}}{{/crossLink}}, or if the animation's speed is8970* not an integer.8971* @property currentAnimationFrame8972* @type {Number}8973* @default 08974**/8975this.currentAnimationFrame = 0;89768977/**8978* By default Sprite instances advance one frame per tick. Specifying a framerate for the Sprite (or its related8979* SpriteSheet) will cause it to advance based on elapsed time between ticks as appropriate to maintain the target8980* framerate.8981*8982* For example, if a Sprite with a framerate of 10 is placed on a Stage being updated at 40fps, then the Sprite will8983* advance roughly one frame every 4 ticks. This will not be exact, because the time between each tick will8984* vary slightly between frames.8985*8986* This feature is dependent on the tick event object (or an object with an appropriate "delta" property) being8987* passed into {{#crossLink "Stage/update"}}{{/crossLink}}.8988* @property framerate8989* @type {Number}8990* @default 08991**/8992this.framerate = 0;899389948995// private properties:8996/**8997* Current animation object.8998* @property _animation8999* @protected9000* @type {Object}9001* @default null9002**/9003this._animation = null;90049005/**9006* Current frame index.9007* @property _currentFrame9008* @protected9009* @type {Number}9010* @default null9011**/9012this._currentFrame = null;90139014/**9015* Skips the next auto advance. Used by gotoAndPlay to avoid immediately jumping to the next frame9016* @property _skipAdvance9017* @protected9018* @type {Boolean}9019* @default false9020**/9021this._skipAdvance = false;902290239024if (frameOrAnimation != null) { this.gotoAndPlay(frameOrAnimation); }9025}9026var p = createjs.extend(Sprite, createjs.DisplayObject);90279028/**9029* Constructor alias for backwards compatibility. This method will be removed in future versions.9030* Subclasses should be updated to use {{#crossLink "Utility Methods/extends"}}{{/crossLink}}.9031* @method initialize9032* @deprecated in favour of `createjs.promote()`9033**/9034p.initialize = Sprite; // TODO: Deprecated. This is for backwards support of FlashCC spritesheet export.903590369037// events:9038/**9039* Dispatched when an animation reaches its ends.9040* @event animationend9041* @param {Object} target The object that dispatched the event.9042* @param {String} type The event type.9043* @param {String} name The name of the animation that just ended.9044* @param {String} next The name of the next animation that will be played, or null. This will be the same as name if the animation is looping.9045* @since 0.6.09046*/90479048/**9049* Dispatched any time the current frame changes. For example, this could be due to automatic advancement on a tick,9050* or calling gotoAndPlay() or gotoAndStop().9051* @event change9052* @param {Object} target The object that dispatched the event.9053* @param {String} type The event type.9054*/905590569057// public methods:9058/**9059* Returns true or false indicating whether the display object would be visible if drawn to a canvas.9060* This does not account for whether it would be visible within the boundaries of the stage.9061* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.9062* @method isVisible9063* @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas9064**/9065p.isVisible = function() {9066var hasContent = this.cacheCanvas || this.spriteSheet.complete;9067return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);9068};90699070/**9071* Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.9072* Returns true if the draw was handled (useful for overriding functionality).9073* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.9074* @method draw9075* @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.9076* @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache.9077* For example, used for drawing the cache (to prevent it from simply drawing an existing cache back9078* into itself).9079**/9080p.draw = function(ctx, ignoreCache) {9081if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; }9082this._normalizeFrame();9083var o = this.spriteSheet.getFrame(this._currentFrame|0);9084if (!o) { return false; }9085var rect = o.rect;9086if (rect.width && rect.height) { ctx.drawImage(o.image, rect.x, rect.y, rect.width, rect.height, -o.regX, -o.regY, rect.width, rect.height); }9087return true;9088};90899090//Note, the doc sections below document using the specified APIs (from DisplayObject) from9091//Bitmap. This is why they have no method implementations.90929093/**9094* Because the content of a Sprite is already in a raster format, cache is unnecessary for Sprite instances.9095* You should not cache Sprite instances as it can degrade performance.9096* @method cache9097**/90989099/**9100* Because the content of a Sprite is already in a raster format, cache is unnecessary for Sprite instances.9101* You should not cache Sprite instances as it can degrade performance.9102* @method updateCache9103**/91049105/**9106* Because the content of a Sprite is already in a raster format, cache is unnecessary for Sprite instances.9107* You should not cache Sprite instances as it can degrade performance.9108* @method uncache9109**/91109111/**9112* Play (unpause) the current animation. The Sprite will be paused if either {{#crossLink "Sprite/stop"}}{{/crossLink}}9113* or {{#crossLink "Sprite/gotoAndStop"}}{{/crossLink}} is called. Single frame animations will remain9114* unchanged.9115* @method play9116**/9117p.play = function() {9118this.paused = false;9119};91209121/**9122* Stop playing a running animation. The Sprite will be playing if {{#crossLink "Sprite/gotoAndPlay"}}{{/crossLink}}9123* is called. Note that calling {{#crossLink "Sprite/gotoAndPlay"}}{{/crossLink}} or {{#crossLink "Sprite/play"}}{{/crossLink}}9124* will resume playback.9125* @method stop9126**/9127p.stop = function() {9128this.paused = true;9129};91309131/**9132* Sets paused to false and plays the specified animation name, named frame, or frame number.9133* @method gotoAndPlay9134* @param {String|Number} frameOrAnimation The frame number or animation name that the playhead should move to9135* and begin playing.9136**/9137p.gotoAndPlay = function(frameOrAnimation) {9138this.paused = false;9139this._skipAdvance = true;9140this._goto(frameOrAnimation);9141};91429143/**9144* Sets paused to true and seeks to the specified animation name, named frame, or frame number.9145* @method gotoAndStop9146* @param {String|Number} frameOrAnimation The frame number or animation name that the playhead should move to9147* and stop.9148**/9149p.gotoAndStop = function(frameOrAnimation) {9150this.paused = true;9151this._goto(frameOrAnimation);9152};91539154/**9155* Advances the playhead. This occurs automatically each tick by default.9156* @param [time] {Number} The amount of time in ms to advance by. Only applicable if framerate is set on the Sprite9157* or its SpriteSheet.9158* @method advance9159*/9160p.advance = function(time) {9161var fps = this.framerate || this.spriteSheet.framerate;9162var t = (fps && time != null) ? time/(1000/fps) : 1;9163this._normalizeFrame(t);9164};91659166/**9167* Returns a {{#crossLink "Rectangle"}}{{/crossLink}} instance defining the bounds of the current frame relative to9168* the origin. For example, a 90 x 70 frame with <code>regX=50</code> and <code>regY=40</code> would return a9169* rectangle with [x=-50, y=-40, width=90, height=70]. This ignores transformations on the display object.9170*9171* Also see the SpriteSheet {{#crossLink "SpriteSheet/getFrameBounds"}}{{/crossLink}} method.9172* @method getBounds9173* @return {Rectangle} A Rectangle instance. Returns null if the frame does not exist, or the image is not fully9174* loaded.9175**/9176p.getBounds = function() {9177// TODO: should this normalizeFrame?9178return this.DisplayObject_getBounds() || this.spriteSheet.getFrameBounds(this.currentFrame, this._rectangle);9179};91809181/**9182* Returns a clone of the Sprite instance. Note that the same SpriteSheet is shared between cloned9183* instances.9184* @method clone9185* @return {Sprite} a clone of the Sprite instance.9186**/9187p.clone = function() {9188return this._cloneProps(new Sprite(this.spriteSheet));9189};91909191/**9192* Returns a string representation of this object.9193* @method toString9194* @return {String} a string representation of the instance.9195**/9196p.toString = function() {9197return "[Sprite (name="+ this.name +")]";9198};91999200// private methods:9201/**9202* @method _cloneProps9203* @param {Sprite} o9204* @return {Sprite} o9205* @protected9206**/9207p._cloneProps = function(o) {9208this.DisplayObject__cloneProps(o);9209o.currentFrame = this.currentFrame;9210o.currentAnimation = this.currentAnimation;9211o.paused = this.paused;9212o.currentAnimationFrame = this.currentAnimationFrame;9213o.framerate = this.framerate;92149215o._animation = this._animation;9216o._currentFrame = this._currentFrame;9217o._skipAdvance = this._skipAdvance;9218return o;9219};92209221/**9222* Advances the <code>currentFrame</code> if paused is not true. This is called automatically when the {{#crossLink "Stage"}}{{/crossLink}}9223* ticks.9224* @param {Object} evtObj An event object that will be dispatched to all tick listeners. This object is reused between dispatchers to reduce construction & GC costs.9225* @protected9226* @method _tick9227**/9228p._tick = function(evtObj) {9229if (!this.paused) {9230if (!this._skipAdvance) { this.advance(evtObj&&evtObj.delta); }9231this._skipAdvance = false;9232}9233this.DisplayObject__tick(evtObj);9234};923592369237/**9238* Normalizes the current frame, advancing animations and dispatching callbacks as appropriate.9239* @protected9240* @method _normalizeFrame9241**/9242p._normalizeFrame = function(frameDelta) {9243frameDelta = frameDelta || 0;9244var animation = this._animation;9245var paused = this.paused;9246var frame = this._currentFrame;9247var l;92489249if (animation) {9250var speed = animation.speed || 1;9251var animFrame = this.currentAnimationFrame;9252l = animation.frames.length;9253if (animFrame + frameDelta * speed >= l) {9254var next = animation.next;9255if (this._dispatchAnimationEnd(animation, frame, paused, next, l - 1)) {9256// something changed in the event stack, so we shouldn't make any more changes here.9257return;9258} else if (next) {9259// sequence. Automatically calls _normalizeFrame again with the remaining frames.9260return this._goto(next, frameDelta - (l - animFrame) / speed);9261} else {9262// end.9263this.paused = true;9264animFrame = animation.frames.length - 1;9265}9266} else {9267animFrame += frameDelta * speed;9268}9269this.currentAnimationFrame = animFrame;9270this._currentFrame = animation.frames[animFrame | 0]9271} else {9272frame = (this._currentFrame += frameDelta);9273l = this.spriteSheet.getNumFrames();9274if (frame >= l && l > 0) {9275if (!this._dispatchAnimationEnd(animation, frame, paused, l - 1)) {9276// looped.9277if ((this._currentFrame -= l) >= l) { return this._normalizeFrame(); }9278}9279}9280}9281frame = this._currentFrame | 0;9282if (this.currentFrame != frame) {9283this.currentFrame = frame;9284this.dispatchEvent("change");9285}9286};92879288/**9289* Dispatches the "animationend" event. Returns true if a handler changed the animation (ex. calling {{#crossLink "Sprite/stop"}}{{/crossLink}},9290* {{#crossLink "Sprite/gotoAndPlay"}}{{/crossLink}}, etc.)9291* @property _dispatchAnimationEnd9292* @private9293* @type {Function}9294**/9295p._dispatchAnimationEnd = function(animation, frame, paused, next, end) {9296var name = animation ? animation.name : null;9297if (this.hasEventListener("animationend")) {9298var evt = new createjs.Event("animationend");9299evt.name = name;9300evt.next = next;9301this.dispatchEvent(evt);9302}9303// did the animation get changed in the event stack?:9304var changed = (this._animation != animation || this._currentFrame != frame);9305// if the animation hasn't changed, but the sprite was paused, then we want to stick to the last frame:9306if (!changed && !paused && this.paused) { this.currentAnimationFrame = end; changed = true; }9307return changed;9308};93099310/**9311* Moves the playhead to the specified frame number or animation.9312* @method _goto9313* @param {String|Number} frameOrAnimation The frame number or animation that the playhead should move to.9314* @param {Boolean} [frame] The frame of the animation to go to. Defaults to 0.9315* @protected9316**/9317p._goto = function(frameOrAnimation, frame) {9318this.currentAnimationFrame = 0;9319if (isNaN(frameOrAnimation)) {9320var data = this.spriteSheet.getAnimation(frameOrAnimation);9321if (data) {9322this._animation = data;9323this.currentAnimation = frameOrAnimation;9324this._normalizeFrame(frame);9325}9326} else {9327this.currentAnimation = this._animation = null;9328this._currentFrame = frameOrAnimation;9329this._normalizeFrame();9330}9331};933293339334createjs.Sprite = createjs.promote(Sprite, "DisplayObject");9335}());93369337//##############################################################################9338// Shape.js9339//##############################################################################93409341this.createjs = this.createjs||{};93429343(function() {9344"use strict";934593469347// constructor:9348/**9349* A Shape allows you to display vector art in the display list. It composites a {{#crossLink "Graphics"}}{{/crossLink}}9350* instance which exposes all of the vector drawing methods. The Graphics instance can be shared between multiple Shape9351* instances to display the same vector graphics with different positions or transforms.9352*9353* If the vector art will not9354* change between draws, you may want to use the {{#crossLink "DisplayObject/cache"}}{{/crossLink}} method to reduce the9355* rendering cost.9356*9357* <h4>Example</h4>9358*9359* var graphics = new createjs.Graphics().beginFill("#ff0000").drawRect(0, 0, 100, 100);9360* var shape = new createjs.Shape(graphics);9361*9362* //Alternatively use can also use the graphics property of the Shape class to renderer the same as above.9363* var shape = new createjs.Shape();9364* shape.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 100);9365*9366* @class Shape9367* @extends DisplayObject9368* @constructor9369* @param {Graphics} graphics Optional. The graphics instance to display. If null, a new Graphics instance will be created.9370**/9371function Shape(graphics) {9372this.DisplayObject_constructor();937393749375// public properties:9376/**9377* The graphics instance to display.9378* @property graphics9379* @type Graphics9380**/9381this.graphics = graphics ? graphics : new createjs.Graphics();9382}9383var p = createjs.extend(Shape, createjs.DisplayObject);93849385// TODO: deprecated9386// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.938793889389// public methods:9390/**9391* Returns true or false indicating whether the Shape would be visible if drawn to a canvas.9392* This does not account for whether it would be visible within the boundaries of the stage.9393* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.9394* @method isVisible9395* @return {Boolean} Boolean indicating whether the Shape would be visible if drawn to a canvas9396**/9397p.isVisible = function() {9398var hasContent = this.cacheCanvas || (this.graphics && !this.graphics.isEmpty());9399return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);9400};94019402/**9403* Draws the Shape into the specified context ignoring its visible, alpha, shadow, and transform. Returns true if9404* the draw was handled (useful for overriding functionality).9405*9406* <i>NOTE: This method is mainly for internal use, though it may be useful for advanced uses.</i>9407* @method draw9408* @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.9409* @param {Boolean} [ignoreCache=false] Indicates whether the draw operation should ignore any current cache. For example,9410* used for drawing the cache (to prevent it from simply drawing an existing cache back into itself).9411* @return {Boolean}9412**/9413p.draw = function(ctx, ignoreCache) {9414if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; }9415this.graphics.draw(ctx, this);9416return true;9417};94189419/**9420* Returns a clone of this Shape. Some properties that are specific to this instance's current context are reverted to9421* their defaults (for example .parent).9422* @method clone9423* @param {Boolean} recursive If true, this Shape's {{#crossLink "Graphics"}}{{/crossLink}} instance will also be9424* cloned. If false, the Graphics instance will be shared with the new Shape.9425**/9426p.clone = function(recursive) {9427var g = (recursive && this.graphics) ? this.graphics.clone() : this.graphics;9428return this._cloneProps(new Shape(g));9429};94309431/**9432* Returns a string representation of this object.9433* @method toString9434* @return {String} a string representation of the instance.9435**/9436p.toString = function() {9437return "[Shape (name="+ this.name +")]";9438};943994409441createjs.Shape = createjs.promote(Shape, "DisplayObject");9442}());94439444//##############################################################################9445// Text.js9446//##############################################################################94479448this.createjs = this.createjs||{};94499450(function() {9451"use strict";945294539454// constructor:9455/**9456* Display one or more lines of dynamic text (not user editable) in the display list. Line wrapping support (using the9457* lineWidth) is very basic, wrapping on spaces and tabs only. Note that as an alternative to Text, you can position HTML9458* text above or below the canvas relative to items in the display list using the {{#crossLink "DisplayObject/localToGlobal"}}{{/crossLink}}9459* method, or using {{#crossLink "DOMElement"}}{{/crossLink}}.9460*9461* <b>Please note that Text does not support HTML text, and can only display one font style at a time.</b> To use9462* multiple font styles, you will need to create multiple text instances, and position them manually.9463*9464* <h4>Example</h4>9465*9466* var text = new createjs.Text("Hello World", "20px Arial", "#ff7700");9467* text.x = 100;9468* text.textBaseline = "alphabetic";9469*9470* CreateJS Text supports web fonts (the same rules as Canvas). The font must be loaded and supported by the browser9471* before it can be displayed.9472*9473* <strong>Note:</strong> Text can be expensive to generate, so cache instances where possible. Be aware that not all9474* browsers will render Text exactly the same.9475* @class Text9476* @extends DisplayObject9477* @constructor9478* @param {String} [text] The text to display.9479* @param {String} [font] The font style to use. Any valid value for the CSS font attribute is acceptable (ex. "bold9480* 36px Arial").9481* @param {String} [color] The color to draw the text in. Any valid value for the CSS color attribute is acceptable (ex.9482* "#F00", "red", or "#FF0000").9483**/9484function Text(text, font, color) {9485this.DisplayObject_constructor();948694879488// public properties:9489/**9490* The text to display.9491* @property text9492* @type String9493**/9494this.text = text;94959496/**9497* The font style to use. Any valid value for the CSS font attribute is acceptable (ex. "bold 36px Arial").9498* @property font9499* @type String9500**/9501this.font = font;95029503/**9504* The color to draw the text in. Any valid value for the CSS color attribute is acceptable (ex. "#F00"). Default is "#000".9505* It will also accept valid canvas fillStyle values.9506* @property color9507* @type String9508**/9509this.color = color;95109511/**9512* The horizontal text alignment. Any of "start", "end", "left", "right", and "center". For detailed9513* information view the9514* <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#text-styles">9515* whatwg spec</a>. Default is "left".9516* @property textAlign9517* @type String9518**/9519this.textAlign = "left";95209521/**9522* The vertical alignment point on the font. Any of "top", "hanging", "middle", "alphabetic", "ideographic", or9523* "bottom". For detailed information view the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#text-styles">9524* whatwg spec</a>. Default is "top".9525* @property textBaseline9526* @type String9527*/9528this.textBaseline = "top";95299530/**9531* The maximum width to draw the text. If maxWidth is specified (not null), the text will be condensed or9532* shrunk to make it fit in this width. For detailed information view the9533* <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#text-styles">9534* whatwg spec</a>.9535* @property maxWidth9536* @type Number9537*/9538this.maxWidth = null;95399540/**9541* If greater than 0, the text will be drawn as a stroke (outline) of the specified width.9542* @property outline9543* @type Number9544**/9545this.outline = 0;95469547/**9548* Indicates the line height (vertical distance between baselines) for multi-line text. If null or 0,9549* the value of getMeasuredLineHeight is used.9550* @property lineHeight9551* @type Number9552**/9553this.lineHeight = 0;95549555/**9556* Indicates the maximum width for a line of text before it is wrapped to multiple lines. If null,9557* the text will not be wrapped.9558* @property lineWidth9559* @type Number9560**/9561this.lineWidth = null;9562}9563var p = createjs.extend(Text, createjs.DisplayObject);95649565// TODO: deprecated9566// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.956795689569// static properties:9570/**9571* @property _workingContext9572* @type CanvasRenderingContext2D9573* @private9574**/9575var canvas = (createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"));9576if (canvas.getContext) { Text._workingContext = canvas.getContext("2d"); canvas.width = canvas.height = 1; }957795789579// constants:9580/**9581* Lookup table for the ratio to offset bounds x calculations based on the textAlign property.9582* @property H_OFFSETS9583* @type Object9584* @protected9585* @static9586**/9587Text.H_OFFSETS = {start: 0, left: 0, center: -0.5, end: -1, right: -1};95889589/**9590* Lookup table for the ratio to offset bounds y calculations based on the textBaseline property.9591* @property H_OFFSETS9592* @type Object9593* @protected9594* @static9595**/9596Text.V_OFFSETS = {top: 0, hanging: -0.01, middle: -0.4, alphabetic: -0.8, ideographic: -0.85, bottom: -1};959795989599// public methods:9600/**9601* Returns true or false indicating whether the display object would be visible if drawn to a canvas.9602* This does not account for whether it would be visible within the boundaries of the stage.9603* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.9604* @method isVisible9605* @return {Boolean} Whether the display object would be visible if drawn to a canvas9606**/9607p.isVisible = function() {9608var hasContent = this.cacheCanvas || (this.text != null && this.text !== "");9609return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);9610};96119612/**9613* Draws the Text into the specified context ignoring its visible, alpha, shadow, and transform.9614* Returns true if the draw was handled (useful for overriding functionality).9615* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.9616* @method draw9617* @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.9618* @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache.9619* For example, used for drawing the cache (to prevent it from simply drawing an existing cache back9620* into itself).9621**/9622p.draw = function(ctx, ignoreCache) {9623if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; }96249625var col = this.color || "#000";9626if (this.outline) { ctx.strokeStyle = col; ctx.lineWidth = this.outline*1; }9627else { ctx.fillStyle = col; }96289629this._drawText(this._prepContext(ctx));9630return true;9631};96329633/**9634* Returns the measured, untransformed width of the text without wrapping. Use getBounds for a more robust value.9635* @method getMeasuredWidth9636* @return {Number} The measured, untransformed width of the text.9637**/9638p.getMeasuredWidth = function() {9639return this._getMeasuredWidth(this.text);9640};96419642/**9643* Returns an approximate line height of the text, ignoring the lineHeight property. This is based on the measured9644* width of a "M" character multiplied by 1.2, which provides an approximate line height for most fonts.9645* @method getMeasuredLineHeight9646* @return {Number} an approximate line height of the text, ignoring the lineHeight property. This is9647* based on the measured width of a "M" character multiplied by 1.2, which approximates em for most fonts.9648**/9649p.getMeasuredLineHeight = function() {9650return this._getMeasuredWidth("M")*1.2;9651};96529653/**9654* Returns the approximate height of multi-line text by multiplying the number of lines against either the9655* <code>lineHeight</code> (if specified) or {{#crossLink "Text/getMeasuredLineHeight"}}{{/crossLink}}. Note that9656* this operation requires the text flowing logic to run, which has an associated CPU cost.9657* @method getMeasuredHeight9658* @return {Number} The approximate height of the untransformed multi-line text.9659**/9660p.getMeasuredHeight = function() {9661return this._drawText(null,{}).height;9662};96639664/**9665* Docced in superclass.9666*/9667p.getBounds = function() {9668var rect = this.DisplayObject_getBounds();9669if (rect) { return rect; }9670if (this.text == null || this.text === "") { return null; }9671var o = this._drawText(null, {});9672var w = (this.maxWidth && this.maxWidth < o.width) ? this.maxWidth : o.width;9673var x = w * Text.H_OFFSETS[this.textAlign||"left"];9674var lineHeight = this.lineHeight||this.getMeasuredLineHeight();9675var y = lineHeight * Text.V_OFFSETS[this.textBaseline||"top"];9676return this._rectangle.setValues(x, y, w, o.height);9677};96789679/**9680* Returns an object with width, height, and lines properties. The width and height are the visual width and height9681* of the drawn text. The lines property contains an array of strings, one for9682* each line of text that will be drawn, accounting for line breaks and wrapping. These strings have trailing9683* whitespace removed.9684* @method getMetrics9685* @return {Object} An object with width, height, and lines properties.9686**/9687p.getMetrics = function() {9688var o = {lines:[]};9689o.lineHeight = this.lineHeight || this.getMeasuredLineHeight();9690o.vOffset = o.lineHeight * Text.V_OFFSETS[this.textBaseline||"top"];9691return this._drawText(null, o, o.lines);9692};96939694/**9695* Returns a clone of the Text instance.9696* @method clone9697* @return {Text} a clone of the Text instance.9698**/9699p.clone = function() {9700return this._cloneProps(new Text(this.text, this.font, this.color));9701};97029703/**9704* Returns a string representation of this object.9705* @method toString9706* @return {String} a string representation of the instance.9707**/9708p.toString = function() {9709return "[Text (text="+ (this.text.length > 20 ? this.text.substr(0, 17)+"..." : this.text) +")]";9710};971197129713// private methods:9714/**9715* @method _cloneProps9716* @param {Text} o9717* @protected9718* @return {Text} o9719**/9720p._cloneProps = function(o) {9721this.DisplayObject__cloneProps(o);9722o.textAlign = this.textAlign;9723o.textBaseline = this.textBaseline;9724o.maxWidth = this.maxWidth;9725o.outline = this.outline;9726o.lineHeight = this.lineHeight;9727o.lineWidth = this.lineWidth;9728return o;9729};97309731/**9732* @method _getWorkingContext9733* @param {CanvasRenderingContext2D} ctx9734* @return {CanvasRenderingContext2D}9735* @protected9736**/9737p._prepContext = function(ctx) {9738ctx.font = this.font||"10px sans-serif";9739ctx.textAlign = this.textAlign||"left";9740ctx.textBaseline = this.textBaseline||"top";9741return ctx;9742};97439744/**9745* Draws multiline text.9746* @method _drawText9747* @param {CanvasRenderingContext2D} ctx9748* @param {Object} o9749* @param {Array} lines9750* @return {Object}9751* @protected9752**/9753p._drawText = function(ctx, o, lines) {9754var paint = !!ctx;9755if (!paint) {9756ctx = Text._workingContext;9757ctx.save();9758this._prepContext(ctx);9759}9760var lineHeight = this.lineHeight||this.getMeasuredLineHeight();97619762var maxW = 0, count = 0;9763var hardLines = String(this.text).split(/(?:\r\n|\r|\n)/);9764for (var i=0, l=hardLines.length; i<l; i++) {9765var str = hardLines[i];9766var w = null;97679768if (this.lineWidth != null && (w = ctx.measureText(str).width) > this.lineWidth) {9769// text wrapping:9770var words = str.split(/(\s)/);9771str = words[0];9772w = ctx.measureText(str).width;97739774for (var j=1, jl=words.length; j<jl; j+=2) {9775// Line needs to wrap:9776var wordW = ctx.measureText(words[j] + words[j+1]).width;9777if (w + wordW > this.lineWidth) {9778if (paint) { this._drawTextLine(ctx, str, count*lineHeight); }9779if (lines) { lines.push(str); }9780if (w > maxW) { maxW = w; }9781str = words[j+1];9782w = ctx.measureText(str).width;9783count++;9784} else {9785str += words[j] + words[j+1];9786w += wordW;9787}9788}9789}97909791if (paint) { this._drawTextLine(ctx, str, count*lineHeight); }9792if (lines) { lines.push(str); }9793if (o && w == null) { w = ctx.measureText(str).width; }9794if (w > maxW) { maxW = w; }9795count++;9796}97979798if (o) {9799o.width = maxW;9800o.height = count*lineHeight;9801}9802if (!paint) { ctx.restore(); }9803return o;9804};98059806/**9807* @method _drawTextLine9808* @param {CanvasRenderingContext2D} ctx9809* @param {String} text9810* @param {Number} y9811* @protected9812**/9813p._drawTextLine = function(ctx, text, y) {9814// Chrome 17 will fail to draw the text if the last param is included but null, so we feed it a large value instead:9815if (this.outline) { ctx.strokeText(text, 0, y, this.maxWidth||0xFFFF); }9816else { ctx.fillText(text, 0, y, this.maxWidth||0xFFFF); }9817};981898199820/**9821* @method _getMeasuredWidth9822* @param {String} text9823* @protected9824**/9825p._getMeasuredWidth = function(text) {9826var ctx = Text._workingContext;9827ctx.save();9828var w = this._prepContext(ctx).measureText(text).width;9829ctx.restore();9830return w;9831};983298339834createjs.Text = createjs.promote(Text, "DisplayObject");9835}());98369837//##############################################################################9838// BitmapText.js9839//##############################################################################98409841this.createjs = this.createjs || {};98429843(function () {9844"use strict";984598469847// constructor:9848/**9849* Displays text using bitmap glyphs defined in a sprite sheet. Multi-line text is supported9850* using new line characters, but automatic wrapping is not supported. See the9851* {{#crossLink "BitmapText/spriteSheet:property"}}{{/crossLink}}9852* property for more information on defining glyphs.9853*9854* <strong>Important:</strong> BitmapText extends Container, but is not designed to be used as one.9855* As such, methods like addChild and removeChild are disabled.9856* @class BitmapText9857* @extends DisplayObject9858* @param {String} [text=""] The text to display.9859* @param {SpriteSheet} [spriteSheet=null] The spritesheet that defines the character glyphs.9860* @constructor9861**/9862function BitmapText(text, spriteSheet) {9863this.Container_constructor();986498659866// public properties:9867/**9868* The text to display.9869* @property text9870* @type String9871* @default ""9872**/9873this.text = text||"";98749875/**9876* A SpriteSheet instance that defines the glyphs for this bitmap text. Each glyph/character9877* should have a single frame animation defined in the sprite sheet named the same as9878* corresponding character. For example, the following animation definition:9879*9880* "A": {frames: [0]}9881*9882* would indicate that the frame at index 0 of the spritesheet should be drawn for the "A" character. The short form9883* is also acceptable:9884*9885* "A": 09886*9887* Note that if a character in the text is not found in the sprite sheet, it will also9888* try to use the alternate case (upper or lower).9889*9890* See SpriteSheet for more information on defining sprite sheet data.9891* @property spriteSheet9892* @type SpriteSheet9893* @default null9894**/9895this.spriteSheet = spriteSheet;98969897/**9898* The height of each line of text. If 0, then it will use a line height calculated9899* by checking for the height of the "1", "T", or "L" character (in that order). If9900* those characters are not defined, it will use the height of the first frame of the9901* sprite sheet.9902* @property lineHeight9903* @type Number9904* @default 09905**/9906this.lineHeight = 0;99079908/**9909* This spacing (in pixels) will be added after each character in the output.9910* @property letterSpacing9911* @type Number9912* @default 09913**/9914this.letterSpacing = 0;99159916/**9917* If a space character is not defined in the sprite sheet, then empty pixels equal to9918* spaceWidth will be inserted instead. If 0, then it will use a value calculated9919* by checking for the width of the "1", "l", "E", or "A" character (in that order). If9920* those characters are not defined, it will use the width of the first frame of the9921* sprite sheet.9922* @property spaceWidth9923* @type Number9924* @default 09925**/9926this.spaceWidth = 0;992799289929// private properties:9930/**9931* @property _oldProps9932* @type Object9933* @protected9934**/9935this._oldProps = {text:0,spriteSheet:0,lineHeight:0,letterSpacing:0,spaceWidth:0};9936}9937var p = createjs.extend(BitmapText, createjs.Container);99389939/**9940* <strong>REMOVED</strong>. Removed in favor of using `MySuperClass_constructor`.9941* See {{#crossLink "Utility Methods/extend"}}{{/crossLink}} and {{#crossLink "Utility Methods/promote"}}{{/crossLink}}9942* for details.9943*9944* There is an inheritance tutorial distributed with EaselJS in /tutorials/Inheritance.9945*9946* @method initialize9947* @protected9948* @deprecated9949*/9950// p.initialize = function() {}; // searchable for devs wondering where it is.99519952// static properties:9953/**9954* BitmapText uses Sprite instances to draw text. To reduce the creation and destruction of instances (and thus garbage collection), it maintains9955* an internal object pool of sprite instances to reuse. Increasing this value can cause more sprites to be9956* retained, slightly increasing memory use, but reducing instantiation.9957* @property maxPoolSize9958* @type Number9959* @static9960* @default 1009961**/9962BitmapText.maxPoolSize = 100;99639964/**9965* Sprite object pool.9966* @type {Array}9967* @static9968* @private9969*/9970BitmapText._spritePool = [];997199729973// public methods:9974/**9975* Docced in superclass.9976**/9977p.draw = function(ctx, ignoreCache) {9978if (this.DisplayObject_draw(ctx, ignoreCache)) { return; }9979this._updateText();9980this.Container_draw(ctx, ignoreCache);9981};99829983/**9984* Docced in superclass.9985**/9986p.getBounds = function() {9987this._updateText();9988return this.Container_getBounds();9989};99909991/**9992* Returns true or false indicating whether the display object would be visible if drawn to a canvas.9993* This does not account for whether it would be visible within the boundaries of the stage.9994* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.9995* @method isVisible9996* @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas9997**/9998p.isVisible = function() {9999var hasContent = this.cacheCanvas || (this.spriteSheet && this.spriteSheet.complete && this.text);10000return !!(this.visible && this.alpha > 0 && this.scaleX !== 0 && this.scaleY !== 0 && hasContent);10001};1000210003p.clone = function() {10004return this._cloneProps(new BitmapText(this.text, this.spriteSheet));10005};1000610007/**10008* <strong>Disabled in BitmapText.</strong>10009* @method addChild10010**/10011/**10012* <strong>Disabled in BitmapText.</strong>10013* @method addChildAt10014**/10015/**10016* <strong>Disabled in BitmapText.</strong>10017* @method removeChild10018**/10019/**10020* <strong>Disabled in BitmapText.</strong>10021* @method removeChildAt10022**/10023/**10024* <strong>Disabled in BitmapText.</strong>10025* @method removeAllChildren10026**/10027p.addChild = p.addChildAt = p.removeChild = p.removeChildAt = p.removeAllChildren = function() {};100281002910030// private methods:10031/**10032* @method _cloneProps10033* @param {BitmapText} o10034* @return {BitmapText} o10035* @protected10036**/10037p._cloneProps = function(o) {10038this.Container__cloneProps(o);10039o.lineHeight = this.lineHeight;10040o.letterSpacing = this.letterSpacing;10041o.spaceWidth = this.spaceWidth;10042return o;10043};1004410045/**10046* @method _getFrameIndex10047* @param {String} character10048* @param {SpriteSheet} spriteSheet10049* @return {Number}10050* @protected10051**/10052p._getFrameIndex = function(character, spriteSheet) {10053var c, o = spriteSheet.getAnimation(character);10054if (!o) {10055(character != (c = character.toUpperCase())) || (character != (c = character.toLowerCase())) || (c=null);10056if (c) { o = spriteSheet.getAnimation(c); }10057}10058return o && o.frames[0];10059};1006010061/**10062* @method _getFrame10063* @param {String} character10064* @param {SpriteSheet} spriteSheet10065* @return {Object}10066* @protected10067**/10068p._getFrame = function(character, spriteSheet) {10069var index = this._getFrameIndex(character, spriteSheet);10070return index == null ? index : spriteSheet.getFrame(index);10071};1007210073/**10074* @method _getLineHeight10075* @param {SpriteSheet} ss10076* @return {Number}10077* @protected10078**/10079p._getLineHeight = function(ss) {10080var frame = this._getFrame("1",ss) || this._getFrame("T",ss) || this._getFrame("L",ss) || ss.getFrame(0);10081return frame ? frame.rect.height : 1;10082};10083/**10084* @method _getSpaceWidth10085* @param {SpriteSheet} ss10086* @return {Number}10087* @protected10088**/10089p._getSpaceWidth = function(ss) {10090var frame = this._getFrame("1",ss) || this._getFrame("l",ss) || this._getFrame("e",ss) || this._getFrame("a",ss) || ss.getFrame(0);10091return frame ? frame.rect.width : 1;10092};1009310094/**10095* @method _drawText10096* @protected10097**/10098p._updateText = function() {10099var x=0, y=0, o=this._oldProps, change=false, spaceW=this.spaceWidth, lineH=this.lineHeight, ss=this.spriteSheet;10100var pool=BitmapText._spritePool, kids=this.children, childIndex=0, numKids=kids.length, sprite;1010110102for (var n in o) {10103if (o[n] != this[n]) {10104o[n] = this[n];10105change = true;10106}10107}10108if (!change) { return; }1010910110var hasSpace = !!this._getFrame(" ", ss);10111if (!hasSpace && !spaceW) { spaceW = this._getSpaceWidth(ss); }10112if (!lineH) { lineH = this._getLineHeight(ss); }1011310114for(var i=0, l=this.text.length; i<l; i++) {10115var character = this.text.charAt(i);10116if (character == " " && !hasSpace) {10117x += spaceW;10118continue;10119} else if (character=="\n" || character=="\r") {10120if (character=="\r" && this.text.charAt(i+1) == "\n") { i++; } // crlf10121x = 0;10122y += lineH;10123continue;10124}1012510126var index = this._getFrameIndex(character, ss);10127if (index == null) { continue; }1012810129if (childIndex < numKids) {10130sprite = kids[childIndex];10131} else {10132kids.push(sprite = pool.length ? pool.pop() : new createjs.Sprite());10133sprite.parent = this;10134numKids++;10135}10136sprite.spriteSheet = ss;10137sprite.gotoAndStop(index);10138sprite.x = x;10139sprite.y = y;10140childIndex++;1014110142x += sprite.getBounds().width + this.letterSpacing;10143}10144while (numKids > childIndex) {10145// faster than removeChild.10146pool.push(sprite = kids.pop());10147sprite.parent = null;10148numKids--;10149}10150if (pool.length > BitmapText.maxPoolSize) { pool.length = BitmapText.maxPoolSize; }10151};101521015310154createjs.BitmapText = createjs.promote(BitmapText, "Container");10155}());1015610157//##############################################################################10158// MovieClip.js10159//##############################################################################1016010161this.createjs = this.createjs||{};1016210163(function() {10164"use strict";101651016610167// constructor:10168/**10169* The MovieClip class associates a TweenJS Timeline with an EaselJS {{#crossLink "Container"}}{{/crossLink}}. It allows10170* you to create objects which encapsulate timeline animations, state changes, and synched actions. Due to the10171* complexities inherent in correctly setting up a MovieClip, it is largely intended for tool output and is not included10172* in the main EaselJS library.10173*10174* Currently MovieClip only works properly if it is tick based (as opposed to time based) though some concessions have10175* been made to support time-based timelines in the future.10176*10177* <h4>Example</h4>10178* This example animates two shapes back and forth. The grey shape starts on the left, but we jump to a mid-point in10179* the animation using {{#crossLink "MovieClip/gotoAndPlay"}}{{/crossLink}}.10180*10181* var stage = new createjs.Stage("canvas");10182* createjs.Ticker.addEventListener("tick", stage);10183*10184* var mc = new createjs.MovieClip(null, 0, true, {start:20});10185* stage.addChild(mc);10186*10187* var child1 = new createjs.Shape(10188* new createjs.Graphics().beginFill("#999999")10189* .drawCircle(30,30,30));10190* var child2 = new createjs.Shape(10191* new createjs.Graphics().beginFill("#5a9cfb")10192* .drawCircle(30,30,30));10193*10194* mc.timeline.addTween(10195* createjs.Tween.get(child1)10196* .to({x:0}).to({x:60}, 50).to({x:0}, 50));10197* mc.timeline.addTween(10198* createjs.Tween.get(child2)10199* .to({x:60}).to({x:0}, 50).to({x:60}, 50));10200*10201* mc.gotoAndPlay("start");10202*10203* It is recommended to use <code>tween.to()</code> to animate and set properties (use no duration to have it set10204* immediately), and the <code>tween.wait()</code> method to create delays between animations. Note that using the10205* <code>tween.set()</code> method to affect properties will likely not provide the desired result.10206*10207* @class MovieClip10208* @main MovieClip10209* @extends Container10210* @constructor10211* @param {String} [mode=independent] Initial value for the mode property. One of {{#crossLink "MovieClip/INDEPENDENT:property"}}{{/crossLink}},10212* {{#crossLink "MovieClip/SINGLE_FRAME:property"}}{{/crossLink}}, or {{#crossLink "MovieClip/SYNCHED:property"}}{{/crossLink}}.10213* The default is {{#crossLink "MovieClip/INDEPENDENT:property"}}{{/crossLink}}.10214* @param {Number} [startPosition=0] Initial value for the {{#crossLink "MovieClip/startPosition:property"}}{{/crossLink}}10215* property.10216* @param {Boolean} [loop=true] Initial value for the {{#crossLink "MovieClip/loop:property"}}{{/crossLink}}10217* property. The default is `true`.10218* @param {Object} [labels=null] A hash of labels to pass to the {{#crossLink "MovieClip/timeline:property"}}{{/crossLink}}10219* instance associated with this MovieClip. Labels only need to be passed if they need to be used.10220**/10221function MovieClip(mode, startPosition, loop, labels) {10222this.Container_constructor();10223!MovieClip.inited&&MovieClip.init(); // static init102241022510226// public properties:10227/**10228* Controls how this MovieClip advances its time. Must be one of 0 (INDEPENDENT), 1 (SINGLE_FRAME), or 2 (SYNCHED).10229* See each constant for a description of the behaviour.10230* @property mode10231* @type String10232* @default null10233**/10234this.mode = mode||MovieClip.INDEPENDENT;1023510236/**10237* Specifies what the first frame to play in this movieclip, or the only frame to display if mode is SINGLE_FRAME.10238* @property startPosition10239* @type Number10240* @default 010241*/10242this.startPosition = startPosition || 0;1024310244/**10245* Indicates whether this MovieClip should loop when it reaches the end of its timeline.10246* @property loop10247* @type Boolean10248* @default true10249*/10250this.loop = loop;1025110252/**10253* The current frame of the movieclip.10254* @property currentFrame10255* @type Number10256* @default 010257* @readonly10258*/10259this.currentFrame = 0;1026010261/**10262* The TweenJS Timeline that is associated with this MovieClip. This is created automatically when the MovieClip10263* instance is initialized. Animations are created by adding <a href="http://tweenjs.com">TweenJS</a> Tween10264* instances to the timeline.10265*10266* <h4>Example</h4>10267*10268* var tween = createjs.Tween.get(target).to({x:0}).to({x:100}, 30);10269* var mc = new createjs.MovieClip();10270* mc.timeline.addTween(tween);10271*10272* Elements can be added and removed from the timeline by toggling an "_off" property10273* using the <code>tweenInstance.to()</code> method. Note that using <code>Tween.set</code> is not recommended to10274* create MovieClip animations. The following example will toggle the target off on frame 0, and then back on for10275* frame 1. You can use the "visible" property to achieve the same effect.10276*10277* var tween = createjs.Tween.get(target).to({_off:false})10278* .wait(1).to({_off:true})10279* .wait(1).to({_off:false});10280*10281* @property timeline10282* @type Timeline10283* @default null10284*/10285this.timeline = new createjs.Timeline(null, labels, {paused:true, position:startPosition, useTicks:true});1028610287/**10288* If true, the MovieClip's position will not advance when ticked.10289* @property paused10290* @type Boolean10291* @default false10292*/10293this.paused = false;1029410295/**10296* If true, actions in this MovieClip's tweens will be run when the playhead advances.10297* @property actionsEnabled10298* @type Boolean10299* @default true10300*/10301this.actionsEnabled = true;1030210303/**10304* If true, the MovieClip will automatically be reset to its first frame whenever the timeline adds10305* it back onto the display list. This only applies to MovieClip instances with mode=INDEPENDENT.10306* <br><br>10307* For example, if you had a character animation with a "body" child MovieClip instance10308* with different costumes on each frame, you could set body.autoReset = false, so that10309* you can manually change the frame it is on, without worrying that it will be reset10310* automatically.10311* @property autoReset10312* @type Boolean10313* @default true10314*/10315this.autoReset = true;1031610317/**10318* An array of bounds for each frame in the MovieClip. This is mainly intended for tool output.10319* @property frameBounds10320* @type Array10321* @default null10322*/10323this.frameBounds = this.frameBounds||null; // TODO: Deprecated. This is for backwards support of FlashCC1032410325/**10326* By default MovieClip instances advance one frame per tick. Specifying a framerate for the MovieClip10327* will cause it to advance based on elapsed time between ticks as appropriate to maintain the target10328* framerate.10329*10330* For example, if a MovieClip with a framerate of 10 is placed on a Stage being updated at 40fps, then the MovieClip will10331* advance roughly one frame every 4 ticks. This will not be exact, because the time between each tick will10332* vary slightly between frames.10333*10334* This feature is dependent on the tick event object (or an object with an appropriate "delta" property) being10335* passed into {{#crossLink "Stage/update"}}{{/crossLink}}.10336* @property framerate10337* @type {Number}10338* @default null10339**/10340this.framerate = null;103411034210343// private properties:10344/**10345* @property _synchOffset10346* @type Number10347* @default 010348* @private10349*/10350this._synchOffset = 0;1035110352/**10353* @property _prevPos10354* @type Number10355* @default -110356* @private10357*/10358this._prevPos = -1; // TODO: evaluate using a ._reset Boolean prop instead of -1.1035910360/**10361* @property _prevPosition10362* @type Number10363* @default 010364* @private10365*/10366this._prevPosition = 0;1036710368/**10369* The time remaining from the previous tick, only applicable when .framerate is set.10370* @property _t10371* @type Number10372* @private10373*/10374this._t = 0;1037510376/**10377* List of display objects that are actively being managed by the MovieClip.10378* @property _managed10379* @type Object10380* @private10381*/10382this._managed = {};10383}10384var p = createjs.extend(MovieClip, createjs.Container);103851038610387// constants:10388/**10389* The MovieClip will advance independently of its parent, even if its parent is paused.10390* This is the default mode.10391* @property INDEPENDENT10392* @static10393* @type String10394* @default "independent"10395* @readonly10396**/10397MovieClip.INDEPENDENT = "independent";1039810399/**10400* The MovieClip will only display a single frame (as determined by the startPosition property).10401* @property SINGLE_FRAME10402* @static10403* @type String10404* @default "single"10405* @readonly10406**/10407MovieClip.SINGLE_FRAME = "single";1040810409/**10410* The MovieClip will be advanced only when its parent advances and will be synched to the position of10411* the parent MovieClip.10412* @property SYNCHED10413* @static10414* @type String10415* @default "synched"10416* @readonly10417**/10418MovieClip.SYNCHED = "synched";104191042010421// static properties:10422MovieClip.inited = false;104231042410425// static methods:10426MovieClip.init = function() {10427if (MovieClip.inited) { return; }10428// plugins introduce some overhead to Tween, so we only install this if an MC is instantiated.10429MovieClipPlugin.install();10430MovieClip.inited = true;10431};104321043310434// getter / setters:10435/**10436* Use the {{#crossLink "MovieClip/labels:property"}}{{/crossLink}} property instead.10437* @method getLabels10438* @return {Array}10439* @deprecated10440**/10441p.getLabels = function() {10442return this.timeline.getLabels();10443};1044410445/**10446* Use the {{#crossLink "MovieClip/currentLabel:property"}}{{/crossLink}} property instead.10447* @method getCurrentLabel10448* @return {String}10449* @deprecated10450**/10451p.getCurrentLabel = function() {10452this._updateTimeline();10453return this.timeline.getCurrentLabel();10454};1045510456/**10457* Use the {{#crossLink "MovieClip/duration:property"}}{{/crossLink}} property instead.10458* @method getDuration10459* @return {Number}10460* @protected10461**/10462p.getDuration = function() {10463return this.timeline.duration;10464};1046510466/**10467* Returns an array of objects with label and position (aka frame) properties, sorted by position.10468* Shortcut to TweenJS: Timeline.getLabels();10469* @property labels10470* @type {Array}10471* @readonly10472**/1047310474/**10475* Returns the name of the label on or immediately before the current frame. See TweenJS: Timeline.getCurrentLabel()10476* for more information.10477* @property currentLabel10478* @type {String}10479* @readonly10480**/1048110482/**10483* Returns the duration of this MovieClip in seconds or ticks. Identical to {{#crossLink "MovieClip/duration:property"}}{{/crossLink}}10484* and provided for Flash API compatibility.10485* @property totalFrames10486* @type {Number}10487* @readonly10488**/1048910490/**10491* Returns the duration of this MovieClip in seconds or ticks.10492* @property duration10493* @type {Number}10494* @readonly10495**/10496try {10497Object.defineProperties(p, {10498labels: { get: p.getLabels },10499currentLabel: { get: p.getCurrentLabel },10500totalFrames: { get: p.getDuration },10501duration: { get: p.getDuration }10502});10503} catch (e) {}105041050510506// public methods:10507/**10508* Constructor alias for backwards compatibility. This method will be removed in future versions.10509* Subclasses should be updated to use {{#crossLink "Utility Methods/extends"}}{{/crossLink}}.10510* @method initialize10511* @deprecated in favour of `createjs.promote()`10512**/10513p.initialize = MovieClip; // TODO: Deprecated. This is for backwards support of FlashCC1051410515/**10516* Returns true or false indicating whether the display object would be visible if drawn to a canvas.10517* This does not account for whether it would be visible within the boundaries of the stage.10518* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.10519* @method isVisible10520* @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas10521**/10522p.isVisible = function() {10523// children are placed in draw, so we can't determine if we have content.10524return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0);10525};1052610527/**10528* Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.10529* Returns true if the draw was handled (useful for overriding functionality).10530* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.10531* @method draw10532* @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.10533* @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache.10534* For example, used for drawing the cache (to prevent it from simply drawing an existing cache back10535* into itself).10536**/10537p.draw = function(ctx, ignoreCache) {10538// draw to cache first:10539if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; }10540this._updateTimeline();10541this.Container_draw(ctx, ignoreCache);10542return true;10543};1054410545/**10546* Sets paused to false.10547* @method play10548**/10549p.play = function() {10550this.paused = false;10551};1055210553/**10554* Sets paused to true.10555* @method stop10556**/10557p.stop = function() {10558this.paused = true;10559};1056010561/**10562* Advances this movie clip to the specified position or label and sets paused to false.10563* @method gotoAndPlay10564* @param {String|Number} positionOrLabel The animation name or frame number to go to.10565**/10566p.gotoAndPlay = function(positionOrLabel) {10567this.paused = false;10568this._goto(positionOrLabel);10569};1057010571/**10572* Advances this movie clip to the specified position or label and sets paused to true.10573* @method gotoAndStop10574* @param {String|Number} positionOrLabel The animation or frame name to go to.10575**/10576p.gotoAndStop = function(positionOrLabel) {10577this.paused = true;10578this._goto(positionOrLabel);10579};1058010581/**10582* Advances the playhead. This occurs automatically each tick by default.10583* @param [time] {Number} The amount of time in ms to advance by. Only applicable if framerate is set.10584* @method advance10585*/10586p.advance = function(time) {10587// TODO: should we worry at all about clips who change their own modes via frame scripts?10588var independent = MovieClip.INDEPENDENT;10589if (this.mode != independent) { return; }1059010591var o=this, fps = o.framerate;10592while ((o = o.parent) && fps == null) {10593if (o.mode == independent) { fps = o._framerate; }10594}10595this._framerate = fps;1059610597var t = (fps != null && fps != -1 && time != null) ? time/(1000/fps) + this._t : 1;10598var frames = t|0;10599this._t = t-frames; // leftover time1060010601while (!this.paused && frames--) {10602this._prevPosition = (this._prevPos < 0) ? 0 : this._prevPosition+1;10603this._updateTimeline();10604}10605};1060610607/**10608* MovieClip instances cannot be cloned.10609* @method clone10610**/10611p.clone = function() {10612// TODO: add support for this? Need to clone the Timeline & retarget tweens - pretty complex.10613throw("MovieClip cannot be cloned.")10614};1061510616/**10617* Returns a string representation of this object.10618* @method toString10619* @return {String} a string representation of the instance.10620**/10621p.toString = function() {10622return "[MovieClip (name="+ this.name +")]";10623};106241062510626// private methods:10627/**10628* @method _tick10629* @param {Object} evtObj An event object that will be dispatched to all tick listeners. This object is reused between dispatchers to reduce construction & GC costs.10630* function.10631* @protected10632**/10633p._tick = function(evtObj) {10634this.advance(evtObj&&evtObj.delta);10635this.Container__tick(evtObj);10636};1063710638/**10639* @method _goto10640* @param {String|Number} positionOrLabel The animation name or frame number to go to.10641* @protected10642**/10643p._goto = function(positionOrLabel) {10644var pos = this.timeline.resolve(positionOrLabel);10645if (pos == null) { return; }10646// prevent _updateTimeline from overwriting the new position because of a reset:10647if (this._prevPos == -1) { this._prevPos = NaN; }10648this._prevPosition = pos;10649this._t = 0;10650this._updateTimeline();10651};1065210653/**10654* @method _reset10655* @private10656**/10657p._reset = function() {10658this._prevPos = -1;10659this._t = this.currentFrame = 0;10660this.paused = false;10661};1066210663/**10664* @method _updateTimeline10665* @protected10666**/10667p._updateTimeline = function() {10668var tl = this.timeline;10669var synched = this.mode != MovieClip.INDEPENDENT;10670tl.loop = (this.loop==null) ? true : this.loop;1067110672var pos = synched ? this.startPosition + (this.mode==MovieClip.SINGLE_FRAME?0:this._synchOffset) : (this._prevPos < 0 ? 0 : this._prevPosition);10673var mode = synched || !this.actionsEnabled ? createjs.Tween.NONE : null;1067410675// pre-assign currentFrame so it is available to frame scripts:10676this.currentFrame = tl._calcPosition(pos);1067710678// update timeline position, ignoring actions if this is a graphic.10679tl.setPosition(pos, mode);1068010681this._prevPosition = tl._prevPosition;10682if (this._prevPos == tl._prevPos) { return; }10683this.currentFrame = this._prevPos = tl._prevPos;1068410685for (var n in this._managed) { this._managed[n] = 1; }1068610687var tweens = tl._tweens;10688for (var i=0, l=tweens.length; i<l; i++) {10689var tween = tweens[i];10690var target = tween._target;10691if (target == this || tween.passive) { continue; } // TODO: this assumes actions tween has this as the target. Valid?10692var offset = tween._stepPosition;1069310694if (target instanceof createjs.DisplayObject) {10695// motion tween.10696this._addManagedChild(target, offset);10697} else {10698// state tween.10699this._setState(target.state, offset);10700}10701}1070210703var kids = this.children;10704for (i=kids.length-1; i>=0; i--) {10705var id = kids[i].id;10706if (this._managed[id] == 1) {10707this.removeChildAt(i);10708delete(this._managed[id]);10709}10710}10711};1071210713/**10714* @method _setState10715* @param {Array} state10716* @param {Number} offset10717* @protected10718**/10719p._setState = function(state, offset) {10720if (!state) { return; }10721for (var i=state.length-1;i>=0;i--) {10722var o = state[i];10723var target = o.t;10724var props = o.p;10725for (var n in props) { target[n] = props[n]; }10726this._addManagedChild(target, offset);10727}10728};1072910730/**10731* Adds a child to the timeline, and sets it up as a managed child.10732* @method _addManagedChild10733* @param {MovieClip} child The child MovieClip to manage10734* @param {Number} offset10735* @private10736**/10737p._addManagedChild = function(child, offset) {10738if (child._off) { return; }10739this.addChildAt(child,0);1074010741if (child instanceof MovieClip) {10742child._synchOffset = offset;10743// TODO: this does not precisely match Flash. Flash loses track of the clip if it is renamed or removed from the timeline, which causes it to reset.10744if (child.mode == MovieClip.INDEPENDENT && child.autoReset && !this._managed[child.id]) { child._reset(); }10745}10746this._managed[child.id] = 2;10747};1074810749/**10750* @method _getBounds10751* @param {Matrix2D} matrix10752* @param {Boolean} ignoreTransform10753* @return {Rectangle}10754* @protected10755**/10756p._getBounds = function(matrix, ignoreTransform) {10757var bounds = this.DisplayObject_getBounds();10758if (!bounds) {10759this._updateTimeline();10760if (this.frameBounds) { bounds = this._rectangle.copy(this.frameBounds[this.currentFrame]); }10761}10762if (bounds) { return this._transformBounds(bounds, matrix, ignoreTransform); }10763return this.Container__getBounds(matrix, ignoreTransform);10764};107651076610767createjs.MovieClip = createjs.promote(MovieClip, "Container");10768107691077010771// MovieClipPlugin for TweenJS:10772/**10773* This plugin works with <a href="http://tweenjs.com" target="_blank">TweenJS</a> to prevent the startPosition10774* property from tweening.10775* @private10776* @class MovieClipPlugin10777* @constructor10778**/10779function MovieClipPlugin() {10780throw("MovieClipPlugin cannot be instantiated.")10781}1078210783/**10784* @method priority10785* @private10786**/10787MovieClipPlugin.priority = 100; // very high priority, should run first1078810789/**10790* @method install10791* @private10792**/10793MovieClipPlugin.install = function() {10794createjs.Tween.installPlugin(MovieClipPlugin, ["startPosition"]);10795};1079610797/**10798* @method init10799* @param {Tween} tween10800* @param {String} prop10801* @param {String|Number|Boolean} value10802* @private10803**/10804MovieClipPlugin.init = function(tween, prop, value) {10805return value;10806};1080710808/**10809* @method step10810* @private10811**/10812MovieClipPlugin.step = function() {10813// unused.10814};1081510816/**10817* @method tween10818* @param {Tween} tween10819* @param {String} prop10820* @param {String | Number | Boolean} value10821* @param {Array} startValues10822* @param {Array} endValues10823* @param {Number} ratio10824* @param {Object} wait10825* @param {Object} end10826* @return {*}10827*/10828MovieClipPlugin.tween = function(tween, prop, value, startValues, endValues, ratio, wait, end) {10829if (!(tween.target instanceof MovieClip)) { return value; }10830return (ratio == 1 ? endValues[prop] : startValues[prop]);10831};1083210833}());1083410835//##############################################################################10836// SpriteSheetUtils.js10837//##############################################################################1083810839this.createjs = this.createjs||{};1084010841(function() {10842"use strict";108431084410845// constructor:10846/**10847* The SpriteSheetUtils class is a collection of static methods for working with {{#crossLink "SpriteSheet"}}{{/crossLink}}s.10848* A sprite sheet is a series of images (usually animation frames) combined into a single image on a regular grid. For10849* example, an animation consisting of 8 100x100 images could be combined into a 400x200 sprite sheet (4 frames across10850* by 2 high). The SpriteSheetUtils class uses a static interface and should not be instantiated.10851* @class SpriteSheetUtils10852* @static10853**/10854function SpriteSheetUtils() {10855throw "SpriteSheetUtils cannot be instantiated";10856}108571085810859// private static properties:10860/**10861* @property _workingCanvas10862* @static10863* @type HTMLCanvasElement | Object10864* @protected10865*/10866/**10867* @property _workingContext10868* @static10869* @type CanvasRenderingContext2D10870* @protected10871*/10872var canvas = (createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"));10873if (canvas.getContext) {10874SpriteSheetUtils._workingCanvas = canvas;10875SpriteSheetUtils._workingContext = canvas.getContext("2d");10876canvas.width = canvas.height = 1;10877}108781087910880// public static methods:10881/**10882* <b>This is an experimental method, and may be buggy. Please report issues.</b><br/><br/>10883* Extends the existing sprite sheet by flipping the original frames horizontally, vertically, or both,10884* and adding appropriate animation & frame data. The flipped animations will have a suffix added to their names10885* (_h, _v, _hv as appropriate). Make sure the sprite sheet images are fully loaded before using this method.10886* <br/><br/>10887* For example:<br/>10888* SpriteSheetUtils.addFlippedFrames(mySpriteSheet, true, true);10889* The above would add frames that are flipped horizontally AND frames that are flipped vertically.10890* <br/><br/>10891* Note that you can also flip any display object by setting its scaleX or scaleY to a negative value. On some10892* browsers (especially those without hardware accelerated canvas) this can result in slightly degraded performance,10893* which is why addFlippedFrames is available.10894* @method addFlippedFrames10895* @static10896* @param {SpriteSheet} spriteSheet10897* @param {Boolean} horizontal If true, horizontally flipped frames will be added.10898* @param {Boolean} vertical If true, vertically flipped frames will be added.10899* @param {Boolean} both If true, frames that are flipped both horizontally and vertically will be added.10900* @deprecated Modern browsers perform better when flipping via a transform (ex. scaleX=-1) rendering this obsolete.10901**/10902SpriteSheetUtils.addFlippedFrames = function(spriteSheet, horizontal, vertical, both) {10903if (!horizontal && !vertical && !both) { return; }1090410905var count = 0;10906if (horizontal) { SpriteSheetUtils._flip(spriteSheet,++count,true,false); }10907if (vertical) { SpriteSheetUtils._flip(spriteSheet,++count,false,true); }10908if (both) { SpriteSheetUtils._flip(spriteSheet,++count,true,true); }10909};1091010911/**10912* Returns a single frame of the specified sprite sheet as a new PNG image. An example of when this may be useful is10913* to use a spritesheet frame as the source for a bitmap fill.10914*10915* <strong>WARNING:</strong> In almost all cases it is better to display a single frame using a {{#crossLink "Sprite"}}{{/crossLink}}10916* with a {{#crossLink "Sprite/gotoAndStop"}}{{/crossLink}} call than it is to slice out a frame using this10917* method and display it with a Bitmap instance. You can also crop an image using the {{#crossLink "Bitmap/sourceRect"}}{{/crossLink}}10918* property of {{#crossLink "Bitmap"}}{{/crossLink}}.10919*10920* The extractFrame method may cause cross-domain warnings since it accesses pixels directly on the canvas.10921* @method extractFrame10922* @static10923* @param {SpriteSheet} spriteSheet The SpriteSheet instance to extract a frame from.10924* @param {Number|String} frameOrAnimation The frame number or animation name to extract. If an animation10925* name is specified, only the first frame of the animation will be extracted.10926* @return {HTMLImageElement} a single frame of the specified sprite sheet as a new PNG image.10927*/10928SpriteSheetUtils.extractFrame = function(spriteSheet, frameOrAnimation) {10929if (isNaN(frameOrAnimation)) {10930frameOrAnimation = spriteSheet.getAnimation(frameOrAnimation).frames[0];10931}10932var data = spriteSheet.getFrame(frameOrAnimation);10933if (!data) { return null; }10934var r = data.rect;10935var canvas = SpriteSheetUtils._workingCanvas;10936canvas.width = r.width;10937canvas.height = r.height;10938SpriteSheetUtils._workingContext.drawImage(data.image, r.x, r.y, r.width, r.height, 0, 0, r.width, r.height);10939var img = document.createElement("img");10940img.src = canvas.toDataURL("image/png");10941return img;10942};1094310944/**10945* Merges the rgb channels of one image with the alpha channel of another. This can be used to combine a compressed10946* JPEG image containing color data with a PNG32 monochromatic image containing alpha data. With certain types of10947* images (those with detail that lend itself to JPEG compression) this can provide significant file size savings10948* versus a single RGBA PNG32. This method is very fast (generally on the order of 1-2 ms to run).10949* @method mergeAlpha10950* @static10951* @param {HTMLImageElement} rbgImage The image (or canvas) containing the RGB channels to use.10952* @param {HTMLImageElement} alphaImage The image (or canvas) containing the alpha channel to use.10953* @param {HTMLCanvasElement} canvas Optional. If specified, this canvas will be used and returned. If not, a new canvas will be created.10954* @return {HTMLCanvasElement} A canvas with the combined image data. This can be used as a source for Bitmap or SpriteSheet.10955* @deprecated Tools such as ImageAlpha generally provide better results. This will be moved to sandbox in the future.10956*/10957SpriteSheetUtils.mergeAlpha = function(rgbImage, alphaImage, canvas) {10958if (!canvas) { canvas = createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"); }10959canvas.width = Math.max(alphaImage.width, rgbImage.width);10960canvas.height = Math.max(alphaImage.height, rgbImage.height);10961var ctx = canvas.getContext("2d");10962ctx.save();10963ctx.drawImage(rgbImage,0,0);10964ctx.globalCompositeOperation = "destination-in";10965ctx.drawImage(alphaImage,0,0);10966ctx.restore();10967return canvas;10968};109691097010971// private static methods:10972SpriteSheetUtils._flip = function(spriteSheet, count, h, v) {10973var imgs = spriteSheet._images;10974var canvas = SpriteSheetUtils._workingCanvas;10975var ctx = SpriteSheetUtils._workingContext;10976var il = imgs.length/count;10977for (var i=0;i<il;i++) {10978var src = imgs[i];10979src.__tmp = i; // a bit hacky, but faster than doing indexOf below.10980ctx.setTransform(1,0,0,1,0,0);10981ctx.clearRect(0,0,canvas.width+1,canvas.height+1);10982canvas.width = src.width;10983canvas.height = src.height;10984ctx.setTransform(h?-1:1, 0, 0, v?-1:1, h?src.width:0, v?src.height:0);10985ctx.drawImage(src,0,0);10986var img = document.createElement("img");10987img.src = canvas.toDataURL("image/png");10988// work around a strange bug in Safari:10989img.width = src.width;10990img.height = src.height;10991imgs.push(img);10992}1099310994var frames = spriteSheet._frames;10995var fl = frames.length/count;10996for (i=0;i<fl;i++) {10997src = frames[i];10998var rect = src.rect.clone();10999img = imgs[src.image.__tmp+il*count];1100011001var frame = {image:img,rect:rect,regX:src.regX,regY:src.regY};11002if (h) {11003rect.x = img.width-rect.x-rect.width; // update rect11004frame.regX = rect.width-src.regX; // update registration point11005}11006if (v) {11007rect.y = img.height-rect.y-rect.height; // update rect11008frame.regY = rect.height-src.regY; // update registration point11009}11010frames.push(frame);11011}1101211013var sfx = "_"+(h?"h":"")+(v?"v":"");11014var names = spriteSheet._animations;11015var data = spriteSheet._data;11016var al = names.length/count;11017for (i=0;i<al;i++) {11018var name = names[i];11019src = data[name];11020var anim = {name:name+sfx,speed:src.speed,next:src.next,frames:[]};11021if (src.next) { anim.next += sfx; }11022frames = src.frames;11023for (var j=0,l=frames.length;j<l;j++) {11024anim.frames.push(frames[j]+fl*count);11025}11026data[anim.name] = anim;11027names.push(anim.name);11028}11029};110301103111032createjs.SpriteSheetUtils = SpriteSheetUtils;11033}());1103411035//##############################################################################11036// SpriteSheetBuilder.js11037//##############################################################################1103811039this.createjs = this.createjs||{};1104011041(function() {11042"use strict";110431104411045// constructor:11046/**11047* The SpriteSheetBuilder allows you to generate {{#crossLink "SpriteSheet"}}{{/crossLink}} instances at run time11048* from any display object. This can allow you to maintain your assets as vector graphics (for low file size), and11049* render them at run time as SpriteSheets for better performance.11050*11051* SpriteSheets can be built either synchronously, or asynchronously, so that large SpriteSheets can be generated11052* without locking the UI.11053*11054* Note that the "images" used in the generated SpriteSheet are actually canvas elements, and that they will be11055* sized to the nearest power of 2 up to the value of {{#crossLink "SpriteSheetBuilder/maxWidth:property"}}{{/crossLink}}11056* or {{#crossLink "SpriteSheetBuilder/maxHeight:property"}}{{/crossLink}}.11057* @class SpriteSheetBuilder11058* @param {Number} [framerate=0] The {{#crossLink "SpriteSheet/framerate:property"}}{{/crossLink}} of11059* {{#crossLink "SpriteSheet"}}{{/crossLink}} instances that are created.11060* @extends EventDispatcher11061* @constructor11062**/11063function SpriteSheetBuilder(framerate) {11064this.EventDispatcher_constructor();1106511066// public properties:11067/**11068* The maximum width for the images (not individual frames) in the generated SpriteSheet. It is recommended to11069* use a power of 2 for this value (ex. 1024, 2048, 4096). If the frames cannot all fit within the max11070* dimensions, then additional images will be created as needed.11071* @property maxWidth11072* @type Number11073* @default 204811074*/11075this.maxWidth = 2048;1107611077/**11078* The maximum height for the images (not individual frames) in the generated SpriteSheet. It is recommended to11079* use a power of 2 for this value (ex. 1024, 2048, 4096). If the frames cannot all fit within the max11080* dimensions, then additional images will be created as needed.11081* @property maxHeight11082* @type Number11083* @default 204811084**/11085this.maxHeight = 2048;1108611087/**11088* The SpriteSheet that was generated. This will be null before a build is completed successfully.11089* @property spriteSheet11090* @type SpriteSheet11091**/11092this.spriteSheet = null;1109311094/**11095* The scale to apply when drawing all frames to the SpriteSheet. This is multiplied against any scale specified11096* in the addFrame call. This can be used, for example, to generate a SpriteSheet at run time that is tailored11097* to the a specific device resolution (ex. tablet vs mobile).11098* @property scale11099* @type Number11100* @default 111101**/11102this.scale = 1;1110311104/**11105* The padding to use between frames. This is helpful to preserve antialiasing on drawn vector content.11106* @property padding11107* @type Number11108* @default 111109**/11110this.padding = 1;1111111112/**11113* A number from 0.01 to 0.99 that indicates what percentage of time the builder can use. This can be11114* thought of as the number of seconds per second the builder will use. For example, with a timeSlice value of 0.3,11115* the builder will run 20 times per second, using approximately 15ms per build (30% of available time, or 0.3s per second).11116* Defaults to 0.3.11117* @property timeSlice11118* @type Number11119* @default 0.311120**/11121this.timeSlice = 0.3;1112211123/**11124* A value between 0 and 1 that indicates the progress of a build, or -1 if a build has not11125* been initiated.11126* @property progress11127* @type Number11128* @default -111129* @readonly11130*/11131this.progress = -1;1113211133/**11134* A {{#crossLink "SpriteSheet/framerate:property"}}{{/crossLink}} value that will be passed to new {{#crossLink "SpriteSheet"}}{{/crossLink}} instances that are11135* created. If no framerate is specified (or it is 0), then SpriteSheets will use the {{#crossLink "Ticker"}}{{/crossLink}}11136* framerate.11137* @property framerate11138* @type Number11139* @default 011140*/11141this.framerate = framerate || 0;111421114311144// private properties:11145/**11146* @property _frames11147* @protected11148* @type Array11149**/11150this._frames = [];1115111152/**11153* @property _animations11154* @protected11155* @type Array11156**/11157this._animations = {};1115811159/**11160* @property _data11161* @protected11162* @type Array11163**/11164this._data = null;1116511166/**11167* @property _nextFrameIndex11168* @protected11169* @type Number11170**/11171this._nextFrameIndex = 0;1117211173/**11174* @property _index11175* @protected11176* @type Number11177**/11178this._index = 0;1117911180/**11181* @property _timerID11182* @protected11183* @type Number11184**/11185this._timerID = null;1118611187/**11188* @property _scale11189* @protected11190* @type Number11191**/11192this._scale = 1;11193}11194var p = createjs.extend(SpriteSheetBuilder, createjs.EventDispatcher);1119511196/**11197* <strong>REMOVED</strong>. Removed in favor of using `MySuperClass_constructor`.11198* See {{#crossLink "Utility Methods/extend"}}{{/crossLink}} and {{#crossLink "Utility Methods/promote"}}{{/crossLink}}11199* for details.11200*11201* There is an inheritance tutorial distributed with EaselJS in /tutorials/Inheritance.11202*11203* @method initialize11204* @protected11205* @deprecated11206*/11207// p.initialize = function() {}; // searchable for devs wondering where it is.112081120911210// constants:11211SpriteSheetBuilder.ERR_DIMENSIONS = "frame dimensions exceed max spritesheet dimensions";11212SpriteSheetBuilder.ERR_RUNNING = "a build is already running";1121311214// events:11215/**11216* Dispatched when a build completes.11217* @event complete11218* @param {Object} target The object that dispatched the event.11219* @param {String} type The event type.11220* @since 0.6.011221*/1122211223/**11224* Dispatched when an asynchronous build has progress.11225* @event progress11226* @param {Object} target The object that dispatched the event.11227* @param {String} type The event type.11228* @param {Number} progress The current progress value (0-1).11229* @since 0.6.011230*/112311123211233// public methods:11234/**11235* Adds a frame to the {{#crossLink "SpriteSheet"}}{{/crossLink}}. Note that the frame will not be drawn until you11236* call {{#crossLink "SpriteSheetBuilder/build"}}{{/crossLink}} method. The optional setup params allow you to have11237* a function run immediately before the draw occurs. For example, this allows you to add a single source multiple11238* times, but manipulate it or its children to change it to generate different frames.11239*11240* Note that the source's transformations (x, y, scale, rotate, alpha) will be ignored, except for regX/Y. To apply11241* transforms to a source object and have them captured in the SpriteSheet, simply place it into a {{#crossLink "Container"}}{{/crossLink}}11242* and pass in the Container as the source.11243* @method addFrame11244* @param {DisplayObject} source The source {{#crossLink "DisplayObject"}}{{/crossLink}} to draw as the frame.11245* @param {Rectangle} [sourceRect] A {{#crossLink "Rectangle"}}{{/crossLink}} defining the portion of the11246* source to draw to the frame. If not specified, it will look for a `getBounds` method, bounds property, or11247* `nominalBounds` property on the source to use. If one is not found, the frame will be skipped.11248* @param {Number} [scale=1] Optional. The scale to draw this frame at. Default is 1.11249* @param {Function} [setupFunction] A function to call immediately before drawing this frame. It will be called with two parameters: the source, and setupData.11250* @param {Object} [setupData] Arbitrary setup data to pass to setupFunction as the second parameter.11251* @return {Number} The index of the frame that was just added, or null if a sourceRect could not be determined.11252**/11253p.addFrame = function(source, sourceRect, scale, setupFunction, setupData) {11254if (this._data) { throw SpriteSheetBuilder.ERR_RUNNING; }11255var rect = sourceRect||source.bounds||source.nominalBounds;11256if (!rect&&source.getBounds) { rect = source.getBounds(); }11257if (!rect) { return null; }11258scale = scale||1;11259return this._frames.push({source:source, sourceRect:rect, scale:scale, funct:setupFunction, data:setupData, index:this._frames.length, height:rect.height*scale})-1;11260};1126111262/**11263* Adds an animation that will be included in the created {{#crossLink "SpriteSheet"}}{{/crossLink}}.11264* @method addAnimation11265* @param {String} name The name for the animation.11266* @param {Array} frames An array of frame indexes that comprise the animation. Ex. [3,6,5] would describe an animation11267* that played frame indexes 3, 6, and 5 in that order.11268* @param {String} [next] Specifies the name of the animation to continue to after this animation ends. You can11269* also pass false to have the animation stop when it ends. By default it will loop to the start of the same animation.11270* @param {Number} [speed] Specifies a frame advance speed for this animation. For example, a value of 0.5 would11271* cause the animation to advance every second tick. Note that earlier versions used `frequency` instead, which had11272* the opposite effect.11273**/11274p.addAnimation = function(name, frames, next, speed) {11275if (this._data) { throw SpriteSheetBuilder.ERR_RUNNING; }11276this._animations[name] = {frames:frames, next:next, speed:speed};11277};1127811279/**11280* This will take a {{#crossLink "MovieClip"}}{{/crossLink}} instance, and add its frames and labels to this11281* builder. Labels will be added as an animation running from the label index to the next label. For example, if11282* there is a label named "foo" at frame 0 and a label named "bar" at frame 10, in a MovieClip with 15 frames, it11283* will add an animation named "foo" that runs from frame index 0 to 9, and an animation named "bar" that runs from11284* frame index 10 to 14.11285*11286* Note that this will iterate through the full MovieClip with {{#crossLink "MovieClip/actionsEnabled:property"}}{{/crossLink}}11287* set to `false`, ending on the last frame.11288* @method addMovieClip11289* @param {MovieClip} source The source MovieClip instance to add to the SpriteSheet.11290* @param {Rectangle} [sourceRect] A {{#crossLink "Rectangle"}}{{/crossLink}} defining the portion of the source to11291* draw to the frame. If not specified, it will look for a {{#crossLink "DisplayObject/getBounds"}}{{/crossLink}}11292* method, `frameBounds` Array, `bounds` property, or `nominalBounds` property on the source to use. If one is not11293* found, the MovieClip will be skipped.11294* @param {Number} [scale=1] The scale to draw the movie clip at.11295* @param {Function} [setupFunction] A function to call immediately before drawing each frame. It will be called11296* with three parameters: the source, setupData, and the frame index.11297* @param {Object} [setupData] Arbitrary setup data to pass to setupFunction as the second parameter.11298* @param {Function} [labelFunction] This method will be called for each MovieClip label that is added with four11299* parameters: the label name, the source MovieClip instance, the starting frame index (in the movieclip timeline)11300* and the end index. It must return a new name for the label/animation, or `false` to exclude the label.11301**/11302p.addMovieClip = function(source, sourceRect, scale, setupFunction, setupData, labelFunction) {11303if (this._data) { throw SpriteSheetBuilder.ERR_RUNNING; }11304var rects = source.frameBounds;11305var rect = sourceRect||source.bounds||source.nominalBounds;11306if (!rect&&source.getBounds) { rect = source.getBounds(); }11307if (!rect && !rects) { return; }1130811309var i, l, baseFrameIndex = this._frames.length;11310var duration = source.timeline.duration;11311for (i=0; i<duration; i++) {11312var r = (rects&&rects[i]) ? rects[i] : rect;11313this.addFrame(source, r, scale, this._setupMovieClipFrame, {i:i, f:setupFunction, d:setupData});11314}11315var labels = source.timeline._labels;11316var lbls = [];11317for (var n in labels) {11318lbls.push({index:labels[n], label:n});11319}11320if (lbls.length) {11321lbls.sort(function(a,b){ return a.index-b.index; });11322for (i=0,l=lbls.length; i<l; i++) {11323var label = lbls[i].label;11324var start = baseFrameIndex+lbls[i].index;11325var end = baseFrameIndex+((i == l-1) ? duration : lbls[i+1].index);11326var frames = [];11327for (var j=start; j<end; j++) { frames.push(j); }11328if (labelFunction) {11329label = labelFunction(label, source, start, end);11330if (!label) { continue; }11331}11332this.addAnimation(label, frames, true); // for now, this loops all animations.11333}11334}11335};1133611337/**11338* Builds a {{#crossLink "SpriteSheet"}}{{/crossLink}} instance based on the current frames.11339* @method build11340* @return {SpriteSheet} The created SpriteSheet instance, or null if a build is already running or an error11341* occurred.11342**/11343p.build = function() {11344if (this._data) { throw SpriteSheetBuilder.ERR_RUNNING; }11345this._startBuild();11346while (this._drawNext()) {}11347this._endBuild();11348return this.spriteSheet;11349};1135011351/**11352* Asynchronously builds a {{#crossLink "SpriteSheet"}}{{/crossLink}} instance based on the current frames. It will11353* run 20 times per second, using an amount of time defined by `timeSlice`. When it is complete it will call the11354* specified callback.11355* @method buildAsync11356* @param {Number} [timeSlice] Sets the timeSlice property on this instance.11357**/11358p.buildAsync = function(timeSlice) {11359if (this._data) { throw SpriteSheetBuilder.ERR_RUNNING; }11360this.timeSlice = timeSlice;11361this._startBuild();11362var _this = this;11363this._timerID = setTimeout(function() { _this._run(); }, 50-Math.max(0.01, Math.min(0.99, this.timeSlice||0.3))*50);11364};1136511366/**11367* Stops the current asynchronous build.11368* @method stopAsync11369**/11370p.stopAsync = function() {11371clearTimeout(this._timerID);11372this._data = null;11373};1137411375/**11376* SpriteSheetBuilder instances cannot be cloned.11377* @method clone11378**/11379p.clone = function() {11380throw("SpriteSheetBuilder cannot be cloned.");11381};1138211383/**11384* Returns a string representation of this object.11385* @method toString11386* @return {String} a string representation of the instance.11387**/11388p.toString = function() {11389return "[SpriteSheetBuilder]";11390};113911139211393// private methods:11394/**11395* @method _startBuild11396* @protected11397**/11398p._startBuild = function() {11399var pad = this.padding||0;11400this.progress = 0;11401this.spriteSheet = null;11402this._index = 0;11403this._scale = this.scale;11404var dataFrames = [];11405this._data = {11406images: [],11407frames: dataFrames,11408framerate: this.framerate,11409animations: this._animations // TODO: should we "clone" _animations in case someone adds more animations after a build?11410};1141111412var frames = this._frames.slice();11413frames.sort(function(a,b) { return (a.height<=b.height) ? -1 : 1; });1141411415if (frames[frames.length-1].height+pad*2 > this.maxHeight) { throw SpriteSheetBuilder.ERR_DIMENSIONS; }11416var y=0, x=0;11417var img = 0;11418while (frames.length) {11419var o = this._fillRow(frames, y, img, dataFrames, pad);11420if (o.w > x) { x = o.w; }11421y += o.h;11422if (!o.h || !frames.length) {11423var canvas = createjs.createCanvas?createjs.createCanvas():document.createElement("canvas");11424canvas.width = this._getSize(x,this.maxWidth);11425canvas.height = this._getSize(y,this.maxHeight);11426this._data.images[img] = canvas;11427if (!o.h) {11428x=y=0;11429img++;11430}11431}11432}11433};1143411435/**11436* @method _setupMovieClipFrame11437* @protected11438* @return {Number} The width & height of the row.11439**/11440p._setupMovieClipFrame = function(source, data) {11441var ae = source.actionsEnabled;11442source.actionsEnabled = false;11443source.gotoAndStop(data.i);11444source.actionsEnabled = ae;11445data.f&&data.f(source, data.d, data.i);11446};1144711448/**11449* @method _getSize11450* @protected11451* @return {Number} The width & height of the row.11452**/11453p._getSize = function(size,max) {11454var pow = 4;11455while (Math.pow(2,++pow) < size){}11456return Math.min(max,Math.pow(2,pow));11457};1145811459/**11460* @method _fillRow11461* @param {Array} frames11462* @param {Number} y11463* @param {HTMLImageElement} img11464* @param {Object} dataFrames11465* @param {Number} pad11466* @protected11467* @return {Number} The width & height of the row.11468**/11469p._fillRow = function(frames, y, img, dataFrames, pad) {11470var w = this.maxWidth;11471var maxH = this.maxHeight;11472y += pad;11473var h = maxH-y;11474var x = pad;11475var height = 0;11476for (var i=frames.length-1; i>=0; i--) {11477var frame = frames[i];11478var sc = this._scale*frame.scale;11479var rect = frame.sourceRect;11480var source = frame.source;11481var rx = Math.floor(sc*rect.x-pad);11482var ry = Math.floor(sc*rect.y-pad);11483var rh = Math.ceil(sc*rect.height+pad*2);11484var rw = Math.ceil(sc*rect.width+pad*2);11485if (rw > w) { throw SpriteSheetBuilder.ERR_DIMENSIONS; }11486if (rh > h || x+rw > w) { continue; }11487frame.img = img;11488frame.rect = new createjs.Rectangle(x,y,rw,rh);11489height = height || rh;11490frames.splice(i,1);11491dataFrames[frame.index] = [x,y,rw,rh,img,Math.round(-rx+sc*source.regX-pad),Math.round(-ry+sc*source.regY-pad)];11492x += rw;11493}11494return {w:x, h:height};11495};1149611497/**11498* @method _endBuild11499* @protected11500**/11501p._endBuild = function() {11502this.spriteSheet = new createjs.SpriteSheet(this._data);11503this._data = null;11504this.progress = 1;11505this.dispatchEvent("complete");11506};1150711508/**11509* @method _run11510* @protected11511**/11512p._run = function() {11513var ts = Math.max(0.01, Math.min(0.99, this.timeSlice||0.3))*50;11514var t = (new Date()).getTime()+ts;11515var complete = false;11516while (t > (new Date()).getTime()) {11517if (!this._drawNext()) { complete = true; break; }11518}11519if (complete) {11520this._endBuild();11521} else {11522var _this = this;11523this._timerID = setTimeout(function() { _this._run(); }, 50-ts);11524}11525var p = this.progress = this._index/this._frames.length;11526if (this.hasEventListener("progress")) {11527var evt = new createjs.Event("progress");11528evt.progress = p;11529this.dispatchEvent(evt);11530}11531};1153211533/**11534* @method _drawNext11535* @protected11536* @return Boolean Returns false if this is the last draw.11537**/11538p._drawNext = function() {11539var frame = this._frames[this._index];11540var sc = frame.scale*this._scale;11541var rect = frame.rect;11542var sourceRect = frame.sourceRect;11543var canvas = this._data.images[frame.img];11544var ctx = canvas.getContext("2d");11545frame.funct&&frame.funct(frame.source, frame.data);11546ctx.save();11547ctx.beginPath();11548ctx.rect(rect.x, rect.y, rect.width, rect.height);11549ctx.clip();11550ctx.translate(Math.ceil(rect.x-sourceRect.x*sc), Math.ceil(rect.y-sourceRect.y*sc));11551ctx.scale(sc,sc);11552frame.source.draw(ctx); // display object will draw itself.11553ctx.restore();11554return (++this._index) < this._frames.length;11555};115561155711558createjs.SpriteSheetBuilder = createjs.promote(SpriteSheetBuilder, "EventDispatcher");11559}());1156011561//##############################################################################11562// DOMElement.js11563//##############################################################################1156411565this.createjs = this.createjs||{};1156611567(function() {11568"use strict";115691157011571// constructor:11572/**11573* <b>This class is still experimental, and more advanced use is likely to be buggy. Please report bugs.</b>11574*11575* A DOMElement allows you to associate a HTMLElement with the display list. It will be transformed11576* within the DOM as though it is child of the {{#crossLink "Container"}}{{/crossLink}} it is added to. However, it is11577* not rendered to canvas, and as such will retain whatever z-index it has relative to the canvas (ie. it will be11578* drawn in front of or behind the canvas).11579*11580* The position of a DOMElement is relative to their parent node in the DOM. It is recommended that11581* the DOM Object be added to a div that also contains the canvas so that they share the same position11582* on the page.11583*11584* DOMElement is useful for positioning HTML elements over top of canvas content, and for elements11585* that you want to display outside the bounds of the canvas. For example, a tooltip with rich HTML11586* content.11587*11588* <h4>Mouse Interaction</h4>11589*11590* DOMElement instances are not full EaselJS display objects, and do not participate in EaselJS mouse11591* events or support methods like hitTest. To get mouse events from a DOMElement, you must instead add handlers to11592* the htmlElement (note, this does not support EventDispatcher)11593*11594* var domElement = new createjs.DOMElement(htmlElement);11595* domElement.htmlElement.onclick = function() {11596* console.log("clicked");11597* }11598*11599* @class DOMElement11600* @extends DisplayObject11601* @constructor11602* @param {HTMLElement} htmlElement A reference or id for the DOM element to manage.11603*/11604function DOMElement(htmlElement) {11605this.DisplayObject_constructor();1160611607if (typeof(htmlElement)=="string") { htmlElement = document.getElementById(htmlElement); }11608this.mouseEnabled = false;1160911610var style = htmlElement.style;11611style.position = "absolute";11612style.transformOrigin = style.WebkitTransformOrigin = style.msTransformOrigin = style.MozTransformOrigin = style.OTransformOrigin = "0% 0%";116131161411615// public properties:11616/**11617* The DOM object to manage.11618* @property htmlElement11619* @type HTMLElement11620*/11621this.htmlElement = htmlElement;116221162311624// private properties:11625/**11626* @property _oldMtx11627* @type Matrix2D11628* @protected11629*/11630this._oldProps = null;11631}11632var p = createjs.extend(DOMElement, createjs.DisplayObject);1163311634// TODO: deprecated11635// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.116361163711638// public methods:11639/**11640* Returns true or false indicating whether the display object would be visible if drawn to a canvas.11641* This does not account for whether it would be visible within the boundaries of the stage.11642* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.11643* @method isVisible11644* @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas11645*/11646p.isVisible = function() {11647return this.htmlElement != null;11648};1164911650/**11651* Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.11652* Returns true if the draw was handled (useful for overriding functionality).11653* NOTE: This method is mainly for internal use, though it may be useful for advanced uses.11654* @method draw11655* @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.11656* @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache.11657* For example, used for drawing the cache (to prevent it from simply drawing an existing cache back11658* into itself).11659* @return {Boolean}11660*/11661p.draw = function(ctx, ignoreCache) {11662// this relies on the _tick method because draw isn't called if the parent is not visible.11663// the actual update happens in _handleDrawEnd11664return true;11665};1166611667/**11668* Not applicable to DOMElement.11669* @method cache11670*/11671p.cache = function() {};1167211673/**11674* Not applicable to DOMElement.11675* @method uncache11676*/11677p.uncache = function() {};1167811679/**11680* Not applicable to DOMElement.11681* @method updateCache11682*/11683p.updateCache = function() {};1168411685/**11686* Not applicable to DOMElement.11687* @method hitTest11688*/11689p.hitTest = function() {};1169011691/**11692* Not applicable to DOMElement.11693* @method localToGlobal11694*/11695p.localToGlobal = function() {};1169611697/**11698* Not applicable to DOMElement.11699* @method globalToLocal11700*/11701p.globalToLocal = function() {};1170211703/**11704* Not applicable to DOMElement.11705* @method localToLocal11706*/11707p.localToLocal = function() {};1170811709/**11710* DOMElement cannot be cloned. Throws an error.11711* @method clone11712*/11713p.clone = function() {11714throw("DOMElement cannot be cloned.")11715};1171611717/**11718* Returns a string representation of this object.11719* @method toString11720* @return {String} a string representation of the instance.11721*/11722p.toString = function() {11723return "[DOMElement (name="+ this.name +")]";11724};1172511726/**11727* Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances11728* are not full EaselJS display objects and do not participate in EaselJS mouse events.11729* @event click11730*/1173111732/**11733* Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances11734* are not full EaselJS display objects and do not participate in EaselJS mouse events.11735* @event dblClick11736*/1173711738/**11739* Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances11740* are not full EaselJS display objects and do not participate in EaselJS mouse events.11741* @event mousedown11742*/1174311744/**11745* The HTMLElement can listen for the mouseover event, not the DOMElement instance.11746* Since DOMElement instances are not full EaselJS display objects and do not participate in EaselJS mouse events.11747* @event mouseover11748*/1174911750/**11751* Not applicable to DOMElement.11752* @event tick11753*/117541175511756// private methods:11757/**11758* @method _tick11759* @param {Object} evtObj An event object that will be dispatched to all tick listeners. This object is reused between dispatchers to reduce construction & GC costs.11760* function.11761* @protected11762*/11763p._tick = function(evtObj) {11764var stage = this.getStage();11765stage&&stage.on("drawend", this._handleDrawEnd, this, true);11766this.DisplayObject__tick(evtObj);11767};1176811769/**11770* @method _handleDrawEnd11771* @param {Event} evt11772* @protected11773*/11774p._handleDrawEnd = function(evt) {11775var o = this.htmlElement;11776if (!o) { return; }11777var style = o.style;1177811779var props = this.getConcatenatedDisplayProps(this._props), mtx = props.matrix;1178011781var visibility = props.visible ? "visible" : "hidden";11782if (visibility != style.visibility) { style.visibility = visibility; }11783if (!props.visible) { return; }1178411785var oldProps = this._oldProps, oldMtx = oldProps&&oldProps.matrix;11786var n = 10000; // precision1178711788if (!oldMtx || !oldMtx.equals(mtx)) {11789var str = "matrix(" + (mtx.a*n|0)/n +","+ (mtx.b*n|0)/n +","+ (mtx.c*n|0)/n +","+ (mtx.d*n|0)/n +","+ (mtx.tx+0.5|0);11790style.transform = style.WebkitTransform = style.OTransform = style.msTransform = str +","+ (mtx.ty+0.5|0) +")";11791style.MozTransform = str +"px,"+ (mtx.ty+0.5|0) +"px)";11792if (!oldProps) { oldProps = this._oldProps = new createjs.DisplayProps(true, NaN); }11793oldProps.matrix.copy(mtx);11794}1179511796if (oldProps.alpha != props.alpha) {11797style.opacity = ""+(props.alpha*n|0)/n;11798oldProps.alpha = props.alpha;11799}11800};118011180211803createjs.DOMElement = createjs.promote(DOMElement, "DisplayObject");11804}());1180511806//##############################################################################11807// Filter.js11808//##############################################################################1180911810this.createjs = this.createjs||{};1181111812(function() {11813"use strict";118141181511816// constructor:11817/**11818* Base class that all filters should inherit from. Filters need to be applied to objects that have been cached using11819* the {{#crossLink "DisplayObject/cache"}}{{/crossLink}} method. If an object changes, please cache it again, or use11820* {{#crossLink "DisplayObject/updateCache"}}{{/crossLink}}. Note that the filters must be applied before caching.11821*11822* <h4>Example</h4>11823*11824* myInstance.filters = [11825* new createjs.ColorFilter(0, 0, 0, 1, 255, 0, 0),11826* new createjs.BlurFilter(5, 5, 10)11827* ];11828* myInstance.cache(0,0, 100, 100);11829*11830* Note that each filter can implement a {{#crossLink "Filter/getBounds"}}{{/crossLink}} method, which returns the11831* margins that need to be applied in order to fully display the filter. For example, the {{#crossLink "BlurFilter"}}{{/crossLink}}11832* will cause an object to feather outwards, resulting in a margin around the shape.11833*11834* <h4>EaselJS Filters</h4>11835* EaselJS comes with a number of pre-built filters:11836* <ul><li>{{#crossLink "AlphaMapFilter"}}{{/crossLink}} : Map a greyscale image to the alpha channel of a display object</li>11837* <li>{{#crossLink "AlphaMaskFilter"}}{{/crossLink}}: Map an image's alpha channel to the alpha channel of a display object</li>11838* <li>{{#crossLink "BlurFilter"}}{{/crossLink}}: Apply vertical and horizontal blur to a display object</li>11839* <li>{{#crossLink "ColorFilter"}}{{/crossLink}}: Color transform a display object</li>11840* <li>{{#crossLink "ColorMatrixFilter"}}{{/crossLink}}: Transform an image using a {{#crossLink "ColorMatrix"}}{{/crossLink}}</li>11841* </ul>11842*11843* @class Filter11844* @constructor11845**/11846function Filter() {}11847var p = Filter.prototype;1184811849/**11850* <strong>REMOVED</strong>. Removed in favor of using `MySuperClass_constructor`.11851* See {{#crossLink "Utility Methods/extend"}}{{/crossLink}} and {{#crossLink "Utility Methods/promote"}}{{/crossLink}}11852* for details.11853*11854* There is an inheritance tutorial distributed with EaselJS in /tutorials/Inheritance.11855*11856* @method initialize11857* @protected11858* @deprecated11859*/11860// p.initialize = function() {}; // searchable for devs wondering where it is.118611186211863// public methods:11864/**11865* Provides padding values for this filter. That is, how much the filter will extend the visual bounds of an object it is applied to.11866* @method getBounds11867* @param {Rectangle} [rect] If specified, the provided Rectangle instance will be expanded by the padding amounts and returned.11868* @return {Rectangle} If a `rect` param was provided, it is returned. If not, either a new rectangle with the padding values, or null if no padding is required for this filter.11869**/11870p.getBounds = function(rect) {11871return rect;11872};1187311874/**11875* Applies the filter to the specified context.11876* @method applyFilter11877* @param {CanvasRenderingContext2D} ctx The 2D context to use as the source.11878* @param {Number} x The x position to use for the source rect.11879* @param {Number} y The y position to use for the source rect.11880* @param {Number} width The width to use for the source rect.11881* @param {Number} height The height to use for the source rect.11882* @param {CanvasRenderingContext2D} [targetCtx] The 2D context to draw the result to. Defaults to the context passed to ctx.11883* @param {Number} [targetX] The x position to draw the result to. Defaults to the value passed to x.11884* @param {Number} [targetY] The y position to draw the result to. Defaults to the value passed to y.11885* @return {Boolean} If the filter was applied successfully.11886**/11887p.applyFilter = function(ctx, x, y, width, height, targetCtx, targetX, targetY) {11888// this is the default behaviour because most filters access pixel data. It is overridden when not needed.11889targetCtx = targetCtx || ctx;11890if (targetX == null) { targetX = x; }11891if (targetY == null) { targetY = y; }11892try {11893var imageData = ctx.getImageData(x, y, width, height);11894} catch (e) {11895return false;11896}11897if (this._applyFilter(imageData)) {11898targetCtx.putImageData(imageData, targetX, targetY);11899return true;11900}11901return false;11902};1190311904/**11905* Returns a string representation of this object.11906* @method toString11907* @return {String} a string representation of the instance.11908**/11909p.toString = function() {11910return "[Filter]";11911};1191211913/**11914* Returns a clone of this Filter instance.11915* @method clone11916* @return {Filter} A clone of the current Filter instance.11917**/11918p.clone = function() {11919return new Filter();11920};1192111922// private methods:11923/**11924* @method _applyFilter11925* @param {ImageData} imageData Target ImageData instance.11926* @return {Boolean}11927**/11928p._applyFilter = function(imageData) { return true; };119291193011931createjs.Filter = Filter;11932}());1193311934//##############################################################################11935// BlurFilter.js11936//##############################################################################1193711938this.createjs = this.createjs||{};1193911940(function() {11941"use strict";119421194311944// constructor:11945/**11946* Applies a box blur to DisplayObjects. Note that this filter is fairly CPU intensive, particularly if the quality is11947* set higher than 1.11948*11949* <h4>Example</h4>11950* This example creates a red circle, and then applies a 5 pixel blur to it. It uses the {{#crossLink "Filter/getBounds"}}{{/crossLink}}11951* method to account for the spread that the blur causes.11952*11953* var shape = new createjs.Shape().set({x:100,y:100});11954* shape.graphics.beginFill("#ff0000").drawCircle(0,0,50);11955*11956* var blurFilter = new createjs.BlurFilter(5, 5, 1);11957* shape.filters = [blurFilter];11958* var bounds = blurFilter.getBounds();11959*11960* shape.cache(-50+bounds.x, -50+bounds.y, 100+bounds.width, 100+bounds.height);11961*11962* See {{#crossLink "Filter"}}{{/crossLink}} for an more information on applying filters.11963* @class BlurFilter11964* @extends Filter11965* @constructor11966* @param {Number} [blurX=0] The horizontal blur radius in pixels.11967* @param {Number} [blurY=0] The vertical blur radius in pixels.11968* @param {Number} [quality=1] The number of blur iterations.11969**/11970function BlurFilter( blurX, blurY, quality) {11971if ( isNaN(blurX) || blurX < 0 ) blurX = 0;11972if ( isNaN(blurY) || blurY < 0 ) blurY = 0;11973if ( isNaN(quality) || quality < 1 ) quality = 1;119741197511976// public properties:11977/**11978* Horizontal blur radius in pixels11979* @property blurX11980* @default 011981* @type Number11982**/11983this.blurX = blurX | 0;1198411985/**11986* Vertical blur radius in pixels11987* @property blurY11988* @default 011989* @type Number11990**/11991this.blurY = blurY | 0;1199211993/**11994* Number of blur iterations. For example, a value of 1 will produce a rough blur. A value of 2 will produce a11995* smoother blur, but take twice as long to run.11996* @property quality11997* @default 111998* @type Number11999**/12000this.quality = quality | 0;12001}12002var p = createjs.extend(BlurFilter, createjs.Filter);1200312004// TODO: deprecated12005// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.120061200712008// constants:12009/**12010* Array of multiply values for blur calculations.12011* @property MUL_TABLE12012* @type Array12013* @protected12014* @static12015**/12016BlurFilter.MUL_TABLE = [1, 171, 205, 293, 57, 373, 79, 137, 241, 27, 391, 357, 41, 19, 283, 265, 497, 469, 443, 421, 25, 191, 365, 349, 335, 161, 155, 149, 9, 278, 269, 261, 505, 245, 475, 231, 449, 437, 213, 415, 405, 395, 193, 377, 369, 361, 353, 345, 169, 331, 325, 319, 313, 307, 301, 37, 145, 285, 281, 69, 271, 267, 263, 259, 509, 501, 493, 243, 479, 118, 465, 459, 113, 446, 55, 435, 429, 423, 209, 413, 51, 403, 199, 393, 97, 3, 379, 375, 371, 367, 363, 359, 355, 351, 347, 43, 85, 337, 333, 165, 327, 323, 5, 317, 157, 311, 77, 305, 303, 75, 297, 294, 73, 289, 287, 71, 141, 279, 277, 275, 68, 135, 67, 133, 33, 262, 260, 129, 511, 507, 503, 499, 495, 491, 61, 121, 481, 477, 237, 235, 467, 232, 115, 457, 227, 451, 7, 445, 221, 439, 218, 433, 215, 427, 425, 211, 419, 417, 207, 411, 409, 203, 202, 401, 399, 396, 197, 49, 389, 387, 385, 383, 95, 189, 47, 187, 93, 185, 23, 183, 91, 181, 45, 179, 89, 177, 11, 175, 87, 173, 345, 343, 341, 339, 337, 21, 167, 83, 331, 329, 327, 163, 81, 323, 321, 319, 159, 79, 315, 313, 39, 155, 309, 307, 153, 305, 303, 151, 75, 299, 149, 37, 295, 147, 73, 291, 145, 289, 287, 143, 285, 71, 141, 281, 35, 279, 139, 69, 275, 137, 273, 17, 271, 135, 269, 267, 133, 265, 33, 263, 131, 261, 130, 259, 129, 257, 1];1201712018/**12019* Array of shift values for blur calculations.12020* @property SHG_TABLE12021* @type Array12022* @protected12023* @static12024**/12025BlurFilter.SHG_TABLE = [0, 9, 10, 11, 9, 12, 10, 11, 12, 9, 13, 13, 10, 9, 13, 13, 14, 14, 14, 14, 10, 13, 14, 14, 14, 13, 13, 13, 9, 14, 14, 14, 15, 14, 15, 14, 15, 15, 14, 15, 15, 15, 14, 15, 15, 15, 15, 15, 14, 15, 15, 15, 15, 15, 15, 12, 14, 15, 15, 13, 15, 15, 15, 15, 16, 16, 16, 15, 16, 14, 16, 16, 14, 16, 13, 16, 16, 16, 15, 16, 13, 16, 15, 16, 14, 9, 16, 16, 16, 16, 16, 16, 16, 16, 16, 13, 14, 16, 16, 15, 16, 16, 10, 16, 15, 16, 14, 16, 16, 14, 16, 16, 14, 16, 16, 14, 15, 16, 16, 16, 14, 15, 14, 15, 13, 16, 16, 15, 17, 17, 17, 17, 17, 17, 14, 15, 17, 17, 16, 16, 17, 16, 15, 17, 16, 17, 11, 17, 16, 17, 16, 17, 16, 17, 17, 16, 17, 17, 16, 17, 17, 16, 16, 17, 17, 17, 16, 14, 17, 17, 17, 17, 15, 16, 14, 16, 15, 16, 13, 16, 15, 16, 14, 16, 15, 16, 12, 16, 15, 16, 17, 17, 17, 17, 17, 13, 16, 15, 17, 17, 17, 16, 15, 17, 17, 17, 16, 15, 17, 17, 14, 16, 17, 17, 16, 17, 17, 16, 15, 17, 16, 14, 17, 16, 15, 17, 16, 17, 17, 16, 17, 15, 16, 17, 14, 17, 16, 15, 17, 16, 17, 13, 17, 16, 17, 17, 16, 17, 14, 17, 16, 17, 16, 17, 16, 17, 9];1202612027// public methods:12028/** docced in super class **/12029p.getBounds = function (rect) {12030var x = this.blurX|0, y = this.blurY| 0;12031if (x <= 0 && y <= 0) { return rect; }12032var q = Math.pow(this.quality, 0.2);12033return (rect || new createjs.Rectangle()).pad(x*q+1,y*q+1,x*q+1,y*q+1);12034};1203512036/** docced in super class **/12037p.clone = function() {12038return new BlurFilter(this.blurX, this.blurY, this.quality);12039};1204012041/** docced in super class **/12042p.toString = function() {12043return "[BlurFilter]";12044};120451204612047// private methods:1204812049/** docced in super class **/12050p._applyFilter = function (imageData) {1205112052var radiusX = this.blurX >> 1;12053if (isNaN(radiusX) || radiusX < 0) return false;12054var radiusY = this.blurY >> 1;12055if (isNaN(radiusY) || radiusY < 0) return false;12056if (radiusX == 0 && radiusY == 0) return false;1205712058var iterations = this.quality;12059if (isNaN(iterations) || iterations < 1) iterations = 1;12060iterations |= 0;12061if (iterations > 3) iterations = 3;12062if (iterations < 1) iterations = 1;1206312064var px = imageData.data;12065var x=0, y=0, i=0, p=0, yp=0, yi=0, yw=0, r=0, g=0, b=0, a=0, pr=0, pg=0, pb=0, pa=0;1206612067var divx = (radiusX + radiusX + 1) | 0;12068var divy = (radiusY + radiusY + 1) | 0;12069var w = imageData.width | 0;12070var h = imageData.height | 0;1207112072var w1 = (w - 1) | 0;12073var h1 = (h - 1) | 0;12074var rxp1 = (radiusX + 1) | 0;12075var ryp1 = (radiusY + 1) | 0;1207612077var ssx = {r:0,b:0,g:0,a:0};12078var sx = ssx;12079for ( i = 1; i < divx; i++ )12080{12081sx = sx.n = {r:0,b:0,g:0,a:0};12082}12083sx.n = ssx;1208412085var ssy = {r:0,b:0,g:0,a:0};12086var sy = ssy;12087for ( i = 1; i < divy; i++ )12088{12089sy = sy.n = {r:0,b:0,g:0,a:0};12090}12091sy.n = ssy;1209212093var si = null;120941209512096var mtx = BlurFilter.MUL_TABLE[radiusX] | 0;12097var stx = BlurFilter.SHG_TABLE[radiusX] | 0;12098var mty = BlurFilter.MUL_TABLE[radiusY] | 0;12099var sty = BlurFilter.SHG_TABLE[radiusY] | 0;1210012101while (iterations-- > 0) {1210212103yw = yi = 0;12104var ms = mtx;12105var ss = stx;12106for (y = h; --y > -1;) {12107r = rxp1 * (pr = px[(yi) | 0]);12108g = rxp1 * (pg = px[(yi + 1) | 0]);12109b = rxp1 * (pb = px[(yi + 2) | 0]);12110a = rxp1 * (pa = px[(yi + 3) | 0]);1211112112sx = ssx;1211312114for( i = rxp1; --i > -1; )12115{12116sx.r = pr;12117sx.g = pg;12118sx.b = pb;12119sx.a = pa;12120sx = sx.n;12121}1212212123for( i = 1; i < rxp1; i++ )12124{12125p = (yi + ((w1 < i ? w1 : i) << 2)) | 0;12126r += ( sx.r = px[p]);12127g += ( sx.g = px[p+1]);12128b += ( sx.b = px[p+2]);12129a += ( sx.a = px[p+3]);1213012131sx = sx.n;12132}1213312134si = ssx;12135for ( x = 0; x < w; x++ )12136{12137px[yi++] = (r * ms) >>> ss;12138px[yi++] = (g * ms) >>> ss;12139px[yi++] = (b * ms) >>> ss;12140px[yi++] = (a * ms) >>> ss;1214112142p = ((yw + ((p = x + radiusX + 1) < w1 ? p : w1)) << 2);1214312144r -= si.r - ( si.r = px[p]);12145g -= si.g - ( si.g = px[p+1]);12146b -= si.b - ( si.b = px[p+2]);12147a -= si.a - ( si.a = px[p+3]);1214812149si = si.n;1215012151}12152yw += w;12153}1215412155ms = mty;12156ss = sty;12157for (x = 0; x < w; x++) {12158yi = (x << 2) | 0;1215912160r = (ryp1 * (pr = px[yi])) | 0;12161g = (ryp1 * (pg = px[(yi + 1) | 0])) | 0;12162b = (ryp1 * (pb = px[(yi + 2) | 0])) | 0;12163a = (ryp1 * (pa = px[(yi + 3) | 0])) | 0;1216412165sy = ssy;12166for( i = 0; i < ryp1; i++ )12167{12168sy.r = pr;12169sy.g = pg;12170sy.b = pb;12171sy.a = pa;12172sy = sy.n;12173}1217412175yp = w;1217612177for( i = 1; i <= radiusY; i++ )12178{12179yi = ( yp + x ) << 2;1218012181r += ( sy.r = px[yi]);12182g += ( sy.g = px[yi+1]);12183b += ( sy.b = px[yi+2]);12184a += ( sy.a = px[yi+3]);1218512186sy = sy.n;1218712188if( i < h1 )12189{12190yp += w;12191}12192}1219312194yi = x;12195si = ssy;12196if ( iterations > 0 )12197{12198for ( y = 0; y < h; y++ )12199{12200p = yi << 2;12201px[p+3] = pa =(a * ms) >>> ss;12202if ( pa > 0 )12203{12204px[p] = ((r * ms) >>> ss );12205px[p+1] = ((g * ms) >>> ss );12206px[p+2] = ((b * ms) >>> ss );12207} else {12208px[p] = px[p+1] = px[p+2] = 012209}1221012211p = ( x + (( ( p = y + ryp1) < h1 ? p : h1 ) * w )) << 2;1221212213r -= si.r - ( si.r = px[p]);12214g -= si.g - ( si.g = px[p+1]);12215b -= si.b - ( si.b = px[p+2]);12216a -= si.a - ( si.a = px[p+3]);1221712218si = si.n;1221912220yi += w;12221}12222} else {12223for ( y = 0; y < h; y++ )12224{12225p = yi << 2;12226px[p+3] = pa =(a * ms) >>> ss;12227if ( pa > 0 )12228{12229pa = 255 / pa;12230px[p] = ((r * ms) >>> ss ) * pa;12231px[p+1] = ((g * ms) >>> ss ) * pa;12232px[p+2] = ((b * ms) >>> ss ) * pa;12233} else {12234px[p] = px[p+1] = px[p+2] = 012235}1223612237p = ( x + (( ( p = y + ryp1) < h1 ? p : h1 ) * w )) << 2;1223812239r -= si.r - ( si.r = px[p]);12240g -= si.g - ( si.g = px[p+1]);12241b -= si.b - ( si.b = px[p+2]);12242a -= si.a - ( si.a = px[p+3]);1224312244si = si.n;1224512246yi += w;12247}12248}12249}1225012251}12252return true;12253};1225412255createjs.BlurFilter = createjs.promote(BlurFilter, "Filter");12256}());1225712258//##############################################################################12259// AlphaMapFilter.js12260//##############################################################################1226112262this.createjs = this.createjs || {};1226312264(function () {12265"use strict";122661226712268// constructor:12269/**12270* Applies a greyscale alpha map image (or canvas) to the target, such that the alpha channel of the result will12271* be copied from the red channel of the map, and the RGB channels will be copied from the target.12272*12273* Generally, it is recommended that you use {{#crossLink "AlphaMaskFilter"}}{{/crossLink}}, because it has much12274* better performance.12275*12276* <h4>Example</h4>12277* This example draws a red->blue box, caches it, and then uses the cache canvas as an alpha map on a 100x100 image.12278*12279* var box = new createjs.Shape();12280* box.graphics.beginLinearGradientFill(["#ff0000", "#0000ff"], [0, 1], 0, 0, 0, 100)12281* box.graphics.drawRect(0, 0, 100, 100);12282* box.cache(0, 0, 100, 100);12283*12284* var bmp = new createjs.Bitmap("path/to/image.jpg");12285* bmp.filters = [12286* new createjs.AlphaMapFilter(box.cacheCanvas)12287* ];12288* bmp.cache(0, 0, 100, 100);12289* stage.addChild(bmp);12290*12291* See {{#crossLink "Filter"}}{{/crossLink}} for more information on applying filters.12292* @class AlphaMapFilter12293* @extends Filter12294* @constructor12295* @param {HTMLImageElement|HTMLCanvasElement} alphaMap The greyscale image (or canvas) to use as the alpha value for the12296* result. This should be exactly the same dimensions as the target.12297**/12298function AlphaMapFilter(alphaMap) {122991230012301// public properties:12302/**12303* The greyscale image (or canvas) to use as the alpha value for the result. This should be exactly the same12304* dimensions as the target.12305* @property alphaMap12306* @type HTMLImageElement|HTMLCanvasElement12307**/12308this.alphaMap = alphaMap;123091231012311// private properties:12312/**12313* @property _alphaMap12314* @protected12315* @type HTMLImageElement|HTMLCanvasElement12316**/12317this._alphaMap = null;1231812319/**12320* @property _mapData12321* @protected12322* @type Uint8ClampedArray12323**/12324this._mapData = null;12325}12326var p = createjs.extend(AlphaMapFilter, createjs.Filter);1232712328// TODO: deprecated12329// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.123301233112332// public methods:12333/** docced in super class **/12334p.clone = function () {12335var o = new AlphaMapFilter(this.alphaMap);12336o._alphaMap = this._alphaMap;12337o._mapData = this._mapData;12338return o;12339};1234012341/** docced in super class **/12342p.toString = function () {12343return "[AlphaMapFilter]";12344};123451234612347// private methods:12348/** docced in super class **/12349p._applyFilter = function (imageData) {12350if (!this.alphaMap) { return true; }12351if (!this._prepAlphaMap()) { return false; }1235212353// TODO: update to support scenarios where the target has different dimensions.12354var data = imageData.data;12355var map = this._mapData;12356for(var i=0, l=data.length; i<l; i += 4) { data[i + 3] = map[i] || 0; }1235712358return true;12359};1236012361/**12362* @method _prepAlphaMap12363* @protected12364**/12365p._prepAlphaMap = function () {12366if (!this.alphaMap) { return false; }12367if (this.alphaMap == this._alphaMap && this._mapData) { return true; }1236812369this._mapData = null;12370var map = this._alphaMap = this.alphaMap;12371var canvas = map;12372var ctx;12373if (map instanceof HTMLCanvasElement) {12374ctx = canvas.getContext("2d");12375} else {12376canvas = createjs.createCanvas ? createjs.createCanvas() : document.createElement("canvas");12377canvas.width = map.width;12378canvas.height = map.height;12379ctx = canvas.getContext("2d");12380ctx.drawImage(map, 0, 0);12381}1238212383try {12384var imgData = ctx.getImageData(0, 0, map.width, map.height);12385} catch (e) {12386//if (!this.suppressCrossDomainErrors) throw new Error("unable to access local image data: " + e);12387return false;12388}1238912390this._mapData = imgData.data;12391return true;12392};123931239412395createjs.AlphaMapFilter = createjs.promote(AlphaMapFilter, "Filter");12396}());1239712398//##############################################################################12399// AlphaMaskFilter.js12400//##############################################################################1240112402this.createjs = this.createjs || {};1240312404(function () {12405"use strict";124061240712408// constructor:12409/**12410* Applies the alpha from the mask image (or canvas) to the target, such that the alpha channel of the result will12411* be derived from the mask, and the RGB channels will be copied from the target. This can be used, for example, to12412* apply an alpha mask to a display object. This can also be used to combine a JPG compressed RGB image with a PNG3212413* alpha mask, which can result in a much smaller file size than a single PNG32 containing ARGB.12414*12415* <b>IMPORTANT NOTE: This filter currently does not support the targetCtx, or targetX/Y parameters correctly.</b>12416*12417* <h4>Example</h4>12418* This example draws a gradient box, then caches it and uses the "cacheCanvas" as the alpha mask on a 100x100 image.12419*12420* var box = new createjs.Shape();12421* box.graphics.beginLinearGradientFill(["#000000", "rgba(0, 0, 0, 0)"], [0, 1], 0, 0, 100, 100)12422* box.graphics.drawRect(0, 0, 100, 100);12423* box.cache(0, 0, 100, 100);12424*12425* var bmp = new createjs.Bitmap("path/to/image.jpg");12426* bmp.filters = [12427* new createjs.AlphaMaskFilter(box.cacheCanvas)12428* ];12429* bmp.cache(0, 0, 100, 100);12430*12431* See {{#crossLink "Filter"}}{{/crossLink}} for more information on applying filters.12432* @class AlphaMaskFilter12433* @extends Filter12434* @constructor12435* @param {HTMLImageElement|HTMLCanvasElement} mask12436**/12437function AlphaMaskFilter(mask) {124381243912440// public properties:12441/**12442* The image (or canvas) to use as the mask.12443* @property mask12444* @type HTMLImageElement|HTMLCanvasElement12445**/12446this.mask = mask;12447}12448var p = createjs.extend(AlphaMaskFilter, createjs.Filter);1244912450// TODO: deprecated12451// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.124521245312454// public methods:12455/**12456* Applies the filter to the specified context.12457*12458* <strong>IMPORTANT NOTE: This filter currently does not support the targetCtx, or targetX/Y parameters12459* correctly.</strong>12460* @method applyFilter12461* @param {CanvasRenderingContext2D} ctx The 2D context to use as the source.12462* @param {Number} x The x position to use for the source rect.12463* @param {Number} y The y position to use for the source rect.12464* @param {Number} width The width to use for the source rect.12465* @param {Number} height The height to use for the source rect.12466* @param {CanvasRenderingContext2D} [targetCtx] NOT SUPPORTED IN THIS FILTER. The 2D context to draw the result to. Defaults to the context passed to ctx.12467* @param {Number} [targetX] NOT SUPPORTED IN THIS FILTER. The x position to draw the result to. Defaults to the value passed to x.12468* @param {Number} [targetY] NOT SUPPORTED IN THIS FILTER. The y position to draw the result to. Defaults to the value passed to y.12469* @return {Boolean} If the filter was applied successfully.12470**/12471p.applyFilter = function (ctx, x, y, width, height, targetCtx, targetX, targetY) {12472if (!this.mask) { return true; }12473targetCtx = targetCtx || ctx;12474if (targetX == null) { targetX = x; }12475if (targetY == null) { targetY = y; }1247612477targetCtx.save();12478if (ctx != targetCtx) {12479// TODO: support targetCtx and targetX/Y12480// clearRect, then draw the ctx in?12481return false;12482}1248312484targetCtx.globalCompositeOperation = "destination-in";12485targetCtx.drawImage(this.mask, targetX, targetY);12486targetCtx.restore();12487return true;12488};1248912490/** docced in super class **/12491p.clone = function () {12492return new AlphaMaskFilter(this.mask);12493};1249412495/** docced in super class **/12496p.toString = function () {12497return "[AlphaMaskFilter]";12498};124991250012501createjs.AlphaMaskFilter = createjs.promote(AlphaMaskFilter, "Filter");12502}());1250312504//##############################################################################12505// ColorFilter.js12506//##############################################################################1250712508this.createjs = this.createjs||{};1250912510(function() {12511"use strict";125121251312514// constructor:12515/**12516* Applies a color transform to DisplayObjects.12517*12518* <h4>Example</h4>12519* This example draws a red circle, and then transforms it to Blue. This is accomplished by multiplying all the channels12520* to 0 (except alpha, which is set to 1), and then adding 255 to the blue channel.12521*12522* var shape = new createjs.Shape().set({x:100,y:100});12523* shape.graphics.beginFill("#ff0000").drawCircle(0,0,50);12524*12525* shape.filters = [12526* new createjs.ColorFilter(0,0,0,1, 0,0,255,0)12527* ];12528* shape.cache(-50, -50, 100, 100);12529*12530* See {{#crossLink "Filter"}}{{/crossLink}} for an more information on applying filters.12531* @class ColorFilter12532* @param {Number} [redMultiplier=1] The amount to multiply against the red channel. This is a range between 0 and 1.12533* @param {Number} [greenMultiplier=1] The amount to multiply against the green channel. This is a range between 0 and 1.12534* @param {Number} [blueMultiplier=1] The amount to multiply against the blue channel. This is a range between 0 and 1.12535* @param {Number} [alphaMultiplier=1] The amount to multiply against the alpha channel. This is a range between 0 and 1.12536* @param {Number} [redOffset=0] The amount to add to the red channel after it has been multiplied. This is a range12537* between -255 and 255.12538* @param {Number} [greenOffset=0] The amount to add to the green channel after it has been multiplied. This is a range12539* between -255 and 255.12540* @param {Number} [blueOffset=0] The amount to add to the blue channel after it has been multiplied. This is a range12541* between -255 and 255.12542* @param {Number} [alphaOffset=0] The amount to add to the alpha channel after it has been multiplied. This is a range12543* between -255 and 255.12544* @constructor12545* @extends Filter12546**/12547function ColorFilter(redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset) {125481254912550// public properties:12551/**12552* Red channel multiplier.12553* @property redMultiplier12554* @type Number12555**/12556this.redMultiplier = redMultiplier != null ? redMultiplier : 1;1255712558/**12559* Green channel multiplier.12560* @property greenMultiplier12561* @type Number12562**/12563this.greenMultiplier = greenMultiplier != null ? greenMultiplier : 1;1256412565/**12566* Blue channel multiplier.12567* @property blueMultiplier12568* @type Number12569**/12570this.blueMultiplier = blueMultiplier != null ? blueMultiplier : 1;1257112572/**12573* Alpha channel multiplier.12574* @property alphaMultiplier12575* @type Number12576**/12577this.alphaMultiplier = alphaMultiplier != null ? alphaMultiplier : 1;1257812579/**12580* Red channel offset (added to value).12581* @property redOffset12582* @type Number12583**/12584this.redOffset = redOffset || 0;1258512586/**12587* Green channel offset (added to value).12588* @property greenOffset12589* @type Number12590**/12591this.greenOffset = greenOffset || 0;1259212593/**12594* Blue channel offset (added to value).12595* @property blueOffset12596* @type Number12597**/12598this.blueOffset = blueOffset || 0;1259912600/**12601* Alpha channel offset (added to value).12602* @property alphaOffset12603* @type Number12604**/12605this.alphaOffset = alphaOffset || 0;12606}12607var p = createjs.extend(ColorFilter, createjs.Filter);1260812609// TODO: deprecated12610// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.126111261212613// public methods:12614/** docced in super class **/12615p.toString = function() {12616return "[ColorFilter]";12617};1261812619/** docced in super class **/12620p.clone = function() {12621return new ColorFilter(this.redMultiplier, this.greenMultiplier, this.blueMultiplier, this.alphaMultiplier, this.redOffset, this.greenOffset, this.blueOffset, this.alphaOffset);12622};126231262412625// private methods:12626/** docced in super class **/12627p._applyFilter = function(imageData) {12628var data = imageData.data;12629var l = data.length;12630for (var i=0; i<l; i+=4) {12631data[i] = data[i]*this.redMultiplier+this.redOffset;12632data[i+1] = data[i+1]*this.greenMultiplier+this.greenOffset;12633data[i+2] = data[i+2]*this.blueMultiplier+this.blueOffset;12634data[i+3] = data[i+3]*this.alphaMultiplier+this.alphaOffset;12635}12636return true;12637};126381263912640createjs.ColorFilter = createjs.promote(ColorFilter, "Filter");12641}());1264212643//##############################################################################12644// ColorMatrix.js12645//##############################################################################1264612647this.createjs = this.createjs||{};1264812649(function() {12650"use strict";126511265212653// constructor:12654/**12655* Provides helper functions for assembling a matrix for use with the {{#crossLink "ColorMatrixFilter"}}{{/crossLink}}.12656* Most methods return the instance to facilitate chained calls.12657*12658* <h4>Example</h4>12659*12660* myColorMatrix.adjustHue(20).adjustBrightness(50);12661*12662* See {{#crossLink "Filter"}}{{/crossLink}} for an example of how to apply filters, or {{#crossLink "ColorMatrixFilter"}}{{/crossLink}}12663* for an example of how to use ColorMatrix to change a DisplayObject's color.12664* @class ColorMatrix12665* @param {Number} brightness12666* @param {Number} contrast12667* @param {Number} saturation12668* @param {Number} hue12669* @constructor12670**/12671function ColorMatrix(brightness, contrast, saturation, hue) {12672this.setColor(brightness, contrast, saturation, hue);12673}12674var p = ColorMatrix.prototype;1267512676/**12677* <strong>REMOVED</strong>. Removed in favor of using `MySuperClass_constructor`.12678* See {{#crossLink "Utility Methods/extend"}}{{/crossLink}} and {{#crossLink "Utility Methods/promote"}}{{/crossLink}}12679* for details.12680*12681* There is an inheritance tutorial distributed with EaselJS in /tutorials/Inheritance.12682*12683* @method initialize12684* @protected12685* @deprecated12686*/12687// p.initialize = function() {}; // searchable for devs wondering where it is.126881268912690// constants:12691/**12692* Array of delta values for contrast calculations.12693* @property DELTA_INDEX12694* @type Array12695* @protected12696* @static12697**/12698ColorMatrix.DELTA_INDEX = [126990, 0.01, 0.02, 0.04, 0.05, 0.06, 0.07, 0.08, 0.1, 0.11,127000.12, 0.14, 0.15, 0.16, 0.17, 0.18, 0.20, 0.21, 0.22, 0.24,127010.25, 0.27, 0.28, 0.30, 0.32, 0.34, 0.36, 0.38, 0.40, 0.42,127020.44, 0.46, 0.48, 0.5, 0.53, 0.56, 0.59, 0.62, 0.65, 0.68,127030.71, 0.74, 0.77, 0.80, 0.83, 0.86, 0.89, 0.92, 0.95, 0.98,127041.0, 1.06, 1.12, 1.18, 1.24, 1.30, 1.36, 1.42, 1.48, 1.54,127051.60, 1.66, 1.72, 1.78, 1.84, 1.90, 1.96, 2.0, 2.12, 2.25,127062.37, 2.50, 2.62, 2.75, 2.87, 3.0, 3.2, 3.4, 3.6, 3.8,127074.0, 4.3, 4.7, 4.9, 5.0, 5.5, 6.0, 6.5, 6.8, 7.0,127087.3, 7.5, 7.8, 8.0, 8.4, 8.7, 9.0, 9.4, 9.6, 9.8,1270910.012710];1271112712/**12713* Identity matrix values.12714* @property IDENTITY_MATRIX12715* @type Array12716* @protected12717* @static12718**/12719ColorMatrix.IDENTITY_MATRIX = [127201,0,0,0,0,127210,1,0,0,0,127220,0,1,0,0,127230,0,0,1,0,127240,0,0,0,112725];1272612727/**12728* The constant length of a color matrix.12729* @property LENGTH12730* @type Number12731* @protected12732* @static12733**/12734ColorMatrix.LENGTH = ColorMatrix.IDENTITY_MATRIX.length;127351273612737// public methods:12738/**12739* Resets the instance with the specified values.12740* @method setColor12741* @param {Number} brightness12742* @param {Number} contrast12743* @param {Number} saturation12744* @param {Number} hue12745* @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)12746* @chainable12747*/12748p.setColor = function(brightness,contrast,saturation,hue) {12749return this.reset().adjustColor(brightness,contrast,saturation,hue);12750};1275112752/**12753* Resets the matrix to identity values.12754* @method reset12755* @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)12756* @chainable12757*/12758p.reset = function() {12759return this.copy(ColorMatrix.IDENTITY_MATRIX);12760};1276112762/**12763* Shortcut method to adjust brightness, contrast, saturation and hue.12764* Equivalent to calling adjustHue(hue), adjustContrast(contrast),12765* adjustBrightness(brightness), adjustSaturation(saturation), in that order.12766* @method adjustColor12767* @param {Number} brightness12768* @param {Number} contrast12769* @param {Number} saturation12770* @param {Number} hue12771* @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)12772* @chainable12773**/12774p.adjustColor = function(brightness,contrast,saturation,hue) {12775this.adjustHue(hue);12776this.adjustContrast(contrast);12777this.adjustBrightness(brightness);12778return this.adjustSaturation(saturation);12779};1278012781/**12782* Adjusts the brightness of pixel color by adding the specified value to the red, green and blue channels.12783* Positive values will make the image brighter, negative values will make it darker.12784* @method adjustBrightness12785* @param {Number} value A value between -255 & 255 that will be added to the RGB channels.12786* @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)12787* @chainable12788**/12789p.adjustBrightness = function(value) {12790if (value == 0 || isNaN(value)) { return this; }12791value = this._cleanValue(value,255);12792this._multiplyMatrix([127931,0,0,0,value,127940,1,0,0,value,127950,0,1,0,value,127960,0,0,1,0,127970,0,0,0,112798]);12799return this;12800};1280112802/**12803* Adjusts the contrast of pixel color.12804* Positive values will increase contrast, negative values will decrease contrast.12805* @method adjustContrast12806* @param {Number} value A value between -100 & 100.12807* @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)12808* @chainable12809**/12810p.adjustContrast = function(value) {12811if (value == 0 || isNaN(value)) { return this; }12812value = this._cleanValue(value,100);12813var x;12814if (value<0) {12815x = 127+value/100*127;12816} else {12817x = value%1;12818if (x == 0) {12819x = ColorMatrix.DELTA_INDEX[value];12820} else {12821x = ColorMatrix.DELTA_INDEX[(value<<0)]*(1-x)+ColorMatrix.DELTA_INDEX[(value<<0)+1]*x; // use linear interpolation for more granularity.12822}12823x = x*127+127;12824}12825this._multiplyMatrix([12826x/127,0,0,0,0.5*(127-x),128270,x/127,0,0,0.5*(127-x),128280,0,x/127,0,0.5*(127-x),128290,0,0,1,0,128300,0,0,0,112831]);12832return this;12833};1283412835/**12836* Adjusts the color saturation of the pixel.12837* Positive values will increase saturation, negative values will decrease saturation (trend towards greyscale).12838* @method adjustSaturation12839* @param {Number} value A value between -100 & 100.12840* @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)12841* @chainable12842**/12843p.adjustSaturation = function(value) {12844if (value == 0 || isNaN(value)) { return this; }12845value = this._cleanValue(value,100);12846var x = 1+((value > 0) ? 3*value/100 : value/100);12847var lumR = 0.3086;12848var lumG = 0.6094;12849var lumB = 0.0820;12850this._multiplyMatrix([12851lumR*(1-x)+x,lumG*(1-x),lumB*(1-x),0,0,12852lumR*(1-x),lumG*(1-x)+x,lumB*(1-x),0,0,12853lumR*(1-x),lumG*(1-x),lumB*(1-x)+x,0,0,128540,0,0,1,0,128550,0,0,0,112856]);12857return this;12858};128591286012861/**12862* Adjusts the hue of the pixel color.12863* @method adjustHue12864* @param {Number} value A value between -180 & 180.12865* @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)12866* @chainable12867**/12868p.adjustHue = function(value) {12869if (value == 0 || isNaN(value)) { return this; }12870value = this._cleanValue(value,180)/180*Math.PI;12871var cosVal = Math.cos(value);12872var sinVal = Math.sin(value);12873var lumR = 0.213;12874var lumG = 0.715;12875var lumB = 0.072;12876this._multiplyMatrix([12877lumR+cosVal*(1-lumR)+sinVal*(-lumR),lumG+cosVal*(-lumG)+sinVal*(-lumG),lumB+cosVal*(-lumB)+sinVal*(1-lumB),0,0,12878lumR+cosVal*(-lumR)+sinVal*(0.143),lumG+cosVal*(1-lumG)+sinVal*(0.140),lumB+cosVal*(-lumB)+sinVal*(-0.283),0,0,12879lumR+cosVal*(-lumR)+sinVal*(-(1-lumR)),lumG+cosVal*(-lumG)+sinVal*(lumG),lumB+cosVal*(1-lumB)+sinVal*(lumB),0,0,128800,0,0,1,0,128810,0,0,0,112882]);12883return this;12884};1288512886/**12887* Concatenates (multiplies) the specified matrix with this one.12888* @method concat12889* @param {Array} matrix An array or ColorMatrix instance.12890* @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)12891* @chainable12892**/12893p.concat = function(matrix) {12894matrix = this._fixMatrix(matrix);12895if (matrix.length != ColorMatrix.LENGTH) { return this; }12896this._multiplyMatrix(matrix);12897return this;12898};1289912900/**12901* Returns a clone of this ColorMatrix.12902* @method clone12903* @return {ColorMatrix} A clone of this ColorMatrix.12904**/12905p.clone = function() {12906return (new ColorMatrix()).copy(this);12907};1290812909/**12910* Return a length 25 (5x5) array instance containing this matrix's values.12911* @method toArray12912* @return {Array} An array holding this matrix's values.12913**/12914p.toArray = function() {12915var arr = [];12916for (var i= 0, l=ColorMatrix.LENGTH; i<l; i++) {12917arr[i] = this[i];12918}12919return arr;12920};1292112922/**12923* Copy the specified matrix's values to this matrix.12924* @method copy12925* @param {Array} matrix An array or ColorMatrix instance.12926* @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)12927* @chainable12928**/12929p.copy = function(matrix) {12930var l = ColorMatrix.LENGTH;12931for (var i=0;i<l;i++) {12932this[i] = matrix[i];12933}12934return this;12935};1293612937/**12938* Returns a string representation of this object.12939* @method toString12940* @return {String} a string representation of the instance.12941**/12942p.toString = function() {12943return "[ColorMatrix]";12944};129451294612947// private methods:12948/**12949* @method _multiplyMatrix12950* @param {Array} matrix12951* @protected12952**/12953p._multiplyMatrix = function(matrix) {12954var i, j, k, col = [];1295512956for (i=0;i<5;i++) {12957for (j=0;j<5;j++) {12958col[j] = this[j+i*5];12959}12960for (j=0;j<5;j++) {12961var val=0;12962for (k=0;k<5;k++) {12963val += matrix[j+k*5]*col[k];12964}12965this[j+i*5] = val;12966}12967}12968};1296912970/**12971* Make sure values are within the specified range, hue has a limit of 180, brightness is 255, others are 100.12972* @method _cleanValue12973* @param {Number} value The raw number12974* @param {Number} limit The maximum that the number can be. The minimum is the limit * -1.12975* @protected12976**/12977p._cleanValue = function(value, limit) {12978return Math.min(limit,Math.max(-limit,value));12979};1298012981/**12982* Makes sure matrixes are 5x5 (25 long).12983* @method _fixMatrix12984* @param {Array} matrix12985* @protected12986**/12987p._fixMatrix = function(matrix) {12988if (matrix instanceof ColorMatrix) { matrix = matrix.toArray(); }12989if (matrix.length < ColorMatrix.LENGTH) {12990matrix = matrix.slice(0,matrix.length).concat(ColorMatrix.IDENTITY_MATRIX.slice(matrix.length,ColorMatrix.LENGTH));12991} else if (matrix.length > ColorMatrix.LENGTH) {12992matrix = matrix.slice(0,ColorMatrix.LENGTH);12993}12994return matrix;12995};129961299712998createjs.ColorMatrix = ColorMatrix;12999}());1300013001//##############################################################################13002// ColorMatrixFilter.js13003//##############################################################################1300413005this.createjs = this.createjs||{};1300613007(function() {13008"use strict";130091301013011// constructor:13012/**13013* Allows you to carry out complex color operations such as modifying saturation, brightness, or inverting. See the13014* {{#crossLink "ColorMatrix"}}{{/crossLink}} for more information on changing colors. For an easier color transform,13015* consider the {{#crossLink "ColorFilter"}}{{/crossLink}}.13016*13017* <h4>Example</h4>13018* This example creates a red circle, inverts its hue, and then saturates it to brighten it up.13019*13020* var shape = new createjs.Shape().set({x:100,y:100});13021* shape.graphics.beginFill("#ff0000").drawCircle(0,0,50);13022*13023* var matrix = new createjs.ColorMatrix().adjustHue(180).adjustSaturation(100);13024* shape.filters = [13025* new createjs.ColorMatrixFilter(matrix)13026* ];13027*13028* shape.cache(-50, -50, 100, 100);13029*13030* See {{#crossLink "Filter"}}{{/crossLink}} for an more information on applying filters.13031* @class ColorMatrixFilter13032* @constructor13033* @extends Filter13034* @param {Array | ColorMatrix} matrix A 4x5 matrix describing the color operation to perform. See also the {{#crossLink "ColorMatrix"}}{{/crossLink}}13035* class.13036**/13037function ColorMatrixFilter(matrix) {130381303913040// public properties:13041/**13042* A 4x5 matrix describing the color operation to perform. See also the {{#crossLink "ColorMatrix"}}{{/crossLink}}13043* @property matrix13044* @type Array | ColorMatrix13045**/13046this.matrix = matrix;13047}13048var p = createjs.extend(ColorMatrixFilter, createjs.Filter);1304913050// TODO: deprecated13051// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.130521305313054// public methods:13055/** docced in super class **/13056p.toString = function() {13057return "[ColorMatrixFilter]";13058};1305913060/** docced in super class **/13061p.clone = function() {13062return new ColorMatrixFilter(this.matrix);13063};1306413065// private methods:13066/** docced in super class **/13067p._applyFilter = function(imageData) {13068var data = imageData.data;13069var l = data.length;13070var r,g,b,a;13071var mtx = this.matrix;13072var m0 = mtx[0], m1 = mtx[1], m2 = mtx[2], m3 = mtx[3], m4 = mtx[4];13073var m5 = mtx[5], m6 = mtx[6], m7 = mtx[7], m8 = mtx[8], m9 = mtx[9];13074var m10 = mtx[10], m11 = mtx[11], m12 = mtx[12], m13 = mtx[13], m14 = mtx[14];13075var m15 = mtx[15], m16 = mtx[16], m17 = mtx[17], m18 = mtx[18], m19 = mtx[19];1307613077for (var i=0; i<l; i+=4) {13078r = data[i];13079g = data[i+1];13080b = data[i+2];13081a = data[i+3];13082data[i] = r*m0+g*m1+b*m2+a*m3+m4; // red13083data[i+1] = r*m5+g*m6+b*m7+a*m8+m9; // green13084data[i+2] = r*m10+g*m11+b*m12+a*m13+m14; // blue13085data[i+3] = r*m15+g*m16+b*m17+a*m18+m19; // alpha13086}13087return true;13088};130891309013091createjs.ColorMatrixFilter = createjs.promote(ColorMatrixFilter, "Filter");13092}());1309313094//##############################################################################13095// Touch.js13096//##############################################################################1309713098this.createjs = this.createjs||{};1309913100(function() {13101"use strict";131021310313104// constructor:13105/**13106* Global utility for working with multi-touch enabled devices in EaselJS. Currently supports W3C Touch API (iOS and13107* modern Android browser) and the Pointer API (IE), including ms-prefixed events in IE10, and unprefixed in IE11.13108*13109* Ensure that you {{#crossLink "Touch/disable"}}{{/crossLink}} touch when cleaning up your application. You do not have13110* to check if touch is supported to enable it, as it will fail gracefully if it is not supported.13111*13112* <h4>Example</h4>13113*13114* var stage = new createjs.Stage("canvasId");13115* createjs.Touch.enable(stage);13116*13117* <strong>Note:</strong> It is important to disable Touch on a stage that you are no longer using:13118*13119* createjs.Touch.disable(stage);13120*13121* @class Touch13122* @static13123**/13124function Touch() {13125throw "Touch cannot be instantiated";13126}131271312813129// public static methods:13130/**13131* Returns `true` if touch is supported in the current browser.13132* @method isSupported13133* @return {Boolean} Indicates whether touch is supported in the current browser.13134* @static13135**/13136Touch.isSupported = function() {13137return !!(('ontouchstart' in window) // iOS & Android13138|| (window.navigator['msPointerEnabled'] && window.navigator['msMaxTouchPoints'] > 0) // IE1013139|| (window.navigator['pointerEnabled'] && window.navigator['maxTouchPoints'] > 0)); // IE11+13140};1314113142/**13143* Enables touch interaction for the specified EaselJS {{#crossLink "Stage"}}{{/crossLink}}. Currently supports iOS13144* (and compatible browsers, such as modern Android browsers), and IE10/11. Supports both single touch and13145* multi-touch modes. Extends the EaselJS {{#crossLink "MouseEvent"}}{{/crossLink}} model, but without support for13146* double click or over/out events. See the MouseEvent {{#crossLink "MouseEvent/pointerId:property"}}{{/crossLink}}13147* for more information.13148* @method enable13149* @param {Stage} stage The {{#crossLink "Stage"}}{{/crossLink}} to enable touch on.13150* @param {Boolean} [singleTouch=false] If `true`, only a single touch will be active at a time.13151* @param {Boolean} [allowDefault=false] If `true`, then default gesture actions (ex. scrolling, zooming) will be13152* allowed when the user is interacting with the target canvas.13153* @return {Boolean} Returns `true` if touch was successfully enabled on the target stage.13154* @static13155**/13156Touch.enable = function(stage, singleTouch, allowDefault) {13157if (!stage || !stage.canvas || !Touch.isSupported()) { return false; }13158if (stage.__touch) { return true; }1315913160// inject required properties on stage:13161stage.__touch = {pointers:{}, multitouch:!singleTouch, preventDefault:!allowDefault, count:0};1316213163// note that in the future we may need to disable the standard mouse event model before adding13164// these to prevent duplicate calls. It doesn't seem to be an issue with iOS devices though.13165if ('ontouchstart' in window) { Touch._IOS_enable(stage); }13166else if (window.navigator['msPointerEnabled'] || window.navigator["pointerEnabled"]) { Touch._IE_enable(stage); }13167return true;13168};1316913170/**13171* Removes all listeners that were set up when calling `Touch.enable()` on a stage.13172* @method disable13173* @param {Stage} stage The {{#crossLink "Stage"}}{{/crossLink}} to disable touch on.13174* @static13175**/13176Touch.disable = function(stage) {13177if (!stage) { return; }13178if ('ontouchstart' in window) { Touch._IOS_disable(stage); }13179else if (window.navigator['msPointerEnabled'] || window.navigator["pointerEnabled"]) { Touch._IE_disable(stage); }1318013181delete stage.__touch;13182};131831318413185// Private static methods:13186/**13187* @method _IOS_enable13188* @protected13189* @param {Stage} stage13190* @static13191**/13192Touch._IOS_enable = function(stage) {13193var canvas = stage.canvas;13194var f = stage.__touch.f = function(e) { Touch._IOS_handleEvent(stage,e); };13195canvas.addEventListener("touchstart", f, false);13196canvas.addEventListener("touchmove", f, false);13197canvas.addEventListener("touchend", f, false);13198canvas.addEventListener("touchcancel", f, false);13199};1320013201/**13202* @method _IOS_disable13203* @protected13204* @param {Stage} stage13205* @static13206**/13207Touch._IOS_disable = function(stage) {13208var canvas = stage.canvas;13209if (!canvas) { return; }13210var f = stage.__touch.f;13211canvas.removeEventListener("touchstart", f, false);13212canvas.removeEventListener("touchmove", f, false);13213canvas.removeEventListener("touchend", f, false);13214canvas.removeEventListener("touchcancel", f, false);13215};1321613217/**13218* @method _IOS_handleEvent13219* @param {Stage} stage13220* @param {Object} e The event to handle13221* @protected13222* @static13223**/13224Touch._IOS_handleEvent = function(stage, e) {13225if (!stage) { return; }13226if (stage.__touch.preventDefault) { e.preventDefault&&e.preventDefault(); }13227var touches = e.changedTouches;13228var type = e.type;13229for (var i= 0,l=touches.length; i<l; i++) {13230var touch = touches[i];13231var id = touch.identifier;13232if (touch.target != stage.canvas) { continue; }1323313234if (type == "touchstart") {13235this._handleStart(stage, id, e, touch.pageX, touch.pageY);13236} else if (type == "touchmove") {13237this._handleMove(stage, id, e, touch.pageX, touch.pageY);13238} else if (type == "touchend" || type == "touchcancel") {13239this._handleEnd(stage, id, e);13240}13241}13242};1324313244/**13245* @method _IE_enable13246* @protected13247* @param {Stage} stage13248* @static13249**/13250Touch._IE_enable = function(stage) {13251var canvas = stage.canvas;13252var f = stage.__touch.f = function(e) { Touch._IE_handleEvent(stage,e); };1325313254if (window.navigator["pointerEnabled"] === undefined) {13255canvas.addEventListener("MSPointerDown", f, false);13256window.addEventListener("MSPointerMove", f, false);13257window.addEventListener("MSPointerUp", f, false);13258window.addEventListener("MSPointerCancel", f, false);13259if (stage.__touch.preventDefault) { canvas.style.msTouchAction = "none"; }13260} else {13261canvas.addEventListener("pointerdown", f, false);13262window.addEventListener("pointermove", f, false);13263window.addEventListener("pointerup", f, false);13264window.addEventListener("pointercancel", f, false);13265if (stage.__touch.preventDefault) { canvas.style.touchAction = "none"; }1326613267}13268stage.__touch.activeIDs = {};13269};1327013271/**13272* @method _IE_disable13273* @protected13274* @param {Stage} stage13275* @static13276**/13277Touch._IE_disable = function(stage) {13278var f = stage.__touch.f;1327913280if (window.navigator["pointerEnabled"] === undefined) {13281window.removeEventListener("MSPointerMove", f, false);13282window.removeEventListener("MSPointerUp", f, false);13283window.removeEventListener("MSPointerCancel", f, false);13284if (stage.canvas) {13285stage.canvas.removeEventListener("MSPointerDown", f, false);13286}13287} else {13288window.removeEventListener("pointermove", f, false);13289window.removeEventListener("pointerup", f, false);13290window.removeEventListener("pointercancel", f, false);13291if (stage.canvas) {13292stage.canvas.removeEventListener("pointerdown", f, false);13293}13294}13295};1329613297/**13298* @method _IE_handleEvent13299* @param {Stage} stage13300* @param {Object} e The event to handle.13301* @protected13302* @static13303**/13304Touch._IE_handleEvent = function(stage, e) {13305if (!stage) { return; }13306if (stage.__touch.preventDefault) { e.preventDefault && e.preventDefault(); }13307var type = e.type;13308var id = e.pointerId;13309var ids = stage.__touch.activeIDs;1331013311if (type == "MSPointerDown" || type == "pointerdown") {13312if (e.srcElement != stage.canvas) { return; }13313ids[id] = true;13314this._handleStart(stage, id, e, e.pageX, e.pageY);13315} else if (ids[id]) { // it's an id we're watching13316if (type == "MSPointerMove" || type == "pointermove") {13317this._handleMove(stage, id, e, e.pageX, e.pageY);13318} else if (type == "MSPointerUp" || type == "MSPointerCancel"13319|| type == "pointerup" || type == "pointercancel") {13320delete(ids[id]);13321this._handleEnd(stage, id, e);13322}13323}13324};1332513326/**13327* @method _handleStart13328* @param {Stage} stage13329* @param {String|Number} id13330* @param {Object} e13331* @param {Number} x13332* @param {Number} y13333* @protected13334**/13335Touch._handleStart = function(stage, id, e, x, y) {13336var props = stage.__touch;13337if (!props.multitouch && props.count) { return; }13338var ids = props.pointers;13339if (ids[id]) { return; }13340ids[id] = true;13341props.count++;13342stage._handlePointerDown(id, e, x, y);13343};1334413345/**13346* @method _handleMove13347* @param {Stage} stage13348* @param {String|Number} id13349* @param {Object} e13350* @param {Number} x13351* @param {Number} y13352* @protected13353**/13354Touch._handleMove = function(stage, id, e, x, y) {13355if (!stage.__touch.pointers[id]) { return; }13356stage._handlePointerMove(id, e, x, y);13357};1335813359/**13360* @method _handleEnd13361* @param {Stage} stage13362* @param {String|Number} id13363* @param {Object} e13364* @protected13365**/13366Touch._handleEnd = function(stage, id, e) {13367// TODO: cancel should be handled differently for proper UI (ex. an up would trigger a click, a cancel would more closely resemble an out).13368var props = stage.__touch;13369var ids = props.pointers;13370if (!ids[id]) { return; }13371props.count--;13372stage._handlePointerUp(id, e, true);13373delete(ids[id]);13374};133751337613377createjs.Touch = Touch;13378}());1337913380//##############################################################################13381// version.js13382//##############################################################################1338313384this.createjs = this.createjs || {};1338513386(function() {13387"use strict";1338813389/**13390* Static class holding library specific information such as the version and buildDate of13391* the library.13392* @class EaselJS13393**/13394var s = createjs.EaselJS = createjs.EaselJS || {};1339513396/**13397* The version string for this release.13398* @property version13399* @type String13400* @static13401**/13402s.version = /*=version*/"0.8.2"; // injected by build process1340313404/**13405* The build date for this release in UTC format.13406* @property buildDate13407* @type String13408* @static13409**/13410s.buildDate = /*=date*/"Thu, 26 Nov 2015 20:44:34 GMT"; // injected by build process1341113412})();1341313414