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

Fix a problem with ellipse drawing if at translation is applied.

Browse Source
This commit is contained in:
k1w1 2022-07-17 09:06:40 -07:00
parent 6c209fccdf
commit c64d8283d4
4 changed files with 44 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
context.js
View File

@ -1071,8 +1071,14 @@ export default (function () {
} else {
largeArcFlag = diff > Math.PI ? 1 : 0;
}
this.lineTo(startX / scaleX, startY / scaleY);
// Transform is already applied, so temporarily remove since lineTo
// will apply it again.
var currentTransform = this.__transformMatrix;
this.resetTransform();
this.lineTo(startX, startY);
this.__transformMatrix = currentTransform;
this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
{
rx:radiusX,

2
test/index.js
View File

@ -4,6 +4,7 @@ import arcTo from './tests/arcTo'
import arcTo2 from './tests/arcTo2'
import emptyArc from './tests/emptyArc'
import ellipse from './tests/ellipse'
import ellipse2 from './tests/ellipse2'
import fillstyle from './tests/fillstyle'
import globalAlpha from './tests/globalalpha'
import gradient from './tests/gradient'
@ -25,6 +26,7 @@ const tests = [
arcTo2,
emptyArc,
ellipse,
ellipse2,
fillstyle,
globalAlpha,
gradient,

2
test/rendering.test.js
View File

@ -5,6 +5,7 @@ import arcTo from './tests/arcTo'
import arcTo2 from './tests/arcTo2'
import emptyArc from './tests/emptyArc'
import ellipse from './tests/ellipse'
import ellipse2 from './tests/ellipse2'
import fillstyle from './tests/fillstyle'
import globalAlpha from './tests/globalalpha'
import gradient from './tests/gradient'
@ -26,6 +27,7 @@ const tests = {
arcTo2,
emptyArc,
ellipse,
ellipse2,
fillstyle,
globalAlpha,
gradient,

32
test/tests/ellipse2.js Normal file
View File

@ -0,0 +1,32 @@
export default function ellipse2(ctx) {
// Draw a cylinder using ellipses and lines.
var w = 100, h = 100, rx = 50, ry = 10;
var scaleX = 1.5, scaleY = 2.5;
ctx.scale(scaleX, scaleY);
ctx.translate(100, 75);
ctx.beginPath();
ctx.moveTo(-w / 2, -h / 2 + ry);
// upper arc top
ctx.ellipse(0, -h / 2 + ry, rx, ry, Math.PI, 0, Math.PI, 0);
ctx.moveTo(-w / 2, -h / 2 + ry);
// upper arc bottom
ctx.ellipse(0, -h / 2 + ry, rx, ry, Math.PI, 0, Math.PI, 1);
ctx.moveTo(-w / 2, -h / 2 + ry);
// left line
ctx.lineTo(-w / 2, + h / 2 - ry);
// lower arc
ctx.ellipse(0, h / 2 - ry, rx, ry, Math.PI, 0, Math.PI, 1);
// right line
ctx.lineTo(w / 2, -h / 2 + ry);
ctx.moveTo(-w / 2, -h / 2 + ry);
ctx.closePath();
// Remove scale before stroking because the SVG conversion is not correctly
// scaling the stroke as well. Without this the pixel differences are too
// high.
ctx.scale(1 / scaleX, 1 / scaleY);
ctx.stroke();
};