Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

fixed translated positions... now it actually works :)

  • Loading branch information...
commit 2766a7d60e1c5ca6a32558b227dda15776bc5aba 1 parent fd4ff2b
@dkln authored
View
21 demos/demo.coffee
@@ -66,10 +66,31 @@ run = ->
Tween.kill logo
Tween.to logo, 500, { x: stage.mouseX, y: stage.mouseY }
+ moreShapes = new Sprite()
+ moreShapes.x = 0
+ moreShapes.y = 0
+
+ moreShape1 = new Shape()
+ moreShape1.id = "moreShape1"
+ moreShape1.fillStyle 'rgba(0, 255, 0, 1)'
+ moreShape1.fillRect 0, 0, 50, 50
+
+ moreShape2 = new Shape()
+ moreShape2.x = 10
+ moreShape2.y = 10
+ moreShape2.fillStyle 'rgba(0, 255, 255, 1)'
+ moreShape2.fillRect 0, 0, 50, 50
+
stage.addChild someShape
stage.addChild otherShape
stage.addChild mouseShape
stage.addChild text
+ stage.addChild moreShapes
+
+ moreShapes.addChild moreShape1
+ moreShapes.addChild moreShape2
+
+ Tween.to moreShapes, 5000, { x: 500, y: 10, rotation: 45 }
# load an external bitmap
StackedLoader.add 'logo', 'bitmap', 'logo.png'
View
22 demos/demo.js
@@ -2,7 +2,7 @@
var run;
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
run = function() {
- var logo, mouseShape, otherShape, renderer, someShape, stage, text;
+ var logo, moreShape1, moreShape2, moreShapes, mouseShape, otherShape, renderer, someShape, stage, text;
stage = new Stage('test_canvas');
logo = null;
someShape = new Shape();
@@ -67,10 +67,30 @@
});
}
}, this);
+ moreShapes = new Sprite();
+ moreShapes.x = 0;
+ moreShapes.y = 0;
+ moreShape1 = new Shape();
+ moreShape1.id = "moreShape1";
+ moreShape1.fillStyle('rgba(0, 255, 0, 1)');
+ moreShape1.fillRect(0, 0, 50, 50);
+ moreShape2 = new Shape();
+ moreShape2.x = 10;
+ moreShape2.y = 10;
+ moreShape2.fillStyle('rgba(0, 255, 255, 1)');
+ moreShape2.fillRect(0, 0, 50, 50);
stage.addChild(someShape);
stage.addChild(otherShape);
stage.addChild(mouseShape);
stage.addChild(text);
+ stage.addChild(moreShapes);
+ moreShapes.addChild(moreShape1);
+ moreShapes.addChild(moreShape2);
+ Tween.to(moreShapes, 5000, {
+ x: 500,
+ y: 10,
+ rotation: 45
+ });
StackedLoader.add('logo', 'bitmap', 'logo.png');
StackedLoader.load(function() {
logo = StackedLoader.get('logo');
View
213 lib/canvas_library.js
@@ -1,4 +1,4 @@
-var Utils;
+var Utils, extend, include;
Utils = (function() {
function Utils() {}
Utils.hex2rgba = function(hex) {
@@ -25,11 +25,79 @@ Utils = (function() {
};
return Utils;
})();
+extend = function(obj, mixin) {
+ var method, name, _results;
+ _results = [];
+ for (name in mixin) {
+ method = mixin[name];
+ _results.push(obj[name] = method);
+ }
+ return _results;
+};
+include = function(klass, mixin) {
+ return extend(klass.prototype, mixin);
+};
+var DisplayContainerMixin;
+DisplayContainerMixin = (function() {
+ function DisplayContainerMixin() {}
+ DisplayContainerMixin.addChild = function(child) {
+ if (child.parent) {
+ child.parent.removeChild(child);
+ }
+ if (this.stage) {
+ this.stage.childrenChanged = true;
+ }
+ this.determineAncestors(child);
+ child.stage = this.stage;
+ child.translatedObjects = [child].concat(child.ancestors).reverse();
+ this.children.push(child);
+ return this;
+ };
+ DisplayContainerMixin.removeChild = function(child) {
+ var i;
+ i = this.children.indexOf(child);
+ if (i === -1) {
+ throw 'Child object not found in DisplayList';
+ } else {
+ if (this.stage) {
+ this.stage.childrenChanged = true;
+ }
+ this.children.splice(i, 1);
+ child.parent = null;
+ child.ancestors = null;
+ child.translatedObjects = null;
+ return this;
+ }
+ };
+ DisplayContainerMixin.determineAncestors = function(child) {
+ var theParent;
+ child.parent = this;
+ child.ancestors = [];
+ theParent = this;
+ while (theParent) {
+ child.ancestors.push(theParent);
+ theParent = theParent.parent;
+ }
+ return true;
+ };
+ return DisplayContainerMixin;
+})();
+var DisplayContainer;
+DisplayContainer = (function() {
+ function DisplayContainer() {}
+ DisplayContainer.prototype.draw = function(context, drawHitarea) {
+ return true;
+ };
+ return DisplayContainer;
+})();
+include(DisplayContainer, DisplayContainerMixin);
var Stage;
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
Stage = (function() {
function Stage(canvasId) {
this.canvasId = canvasId;
+ this.stage = this;
+ this.children = [];
this.scaleX = 1;
this.scaleY = 1;
this.rotation = 0;
@@ -62,28 +130,6 @@ Stage = (function() {
canvas.height = this.canvas.height;
return canvas;
};
- Stage.prototype.addChild = function(child) {
- if (child.parent) {
- child.parent.removeChild(child);
- }
- this.childrenChanged = true;
- child.parent = this;
- child.stage = this;
- this.children.push(child);
- return this;
- };
- Stage.prototype.removeChild = function(child) {
- var i;
- if (i = this.children.indexOf(child) === -1) {
- throw 'Child object not found on stage';
- } else {
- child.stage = null;
- child.parent = null;
- this.childrenChanged = true;
- this.children.splice(i, 1);
- }
- return this;
- };
Stage.prototype.render = function(clear) {
this.setupMouse();
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -95,10 +141,15 @@ Stage = (function() {
return this.handleMouseEventsOfAllChildren();
};
Stage.prototype.setupContext = function(context, child) {
+ var object, _i, _len, _ref;
context.globalAlpha = child.calculatedAlpha;
- context.translate(parseInt(child.calculatedX), parseInt(child.calculatedY));
- context.rotate(Utils.angleToRadians(child.calculatedRotation));
- context.scale(child.calculatedScaleX, child.calculatedScaleY);
+ _ref = child.translatedObjects;
+ for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+ object = _ref[_i];
+ context.translate(object.x, object.y);
+ context.rotate(Utils.angleToRadians(object.rotation));
+ context.scale(object.scaleX, object.scaleY);
+ }
if (child.shadow) {
context.shadowBlur = child.shadowBlur;
context.shadowColor = child.shadowColor;
@@ -234,16 +285,20 @@ Stage = (function() {
Stage.prototype.handleWindowResize = function() {
return this.canvasOffsetPosition = Utils.offsetPosition(this.canvas);
};
+ Stage.prototype.positionChanged = function() {
+ return false;
+ };
return Stage;
})();
+include(Stage, DisplayContainerMixin);
var DisplayObject;
DisplayObject = (function() {
function DisplayObject() {
this.id = '';
this.x = 0;
this.y = 0;
- this.oldX = 0;
- this.oldY = 0;
+ this.oldX = null;
+ this.oldY = null;
this.calculatedX = 0;
this.calculatedY = 0;
this.width = 0;
@@ -253,16 +308,16 @@ DisplayObject = (function() {
this.calculatedAlpha = 1;
this.scaleX = 1;
this.scaleY = 1;
- this.oldScaleX = 1;
- this.oldScaleY = 1;
+ this.oldScaleX = null;
+ this.oldScaleY = null;
this.calculatedScaleX = 1;
this.calculatedScaleY = 1;
this.rotation = 0;
- this.oldRotation = 0;
+ this.oldRotation = null;
this.calculatedRotation = 0;
this.enabled = true;
this.visible = true;
- this.oldVisible = true;
+ this.oldVisible = null;
this.calculatedVisibility = true;
this.mouseEnabled = false;
this.mouseDown = false;
@@ -283,6 +338,8 @@ DisplayObject = (function() {
this.lastObjectUnderCursor = null;
this.stage = null;
this.parent = null;
+ this.ancestors = null;
+ this.translatedObjects = null;
this.childrenChanged = false;
}
DisplayObject.prototype.draw = function(context, drawHitarea) {};
@@ -291,92 +348,48 @@ DisplayObject = (function() {
if (this.positionChanged()) {
this.oldX = this.x;
this.oldY = this.y;
- this.oldRotation = this.rotation;
- this.oldScaleX = this.scaleX;
- this.oldScaleY = this.scaleY;
this.oldVisible = this.visible;
this.oldAlpha = this.alpha;
newVars = this.getInheritedTranslatedVars();
this.calculatedX = newVars[0];
this.calculatedY = newVars[1];
- this.calculatedRotation = newVars[2];
- this.calculatedScaleX = newVars[3];
- this.calculatedScaleY = newVars[4];
- this.calculatedVisibility = newVars[5];
- return this.calculatedAlpha = newVars[6];
+ this.calculatedVisibility = newVars[2];
+ return this.calculatedAlpha = newVars[3];
}
};
DisplayObject.prototype.getInheritedTranslatedVars = function() {
- var theParent, translatedAlpha, translatedRotation, translatedScaleX, translatedScaleY, translatedVisibility, translatedX, translatedY;
+ var theParent, translatedAlpha, translatedVisibility, translatedX, translatedY;
theParent = this;
translatedX = 0;
translatedY = 0;
- translatedRotation = 0;
- translatedScaleX = 1;
- translatedScaleY = 1;
translatedVisibility = true;
translatedAlpha = 1;
- while (!(theParent === null || theParent === this.stage)) {
+ while (theParent) {
translatedX += theParent.x;
translatedY += theParent.y;
- translatedRotation += theParent.rotation;
- translatedScaleX *= theParent.scaleX;
- translatedScaleY *= theParent.scaleY;
if (!theParent.visible) {
translatedVisibility = false;
}
translatedAlpha *= theParent.alpha;
theParent = theParent.parent;
}
- return [translatedX, translatedY, translatedRotation, translatedScaleX, translatedScaleY, translatedVisibility, translatedAlpha];
+ return [translatedX, translatedY, translatedVisibility, translatedAlpha];
};
DisplayObject.prototype.positionChanged = function() {
- return this.x !== this.oldX || this.y !== this.oldY || this.rotation !== this.oldRotation || this.scaleX !== this.oldScaleX || this.scaleY !== this.oldScaleY || this.visible !== this.oldVisible || this.alpha !== this.oldAlpha;
- };
- return DisplayObject;
-})();
-var DisplayContainer;
-var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
- for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
- function ctor() { this.constructor = child; }
- ctor.prototype = parent.prototype;
- child.prototype = new ctor;
- child.__super__ = parent.prototype;
- return child;
-};
-DisplayContainer = (function() {
- __extends(DisplayContainer, DisplayObject);
- function DisplayContainer() {
- this.children = [];
- DisplayContainer.__super__.constructor.call(this);
- }
- DisplayContainer.prototype.addChild = function(child) {
- if (child.parent) {
- child.parent.removeChild(child);
- }
- if (this.stage) {
- this.stage.childrenChanged = true;
- }
- child.parent = this;
- child.stage = this.stage;
- this.children.push(child);
- return this;
+ return this.x !== this.oldX || this.y !== this.oldY || this.rotation !== this.oldRotation || this.scaleX !== this.oldScaleX || this.scaleY !== this.oldScaleY || this.visible !== this.old || this.ancestorsPositionChanged();
};
- DisplayContainer.prototype.removeChild = function(child) {
- var i;
- i = this.children.indexOf(child);
- if (i === -1) {
- throw 'Child object not found in DisplayList';
- } else {
- if (this.stage) {
- this.stage.childrenChanged = true;
+ DisplayObject.prototype.ancestorsPositionChanged = function() {
+ var ancestor, _i, _len, _ref;
+ _ref = this.ancestors;
+ for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+ ancestor = _ref[_i];
+ if (ancestor.positionChanged()) {
+ return true;
}
- this.children.splice(i, 1);
- return this;
}
+ return false;
};
- DisplayContainer.prototype.draw = function(context, drawHitarea) {};
- return DisplayContainer;
+ return DisplayObject;
})();
var Shape;
var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
@@ -532,6 +545,24 @@ Shape = (function() {
};
return Shape;
})();
+var Sprite;
+var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
+ for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
+ function ctor() { this.constructor = child; }
+ ctor.prototype = parent.prototype;
+ child.prototype = new ctor;
+ child.__super__ = parent.prototype;
+ return child;
+};
+Sprite = (function() {
+ __extends(Sprite, Shape);
+ function Sprite() {
+ Sprite.__super__.constructor.call(this);
+ this.children = [];
+ }
+ return Sprite;
+})();
+include(Sprite, DisplayContainerMixin);
var Bitmap;
var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
View
4 make
@@ -1,9 +1,11 @@
#!/bin/sh
coffee -b -p --compile src/utils.coffee > lib/canvas_library.js
+coffee -b -p --compile src/display_container_mixin.coffee >> lib/canvas_library.js
+coffee -b -p --compile src/display_container.coffee >> lib/canvas_library.js
coffee -b -p --compile src/stage.coffee >> lib/canvas_library.js
coffee -b -p --compile src/display_object.coffee >> lib/canvas_library.js
-coffee -b -p --compile src/display_container.coffee >> lib/canvas_library.js
coffee -b -p --compile src/shape.coffee >> lib/canvas_library.js
+coffee -b -p --compile src/sprite.coffee >> lib/canvas_library.js
coffee -b -p --compile src/bitmap.coffee >> lib/canvas_library.js
coffee -b -p --compile src/text_field.coffee >> lib/canvas_library.js
coffee -b -p --compile src/pixel_sprite.coffee >> lib/canvas_library.js
View
30 src/display_container.coffee
@@ -1,27 +1,5 @@
-class DisplayContainer extends DisplayObject
- constructor: ->
- @children = []
- super()
-
- addChild: (child) ->
- child.parent.removeChild(child) if child.parent
-
- @stage.childrenChanged = true if @stage
-
- child.parent = this
- child.stage = @stage
- @children.push child
- this
-
- removeChild: (child) ->
- i = @children.indexOf(child)
-
- if i == -1
- throw 'Child object not found in DisplayList'
- else
- @stage.childrenChanged = true if @stage
- @children.splice i, 1
- this
-
+class DisplayContainer
draw: (context, drawHitarea) ->
- # do nothing
+ true
+
+include DisplayContainer, DisplayContainerMixin
View
35 src/display_container_mixin.coffee
@@ -0,0 +1,35 @@
+class DisplayContainerMixin
+ @addChild: (child) ->
+ child.parent.removeChild(child) if child.parent
+
+ @stage.childrenChanged = true if @stage
+ @determineAncestors child
+ child.stage = @stage
+ child.translatedObjects = [child].concat(child.ancestors).reverse()
+ @children.push child
+ this
+
+ @removeChild: (child) ->
+ i = @children.indexOf(child)
+
+ if i == -1
+ throw 'Child object not found in DisplayList'
+ else
+ @stage.childrenChanged = true if @stage
+ @children.splice i, 1
+ child.parent = null
+ child.ancestors = null
+ child.translatedObjects = null
+ this
+
+ @determineAncestors: (child) ->
+ child.parent = this
+ child.ancestors = []
+
+ theParent = this
+
+ while theParent
+ child.ancestors.push theParent
+ theParent = theParent.parent
+
+ true
View
41 src/display_object.coffee
@@ -4,8 +4,8 @@ class DisplayObject
@x = 0
@y = 0
- @oldX = 0
- @oldY = 0
+ @oldX = null
+ @oldY = null
@calculatedX = 0
@calculatedY = 0
@@ -18,19 +18,19 @@ class DisplayObject
@scaleX = 1
@scaleY = 1
- @oldScaleX = 1
- @oldScaleY = 1
+ @oldScaleX = null
+ @oldScaleY = null
@calculatedScaleX = 1
@calculatedScaleY = 1
@rotation = 0
- @oldRotation = 0
+ @oldRotation = null
@calculatedRotation = 0
@enabled = true
@visible = true
- @oldVisible = true
+ @oldVisible = null
@calculatedVisibility = true
@mouseEnabled = false
@@ -55,6 +55,8 @@ class DisplayObject
@lastObjectUnderCursor = null
@stage = null
@parent = null
+ @ancestors = null
+ @translatedObjects = null
@childrenChanged = false
draw: (context, drawHitarea) ->
@@ -64,9 +66,6 @@ class DisplayObject
if @positionChanged()
@oldX = @x
@oldY = @y
- @oldRotation = @rotation
- @oldScaleX = @scaleX
- @oldScaleY = @scaleY
@oldVisible = @visible
@oldAlpha = @alpha
@@ -74,34 +73,30 @@ class DisplayObject
@calculatedX = newVars[0]
@calculatedY = newVars[1]
- @calculatedRotation = newVars[2]
- @calculatedScaleX = newVars[3]
- @calculatedScaleY = newVars[4]
- @calculatedVisibility = newVars[5]
- @calculatedAlpha = newVars[6]
+ @calculatedVisibility = newVars[2]
+ @calculatedAlpha = newVars[3]
getInheritedTranslatedVars: ->
theParent = this
translatedX = 0
translatedY = 0
- translatedRotation = 0
- translatedScaleX = 1
- translatedScaleY = 1
translatedVisibility = true
translatedAlpha = 1
- while !(theParent == null || theParent == @stage)
+ while theParent
translatedX += theParent.x
translatedY += theParent.y
- translatedRotation += theParent.rotation
- translatedScaleX *= theParent.scaleX
- translatedScaleY *= theParent.scaleY
translatedVisibility = false if !theParent.visible
translatedAlpha *= theParent.alpha
theParent = theParent.parent
- [translatedX, translatedY, translatedRotation, translatedScaleX, translatedScaleY, translatedVisibility, translatedAlpha]
+ [translatedX, translatedY, translatedVisibility, translatedAlpha]
positionChanged: ->
- @x != @oldX || @y != @oldY || @rotation != @oldRotation || @scaleX != @oldScaleX || @scaleY != @oldScaleY || @visible != @oldVisible || @alpha != @oldAlpha
+ @x != @oldX || @y != @oldY || @rotation != @oldRotation || @scaleX != @oldScaleX || @scaleY != @oldScaleY || @visible != @old || @ancestorsPositionChanged()
+
+ ancestorsPositionChanged: ->
+ for ancestor in @ancestors
+ return true if ancestor.positionChanged()
+ false
View
6 src/sprite.coffee
@@ -0,0 +1,6 @@
+class Sprite extends Shape
+ constructor: ->
+ super()
+ @children = []
+
+include Sprite, DisplayContainerMixin
View
35 src/stage.coffee
@@ -1,5 +1,7 @@
class Stage
constructor: (@canvasId) ->
+ @stage = this
+ @children = []
@scaleX = 1
@scaleY = 1
@rotation = 0
@@ -30,26 +32,6 @@ class Stage
canvas.height = @canvas.height
canvas
- addChild: (child) ->
- child.parent.removeChild(child) if child.parent
-
- @childrenChanged = true
- child.parent = this
- child.stage = this
- @children.push child
- this
-
- removeChild: (child) ->
- if i = @children.indexOf(child) == -1
- throw 'Child object not found on stage'
- else
- child.stage = null
- child.parent = null
- @childrenChanged = true
- @children.splice(i, 1)
-
- this
-
render: (clear) ->
@setupMouse()
@context.clearRect 0, 0, @canvas.width, @canvas.height
@@ -63,9 +45,11 @@ class Stage
setupContext: (context, child) ->
context.globalAlpha = child.calculatedAlpha
- context.translate parseInt(child.calculatedX), parseInt(child.calculatedY)
- context.rotate Utils.angleToRadians(child.calculatedRotation)
- context.scale child.calculatedScaleX, child.calculatedScaleY
+
+ for object in child.translatedObjects
+ context.translate object.x, object.y
+ context.rotate Utils.angleToRadians(object.rotation)
+ context.scale object.scaleX, object.scaleY
if child.shadow
context.shadowBlur = child.shadowBlur
@@ -181,3 +165,8 @@ class Stage
handleWindowResize: ->
@canvasOffsetPosition = Utils.offsetPosition(@canvas)
+
+ positionChanged: ->
+ false
+
+include Stage, DisplayContainerMixin
View
7 src/utils.coffee
@@ -19,3 +19,10 @@ class Utils
obj = obj.offsetParent
[left, top]
+
+extend = (obj, mixin) ->
+ for name, method of mixin
+ obj[name] = method
+
+include = (klass, mixin) ->
+ extend klass.prototype, mixin
Please sign in to comment.
Something went wrong with that request. Please try again.