evert/svgcanvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed problem when rotation is applied

Browse Source
This commit is contained in:
k1w1 2022-07-17 09:55:39 -07:00
parent c64d8283d4
commit 6e7449a639
2 changed files with 30 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
context.js
View File

@ -1038,12 +1038,13 @@ export default (function () {
return; return;
} }
x = this.__matrixTransform(x, y).x; var transformedCenter = this.__matrixTransform(x, y);
y = this.__matrixTransform(x, y).y; x = transformedCenter.x;
var scaleX = Math.hypot(this.__transformMatrix.a, this.__transformMatrix.b); y = transformedCenter.y;
var scaleY = Math.hypot(this.__transformMatrix.c, this.__transformMatrix.d); var scale = this.__getTransformScale();
radiusX = radiusX * scaleX; radiusX = radiusX * scale.x;
radiusY = radiusY * scaleY; radiusY = radiusY * scale.y;
rotation = rotation + this.__getTransformRotation()
startAngle = startAngle % (2*Math.PI); startAngle = startAngle % (2*Math.PI);
endAngle = endAngle % (2*Math.PI); endAngle = endAngle % (2*Math.PI);
@ -1338,6 +1339,25 @@ export default (function () {
return new DOMPoint(x, y).matrixTransform(this.__transformMatrix) return new DOMPoint(x, y).matrixTransform(this.__transformMatrix)
} }
/**
*
* @returns The scale component of the transform matrix as {x,y}.
*/
Context.prototype.__getTransformScale = function() {
return {
x: Math.hypot(this.__transformMatrix.a, this.__transformMatrix.b),
y: Math.hypot(this.__transformMatrix.c, this.__transformMatrix.d)
};
}
/**
*
* @returns The rotation component of the transform matrix in radians.
*/
Context.prototype.__getTransformRotation = function() {
return Math.atan2(this.__transformMatrix.b, this.__transformMatrix.a);
}
/** /**
* *
* @param {*} sx The x-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted. * @param {*} sx The x-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.

7
test/tests/ellipse2.js
View File

@ -2,10 +2,11 @@
export default function ellipse2(ctx) { export default function ellipse2(ctx) {
// Draw a cylinder using ellipses and lines. // Draw a cylinder using ellipses and lines.
var w = 100, h = 100, rx = 50, ry = 10; var w = 100, h = 100, rx = 50, ry = 10;
var scaleX = 1.5, scaleY = 2.5; var scaleX = 1.5, scaleY = 1.2;
ctx.rotate(Math.PI / 10);
ctx.scale(scaleX, scaleY); ctx.scale(scaleX, scaleY);
ctx.translate(100, 75); ctx.translate(200, 25);
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(-w / 2, -h / 2 + ry); ctx.moveTo(-w / 2, -h / 2 + ry);
@ -27,6 +28,6 @@ export default function ellipse2(ctx) {
// Remove scale before stroking because the SVG conversion is not correctly // Remove scale before stroking because the SVG conversion is not correctly
// scaling the stroke as well. Without this the pixel differences are too // scaling the stroke as well. Without this the pixel differences are too
// high. // high.
ctx.scale(1 / scaleX, 1 / scaleY); ctx.resetTransform();
ctx.stroke(); ctx.stroke();
}; };