diff options
| -rw-r--r-- | public/assets/javascripts/mx/primitives/mx.grid.js | 12 | ||||
| -rw-r--r-- | public/assets/javascripts/mx/primitives/mx.image.js | 24 | ||||
| -rw-r--r-- | public/assets/test/ortho2.html | 25 |
3 files changed, 51 insertions, 10 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() + } + }, }) diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index d554a60..733c90c 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -34,6 +34,7 @@ body { <script src="/assets/javascripts/mx/extensions/mx.scene.js"></script> <script src="/assets/javascripts/mx/extensions/mx.orbitCamera.js"></script> <script src="/assets/javascripts/mx/primitives/mx.grid.js"></script> +<script src="/assets/javascripts/mx/primitives/mx.image.js"></script> <script src="/assets/javascripts/rectangles/util/constants.js"></script> <script src="/assets/javascripts/rectangles/util/mouse.js"></script> <script src="/assets/javascripts/rectangles/util/wheel.js"></script> @@ -53,7 +54,7 @@ map = new Map ({ el: document.querySelector("#orthographic"), width: window.innerWidth/2, height: window.innerHeight, - zoom: 0, + zoom: -2, }) var placing = false @@ -127,9 +128,11 @@ function add_mx_point (p, i) { z: p.b, width: 20, height: 20, + rotationX: PI/2, }) mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' mx.el.style.backfaceVisibility = "visible" + mx.el.style.borderRadius = "50%" scene.add(mx) return mx } @@ -143,14 +146,22 @@ function build () { scene.height = window.innerHeight scene.perspective = window.innerHeight - grid = new MX.Grid() - scene.add(grid) +// grid = new MX.Grid() +// scene.add(grid) + floorplan = new MX.Image({ + src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg", + keepImage: true, + rotationX: -PI/2, + rotationY: PI, + }) + scene.add(floorplan) scene.update() controls = new MX.OrbitCamera({ el: scene.el, - radius: 1000, + radius: 3000, + radiusRange: [ 10, 10000 ], rotationX: PI/4, rotationY: PI/2, }) @@ -168,10 +179,8 @@ function animate(time){ map.draw.ctx.save() map.draw.translate() - map.draw.ctx.save() - map.draw.ctx.translate(-(20*20)/2, -(20*20)/2) - grid.draw(map.draw.ctx, 20, 20) - map.draw.ctx.restore() +// grid.draw(map.draw.ctx, true) + floorplan.draw(map.draw.ctx, true) map.draw.coords() |