context2d arc issue

[SmythConor]

I have an issue with exporting a pie chart svg using jspdf 1.5.3.

This issue can be reproduced using the examples/canvg_context2d/bar_graph_with_text_and_lines.html using the following svg:

<svg id="svg" width="815.29" height="481.78" xmlns="http://www.w3.org/2000/svg">
	<g transform="translate(0, 0)">
		<g transform="translate(440.5, 168.5)">
			<g>
				<path fill="#5cbae6" d="M7.841413454940502e-15,-128.06A128.06,128.06 0 1,1 -126.47379768010367,-20.093334725032697L0,0Z" />
			</g>
			<g>
				<path fill="#b6d957" d="M-126.47379768010367,-20.093334725032697A128.06,128.06 0 0,1 -2.3524240364821506e-14,-128.06L0,0Z" />
			</g>
		</g>
	</g>
</svg>

The resulting pdf doesn't have the correct arcs drawn.

This was not reproducible using the 1.4.1 version of jspdf before the context2d refactor.

[Uzlopak]

Oha, have to check this.

[SmythConor]

Reverting the createArc function to the previous implementation seems to help a bit:

    c2d.internal.createArc = function (radius, startAngle, endAngle, anticlockwise) {
        var EPSILON = 0.00001; // Roughly 1/1000th of a degree, see below
        var twoPI = Math.PI * 2;
        var piOverTwo = Math.PI / 2.0;

        // normalize startAngle, endAngle to [0, 2PI]
        var startAngleN = startAngle;
        if (startAngleN < twoPI || startAngleN > twoPI) {
            startAngleN = startAngleN % twoPI;
        }
        if (startAngleN < 0) {
            startAngleN = twoPI + startAngleN;
        }

        while (startAngle > endAngle) {
            startAngle = startAngle - twoPI;
        }
        var totalAngle = Math.abs(endAngle - startAngle);
        if (totalAngle < twoPI) {
            if (anticlockwise) {
                totalAngle = twoPI - totalAngle;
            }
        }

        // Compute the sequence of arc curves, up to PI/2 at a time.
        var curves = [];
        var sgn = anticlockwise ? -1 : +1;

        var a1 = startAngleN;
        for (; totalAngle > EPSILON;) {
            var remain = sgn * Math.min(totalAngle, piOverTwo);
            var a2 = a1 + remain;
            curves.push(createSmallArc.call(this, radius, a1, a2));
            totalAngle -= Math.abs(a2 - a1);
            a1 = a2;
        }

        return curves;
    };

[Uzlopak]

Hello Conor, I will check it later ;). I invested few hours for the arc issue, but I was having the feeling that my changes are not sufficient enough. Will see if the changes are fixing this issue. Conor Smyth <notifications@github.com> schrieb am Fr., 12. Apr. 2019, 12:44:

…

Reverting the createArc function to the previous implementation seems to help a bit: c2d.internal.createArc = function (radius, startAngle, endAngle, anticlockwise) { var EPSILON = 0.00001; // Roughly 1/1000th of a degree, see below var twoPI = Math.PI * 2; var piOverTwo = Math.PI / 2.0; // normalize startAngle, endAngle to [0, 2PI] var startAngleN = startAngle; if (startAngleN < twoPI || startAngleN > twoPI) { startAngleN = startAngleN % twoPI; } if (startAngleN < 0) { startAngleN = twoPI + startAngleN; } while (startAngle > endAngle) { startAngle = startAngle - twoPI; } var totalAngle = Math.abs(endAngle - startAngle); if (totalAngle < twoPI) { if (anticlockwise) { totalAngle = twoPI - totalAngle; } } // Compute the sequence of arc curves, up to PI/2 at a time. var curves = []; var sgn = anticlockwise ? -1 : +1; var a1 = startAngleN; for (; totalAngle > EPSILON;) { var remain = sgn * Math.min(totalAngle, piOverTwo); var a2 = a1 + remain; curves.push(this.createSmallArc(radius, a1, a2)); totalAngle -= Math.abs(a2 - a1); a1 = a2; } return curves; }; — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2314 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AE0yHKVpk1rPWXKbwCQSAYNxI_LM4Zd_ks5vgGN6gaJpZM4bpAMs> .

[Uzlopak]

Well...

[SmythConor]

Yes, doesn't fix it but it's an improvement. Seems like there's an issue filling an arc so there's probably a point or two missing from the path that needs to be taken to correctly complete the arc.

[Uzlopak]

Well, it is just doing the Sekante. If you dig further in it. I am digging into it too. Would be cool if we could fix it ;)

[SmythConor]

Yes I'll be looking into it as well so I'll let you know if I get anywhere!

Just there was work done previously in this area, hasn't helped me figuring it out but it might ring some bells with yourself!
https://github.com/MrRio/jsPDF/commits/master?before=b5cd29b5515eb7473c4a6de2d91292d4c3ece695+840

#1043
#1044

[Uzlopak]

That is tooo old. I loaded 1.4.1 in rawgit and injected your svg with developer tools into the website and try to compare the generated pdf and the steps of context2d to generate the PDF.

[Uzlopak]

I think i fixed it. Have to do more tests.

[Uzlopak]

Done with #2417.
nice.

[SmythConor]

Great, thanks! I'll check it out on Monday and let you know if I notice anything!

[SmythConor]

Works with the pie chart given as an example however here's another example where it does not work:

<svg id="svg" width="815.29" height="481.78" xmlns="http://www.w3.org/2000/svg">
	<g transform="translate(14, 57.96)">
		<g>
			<g transform="translate(0, 0)">
				<g transform="translate(350.8409375, 146.52)">
					<g>
						<path fill="#5cbae6" d="M6.818539462420668e-15,-111.35520000000001A111.35520000000001,111.35520000000001 0 1,1 -109.97591000646166,-17.472257589980956L-54.98795500323083,-8.736128794990478A55.677600000000005,55.677600000000005 0 1,0 3.409269731210334e-15,-55.677600000000005Z"></path>
					</g>
					<g>
						<path fill="#b6d957" d="M-109.97591000646166,-17.472257589980956A111.35520000000001,111.35520000000001 0 0,1 -2.0455618387262003e-14,-111.35520000000001L-1.0227809193631001e-14,-55.677600000000005A55.677600000000005,55.677600000000005 0 0,0 -54.98795500323083,-8.736128794990478Z"></path>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg>