merge

1 files changed, 38 insertions, 4 deletions

diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js
index 575e9c0..ce99592 100644
--- a/public/assets/javascripts/mx/primitives/mx.image.js
+++ b/public/assets/javascripts/mx/primitives/mx.image.js
@@ -1,6 +1,7 @@
 MX.Image = MX.Object3D.extend({
   init: function (ops) {
-  
+    ops = ops || {}
+    
   	this.type = "Image"
 		this.media = ops.media
     this.width = 0
@@ -12,13 +13,13 @@ MX.Image = MX.Object3D.extend({
 		this.backface = ops.backface || false
 			
 		ops.className && this.el.classList.add(ops.className)
-		this.backface && this.el.classList.add("backface-visible")		
+		this.backface && this.el.classList.add("backface-visible")
 		this.el.classList.add("image")
 		this.el.classList.add("mx-scenery")
 
 		this.el.style.backgroundRepeat = 'no-repeat'
 		
-		this.load(ops)
+		ops.src && this.load(ops)
   },
 
   load: function(ops){
@@ -41,8 +42,41 @@ MX.Image = MX.Object3D.extend({
       layer.el.classList.add('image')
       layer.dirty = true
       layer.update()
+      layer.ops.onload
+      
+      if (ops.keepImage) {
+        layer.image = image
+      }
+    }
+
+    if (ops.src) {
+      image.src = ops.src
+    }
+    else if (ops.media) {
+      image.src = ops.media.url
+    }
+    else if (ops.url) {
+      image.src = ops.url
+    }
+  },
+
+  draw: function(ctx, recenter){
+    if (! this.image) { return }
+    
+    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 * devicePixelRatio, this.image.height * this.scale * devicePixelRatio
+    )
+
+    if (recenter) {
+      ctx.restore()
     }
-    image.src = ops.src;
   },
 
 })