From 54f9f6ebfb495feed695cf12a0f245f535cd3372 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 2 Feb 2012 15:17:16 -0800 Subject: Switching to alternate dashed line function. Adding code attributions. Signed-off-by: Valerio Virgillito --- js/stage/layout.js | 53 ++++------------------------------------------------- 1 file changed, 4 insertions(+), 49 deletions(-) diff --git a/js/stage/layout.js b/js/stage/layout.js index 625c09ad..1e712550 100644 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -282,8 +282,9 @@ exports.Layout = Montage.create(Component, { } }, - // Alternate dashed line method. - ___dashedLine: { + // Dashed line function found at http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas/ + // Portions used with permission of Gavin Kistner (phrogz) + _dashedLine: { value: function(x, y, x2, y2, dashArray) { this.ctx.lineCap = "square"; this.ctx.beginPath(); @@ -303,7 +304,7 @@ exports.Layout = Montage.create(Component, { var step = Math.sqrt(dashLength * dashLength / (1 + slope * slope)); if(xSlope){ if(dx < 0) step = -step; - x += step + x += step; y += slope * step; }else{ if(dy < 0) step = -step; @@ -321,52 +322,6 @@ exports.Layout = Montage.create(Component, { } }, - _dashedLine: { - value: function (fromX, fromY, toX, toY, pattern){ - this.ctx.beginPath(); - // Our growth rate for our line can be one of the following: - // (+,+), (+,-), (-,+), (-,-) - // Because of this, our algorithm needs to understand if the x-coord and - // y-coord should be getting smaller or larger and properly cap the values - // based on (x,y). - var lt = function (a, b) { return a <= b; }; - var gt = function (a, b) { return a >= b; }; - var capmin = function (a, b) { return Math.min(a, b); }; - var capmax = function (a, b) { return Math.max(a, b); }; - - var checkX = { thereYet: gt, cap: capmin }; - var checkY = { thereYet: gt, cap: capmin }; - - if (fromY - toY > 0) { - checkY.thereYet = lt; - checkY.cap = capmax; - } - if (fromX - toX > 0) { - checkX.thereYet = lt; - checkX.cap = capmax; - } - - this.ctx.moveTo(fromX, fromY); - var offsetX = fromX; - var offsetY = fromY; - var idx = 0, dash = true; - while (!(checkX.thereYet(offsetX, toX) && checkY.thereYet(offsetY, toY))) { - var ang = Math.atan2(toY - fromY, toX - fromX); - var len = pattern[idx]; - - offsetX = checkX.cap(toX, offsetX + (Math.cos(ang) * len)); - offsetY = checkY.cap(toY, offsetY + (Math.sin(ang) * len)); - - if (dash) this.ctx.lineTo(offsetX, offsetY); - else this.ctx.moveTo(offsetX, offsetY); - - idx = (idx + 1) % pattern.length; - dash = !dash; - } - this.ctx.stroke(); - } - }, - _elementName: { value: function(item) { return this.application.ninja.elementMediator.getNJProperty(item, "selection"); -- cgit v1.2.3