diff options
Diffstat (limited to 'public/assets/javascripts/mx/primitives/mx.cutout.js')
| -rw-r--r-- | public/assets/javascripts/mx/primitives/mx.cutout.js | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/public/assets/javascripts/mx/primitives/mx.cutout.js b/public/assets/javascripts/mx/primitives/mx.cutout.js new file mode 100644 index 0000000..9d9043f --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.cutout.js @@ -0,0 +1,66 @@ +MX.Cutout = MX.Object3D.extend({ + init: function (ops) { + + this.type = "Cutout" + + var layer = this + layer.width = 0 + layer.height = 0 + + if (ops.src) this.loadTexture(ops) + + if (ops.texture) { + } + else if (ops.classname) { + layer.el.classList.add(ops.classname) + } + else { + } + layer.el.style.backgroundRepeat = 'no-repeat' + + this.dirty = true + this.updateChildren = true + this.update() + }, + + loadTexture: function(ops){ + var layer = this + var image = new Image() + var pattern = ops.pattern + var texture = ops.texture + + image.onload = function(){ + var canvas = document.createElement("canvas") + var ctx = canvas.getContext('2d') + + layer.width = canvas.width = image.naturalWidth + layer.height = canvas.height = image.naturalHeight + + ctx.drawImage(image, 0, 0, canvas.width, canvas.height) + ctx.globalCompositeOperation = "source-in" + + if (texture) { + ctx.fillStyle = ctx.createPattern(texture, 'repeat') + ctx.fillRect(0, 0, canvas.width, canvas.height) + } + if (pattern) { + ctx.fillStyle = ctx.createPattern(pattern, 'repeat') + ctx.fillRect(0, 0, canvas.width, canvas.height) + } + + layer.scale = ops.scale || 1 + layer.x = ops.x || 0 + layer.y = (ops.y || 0) + layer.height/2 + 1 + layer.z = ops.z || 0 + layer.rotationX = ops.rotationX || 0 + layer.rotationY = ops.rotationY || 0 + layer.el.appendChild(canvas) + + layer.el.classList.add('image') + ops.className && layer.el.classList.add(ops.className) + layer.dirty = true + layer.update() + } + image.src = ops.src; + } +}) |
