From 1ab5658372bbb4a0f718e7d87ba8529d12d74656 Mon Sep 17 00:00:00 2001 From: zenozeng Date: Mon, 3 May 2021 13:18:57 +0000 Subject: [PATCH 1/9] feat: init transform --- canvas2svg.js | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/canvas2svg.js b/canvas2svg.js index f71d359..e7c2ec7 100644 --- a/canvas2svg.js +++ b/canvas2svg.js @@ -1191,6 +1191,31 @@ } }; + /** + * SetTransform changes the current transformation matrix to + * the matrix given by the arguments as described below. + */ + ctx.prototype.setTransform = function (a, b, c, d, e, f) { + + }; + + /** + * GetTransform Returns a copy of the current transformation matrix, + * as a newly created DOMMAtrix Object + * + * @returns A DOMMatrix Object + */ + ctx.prototype.getTransform = function () { + + }; + + /** + * ResetTransform changes the current transformation matrix to the identity matrix + */ + ctx.prototype.resetTransform = function () { + + }; + /** * Not yet implemented */ @@ -1199,7 +1224,6 @@ ctx.prototype.getImageData = function () {}; ctx.prototype.putImageData = function () {}; ctx.prototype.globalCompositeOperation = function () {}; - ctx.prototype.setTransform = function () {}; //add options for alternative namespace if (typeof window === "object") { From 5af6598240b0553e371978729bd0db27238cbecd Mon Sep 17 00:00:00 2001 From: zenozeng Date: Mon, 3 May 2021 14:25:09 +0000 Subject: [PATCH 2/9] feat: resetTransform --- canvas2svg.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/canvas2svg.js b/canvas2svg.js index e7c2ec7..f70191b 100644 --- a/canvas2svg.js +++ b/canvas2svg.js @@ -1196,7 +1196,6 @@ * the matrix given by the arguments as described below. */ ctx.prototype.setTransform = function (a, b, c, d, e, f) { - }; /** @@ -1210,10 +1209,12 @@ }; /** - * ResetTransform changes the current transformation matrix to the identity matrix + * ResetTransform resets the current transformation matrix to the identity matrix + * + * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/resetTransform */ ctx.prototype.resetTransform = function () { - + this.setTransform(1, 0, 0, 1, 0, 0); }; /** From e1b678502a0008dc40297b8c4a812c7fe212b487 Mon Sep 17 00:00:00 2001 From: zenozeng Date: Mon, 3 May 2021 14:53:46 +0000 Subject: [PATCH 3/9] feat: scale --- canvas2svg.js | 83 +++++++++++++++++++++++++++++++-------------------- 1 file changed, 50 insertions(+), 33 deletions(-) diff --git a/canvas2svg.js b/canvas2svg.js index f70191b..3aa63b3 100644 --- a/canvas2svg.js +++ b/canvas2svg.js @@ -516,38 +516,6 @@ this.__currentElement.setAttribute("transform", transform); }; - /** - * scales the current element - */ - ctx.prototype.scale = function (x, y) { - if (y === undefined) { - y = x; - } - this.__addTransform(format("scale({x},{y})", {x:x, y:y})); - }; - - /** - * rotates the current element - */ - ctx.prototype.rotate = function (angle) { - var degrees = (angle * 180 / Math.PI); - this.__addTransform(format("rotate({angle},{cx},{cy})", {angle:degrees, cx:0, cy:0})); - }; - - /** - * translates the current element - */ - ctx.prototype.translate = function (x, y) { - this.__addTransform(format("translate({x},{y})", {x:x,y:y})); - }; - - /** - * applies a transform to the current element - */ - ctx.prototype.transform = function (a, b, c, d, e, f) { - this.__addTransform(format("matrix({a},{b},{c},{d},{e},{f})", {a:a, b:b, c:c, d:d, e:e, f:f})); - }; - /** * Create a new Path Element */ @@ -1194,8 +1162,15 @@ /** * SetTransform changes the current transformation matrix to * the matrix given by the arguments as described below. + * + * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform */ ctx.prototype.setTransform = function (a, b, c, d, e, f) { + if (a instanceof DOMMatrix) { + this.__transformMatrix = new DOMMatrix([a.a, a.b, a.c, a.d, a.e, a.f]); + } else { + this.__transformMatrix = new DOMMatrix([a, b, c, d, e, f]); + } }; /** @@ -1205,7 +1180,8 @@ * @returns A DOMMatrix Object */ ctx.prototype.getTransform = function () { - + let {a, b, c, d, e, f} = this.__transformMatrix; + return new DOMMatrix([a, b, c, d, e, f]); }; /** @@ -1217,6 +1193,47 @@ this.setTransform(1, 0, 0, 1, 0, 0); }; + /** + * Add the scaling transformation described by the arguments to the current transformation matrix. + * + * @param x The x argument represents the scale factor in the horizontal direction + * @param y The y argument represents the scale factor in the vertical direction. + * @see https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-scale + */ + ctx.prototype.scale = function (x, y) { + if (y === undefined) { + y = x; + } + // If either of the arguments are infinite or NaN, then return. + if (isNaN(x) || isNaN(y) || !isFinite(x) || !isFinite(y)) { + return + } + let matrix = this.getTransform().scale(x, y); + this.setTransform(matrix); + }; + + /** + * rotates the current element + */ + ctx.prototype.rotate = function (angle) { + var degrees = (angle * 180 / Math.PI); + this.__addTransform(format("rotate({angle},{cx},{cy})", {angle:degrees, cx:0, cy:0})); + }; + + /** + * translates the current element + */ + ctx.prototype.translate = function (x, y) { + this.__addTransform(format("translate({x},{y})", {x:x,y:y})); + }; + + /** + * applies a transform to the current element + */ + ctx.prototype.transform = function (a, b, c, d, e, f) { + this.__addTransform(format("matrix({a},{b},{c},{d},{e},{f})", {a:a, b:b, c:c, d:d, e:e, f:f})); + }; + /** * Not yet implemented */ From 95ff64fdbd08070bd56227e820202201de024890 Mon Sep 17 00:00:00 2001 From: zenozeng Date: Tue, 4 May 2021 10:59:54 +0000 Subject: [PATCH 4/9] feat: translate --- canvas2svg.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/canvas2svg.js b/canvas2svg.js index 3aa63b3..ad96031 100644 --- a/canvas2svg.js +++ b/canvas2svg.js @@ -1213,7 +1213,10 @@ }; /** - * rotates the current element + * Rotate adds a rotation to the transformation matrix. + * + * @param angle The rotation angle, clockwise in radians. You can use degree * Math.PI / 180 to calculate a radian from a degree. + * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate */ ctx.prototype.rotate = function (angle) { var degrees = (angle * 180 / Math.PI); @@ -1221,10 +1224,15 @@ }; /** - * translates the current element + * Translate adds a translation transformation to the current matrix. + * + * @param x Distance to move in the horizontal direction. Positive values are to the right, and negative to the left. + * @param y Distance to move in the vertical direction. Positive values are down, and negative are up. + * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate */ ctx.prototype.translate = function (x, y) { - this.__addTransform(format("translate({x},{y})", {x:x,y:y})); + const matrix = this.getTransform().translate(x, y); + this.setTransform(matrix); }; /** From dada4e25b0ba1370dd1e26226cae95c47ccd9b46 Mon Sep 17 00:00:00 2001 From: Zeno Zeng Date: Sun, 23 May 2021 00:58:30 +0800 Subject: [PATCH 5/9] test: example/transform --- test/example/transform.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 test/example/transform.js diff --git a/test/example/transform.js b/test/example/transform.js new file mode 100644 index 0000000..b46ef3b --- /dev/null +++ b/test/example/transform.js @@ -0,0 +1,21 @@ +window.C2S_EXAMPLES['transform'] = function(ctx) { + // case 1 + ctx.fillStyle = "rgba(255, 0, 0, 0.5)"; + ctx.setTransform(1,1,0,1,0,0); + ctx.fillRect(0,0,100,100); + + // case 2 + ctx.resetTransform(); + ctx.fillStyle = "red"; + ctx.fillRect(0, 0, 50, 50); + + // case 3 + ctx.resetTransform(); + ctx.fillStyle = "rgba(0, 0, 255, 0.5)"; + ctx.moveTo(0, 0); + ctx.lineTo(100, 0) + ctx.transform(2, 0, 0, 2, 0, 0) + ctx.lineTo(100, 100) + ctx.closePath() + ctx.fill() +} \ No newline at end of file From 6b1a1573f43a840913682adc88f5595feb50d90b Mon Sep 17 00:00:00 2001 From: Zeno Zeng Date: Sun, 23 May 2021 15:13:55 +0800 Subject: [PATCH 6/9] gulp update_examples --- test/playground.html | 4 ++-- test/testrunner.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/test/playground.html b/test/playground.html index 67cf143..ca20fe9 100644 --- a/test/playground.html +++ b/test/playground.html @@ -20,7 +20,7 @@
- +
@@ -64,7 +64,7 @@ -
+
-
+
-
+
-
+