diff options
| author | Jules Laplace <jules@okfoc.us> | 2014-04-09 19:01:57 -0400 |
|---|---|---|
| committer | Jules Laplace <jules@okfoc.us> | 2014-04-09 19:18:38 -0400 |
| commit | c3e2afe6739af6494d9d00896af879fc30f3d254 (patch) | |
| tree | 760a1fb6f3cf24346ca0796962b4c74f4d919c8d | |
| parent | cbd5e2411cd4df39dda75723da9c5e0153ad3331 (diff) | |
drawing rectangles
| -rw-r--r-- | assets/javascripts/environments/app.js | 2 | ||||
| -rw-r--r-- | assets/stylesheets/css.css | 2 | ||||
| -rw-r--r-- | rectangles-draw.html | 95 | ||||
| -rw-r--r-- | rectangles.html | 95 |
4 files changed, 193 insertions, 1 deletions
diff --git a/assets/javascripts/environments/app.js b/assets/javascripts/environments/app.js index 27a5222..9070881 100644 --- a/assets/javascripts/environments/app.js +++ b/assets/javascripts/environments/app.js @@ -12,7 +12,7 @@ environment.init = function(){ "rotationX": 0.085, "rotationY": 0.025 }) - map && map.zoom(3.10) && map.recenter() + map && map.zoom(2.50) && map.recenter() // // intro floor, models, etc diff --git a/assets/stylesheets/css.css b/assets/stylesheets/css.css index e536b4c..e59793a 100644 --- a/assets/stylesheets/css.css +++ b/assets/stylesheets/css.css @@ -7,6 +7,8 @@ html, body { width: 100%; height: 100%; + background: -moz-linear-gradient(top, rgba(240,249,255,1) 0%, rgba(244,251,255,1) 59%, rgba(244,251,255,1) 59%, rgba(234,247,255,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,249,255,1)), color-stop(59%,rgba(244,251,255,1)), color-stop(59%,rgba(244,251,255,1)), color-stop(100%,rgba(234,247,255,1))); /* Chrome,Safari4+ */ } .mx-scene { z-index: 1; diff --git a/rectangles-draw.html b/rectangles-draw.html new file mode 100644 index 0000000..c79b700 --- /dev/null +++ b/rectangles-draw.html @@ -0,0 +1,95 @@ +<!doctype html> +<html> +<head> + <link rel="stylesheet" type="text/css" href="assets/stylesheets/css.css"> +<style type="text/css"> +</style> +</head> +<body> + + +</body> +<script type="text/javascript"> + +(function(){ + + var canvas = document.createElement("canvas") + var ctx = canvas.getContext("2d") + var w = canvas.width = 500 + var h = canvas.height = 500 + document.body.appendChild(canvas) + + var rects = [] + var dragging = false + var mouse = {x:0,y:0,w:0,h:0} + canvas.addEventListener("mousedown", function(e){ + dragging = true + mouse.x = e.pageX + mouse.y = e.pageY + mouse.w = mouse.h = 0 + }) + canvas.addEventListener("mousemove", function(e){ + if (dragging) { + mouse.w = e.pageX - mouse.x + mouse.h = e.pageY - mouse.y + } + else { + mouse.x = e.pageX + mouse.y = e.pageY + } + }) + document.addEventListener("mouseup", function(e){ + if (! dragging) return + dragging = false + rects.push(normalize(mouse)) + mouse = {x:e.pageX,y:e.pageY,w:0,h:0} + }) + + function animate(){ + requestAnimationFrame(animate) + ctx.fillStyle = "#fff" + ctx.fillRect(0,0,w,h) + + solve_rects() + draw_rects() + draw_mouse() + } + animate() + + function normalize(rect){ + if (rect.w < 0) { + rect.x += rect.w + rect.w = abs(rect.w) + } + if (rect.h < 0) { + rect.y += rect.h + rect.h = abs(rect.h) + } + return rect + } + function solve_rects(){ + } + function draw_rects(){ + for (var i = 0; i < rects.length; i++) { + var rect = rects[i] + ctx.fillStyle = "rgba(0,200,220,0.5)" + ctx.fillRect(rect.x, rect.y, rect.w, rect.h) + } + } + function draw_mouse(){ + if (mouse.w == 0 && mouse.h == 0) { + ctx.fillStyle = "rgba(255,0,0,0.4)"; + ctx.beginPath(); + ctx.arc(mouse.x, mouse.y, 5, 0, 2*Math.PI, false); + ctx.fill(); + } + else { + ctx.fillStyle = "rgba(255,255,0,0.5)" + ctx.fillRect(mouse.x, mouse.y, mouse.w, mouse.h) + } + } + +})() + +</script> +</html> diff --git a/rectangles.html b/rectangles.html new file mode 100644 index 0000000..c79b700 --- /dev/null +++ b/rectangles.html @@ -0,0 +1,95 @@ +<!doctype html> +<html> +<head> + <link rel="stylesheet" type="text/css" href="assets/stylesheets/css.css"> +<style type="text/css"> +</style> +</head> +<body> + + +</body> +<script type="text/javascript"> + +(function(){ + + var canvas = document.createElement("canvas") + var ctx = canvas.getContext("2d") + var w = canvas.width = 500 + var h = canvas.height = 500 + document.body.appendChild(canvas) + + var rects = [] + var dragging = false + var mouse = {x:0,y:0,w:0,h:0} + canvas.addEventListener("mousedown", function(e){ + dragging = true + mouse.x = e.pageX + mouse.y = e.pageY + mouse.w = mouse.h = 0 + }) + canvas.addEventListener("mousemove", function(e){ + if (dragging) { + mouse.w = e.pageX - mouse.x + mouse.h = e.pageY - mouse.y + } + else { + mouse.x = e.pageX + mouse.y = e.pageY + } + }) + document.addEventListener("mouseup", function(e){ + if (! dragging) return + dragging = false + rects.push(normalize(mouse)) + mouse = {x:e.pageX,y:e.pageY,w:0,h:0} + }) + + function animate(){ + requestAnimationFrame(animate) + ctx.fillStyle = "#fff" + ctx.fillRect(0,0,w,h) + + solve_rects() + draw_rects() + draw_mouse() + } + animate() + + function normalize(rect){ + if (rect.w < 0) { + rect.x += rect.w + rect.w = abs(rect.w) + } + if (rect.h < 0) { + rect.y += rect.h + rect.h = abs(rect.h) + } + return rect + } + function solve_rects(){ + } + function draw_rects(){ + for (var i = 0; i < rects.length; i++) { + var rect = rects[i] + ctx.fillStyle = "rgba(0,200,220,0.5)" + ctx.fillRect(rect.x, rect.y, rect.w, rect.h) + } + } + function draw_mouse(){ + if (mouse.w == 0 && mouse.h == 0) { + ctx.fillStyle = "rgba(255,0,0,0.4)"; + ctx.beginPath(); + ctx.arc(mouse.x, mouse.y, 5, 0, 2*Math.PI, false); + ctx.fill(); + } + else { + ctx.fillStyle = "rgba(255,255,0,0.5)" + ctx.fillRect(mouse.x, mouse.y, mouse.w, mouse.h) + } + } + +})() + +</script> +</html> |