Partial Ellipse

[dan-fritchman]

Great library, super helpful, thanks much for your work on it!

This is either a question or feature request: Is there a way to draw a "partial ellipse" - i.e. less than 360 degrees of one?
(Or maybe that'd better be called an "ellipse arc".)

Similar to the canvas-based examples shown here: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse

Particularly their use of the startAngle and endAngle attributes.
It doesn't seem that Two/ArcSegment can be patterned onto an ellipse (i.e. with two difference "radii").
And also doesn't seem that Two.Ellipse supports those angular attributes.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
ctx.beginPath();
ctx.ellipse(60, 75, 50, 30, Math.PI * 0.25, 0, Math.PI * 1.5);
ctx.fill();

ctx.fillStyle = "blue";
ctx.beginPath();
ctx.ellipse(150, 75, 50, 30, Math.PI * 0.25, 0, Math.PI);
ctx.fill();

ctx.fillStyle = "green";
ctx.beginPath();
ctx.ellipse(240, 75, 50, 30, Math.PI * 0.25, 0, Math.PI, true);
ctx.fill();

Thanks again!

[jonobr1]

Not exactly. You can use path.beginning and path.ending to get similar shapes to the ones you posted like so:

https://codepen.io/jonobr1/pen/LYXxeEx?editors=0010

However, you wouldn't construct them the same way. You can always import objects from SVG through two.interpret(svgElement) or two.load(pathToSVGFile) and manipulate them in Two.js.

Should probably add this type of shape to the extras folder though. Basically, it's the same execution flow as ArgSegment, but with width and height instead of radii.

[dan-fritchman]

Super helpful thanks!

Follow-up: is there any way to draw one that goes through angle=0? E.g. from -pi/2 to pi/2.
The one way I've made it work is to detect this case, and create a Group of two ellipses when it happens.

Thanks again!

[jonobr1]

Glad it's working out for you,

I'm sorry I don't fully understand. Do you have a picture illustrating this?

[dan-fritchman]

No worries - think what I've got from this answer works great. Thanks again!

[dickinson0718]

Isn't this handled by the Two.Arc component? https://codepen.io/jonobr1/pen/jOZxEYm

[jonobr1]

Yes, I believe Two.Arc was added due to this and other questions similar to it