topical media & game development

talk show tell print

mobile-graphic-easel-src-easeljs-display-Bitmap.js / js



  /*
  * Bitmap
  * 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
  * restriction, including without limitation the rights to use,
  * copy, modify, merge, publish, distribute, sublicense, and/or sell
  * 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
  * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
  * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
  * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
  * OTHER DEALINGS IN THE SOFTWARE.
  */
  
  // namespace:
  this.createjs = this.createjs||{};
  
  (function() {
  
  
A Bitmap represents an Image, Canvas, or Video in the display list. A Bitmap can be instantiated using an existing HTML element, or a string. <h4>Example</h4> var bitmap = new createjs.Bitmap("imagePath.jpg"); Note: When a string path or image tag that is not yet loaded is used, the stage may need to be redrawn before it will be displayed. @class Bitmap @extends DisplayObject @constructor
parameter: {Image | HTMLCanvasElement | HTMLVideoElement | String} imageOrUri The source object or URI to an image to display. This can be either an Image, Canvas, or Video object, or a string URI to an image file to load and use. If it is a URI, a new Image object will be constructed and assigned to the .image property.

  
  var Bitmap = function(imageOrUri) {
    this.initialize(imageOrUri);
  }
  var p = Bitmap.prototype = new createjs.DisplayObject();
  
  // public properties:
          
The image to render. This can be an Image, a Canvas, or a Video. @property image @type Image | HTMLCanvasElement | HTMLVideoElement

  
          p.image = null;
          
          
Whether or not the Bitmap should be draw to the canvas at whole pixel coordinates. @property snapToPixel @type Boolean @default true

  
          p.snapToPixel = true;
  
          
Specifies an area of the source image to draw. If omitted, the whole image will be drawn. @property sourceRect @type Rectangle @default null

  
          p.sourceRect = null;
          
          // constructor:
  
          
@property DisplayObject_initialize @type Function @private

  
          p.DisplayObject_initialize = p.initialize;
  
          
Initialization method. @method initialize @protected

  
          p.initialize = function(imageOrUri) {
                  this.DisplayObject_initialize();
                  if (typeof imageOrUri == "string") {
                          this.image = new Image();
                          this.image.src = imageOrUri;
                  } else {
                          this.image = imageOrUri;
                  }
          }
          
  // public methods:
  
          
Returns true or false indicating whether the display object would be visible if drawn to a canvas. This does not account for whether it would be visible within the boundaries of the stage. NOTE: This method is mainly for internal use, though it may be useful for advanced uses. @method isVisible
returns: {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas

  
          p.isVisible = function() {
                  var hasContent = this.cacheCanvas || (this.image && (this.image.complete || this.image.getContext || this.image.readyState >= 2));
                  return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);
          }
  
          
@property DisplayObject_draw @type Function @private

  
          p.DisplayObject_draw = p.draw;
  
          
Draws the display object into the specified context ignoring it's visible, alpha, shadow, and transform. Returns true if the draw was handled (useful for overriding functionality). NOTE: This method is mainly for internal use, though it may be useful for advanced uses. @method draw
parameter: {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.
parameter: {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache. For example, used for drawing the cache (to prevent it from simply drawing an existing cache back into itself).

  
          p.draw = function(ctx, ignoreCache) {
                  if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; }
                  var rect = this.sourceRect;
                  if (rect) {
                          ctx.drawImage(this.image, rect.x, rect.y, rect.width, rect.height, 0, 0, rect.width, rect.height);
                  } else {
                          ctx.drawImage(this.image, 0, 0);
                  }
                  return true;
          }
          
          //Note, the doc sections below document using the specified APIs (from DisplayObject)  from
          //Bitmap. This is why they have no method implementations.
          
          
Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances. You should <b>not</b> cache Bitmap instances as it can degrade performance. <strong>However: If you want to use a filter on a Bitmap, you <em>MUST</em> cache it, or it will not work.</strong> To see the API for caching, please visit the DisplayObject {{#crossLink "DisplayObject/cache"}}{{/crossLink}} method. @method cache

  
          
          
Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances. You should <b>not</b> cache Bitmap instances as it can degrade performance. <strong>However: If you want to use a filter on a Bitmap, you <em>MUST</em> cache it, or it will not work.</strong> To see the API for caching, please visit the DisplayObject {{#crossLink "DisplayObject/cache"}}{{/crossLink}} method. @method updateCache

  
          
          
Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances. You should <b>not</b> cache Bitmap instances as it can degrade performance. <strong>However: If you want to use a filter on a Bitmap, you <em>MUST</em> cache it, or it will not work.</strong> To see the API for caching, please visit the DisplayObject {{#crossLink "DisplayObject/cache"}}{{/crossLink}} method. @method uncache

  
          
          
Returns a clone of the Bitmap instance. @method clone
returns: {Bitmap} a clone of the Bitmap instance.

  
          p.clone = function() {
                  var o = new Bitmap(this.image);
                  if (this.sourceRect) { o.sourceRect = this.sourceRect.clone(); }
                  this.cloneProps(o);
                  return o;
          }
          
          
Returns a string representation of this object. @method toString
returns: {String} a string representation of the instance.

  
          p.toString = function() {
                  return "[Bitmap (name="+  this.name +")]";
          }
  
  // private methods:
  
  createjs.Bitmap = Bitmap;
  }());


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.