Questions tagged [geometric-arc]

A geometric shape that represents a segment of a circle. Generally is measured by two angles, starting and ending, and it's radius. If you need an arc of an ellipse, please be sure to tag the question with the [ellipse] tag as well.

Geometric Definition:

An arc is a geometric shape used for drawing circle segments. It is comprised of three main parts:

  • staring θ: the angle measure, for the first part of the sub-circle, usually in radians
  • ending θ: the angle measure, for the ending part of the sub-circle, usually in radians
  • radius:     the radius of the circle that this arc is a part of.

Arcs in computer programming cannot be accurately represented, as the value of π is infinite. Thus, any circle or arc you see will always be slightly inaccurate, although most algorithms usually keep that with a few pixels.

The length of an arc can be approximated by the following formula:

       Arc Length Forumla

Notice that on some systems, the length of an arc can be negative, specifying that it moves counter-clockwise around the circle, instead of clockwise. This is usually represented by a flag being set from the calling function.

On Specific Systems:

For windows, arcs can be drawn using the functions, and can also draw arcs of ellipses.

Example in :

void drawArc(Graphics myGraphics, Pen myPen, float x, float y, float startTheta, float endTheta, float radius)
{
    myGraphics.DrawArc(myPen, x - radius, y - radius, radius * 2, radius * 2, startTheta, endTheta);
}

Arcs can also be drawing using the equivalent drawing functions.


For Mac OS X, arcs can be drawn using the NSBezierPath class in AppKit.

Example in :

void drawArc(float x, float y, float startTheta, float endTheta, float radius)
{
    NSBezierPath *bezierPath = [NSBezierPath bezierPath];
    [bezierPath appendBezierPathWithArcWithCenter:CGPointMake(x, y) radius:radius startAngle:startTheta endAngle:endTheta];
    [bezierPath stroke]; // draws with current set color
}

In Java, you can draw arcs as well, using the portable functions found in the Graphics class.

77 questions
181
votes
12 answers

Circle drawing with SVG's arc path

Using SVG path, we can draw 99.99% of a circle and it shows up, but when it is 99.99999999% of a circle, then the circle won't show up. How can it be fixed? The following SVG path can draw 99.99% of a circle: var paper = Raphael(0, 0, 300,…
nonopolarity
  • 146,324
  • 131
  • 460
  • 740
36
votes
5 answers

Android: looking for a drawArc() method with inner & outer radius

I have the following custom view: This I have achieved by using the Canvas' drawArc() method. However, with this drawArc() method I cannot limit the arc's inner radius. What I'd like to have is something like this: where there is only an outer…
znq
  • 44,613
  • 41
  • 116
  • 144
26
votes
4 answers

Android - How to draw an arc based gradient

I am trying to create an arc (variable number of degrees) that gradually goes from one color to another. From example from blue to red: This is my code: SweepGradient shader = new SweepGradient(center.x, center.y,…
Yoav
  • 2,077
  • 6
  • 27
  • 48
26
votes
3 answers

different fillStyle colors for arc in canvas

I imagine the solution to this is very simple, and apologize in advance if this is painfully obvious, but I can't seem to figure out how to set two different fillStyles for two different arcs ...I just wanna be able to draw different color circles.…
Nick Briz
  • 1,917
  • 3
  • 20
  • 34
25
votes
7 answers

drawing centered arcs in raphael js

I need to draw concentric arcs of various sizes using raphael.js. I tried to understand the code behind http://raphaeljs.com/polar-clock.html, which is very similar to what I want, but, whithout comments, it is quite difficult to fathom. Ideally, I…
user592699
  • 481
  • 1
  • 7
  • 15
22
votes
4 answers

How to determine whether a point (X,Y) is contained within an arc section of a circle (i.e. a Pie slice)?

Imagine a circle. Imagine a pie. Imagine trying to return a bool that determines whether the provided parameters of X, Y are contained within one of those pie pieces. What I know about the arc: I have the CenterX, CenterY, Radius, StartingAngle,…
AlishahNovin
  • 1,904
  • 3
  • 20
  • 37
20
votes
1 answer

How to draw a circle sector on an html5 canvas?

I'm trying to make a sort of pie-chart shape on a canvas element, however I can't seem to find any function that does this by itself. I only seem to be able to draw full circles and segments. Is there an easy way to do this? (See also: Wikipedia on…
dsavi
  • 1,723
  • 3
  • 12
  • 8
15
votes
2 answers

Draw arc with 2 points and center of the circle

I have two points of circle and center of this circle. I want to draw an arc between these points. Method drawArc is to simple and doesn't fit my purpose. Anybody help?
CarolusPl
  • 639
  • 4
  • 9
  • 18
11
votes
6 answers

How to rotate text using canvas in Android

I was drawing a pie chart using canvas in Android. I am using the below code. I draw a text on each slice of that pie chart (draw arc on path), now I want to draw the text length wise i.e. from center to end of the each slice, so how to rotate the…
dev_android
  • 8,698
  • 22
  • 91
  • 148
11
votes
7 answers

Define a circle / arc animation in SVG

Does anyone know how to define an animated arc / circle in SVG, such that the arc starts at 0 degrees and ends at 360 degrees?
GarethOwen
  • 6,075
  • 5
  • 39
  • 56
11
votes
2 answers

svg arc, how to determine sweep and larg-arc flags given start end & via point

In svg I want to build a function which returns all parameters for an "arc element" in a path-d attribute. Given a start point, end point and a via-point. (3 points on a unstraight line are per definition on a circle). I'm only interested in…
dr jerry
  • 9,768
  • 24
  • 79
  • 122
9
votes
3 answers

Android: draw arc within canvas api with a gradient fill color

I want to draw an arc using canvas using a gradient fill. How can achieve this?
Swapnil
  • 2,409
  • 4
  • 26
  • 48
9
votes
3 answers

How to calculate (x,y) for a fixed arc length away from a point on a circumference

I've spent so many hours on this I can feel my sanity slowly slipping. So any help would be really truly appreciated. I'll try and be as succinct as possible. I have a circle on a 2D plane. I know the cartesian coordinates for it's central point(C)…
JConway
  • 569
  • 5
  • 13
9
votes
2 answers

Implementing SVG arc curves in Python

I'm trying to implement SVG path calculations in Python, but I'm running into problems with Arc curves. I think the problem is in the conversion from end point to center parameterization, but I can't find the problem. You can find notes on how to…
Lennart Regebro
  • 167,292
  • 41
  • 224
  • 251
8
votes
4 answers

Getting End Point in ArcSegment with Start X/Y and Start+Sweep Angles

Does anyone have a good algorithm for calculating the end point of ArcSegment? This is not a circular arc - it's an elliptical one. For example, I have these initial values: Start Point X = 0.251 Start Point Y = 0.928 Width Radius = 0.436 Height…
Stan
  • 746
  • 1
  • 17
  • 35
1
2 3 4 5 6