From 90c8c1c45a272fab86e99a2e63c72528b3a24e23 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 28 Oct 2014 16:15:47 -0400 Subject: share links --- public/assets/javascripts/ui/_router.js | 26 --------------------- .../assets/javascripts/ui/editor/ColorControl.js | 2 +- public/assets/javascripts/ui/reader/ReaderView.js | 1 + public/assets/javascripts/ui/reader/ShareView.js | 27 ++++++++++++++++++++++ public/assets/javascripts/ui/z_share.js | 25 -------------------- 5 files changed, 29 insertions(+), 52 deletions(-) create mode 100644 public/assets/javascripts/ui/reader/ShareView.js delete mode 100644 public/assets/javascripts/ui/z_share.js (limited to 'public/assets/javascripts') diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index c7b625a..0c95664 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -40,8 +40,6 @@ var SiteRouter = Router.extend({ "/project/:name": 'projectViewer', "/project/:name/edit": 'projectEditor', "/project/:name/view": 'projectViewer', - - "/test/wallpaper": 'testWallpaper', }, mobileRoutes: { @@ -213,29 +211,5 @@ var SiteRouter = Router.extend({ // this.documentModal.destroy(name) }, - testWallpaper: function(e){ - var content = document.getElementById("content") - content.style.width = "680px" - content.style.margin = "0 auto" - var wm = new WallpaperManager() - app.on('wallpaper-ready', function(){ - var black = [0,0,0,0] - var white = [255,255,255,1.0] - var swatches = wm.buildSwatches(black, white, 4) - document.body.style.backgroundColor = "#eee" - swatches.forEach(function(swatch){ - swatch.style.margin = "4px" - swatch.style.border = "1px solid lime" - swatch.style.backgroundColor = "#888" - content.appendChild(swatch) - swatch.onclick = function(){ - dataUrl = swatch.toDataURL() - document.body.style.backgroundImage = "url(" + dataUrl + ")" - } - }) - }) - wm.init() - }, - }) diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js index 72e9fb1..d1a8c7b 100644 --- a/public/assets/javascripts/ui/editor/ColorControl.js +++ b/public/assets/javascripts/ui/editor/ColorControl.js @@ -101,7 +101,7 @@ var ColorControl = View.extend({ initialState: null, - begin: function(){ + begin: function(){ this.initialState = this.serialize() }, diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index 8531244..4c53226 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -9,6 +9,7 @@ var ReaderView = View.extend({ initialize: function(){ this.mediaPlayer = new MediaPlayer ({ parent: this }) + this.shareView = new shareView ({ parent: this }) }, load: function(name){ diff --git a/public/assets/javascripts/ui/reader/ShareView.js b/public/assets/javascripts/ui/reader/ShareView.js new file mode 100644 index 0000000..ab358e3 --- /dev/null +++ b/public/assets/javascripts/ui/reader/ShareView.js @@ -0,0 +1,27 @@ +var ShareView = View.extend({ + el: ".share", + + events: { + "click #share_facebook": "facebook", + "click #share_twitter": "twitter", + } + + initialize: function(opt){ + this.parent = opt.parent + }, + + facebook: function (e) { + e.preventDefault() + var msg = $(".roomName").html() + " on VValls" + var url = "https://www.facebook.com/share.php?u=" + encodeURIComponent(window.location.origin + window.location.pathname) + "&t=" + encodeURIComponent(msg); + window.open(url, "_blank") + }, + + twitter: function (e) { + e.preventDefault() + var msg = $(".roomName").html() + " on VValls" + var url = "https://twitter.com/home?status=" + encodeURIComponent(window.location.origin + window.location.pathname + " " + msg); + window.open(url, "_blank") + } + +} diff --git a/public/assets/javascripts/ui/z_share.js b/public/assets/javascripts/ui/z_share.js deleted file mode 100644 index d31aa89..0000000 --- a/public/assets/javascripts/ui/z_share.js +++ /dev/null @@ -1,25 +0,0 @@ -var share = { - init: function(){ - share.bind() - }, - bind: function(){ - $("#facebook").click(share.facebook) - $("#twitter").click(share.twitter) - }, - url: "http://vvalls.com/", - facebook_msg: "", - twitter_msg: "", - openLink: function (url) { - window.open(url, "_blank"); - }, - facebook: function () { - var url = "https://www.facebook.com/share.php?u=" + encodeURIComponent(share.url) + "&t=" + encodeURIComponent(share.facebook_msg); - share.openLink(url); - return false; - }, - twitter: function () { - var url = "https://twitter.com/home?status=" + encodeURIComponent(share.url + " " + share.twitter_msg); - share.openLink(url); - return false; - } -} -- cgit v1.2.3-70-g09d2 From 503c1eb313d01d3a73fac1e31b774749893b55d4 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 29 Oct 2014 12:46:02 -0400 Subject: opengraph tags --- public/assets/javascripts/ui/reader/ReaderView.js | 2 +- public/assets/javascripts/ui/reader/ShareView.js | 4 ++-- server/lib/middleware.js | 7 ++++++- server/lib/views/index.js | 10 ++++++++++ views/projects/list-projects.ejs | 1 - 5 files changed, 19 insertions(+), 5 deletions(-) (limited to 'public/assets/javascripts') diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index 4c53226..c132609 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -9,7 +9,7 @@ var ReaderView = View.extend({ initialize: function(){ this.mediaPlayer = new MediaPlayer ({ parent: this }) - this.shareView = new shareView ({ parent: this }) + this.shareView = new ShareView ({ parent: this }) }, load: function(name){ diff --git a/public/assets/javascripts/ui/reader/ShareView.js b/public/assets/javascripts/ui/reader/ShareView.js index ab358e3..35c23ca 100644 --- a/public/assets/javascripts/ui/reader/ShareView.js +++ b/public/assets/javascripts/ui/reader/ShareView.js @@ -4,7 +4,7 @@ var ShareView = View.extend({ events: { "click #share_facebook": "facebook", "click #share_twitter": "twitter", - } + }, initialize: function(opt){ this.parent = opt.parent @@ -24,4 +24,4 @@ var ShareView = View.extend({ window.open(url, "_blank") } -} +}) diff --git a/server/lib/middleware.js b/server/lib/middleware.js index 0bf16ce..870451a 100644 --- a/server/lib/middleware.js +++ b/server/lib/middleware.js @@ -40,10 +40,15 @@ var middleware = { res.locals.user = req.user || { _id: undefined } res.locals.config = config res.locals.profile = null + res.locals.ogImage = "" + res.locals.ogTitle = "Vvalls" + res.locals.ogUrl = "http://vvalls.com/" + res.locals.ogDescription = "3D gallery space, fully customizable" + res.locals.ogAuthor = "Vvalls" res.locals.opt = {} next() }, - + ensureProject: function (req, res, next) { if (req.params.slug) { Project.findOne({ slug: req.params.slug }, function(err, project){ diff --git a/server/lib/views/index.js b/server/lib/views/index.js index 5768ace..0b5a1fe 100644 --- a/server/lib/views/index.js +++ b/server/lib/views/index.js @@ -56,6 +56,10 @@ var views = module.exports = { res.redirect('/') return } + var ogImage + if (req.project.media.length && req.project.media[0].media.type == "image") { + ogImage = req.project.media[0].media.url + } res.render('reader', { name: util.sanitize(req.project.name), description: util.sanitize(req.project.description), @@ -65,6 +69,9 @@ var views = module.exports = { canEdit: req.isOwner || req.isCollaborator, editlink: "/project/" + req.project.slug + "/edit", noui: !! (req.query.noui === '1'), + ogTitle: req.project.name, + ogUrl: "http://vvalls.com/project/" + req.project.slug + "/", + ogImage: ogImage, }) }) }, @@ -159,6 +166,9 @@ var views = module.exports = { isOwnProfile: isOwnProfile, profile: user, projects: projects || [], + ogTitle: "Vvalls: Profile of " + user.displayName, + ogUrl: "http://vvalls.com/profile/" + user.username + "/", + ogImage: user.photo, }) } }, diff --git a/views/projects/list-projects.ejs b/views/projects/list-projects.ejs index 5ecaec1..2749b0e 100644 --- a/views/projects/list-projects.ejs +++ b/views/projects/list-projects.ejs @@ -9,7 +9,6 @@ [[ } else { ]] [[ } ]] - -- cgit v1.2.3-70-g09d2 From 2e863090cda5d6f0d9d96e5be8a7284fa57ec69f Mon Sep 17 00:00:00 2001 From: ryderr Date: Wed, 29 Oct 2014 13:24:08 -0400 Subject: thingy --- public/assets/javascripts/ui/editor/HelpCursor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'public/assets/javascripts') diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index de0ca01..2752a5f 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -10,7 +10,7 @@ var HelpCursor = View.extend({ addmedia: "Great, now click a wall to place this image.", resize: "Drag the image to position it, or use the dots to resize.", presets: "These are some basic presets to get you started. Click em! :-)", - wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.", + wallpaper: "Click the wallpaper you want then apply it to the walls. Feel free to upload your own too!", colors: "Use these colors to change the color of the walls, floor, and ceiling.", settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.", }, -- cgit v1.2.3-70-g09d2 From de6fa5bf0e7f0a55341d05f5a5b1dfb19330aeb0 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 29 Oct 2014 18:25:12 -0400 Subject: stub in fixes to mover --- .../javascripts/rectangles/engine/rooms/mover.js | 38 +++++++++++++++++++++- .../assets/javascripts/rectangles/models/room.js | 6 ++-- public/assets/javascripts/ui/reader/MediaPlayer.js | 2 +- server/lib/views/index.js | 6 ++-- 4 files changed, 44 insertions(+), 8 deletions(-) (limited to 'public/assets/javascripts') diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index fae2ce6..121ecec 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -34,7 +34,43 @@ Rooms.mover = new function(){ } // check if we've breached one of the walls.. clamp position if so - var collision = base.room.collidesDisc(pos.x, pos.z, radius) + var collision = base.room.collidesDisc(cam, pos, radius) + +/* + var dz = new vec2( cam.z, pos.z ) + dz.normalize() + + var dx = new vec2( cam.x, pos.x ) + dx.normalize() + + Walls.list.forEach(function(wall){ + switch (wall.side) { + case FRONT: + break + case BACK: + break + case LEFT: + if (cam.x >= wall.edge + radius && wall.edge + radius >= pos.x && (wall.vec.intersects(dz) ) { + // intersects the wall.. next check if it intersects any of the surface frames + wall.surface.faces.some(function(face, i){ + // if we can pass through the wall at this point, we do not need to clamp + if (face.y.a === 0 && face.x.intersects(dz)) { + dz.a = pos.z = face.x.clamp(pos.z) + dz.b = cam.z + dz.normalize() + return true + } + }) + } + break + case RIGHT: + if (cam.x <= wall.edge - radius && wall.edge - radius <= pos.x && (wall.vec.contains(cam.z) || wall.vec.contains(pos.z)) ) { + // intersects + } + break + } + }) +*/ if (collision && ! base.noclip) { cam.x = (collision & LEFT_RIGHT) ? base.room.rect.x.clampDisc(pos.x, radius) : pos.x diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js index b0344a1..26bf055 100644 --- a/public/assets/javascripts/rectangles/models/room.js +++ b/public/assets/javascripts/rectangles/models/room.js @@ -122,7 +122,8 @@ return collision } - Room.prototype.collidesDisc = function(x,y,radius){ + Room.prototype.collidesDisc = function(src, dest, radius){ + var x = dest.x, y = dest.z var collision = 0, wall_collision, contains_x, contains_y this.regions.forEach(function(r){ if (! r.sides) return @@ -152,9 +153,6 @@ if (contains_y) { collision |= wall_collision & LEFT_RIGHT } -// if (bitcount(wall_collision) > 1) { -// collision |= wall_collision -// } }) return collision } diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js index 7f73e1b..e40c6ff 100644 --- a/public/assets/javascripts/ui/reader/MediaPlayer.js +++ b/public/assets/javascripts/ui/reader/MediaPlayer.js @@ -44,7 +44,7 @@ var MediaPlayer = FormView.extend({ this.unbind() } if (media.type == "image") { - if ((! media.title || ! media.title.length) && (! media.description || ! media.description.length) || (media.title == filenameFromUrl(media.url)) ) { + if ( ! media.description && (! media.title || media.title == filenameFromUrl(media.url)) ) { this.hide() return } diff --git a/server/lib/views/index.js b/server/lib/views/index.js index 0b5a1fe..7ffadb9 100644 --- a/server/lib/views/index.js +++ b/server/lib/views/index.js @@ -38,10 +38,12 @@ var views = module.exports = { } else if (req.isOwner || req.isCollaborator || req.isStaff) { res.locals.opt.editing = true - res.render('editor') + res.render('editor', { + ogUrl: "http://vvalls.com/project/" + req.project.slug + "/", + }) } else { - views.reader(req, res) + res.redirect("/project/" + req.project.slug + "/") } }, -- cgit v1.2.3-70-g09d2 From c0fe6750cc0462adbc2165ac7f8c9cf1e0aea925 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 30 Oct 2014 17:59:44 -0400 Subject: intersection test --- .../javascripts/rectangles/engine/rooms/mover.js | 95 ++++++++++---- .../assets/javascripts/vendor/canvasutilities.js | 145 +++++++++++++++++++++ public/assets/test/intersect.html | 132 +++++++++++++++++++ 3 files changed, 348 insertions(+), 24 deletions(-) create mode 100644 public/assets/javascripts/vendor/canvasutilities.js create mode 100644 public/assets/test/intersect.html (limited to 'public/assets/javascripts') diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index 121ecec..8ce00fe 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -36,6 +36,18 @@ Rooms.mover = new function(){ // check if we've breached one of the walls.. clamp position if so var collision = base.room.collidesDisc(cam, pos, radius) + if (collision && ! base.noclip) { + cam.x = (collision & LEFT_RIGHT) ? base.room.rect.x.clampDisc(pos.x, radius) : pos.x + cam.z = (collision & FRONT_BACK) ? base.room.rect.y.clampDisc(pos.z, radius) : pos.z + return + } + + // in this case, we appear to have left the room.. + // $(".face.active").removeClass("active") + Walls.clearBodyColor() + base.room = null + } + /* var dz = new vec2( cam.z, pos.z ) dz.normalize() @@ -43,47 +55,82 @@ Rooms.mover = new function(){ var dx = new vec2( cam.x, pos.x ) dx.normalize() + // first check if the cam-pos movement intersects the wall. + // next check if it intersects any of the surface frames + // if we can pass through the wall at this point, we do not need to clamp. + // otherwise, get the distance along the cam-pos vector where we would hit the wall and clamp to it. Walls.list.forEach(function(wall){ + var t = -1 switch (wall.side) { case FRONT: + if (cam.z >= wall.edge + radius && wall.edge + radius >= pos.z && wall.vec.intersects(dx) ) { + t = check_intersection( front_back_intersection, cam, pos, dx, wall, radius ) + } break case BACK: + // console.log(cam.z|0, wall.edge-radius, pos.z|0, wall.vec.intersects(dx)) + if (cam.z <= wall.edge - radius && wall.edge - radius <= pos.z && wall.vec.intersects(dx) ) { + t = check_intersection( front_back_intersection, cam, pos, dx, wall, -radius ) + console.log(t) + } break case LEFT: - if (cam.x >= wall.edge + radius && wall.edge + radius >= pos.x && (wall.vec.intersects(dz) ) { - // intersects the wall.. next check if it intersects any of the surface frames - wall.surface.faces.some(function(face, i){ - // if we can pass through the wall at this point, we do not need to clamp - if (face.y.a === 0 && face.x.intersects(dz)) { - dz.a = pos.z = face.x.clamp(pos.z) - dz.b = cam.z - dz.normalize() - return true - } - }) + if (cam.x >= wall.edge + radius && wall.edge + radius >= pos.x && wall.vec.intersects(dz) ) { + t = check_intersection( left_right_intersection, cam, pos, dz, wall, radius ) } break case RIGHT: - if (cam.x <= wall.edge - radius && wall.edge - radius <= pos.x && (wall.vec.contains(cam.z) || wall.vec.contains(pos.z)) ) { - // intersects + if (cam.x <= wall.edge - radius && wall.edge - radius <= pos.x && wall.vec.intersects(dz) ) { + t = check_intersection( left_right_intersection, cam, pos, dz, wall, -radius ) } break } + if (0 <= t && t <= 1) { + pos.x = cam.x + (pos.x - cam.x) * t + pos.z = cam.z + (pos.z - cam.z) * t + + dz = new vec2( cam.z, pos.z ) + dz.normalize() + + dx = new vec2( cam.x, pos.x ) + dx.normalize() + } }) -*/ - if (collision && ! base.noclip) { - cam.x = (collision & LEFT_RIGHT) ? base.room.rect.x.clampDisc(pos.x, radius) : pos.x - cam.z = (collision & FRONT_BACK) ? base.room.rect.y.clampDisc(pos.z, radius) : pos.z - return - } + function check_intersection(intersection_function, cam, pos, cam_pos_vector, wall, radius) { + var t = -1 + wall.surface.faces.some(function(face, i){ + if (face.y.a == 0 && face.x.intersects(cam_pos_vector)) { + t = intersection_function( cam, pos, wall, face, radius ) + console.log(">>", t) + if (0 <= t && t <= 1) { + return true + } + else { + t = -1 + } + } + return false + }) + return t + } + function left_right_intersection (cam, pos, wall, face, radius) { + var perp_n = (face.x.a - face.x.b) * (wall.edge - cam.z + radius) + var perp_d = (face.x.a - face.x.b) * (pos.z - cam.z) + if (perp_d == 0) return Infinity + return perp_n / perp_d + } + function front_back_intersection (cam, pos, wall, face, radius) { + // va.vx*vb.vy - va.vy*vb.vx + var perp_n = (face.x.b - face.x.a) * (wall.edge - cam.x + radius) + var perp_d = (face.x.b - face.x.a) * (pos.x - cam.x) - // in this case, we appear to have left the room.. - // $(".face.active").removeClass("active") - Walls.clearBodyColor() - base.room = null - } + console.log((pos.x - cam.x), wall.edge - cam.x, radius) + if (perp_d == 0) return Infinity + return perp_n / perp_d + } +*/ // collision test failed, so update position cam.x = pos.x cam.z = pos.z diff --git a/public/assets/javascripts/vendor/canvasutilities.js b/public/assets/javascripts/vendor/canvasutilities.js new file mode 100644 index 0000000..011ebb0 --- /dev/null +++ b/public/assets/javascripts/vendor/canvasutilities.js @@ -0,0 +1,145 @@ +var drawArrow = function(ctx, x1, y1, x2, y2, style, which, angle, d) { + 'use strict'; + // Ceason pointed to a problem when x1 or y1 were a string, and concatenation + // would happen instead of addition + if (typeof(x1) == 'string') x1 = parseInt(x1); + if (typeof(y1) == 'string') y1 = parseInt(y1); + if (typeof(x2) == 'string') x2 = parseInt(x2); + if (typeof(y2) == 'string') y2 = parseInt(y2); + style = typeof(style) != 'undefined' ? style : 3; + which = typeof(which) != 'undefined' ? which : 1; // end point gets arrow + angle = typeof(angle) != 'undefined' ? angle : Math.PI / 8; + d = typeof(d) != 'undefined' ? d : 10; + // default to using drawHead to draw the head, but if the style + // argument is a function, use it instead + var toDrawHead = typeof(style) != 'function' ? drawHead : style; + + // For ends with arrow we actually want to stop before we get to the arrow + // so that wide lines won't put a flat end on the arrow. + // + var dist = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); + var ratio = (dist - d / 3) / dist; + var tox, toy, fromx, fromy; + if (which & 1) { + tox = Math.round(x1 + (x2 - x1) * ratio); + toy = Math.round(y1 + (y2 - y1) * ratio); + } else { + tox = x2; + toy = y2; + } + if (which & 2) { + fromx = x1 + (x2 - x1) * (1 - ratio); + fromy = y1 + (y2 - y1) * (1 - ratio); + } else { + fromx = x1; + fromy = y1; + } + + // Draw the shaft of the arrow + ctx.beginPath(); + ctx.moveTo(fromx, fromy); + ctx.lineTo(tox, toy); + ctx.stroke(); + + // calculate the angle of the line + var lineangle = Math.atan2(y2 - y1, x2 - x1); + // h is the line length of a side of the arrow head + var h = Math.abs(d / Math.cos(angle)); + + if (which & 1) { // handle far end arrow head + var angle1 = lineangle + Math.PI + angle; + var topx = x2 + Math.cos(angle1) * h; + var topy = y2 + Math.sin(angle1) * h; + var angle2 = lineangle + Math.PI - angle; + var botx = x2 + Math.cos(angle2) * h; + var boty = y2 + Math.sin(angle2) * h; + toDrawHead(ctx, topx, topy, x2, y2, botx, boty, style); + } + if (which & 2) { // handle near end arrow head + var angle1 = lineangle + angle; + var topx = x1 + Math.cos(angle1) * h; + var topy = y1 + Math.sin(angle1) * h; + var angle2 = lineangle - angle; + var botx = x1 + Math.cos(angle2) * h; + var boty = y1 + Math.sin(angle2) * h; + toDrawHead(ctx, topx, topy, x1, y1, botx, boty, style); + } +} + +var drawHead = function(ctx, x0, y0, x1, y1, x2, y2, style) { + 'use strict'; + if (typeof(x0) == 'string') x0 = parseInt(x0); + if (typeof(y0) == 'string') y0 = parseInt(y0); + if (typeof(x1) == 'string') x1 = parseInt(x1); + if (typeof(y1) == 'string') y1 = parseInt(y1); + if (typeof(x2) == 'string') x2 = parseInt(x2); + if (typeof(y2) == 'string') y2 = parseInt(y2); + var radius = 3; + var twoPI = 2 * Math.PI; + + // all cases do this. + ctx.save(); + ctx.beginPath(); + ctx.moveTo(x0, y0); + ctx.lineTo(x1, y1); + ctx.lineTo(x2, y2); + switch (style) { + case 0: + // curved filled, add the bottom as an arcTo curve and fill + var backdist = Math.sqrt(((x2 - x0) * (x2 - x0)) + ((y2 - y0) * (y2 - y0))); + ctx.arcTo(x1, y1, x0, y0, .55 * backdist); + ctx.fill(); + break; + case 1: + // straight filled, add the bottom as a line and fill. + ctx.beginPath(); + ctx.moveTo(x0, y0); + ctx.lineTo(x1, y1); + ctx.lineTo(x2, y2); + ctx.lineTo(x0, y0); + ctx.fill(); + break; + case 2: + // unfilled head, just stroke. + ctx.stroke(); + break; + case 3: + //filled head, add the bottom as a quadraticCurveTo curve and fill + var cpx = (x0 + x1 + x2) / 3; + var cpy = (y0 + y1 + y2) / 3; + ctx.quadraticCurveTo(cpx, cpy, x0, y0); + ctx.fill(); + break; + case 4: + //filled head, add the bottom as a bezierCurveTo curve and fill + var cp1x, cp1y, cp2x, cp2y, backdist; + var shiftamt = 5; + if (x2 == x0) { + // Avoid a divide by zero if x2==x0 + backdist = y2 - y0; + cp1x = (x1 + x0) / 2; + cp2x = (x1 + x0) / 2; + cp1y = y1 + backdist / shiftamt; + cp2y = y1 - backdist / shiftamt; + } else { + backdist = Math.sqrt(((x2 - x0) * (x2 - x0)) + ((y2 - y0) * (y2 - y0))); + var xback = (x0 + x2) / 2; + var yback = (y0 + y2) / 2; + var xmid = (xback + x1) / 2; + var ymid = (yback + y1) / 2; + + var m = (y2 - y0) / (x2 - x0); + var dx = (backdist / (2 * Math.sqrt(m * m + 1))) / shiftamt; + var dy = m * dx; + cp1x = xmid - dx; + cp1y = ymid - dy; + cp2x = xmid + dx; + cp2y = ymid + dy; + } + + ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x0, y0); + ctx.fill(); + break; + } + ctx.restore(); +} diff --git a/public/assets/test/intersect.html b/public/assets/test/intersect.html new file mode 100644 index 0000000..3f6d110 --- /dev/null +++ b/public/assets/test/intersect.html @@ -0,0 +1,132 @@ + + + + + + + + + + -- cgit v1.2.3-70-g09d2