From ef6d4c7aed3abf2022e9ac48d539e82b79b5f97a Mon Sep 17 00:00:00 2001 From: Brett Johnson Date: Wed, 4 May 2016 15:21:31 -0700 Subject: [PATCH 1/2] Adjust roundedRect() to draw circular arcs for corners - rather than distorted ones with quadraticCurveTo() --- lib/mixins/vector.coffee | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/lib/mixins/vector.coffee b/lib/mixins/vector.coffee index 9e8cf90..e7e5b80 100644 --- a/lib/mixins/vector.coffee +++ b/lib/mixins/vector.coffee @@ -71,15 +71,18 @@ module.exports = @addContent "#{x} #{y} #{w} #{h} re" roundedRect: (x, y, w, h, r = 0) -> + # amount to inset control points from corners (see `ellipse`) + c = r * (1.0 - KAPPA) + @moveTo x + r, y @lineTo x + w - r, y - @quadraticCurveTo x + w, y, x + w, y + r + @bezierCurveTo x + w - c, y, x + w, y + c, x + w, y + r @lineTo x + w, y + h - r - @quadraticCurveTo x + w, y + h, x + w - r, y + h + @bezierCurveTo x + w, y + h - c, x + w - c, y + h, x + w - r, y + h @lineTo x + r, y + h - @quadraticCurveTo x, y + h, x, y + h - r + @bezierCurveTo x + c, y + h, x, y + h - c, x, y + h - r @lineTo x, y + r - @quadraticCurveTo x, y, x + r, y + @bezierCurveTo x, y + c, x + c, y, x + r, y ellipse: (x, y, r1, r2 = r1) -> # based on http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas/2173084#2173084 From b9f30e2af2c3a5a7ab4bbbdbc744bf74ef13c42a Mon Sep 17 00:00:00 2001 From: alafr Date: Tue, 6 Sep 2016 23:46:45 +0300 Subject: [PATCH 2/2] Update vector.coffee -Add closePath fixes gap visible in Chrome pdf viewer with large line widths -Fix for too large corner radius --- lib/mixins/vector.coffee | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/mixins/vector.coffee b/lib/mixins/vector.coffee index e7e5b80..ee134ee 100644 --- a/lib/mixins/vector.coffee +++ b/lib/mixins/vector.coffee @@ -71,6 +71,8 @@ module.exports = @addContent "#{x} #{y} #{w} #{h} re" roundedRect: (x, y, w, h, r = 0) -> + r = Math.min(r, 0.5 * w, 0.5 * h) + # amount to inset control points from corners (see `ellipse`) c = r * (1.0 - KAPPA) @@ -83,6 +85,7 @@ module.exports = @bezierCurveTo x + c, y + h, x, y + h - c, x, y + h - r @lineTo x, y + r @bezierCurveTo x, y + c, x + c, y, x + r, y + @closePath() ellipse: (x, y, r1, r2 = r1) -> # based on http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas/2173084#2173084