diff --git a/src/easeljs/display/DisplayObject.js b/src/easeljs/display/DisplayObject.js index 190bbd6e2..c8b1cca70 100644 --- a/src/easeljs/display/DisplayObject.js +++ b/src/easeljs/display/DisplayObject.js @@ -3,7 +3,7 @@ * Visit http://createjs.com/ for documentation, updates and examples. * * Copyright (c) 2010 gskinner.com, inc. -* +* * Permission is hereby granted, free of charge, to any person * obtaining a copy of this software and associated documentation * files (the "Software"), to deal in the Software without @@ -12,10 +12,10 @@ * copies of the Software, and to permit persons to whom the * Software is furnished to do so, subject to the following * conditions: -* +* * The above copyright notice and this permission notice shall be * included in all copies or substantial portions of the Software. -* +* * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND @@ -374,7 +374,7 @@ this.createjs = this.createjs||{}; * the hit test object were a child of this display object and relative to its regX/Y). The hitArea will be tested * using only its own `alpha` value regardless of the alpha value on the target display object, or the target's * ancestors (parents). - * + * * If set on a {{#crossLink "Container"}}{{/crossLink}}, children of the Container will not receive mouse events. * This is similar to setting {{#crossLink "mouseChildren"}}{{/crossLink}} to false. * @@ -537,7 +537,7 @@ this.createjs = this.createjs||{}; // events: /** - * Dispatched when the user presses their left mouse button over the display object. See the + * Dispatched when the user presses their left mouse button over the display object. See the * {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties. * @event mousedown * @since 0.6.0 @@ -558,7 +558,7 @@ this.createjs = this.createjs||{}; */ /** - * Dispatched when the user's mouse enters this display object. This event must be enabled using + * Dispatched when the user's mouse enters this display object. This event must be enabled using * {{#crossLink "Stage/enableMouseOver"}}{{/crossLink}}. See also {{#crossLink "DisplayObject/rollover:event"}}{{/crossLink}}. * See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties. * @event mouseover @@ -566,7 +566,7 @@ this.createjs = this.createjs||{}; */ /** - * Dispatched when the user's mouse leaves this display object. This event must be enabled using + * Dispatched when the user's mouse leaves this display object. This event must be enabled using * {{#crossLink "Stage/enableMouseOver"}}{{/crossLink}}. See also {{#crossLink "DisplayObject/rollout:event"}}{{/crossLink}}. * See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties. * @event mouseout @@ -577,7 +577,7 @@ this.createjs = this.createjs||{}; * This event is similar to {{#crossLink "DisplayObject/mouseover:event"}}{{/crossLink}}, with the following * differences: it does not bubble, and it considers {{#crossLink "Container"}}{{/crossLink}} instances as an * aggregate of their content. - * + * * For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over * shapeA and then directly on to shapeB. With a listener for {{#crossLink "mouseover:event"}}{{/crossLink}} on * myContainer, two events would be received, each targeting a child element:
    @@ -586,7 +586,7 @@ this.createjs = this.createjs||{}; *
