DisplayObject Demo

Source and example for the JS DisplayObject

by soulwire

HTML

<canvas id="canvas" width="500" height="500"></canvas>

CSS

#canvas {
    border: 1px solid #ccc;
}

JavaScript

function empty() {}
function extend(subClass, baseClass) {
    empty.prototype = baseClass.prototype;
    subClass.prototype = new empty();
    subClass.prototype.constructor = subClass;
    subClass.prototype._super = baseClass.prototype;
}


/**
 * @class A base display object for hierarchical canvas drawing.
 * @author [email protected] (Justin Windle)
 * @constructor
 */

DisplayObject = function() {

  //==================================================
  // PUBLIC VARIABLES
  //==================================================

  /**
   * The x position of this DisplayObject
   * @type {number}
   */
  this.x = 0.0;

  /**
   * The y position of this DisplayObject
   * @type {number}
   */
  this.y = 0.0;

  /**
   * The opacity DisplayObject
   * @type {number}
   */
  this.alpha = 1.0;

  /**
   * The x skew of this DisplayObject
   * @type {number}
   */
  this.skewX = 0.0;

  /**
   * The y skew of this DisplayObject
   * @type {number}
   */
  this.skewY = 0.0;

  /**
   * The x scale of this DisplayObject
   * @type {number}
   */
  this.scaleX = 1.0;

  /**
   * The y scale of this DisplayObject
   * @type {number}
   */
  this.scaleY = 1.0;

  /**
   * The x origin of this DisplayObject
   * @type {number}
   */
  this.originX = 0.0;

  /**
   * The y origin of this DisplayObject
   * @type {number}
   */
  this.originY = 0.0;

  /**
   * The rotation of this DisplayObject
   * @type {number}
   */
  this.rotation = 0.0;

  /**
   * The parent of this DisplayObject
   * @type {goog.zg.display.DisplayObject}
   */
  this.parent = null;

  /**
   * Whether or not this item (and it's children) will be rendered.
   * @type {boolean}
   */
  this.visible = true;

  /**
   * If true, translations will snap to the nearest sub pixel. This can make
   * sprites clearer, though
   * @type {boolean}
   */
  this.pixelSnapping = false;

  /**
   * The children of this DisplayObject
   * @type {Array.<goog.zg.display.DisplayObject>}
   */
  this.children =...