draw half an ellipse with drawEllipse?

[planets]

I was wondering... for a project I need to draw parts of an ellipse/circle ... so for example only a 180 degrees arc, or a 90 degrees arc, preferably even a x degree arc,

so how would you go about creating this?

 

I was looking at the code in pixi.dev.js, ... is there a possibility to add an additional function that only draws the upper or lower half of an ellipse?

 

I absolutely want to NOT use mask to achieve this.

 

Thanks in advance for your help.

[planets]

ok, I am getting somewhere... If I remove those lines 8824 - 8827 in pixi.dev.js

context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);context.closePath();

then it draws only the upper half of the ellipse.

 

Ok, I will try and insert a new function for graphics that will draw an arc.

[planets]

Update:

 

So I adjusted the pixi.dev.js to be able to draw only the "upper" or "lower" half of an ellipse.

 

For this I changed to following:

 

I added a new parameter called side to the drawEllipse command:

PIXI.Graphics.prototype.drawEllipse = function( x, y, width, height, side){    if (!this.currentPath.points.length) this.graphicsData.pop();    this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,                        fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,                        points:[x, y, width, height], type:PIXI.Graphics.ELIP, side:side};    this.graphicsData.push(this.currentPath);    this.dirty = true;    return this;};

you can ommit the parameter if you don't need it.

But now you can add "upper" or "lower" to the command:

drawEllipse(0,0,200,100,"upper")

Now for pixi to be able to process this correctly we need to adjust the drawing functions too:

 

So in the PIXI.CanvasGraphics.renderGraphics = function(graphics, context)

function we change / add a few things:

Line 8821, we turn this:

context.moveTo(x, ym);context.bezierCurveTo(x, (ym - oy), xm - ox, y, xm, y);context.bezierCurveTo(xm + ox, y, xe, (ym - oy), xe, ym);                context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);context.closePath();

into this:

            if(data.side == null){                context.moveTo(x, ym);                context.bezierCurveTo(x, (ym - oy), xm - ox, y, xm, y);                context.bezierCurveTo(xm + ox, y, xe, (ym - oy), xe, ym);                                context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);                context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);                context.closePath();            }            if(data.side == "upper"){                context.moveTo(x, ym);                context.bezierCurveTo(x, (ym - oy), xm - ox, y, xm, y);                context.bezierCurveTo(xm + ox, y, xe, (ym - oy), xe, ym);            }            if(data.side == "lower"){                context.moveTo(x, ym);                context.bezierCurveTo(x, -(ym - oy), xm - ox, -y, xm, -y);                context.bezierCurveTo(xm + ox, -y, xe, -(ym - oy), xe, -ym);            }

Hope this will be useful to someone!