* However, with a listener for "rollover" instead, only a single event is received when the mouse first enters * the aggregate myContainer content (target=myContainer). - * + * * This event must be enabled using {{#crossLink "Stage/enableMouseOver"}}{{/crossLink}}. * See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties. * @event rollover @@ -597,7 +597,7 @@ this.createjs = this.createjs||{}; * This event is similar to {{#crossLink "DisplayObject/mouseout:event"}}{{/crossLink}}, with the following * differences: it does not bubble, and it considers {{#crossLink "Container"}}{{/crossLink}} instances as an * aggregate of their content. - * + * * For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over * shapeA, then directly on to shapeB, then off both. With a listener for {{#crossLink "mouseout:event"}}{{/crossLink}} * on myContainer, two events would be received, each targeting a child element:
    @@ -606,7 +606,7 @@ this.createjs = this.createjs||{}; *
* However, with a listener for "rollout" instead, only a single event is received when the mouse leaves * the aggregate myContainer content (target=myContainer). - * + * * This event must be enabled using {{#crossLink "Stage/enableMouseOver"}}{{/crossLink}}. * See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties. * @event rollout @@ -765,18 +765,18 @@ this.createjs = this.createjs||{}; **/ p.updateContext = function(ctx) { var o=this, mask=o.mask, mtx= o._props.matrix; - + if (mask && mask.graphics && !mask.graphics.isEmpty()) { mask.getMatrix(mtx); ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty); - + mask.graphics.drawAsPath(ctx); ctx.clip(); - + mtx.invert(); ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty); } - + this.getMatrix(mtx); var tx = mtx.tx, ty = mtx.ty; if (DisplayObject._snapToPixelEnabled && o.snapToPixel) { @@ -807,7 +807,7 @@ this.createjs = this.createjs||{}; * Note that filters need to be defined before the cache is applied or you will have to call updateCache after * application. Check out the {{#crossLink "Filter"}}{{/crossLink}} class for more information. Some filters * (ex. BlurFilter) may not work as expected in conjunction with the scale param. - * + * * Usually, the resulting cacheCanvas will have the dimensions width * scale, height * scale, however some filters (ex. BlurFilter) * will add padding to the canvas dimensions. * @@ -879,7 +879,7 @@ this.createjs = this.createjs||{}; * @return {String} The image data url for the cache. **/ p.getCacheDataURL = function() { - return this.bitmapCache?this.bitmapCache.getDataURL():null; + return this.bitmapCache?this.bitmapCache.getCacheDataURL():null; }; /** @@ -899,7 +899,7 @@ this.createjs = this.createjs||{}; * @method localToGlobal * @param {Number} x The x position in the source display object to transform. * @param {Number} y The y position in the source display object to transform. - * @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned. + * @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned. * @return {Point} A Point instance with x and y properties correlating to the transformed coordinates * on the stage. **/ @@ -924,7 +924,7 @@ this.createjs = this.createjs||{}; * @method globalToLocal * @param {Number} x The x position on the stage to transform. * @param {Number} y The y position on the stage to transform. - * @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned. + * @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned. * @return {Point} A Point instance with x and y properties correlating to the transformed position in the * display object's coordinate space. **/ @@ -945,7 +945,7 @@ this.createjs = this.createjs||{}; * @param {Number} x The x position in the source display object to transform. * @param {Number} y The y position on the source display object to transform. * @param {DisplayObject} target The target display object to which the coordinates will be transformed. - * @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned. + * @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned. * @return {Point} Returns a Point instance with x and y properties correlating to the transformed position * in the target's coordinate space. **/ @@ -1028,10 +1028,10 @@ this.createjs = this.createjs||{}; **/ p.getConcatenatedDisplayProps = function(props) { props = props ? props.identity() : new createjs.DisplayProps(); - var o = this, mtx = o.getMatrix(props.matrix); + var o = this, mtx = o.getMatrix(props.matrix); do { props.prepend(o.visible, o.alpha, o.shadow, o.compositeOperation); - + // 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. // this could be simplified (ie. just done as part of the prepend above) if we switched to using a pool. if (o != this) { mtx.prependMatrix(o.getMatrix(o._props.matrix)); } @@ -1089,11 +1089,11 @@ this.createjs = this.createjs||{}; /** * Returns a rectangle representing this object's bounds in its local coordinate system (ie. with no transformation). * Objects that have been cached will return the bounds of the cache. - * - * Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use + * + * Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use * {{#crossLink "DisplayObject/setBounds"}}{{/crossLink}} so that they are included when calculating Container * bounds. - * + * * * *
All * All display objects support setting bounds manually using setBounds(). Likewise, display objects that @@ -1122,22 +1122,22 @@ this.createjs = this.createjs||{}; * to (x=0,y=0). *
- * + * * Bounds can be expensive to calculate for some objects (ex. text, or containers with many children), and * are recalculated each time you call getBounds(). You can prevent recalculation on static objects by setting the * bounds explicitly: - * + * * var bounds = obj.getBounds(); * obj.setBounds(bounds.x, bounds.y, bounds.width, bounds.height); * // getBounds will now use the set values, instead of recalculating - * + * * To reduce memory impact, the returned Rectangle instance may be reused internally; clone the instance or copy its * values if you need to retain it. - * + * * var myBounds = obj.getBounds().clone(); * // OR: * myRect.copy(obj.getBounds()); - * + * * @method getBounds * @return {Rectangle} A Rectangle instance representing the bounds, or null if bounds are not available for this * object. @@ -1154,14 +1154,14 @@ this.createjs = this.createjs||{}; /** * Returns a rectangle representing this object's bounds in its parent's coordinate system (ie. with transformations applied). * Objects that have been cached will return the transformed bounds of the cache. - * - * Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use + * + * Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use * {{#crossLink "DisplayObject/setBounds"}}{{/crossLink}} so that they are included when calculating Container * bounds. - * + * * To reduce memory impact, the returned Rectangle instance may be reused internally; clone the instance or copy its * values if you need to retain it. - * + * * Container instances calculate aggregate bounds for all children that return bounds via getBounds. * @method getTransformedBounds * @return {Rectangle} A Rectangle instance representing the bounds, or null if bounds are not available for this object. @@ -1174,7 +1174,7 @@ this.createjs = this.createjs||{}; * Allows you to manually specify the bounds of an object that either cannot calculate their own bounds (ex. Shape & * Text) for future reference, or so the object can be included in Container bounds. Manually set bounds will always * override calculated bounds. - * + * * The bounds should be specified in the object's local (untransformed) coordinates. For example, a Shape instance * with a 25px radius circle centered at 0,0 would have bounds of (-25, -25, 50, 50). * @method setBounds @@ -1327,14 +1327,14 @@ this.createjs = this.createjs||{}; if (!bounds) { return bounds; } var x = bounds.x, y = bounds.y, width = bounds.width, height = bounds.height, mtx = this._props.matrix; mtx = ignoreTransform ? mtx.identity() : this.getMatrix(mtx); - + if (x || y) { mtx.appendTransform(0,0,1,1,0,0,0,-x,-y); } // TODO: simplify this. if (matrix) { mtx.prependMatrix(matrix); } - + var x_a = width*mtx.a, x_b = width*mtx.b; var y_c = height*mtx.c, y_d = height*mtx.d; var tx = mtx.tx, ty = mtx.ty; - + var minX = tx, maxX = tx, minY = ty, maxY = ty; if ((x = x_a + tx) < minX) { minX = x; } else if (x > maxX) { maxX = x; } diff --git a/src/easeljs/utils/SpriteSheetBuilder.js b/src/easeljs/utils/SpriteSheetBuilder.js index 768cbf03d..bb1300467 100644 --- a/src/easeljs/utils/SpriteSheetBuilder.js +++ b/src/easeljs/utils/SpriteSheetBuilder.js @@ -57,7 +57,7 @@ this.createjs = this.createjs||{}; **/ function SpriteSheetBuilder(framerate) { this.EventDispatcher_constructor(); - + // public properties: /** * The maximum width for the images (not individual frames) in the generated SpriteSheet. It is recommended to @@ -68,7 +68,7 @@ this.createjs = this.createjs||{}; * @default 2048 */ this.maxWidth = 2048; - + /** * The maximum height for the images (not individual frames) in the generated SpriteSheet. It is recommended to * use a power of 2 for this value (ex. 1024, 2048, 4096). If the frames cannot all fit within the max @@ -78,14 +78,14 @@ this.createjs = this.createjs||{}; * @default 2048 **/ this.maxHeight = 2048; - + /** * The SpriteSheet that was generated. This will be null before a build is completed successfully. * @property spriteSheet * @type SpriteSheet **/ this.spriteSheet = null; - + /** * The scale to apply when drawing all frames to the SpriteSheet. This is multiplied against any scale specified * in the addFrame call. This can be used, for example, to generate a SpriteSheet at run time that is tailored @@ -95,7 +95,7 @@ this.createjs = this.createjs||{}; * @default 1 **/ this.scale = 1; - + /** * The padding to use between frames. This is helpful to preserve antialiasing on drawn vector content. * @property padding @@ -103,7 +103,7 @@ this.createjs = this.createjs||{}; * @default 1 **/ this.padding = 1; - + /** * A number from 0.01 to 0.99 that indicates what percentage of time the builder can use. This can be * thought of as the number of seconds per second the builder will use. For example, with a timeSlice value of 0.3, @@ -114,7 +114,7 @@ this.createjs = this.createjs||{}; * @default 0.3 **/ this.timeSlice = 0.3; - + /** * A value between 0 and 1 that indicates the progress of a build, or -1 if a build has not * been initiated. @@ -134,8 +134,8 @@ this.createjs = this.createjs||{}; * @default 0 */ this.framerate = framerate || 0; - - + + // private properties: /** * @property _frames @@ -143,42 +143,42 @@ this.createjs = this.createjs||{}; * @type Array **/ this._frames = []; - + /** * @property _animations * @protected * @type Array **/ this._animations = {}; - + /** * @property _data * @protected * @type Array **/ this._data = null; - + /** * @property _nextFrameIndex * @protected * @type Number **/ this._nextFrameIndex = 0; - + /** * @property _index * @protected * @type Number **/ this._index = 0; - + /** * @property _timerID * @protected * @type Number **/ this._timerID = null; - + /** * @property _scale * @protected @@ -412,7 +412,7 @@ this.createjs = this.createjs||{}; } } }; - + /** * @method _setupMovieClipFrame * @protected @@ -532,6 +532,12 @@ this.createjs = this.createjs||{}; ctx.scale(sc,sc); frame.source.draw(ctx); // display object will draw itself. ctx.restore(); + + //now replace canvas with simple image. Frames from it draws much faster + var img = new Image(); + img.src = canvas.toDataURL(); + this._data.images[frame.img] = img; + return (++this._index) < this._frames.length; };