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

Add support for ellipses

Browse Source
This commit is contained in:
k1w1 2022-07-15 17:47:47 -07:00
parent f4b7ece357
commit 6c209fccdf
2 changed files with 43 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
context.js
View File

@ -1037,19 +1037,27 @@ export default (function () {
if (startAngle === endAngle) { if (startAngle === endAngle) {
return; return;
} }
x = this.__matrixTransform(x, y).x;
y = this.__matrixTransform(x, y).y;
var scaleX = Math.hypot(this.__transformMatrix.a, this.__transformMatrix.b);
var scaleY = Math.hypot(this.__transformMatrix.c, this.__transformMatrix.d);
radiusX = radiusX * scaleX;
radiusY = radiusY * scaleY;
startAngle = startAngle % (2*Math.PI); startAngle = startAngle % (2*Math.PI);
endAngle = endAngle % (2*Math.PI); endAngle = endAngle % (2*Math.PI);
if(startAngle === endAngle) { if(startAngle === endAngle) {
endAngle = ((endAngle + (2*Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2*Math.PI); endAngle = ((endAngle + (2*Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2*Math.PI);
} }
var endX = x + Math.cos(-rotation) * radiusX * Math.cos(endAngle) var endX = x + Math.cos(-rotation) * radiusX * Math.cos(endAngle)
+ Math.sin(-rotation) * radiusY * Math.sin(endAngle), + Math.sin(-rotation) * radiusY * Math.sin(endAngle),
endY = y - Math.sin(-rotation) * radiusX * Math.cos(endAngle) endY = y - Math.sin(-rotation) * radiusX * Math.cos(endAngle)
+ Math.cos(-rotation) * radiusY * Math.sin(endAngle), + Math.cos(-rotation) * radiusY * Math.sin(endAngle),
startX = x + Math.cos(-rotation) * radiusX * Math.cos(startAngle) startX = x + Math.cos(-rotation) * radiusX * Math.cos(startAngle)
+ Math.sin(-rotation) * radiusY * Math.sin(startAngle), + Math.sin(-rotation) * radiusY * Math.sin(startAngle),
startY = y - Math.sin(-rotation) * radiusX * Math.cos(startAngle) startY = y - Math.sin(-rotation) * radiusX * Math.cos(startAngle)
+ Math.cos(-rotation) * radiusY * Math.sin(startAngle), + Math.cos(-rotation) * radiusY * Math.sin(startAngle),
sweepFlag = counterClockwise ? 0 : 1, sweepFlag = counterClockwise ? 0 : 1,
largeArcFlag = 0, largeArcFlag = 0,
diff = endAngle - startAngle; diff = endAngle - startAngle;
@ -1063,10 +1071,18 @@ export default (function () {
} else { } else {
largeArcFlag = diff > Math.PI ? 1 : 0; largeArcFlag = diff > Math.PI ? 1 : 0;
} }
this.lineTo(startX, startY); this.lineTo(startX / scaleX, startY / scaleY);
this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}", this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
{rx:radiusX, ry:radiusY, xAxisRotation:rotation*(180/Math.PI), largeArcFlag:largeArcFlag, sweepFlag:sweepFlag, endX:endX, endY:endY})); {
rx:radiusX,
ry:radiusY,
xAxisRotation:rotation*(180/Math.PI),
largeArcFlag:largeArcFlag,
sweepFlag:sweepFlag,
endX:endX,
endY:endY
}));
this.__currentPosition = {x: endX, y: endY}; this.__currentPosition = {x: endX, y: endY};
}; };

43
test/tests/ellipse.js
View File

@ -1,28 +1,25 @@
export default function ellipse(ctx) { export default function ellipse(ctx) {
// Draw shapes
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 3; j++) {
ctx.beginPath();
var x = 25 + j * 50; // x coordinate
var y = 25 + i * 50; // y coordinate
var radiusX = 20; // Arc radius
var radiusY = 10; // Arc radius
var rotation = Math.PI + (Math.PI * (i+j)) / 8;
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
var clockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
//ctx.scale(2,0.5) ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, clockwise);
// Draw shapes if (i > 1) {
for (let i = 0; i < 4; i++) { ctx.fill();
for (let j = 0; j < 4; j++) { } else {
ctx.beginPath(); ctx.stroke();
var x = 25 + j * 50; // x coordinate }
var y = 25 + i * 50; // y coordinate }
var radiusX = 20; // Arc radius }
var radiusY = 10; // Arc radius
var rotation = Math.PI + (Math.PI * (i+j)) / 8;
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
var clockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, clockwise);
if (i > 1) {
ctx.fill();
} else {
ctx.stroke();
}
}
}
}; };