plotting points on an image of an art gallery

2 files changed, 34 insertions, 2 deletions

diff --git a/public/assets/javascripts/mx/primitives/mx.grid.js b/public/assets/javascripts/mx/primitives/mx.grid.js
index 7a40144..a765c89 100644
--- a/public/assets/javascripts/mx/primitives/mx.grid.js
+++ b/public/assets/javascripts/mx/primitives/mx.grid.js
@@ -34,8 +34,13 @@ MX.Grid = MX.Object3D.extend({
 		this.draw(ctx)
   },
   
-  draw: function(ctx){
+  draw: function(ctx, recenter){
     ctx = ctx || this.ctx
+
+    if (recenter) {
+      ctx.save()
+      ctx.translate( -grid.width/2, -grid.height/2 )
+    }
     
     var cells = this.ops.cells,
         space = this.ops.space,
@@ -53,6 +58,11 @@ MX.Grid = MX.Object3D.extend({
     }
     ctx.closePath()
     ctx.stroke()
+
+    if (recenter) {
+      ctx.restore()
+    }
+
   },
 
 })
diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js
index b8557bf..ca79065 100644
--- a/public/assets/javascripts/mx/primitives/mx.image.js
+++ b/public/assets/javascripts/mx/primitives/mx.image.js
@@ -1,6 +1,5 @@
 MX.Image = MX.Object3D.extend({
   init: function (ops) {
-  
   	this.type = "Image"
 		this.media = ops.media
     this.width = 0
@@ -41,8 +40,31 @@ MX.Image = MX.Object3D.extend({
       layer.el.classList.add('image')
       layer.dirty = true
       layer.update()
+      layer.ops.onload
     }
     image.src = ops.src;
+
+    if (ops.keepImage) {
+      this.image = image
+    }
+  },
+
+  draw: function(ctx, recenter){
+    if (recenter) {
+      ctx.save()
+      ctx.scale(-1, 1)
+      ctx.translate( -this.width/2 * this.scale, -this.height/2 * this.scale )
+    }
+
+    ctx.drawImage(this.image,
+      0, 0, this.image.naturalWidth, this.image.naturalHeight,
+      0, 0, this.image.width * this.scale, this.image.height * this.scale
+    )
+
+    if (recenter) {
+      ctx.restore()
+    }
+
   },
 
 })