Image and rect draw

index.html

@@ -9,6 +9,7 @@
 	<script type="text/javascript" src="source/Object2D.js"></script>
 	<script type="text/javascript" src="source/Viewport.js"></script>
 	<script type="text/javascript" src="source/Renderer.js"></script>
+	<script type="text/javascript" src="source/Image.js"></script>
 
 	<script type="text/javascript" src="source/math/Vector2.js"></script>
 	<script type="text/javascript" src="source/math/UUID.js"></script>
@@ -18,34 +19,63 @@
 		var canvas = document.createElement("canvas");
 		canvas.width = 800;
 		canvas.height = 600;
+		canvas.style.border = "1px solid #000000";
 		document.body.appendChild(canvas);
 
 		var o = new Object2D();
-		o.position.set(100, 100);
-		o.scale.set(1, 2);
+
+		var i = new Image("image.jpg");
+		i.position.set(100, 100);
+		i.scale.set(1, 2);
+		o.add(i);
+
+		//var re = new Rect();
+		//o.add(re);
 
 		var v = new Viewport();
 
+		var pressed = false;
+		var x, y;
+		var dx, dy;
+
 		var m = new EventManager();
+		m.add(canvas, "mousedown", function(event)
+		{
+			pressed = true;
+		});
+		m.add(canvas, "mouseup", function(event)
+		{
+			pressed = false;
+		});
 		m.add(canvas, "mousemove", function(event)
 		{
+			dx = event.clientX - x;
+			dy = event.clientY - y;
+			x = event.clientX;
+			y = event.clientY;
 
+			if(pressed)
+			{
+				v.position.x += dx;
+				v.position.y += dy;
+			}
+		});
+		m.add(canvas, "wheel", function(event)
+		{
+			v.scale -= event.deltaY * 0.01;
 		});
 		m.create();
 
 
-		var r = new Renderer();
-
-		var context = canvas.getContext("2d");
+		var r = new Renderer(canvas);
 
 		function loop()
 		{
-			context.setTransform(1, 0, 0, 1, 0, 0);
-			context.clearRect(0, 0, canvas.width, canvas.height);
-
-			o.rotation += 0.01;
-			o.draw(context, canvas);
+			i.rotation += 0.01;
+			//re.rotation -= 0.005;
 
+			//o.draw(context, canvas);
+			r.render(o, v)
 			requestAnimationFrame(loop);
 		}
 

source/Image.js

@@ -0,0 +1,16 @@
+"use strict";
+
+function Image(src)
+{
+	Object2D.call(this);
+
+	this.image = document.createElement("img");
+	this.image.src = src;
+}
+
+Image.prototype = Object.create(Object2D.prototype);
+
+Image.prototype.draw = function(context)
+{
+	context.drawImage(this.image, 0, 0);
+};

source/Object2D.js

@@ -99,21 +99,23 @@ Object2D.prototype.remove = function(object)
 };
 
 /**
- * Draw the object into the canvas.
- *
- * Has to be implemented by underlying classes.
- *
- * @param context Canvas 2d drawing context.
- * @param canvas The canvas DOM element where its being drawn.
+ * Update the transformation matrix of the object.
  */
-Object2D.prototype.draw = function(context, canvas)
+Object2D.prototype.updateMatrix = function(context)
 {
-	if(this.matrixNeedsUpdate)
+	if(true) //this.matrixNeedsUpdate)
 	{
 		this.matrix.compose(this.position.x, this.position.y, this.scale.x, this.scale.y, this.rotation);
 		this.matrixNeedsUpdate = false;
 	}
-	this.matrix.setContextTransform(context);
+};
 
-	context.fillRect(-20, -20, 40, 40);
-};
+/**
+ * Draw the object into the canvas.
+ *
+ * Has to be implemented by underlying classes.
+ *
+ * @param context Canvas 2d drawing context.
+ * @param canvas The canvas DOM element where its being drawn.
+ */
+Object2D.prototype.draw = function(context){};

source/Rect.js

@@ -0,0 +1,13 @@
+"use strict";
+
+function Rect(src)
+{
+	Object2D.call(this);
+}
+
+Rect.prototype = Object.create(Object2D.prototype);
+
+Rect.prototype.draw = function(context)
+{
+	context.fillRect(-20, -20, 40, 40);
+};

source/Renderer.js

@@ -10,22 +10,32 @@
 function Renderer(canvas)
 {
 	this.canvas = canvas;
+
+	this.context = canvas.getContext("2d");
 }
 
 /**
  * Render the object using the viewport into a canvas element.
  */
-Renderer.render = function(object, viewport)
+Renderer.prototype.render = function(object, viewport)
 {
-	// Update matrixes
-	this.object.traverse(function(child)
-	{
+	var context = this.context;
 
-	});
+	// Clear canvas
+	context.setTransform(1, 0, 0, 1, 0, 0);
+	context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+	// Update viewport transform matrix
+	viewport.updateMatrix();
 
 	// Render into the canvas
-	this.object.traverse(function(child)
+	object.traverse(function(child)
 	{
+		viewport.matrix.setContextTransform(context);
 
+		child.updateMatrix();
+		
+		child.matrix.tranformContext(context);
+		child.draw(context);
 	});
 };

source/Viewport.js

@@ -44,14 +44,12 @@ function Viewport()
  * @param context Canvas 2d drawing context.
  * @param canvas The canvas DOM element where its being drawn.
  */
-Viewport.prototype.transform = function(context, canvas)
+Viewport.prototype.updateMatrix = function(context, canvas)
 {
-	if(this.matrixNeedsUpdate)
+	if(true) //this.matrixNeedsUpdate)
 	{
 		this.matrix.compose(this.position.x, this.position.y, this.scale, this.scale, this.rotation);
 		this.matrixNeedsUpdate = false;
 	}
-
-	this.matrix.setContextTransform(context);
 };
 

source/math/Matrix.js

@@ -137,3 +137,11 @@ Matrix.prototype.setContextTransform = function(context)
 {
 	context.setTransform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]);
 };
+
+/**
+ * Transform on top of the current context transformation.
+ */
+Matrix.prototype.tranformContext = function(context)
+{
+	context.transform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]);
+};