From 0ecc5a6a32215ebb90ade97469a621918a808fc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Thu, 6 Jun 2019 22:33:45 +0200 Subject: [PATCH] rebased on master @ 9dfe256 --- src/index.js | 2 +- src/path.js | 36 +++++++++++++++++++++++------------- test/pathFixed-test.js | 17 +++++++++++++++++ 3 files changed, 41 insertions(+), 14 deletions(-) create mode 100644 test/pathFixed-test.js diff --git a/src/index.js b/src/index.js index 8d18d76..0803aad 100644 --- a/src/index.js +++ b/src/index.js @@ -1 +1 @@ -export {default as path} from "./path"; +export {default as path, pathFixed} from "./path"; diff --git a/src/path.js b/src/path.js index 36ad93d..e18cb9b 100644 --- a/src/path.js +++ b/src/path.js @@ -15,8 +15,11 @@ function path() { Path.prototype = path.prototype = { constructor: Path, + _format: function(x) { + return x; + }, moveTo: function(x, y) { - this._ += "M" + (this._x0 = this._x1 = +x) + "," + (this._y0 = this._y1 = +y); + this._ += "M" + this._format(this._x0 = this._x1 = +x) + "," + this._format(this._y0 = this._y1 = +y); }, closePath: function() { if (this._x1 !== null) { @@ -25,13 +28,13 @@ Path.prototype = path.prototype = { } }, lineTo: function(x, y) { - this._ += "L" + (this._x1 = +x) + "," + (this._y1 = +y); + this._ += "L" + this._format(this._x1 = +x) + "," + this._format(this._y1 = +y); }, quadraticCurveTo: function(x1, y1, x, y) { - this._ += "Q" + (+x1) + "," + (+y1) + "," + (this._x1 = +x) + "," + (this._y1 = +y); + this._ += "Q" + this._format(+x1) + "," + this._format(+y1) + "," + this._format(this._x1 = +x) + "," + this._format(this._y1 = +y); }, bezierCurveTo: function(x1, y1, x2, y2, x, y) { - this._ += "C" + (+x1) + "," + (+y1) + "," + (+x2) + "," + (+y2) + "," + (this._x1 = +x) + "," + (this._y1 = +y); + this._ += "C" + this._format(+x1) + "," + this._format(+y1) + "," + this._format(+x2) + "," + this._format(+y2) + "," + this._format(this._x1 = +x) + "," + this._format(this._y1 = +y); }, arcTo: function(x1, y1, x2, y2, r) { x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r = +r; @@ -48,7 +51,7 @@ Path.prototype = path.prototype = { // Is this path empty? Move to (x1,y1). if (this._x1 === null) { - this._ += "M" + (this._x1 = x1) + "," + (this._y1 = y1); + this._ += "M" + this._format(this._x1 = x1) + "," + this._format(this._y1 = y1); } // Or, is (x1,y1) coincident with (x0,y0)? Do nothing. @@ -58,7 +61,7 @@ Path.prototype = path.prototype = { // Equivalently, is (x1,y1) coincident with (x2,y2)? // Or, is the radius zero? Line to (x1,y1). else if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon) || !r) { - this._ += "L" + (this._x1 = x1) + "," + (this._y1 = y1); + this._ += "L" + this._format(this._x1 = x1) + "," + this._format(this._y1 = y1); } // Otherwise, draw an arc! @@ -75,10 +78,10 @@ Path.prototype = path.prototype = { // If the start tangent is not coincident with (x0,y0), line to. if (Math.abs(t01 - 1) > epsilon) { - this._ += "L" + (x1 + t01 * x01) + "," + (y1 + t01 * y01); + this._ += "L" + this._format(x1 + t01 * x01) + "," + this._format(y1 + t01 * y01); } - this._ += "A" + r + "," + r + ",0,0," + (+(y01 * x20 > x01 * y20)) + "," + (this._x1 = x1 + t21 * x21) + "," + (this._y1 = y1 + t21 * y21); + this._ += "A" + this._format(r) + "," + this._format(r) + ",0,0," + (+(y01 * x20 > x01 * y20)) + "," + this._format(this._x1 = x1 + t21 * x21) + "," + this._format(this._y1 = y1 + t21 * y21); } }, arc: function(x, y, r, a0, a1, ccw) { @@ -95,12 +98,12 @@ Path.prototype = path.prototype = { // Is this path empty? Move to (x0,y0). if (this._x1 === null) { - this._ += "M" + x0 + "," + y0; + this._ += "M" + this._format(x0) + "," + this._format(y0); } // Or, is (x0,y0) not coincident with the previous point? Line to (x0,y0). else if (Math.abs(this._x1 - x0) > epsilon || Math.abs(this._y1 - y0) > epsilon) { - this._ += "L" + x0 + "," + y0; + this._ += "L" + this._format(x0) + "," + this._format(y0); } // Is this arc empty? We’re done. @@ -111,16 +114,16 @@ Path.prototype = path.prototype = { // Is this a complete circle? Draw two arcs to complete the circle. if (da > tauEpsilon) { - this._ += "A" + r + "," + r + ",0,1," + cw + "," + (x - dx) + "," + (y - dy) + "A" + r + "," + r + ",0,1," + cw + "," + (this._x1 = x0) + "," + (this._y1 = y0); + this._ += "A" + this._format(r) + "," + this._format(r) + ",0,1," + cw + "," + this._format(x - dx) + "," + this._format(y - dy) + "A" + this._format(r) + "," + this._format(r) + ",0,1," + cw + "," + this._format(this._x1 = x0) + "," + this._format(this._y1 = y0); } // Is this arc non-empty? Draw an arc! else if (da > epsilon) { - this._ += "A" + r + "," + r + ",0," + (+(da >= pi)) + "," + cw + "," + (this._x1 = x + r * Math.cos(a1)) + "," + (this._y1 = y + r * Math.sin(a1)); + this._ += "A" + this._format(r) + "," + this._format(r) + ",0," + (+(da >= pi)) + "," + cw + "," + this._format(this._x1 = x + r * Math.cos(a1)) + "," + this._format(this._y1 = y + r * Math.sin(a1)); } }, rect: function(x, y, w, h) { - this._ += "M" + (this._x0 = this._x1 = +x) + "," + (this._y0 = this._y1 = +y) + "h" + (+w) + "v" + (+h) + "h" + (-w) + "Z"; + this._ += "M" + this._format(this._x0 = this._x1 = +x) + "," + this._format(this._y0 = this._y1 = +y) + "h" + this._format(+w) + "v" + this._format(+h) + "h" + this._format(-w) + "Z"; }, toString: function() { return this._; @@ -128,3 +131,10 @@ Path.prototype = path.prototype = { }; export default path; + +export function pathFixed(digits) { + var path = new Path; + (digits = +digits).toFixed(digits); // Validate digits. + path._format = function(x) { return +x.toFixed(digits); }; + return path; +} diff --git a/test/pathFixed-test.js b/test/pathFixed-test.js new file mode 100644 index 0000000..a58e0be --- /dev/null +++ b/test/pathFixed-test.js @@ -0,0 +1,17 @@ +var tape = require("tape"), + path = require("../"); + +tape("pathFixed.moveTo(x, y) limits the precision of x and y", function(test) { + var p = path.pathFixed(1); + p.moveTo(123.456, 789.012); + test.strictEqual(p + "", "M123.5,789"); + test.end(); +}); + +tape("pathFixed.lineTo(x, y) limits the precision of x and y", function(test) { + var p = path.pathFixed(1); + p.moveTo(0, 0); + p.lineTo(123.456, 789.012); + test.strictEqual(p + "", "M0,0L123.5,789"); + test.end(); +});