diff options
| -rw-r--r-- | public/assets/test/ortho.html | 43 |
1 files changed, 27 insertions, 16 deletions
diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index 041ec3f..ce52f99 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -71,7 +71,7 @@ Map.UI.Ortho = function(map){ } else { placing = true - points.length = mx_points.length = 0 + points = [] points.push( p ) mx_points.push( add_mx_point(p) ) } @@ -110,11 +110,13 @@ map = new Map ({ }) var placing = false -var points = [], mx_points = [] +var points, mx_points = [] +var shapes = [] var ctx = map.draw.ctx var last_point -function polyline (time) { +function polyline (points, finished) { + if (! points) return if (points.length == 1) { ctx.fillStyle = "#f80" ctx.fillRect(points[0].a, points[0].b, 10, 10) @@ -128,9 +130,8 @@ function polyline (time) { points.forEach(function(point, i){ i && ctx.lineTo(point.a, point.b) }) - placing && last_point && ctx.lineTo(last_point.a, last_point.b) ctx.stroke() - if (! placing) { + if (! placing || finished) { ctx.fill() } } @@ -138,11 +139,18 @@ function polyline (time) { function add_mx_polyline (points) { mx_points.forEach(function(mx){ scene.remove(mx) }) + var faces = [] for (var i = 1; i < points.length; i++) { var head = points[i-1] - var tail = points[i % (points.length-1)] - add_mx_polyline_face(head, tail) + var tail = points[i] + face = add_mx_polyline_face(head, tail) + faces.push(face) } + shapes.push({ + mx: faces, + points: points, + }) + points = [] } function add_mx_polyline_face(head, tail){ var mx = new MX.Object3D() @@ -162,9 +170,9 @@ function add_mx_polyline_face(head, tail){ console.log('hsl(' + [hue + "deg", "100%", "50%"] + ')') mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' scene.add(mx) + return mx } - function add_mx_point (p, i) { var mx = new MX.Object3D() mx.updateChildren = false @@ -204,19 +212,13 @@ function draw_grid (ctx, cells, space) { ctx.moveTo(0, i*space) ctx.lineTo(side, i*space) } + ctx.closePath() ctx.stroke() } document.addEventListener('DOMContentLoaded', build) function build () { scene = new MX.Scene().addTo("#perspective") - scene.camera.move({ - "x": 0, - "y": 0, - "z": 0, - "rotationX": 0, // PI/2, - "rotationY": PI/2, // PI - }) scene.camera.radius = 20 scene.width = window.innerWidth/2 @@ -253,7 +255,16 @@ function animate(time){ map.draw.coords() - polyline() + polyline(points) + if (placing && last_point && points.length) { + ctx.beginPath() + ctx.moveTo(points[0].a, points[0].b) + ctx.lineTo(last_point.a, last_point.b) + } + + shapes.forEach(function(shape){ + polyline(shape.points, true) + }) ctx.strokeStyle = "#f00"; map.draw.x_at(0,0) |