0

I need to draw a circular arc to an image where I know radius (r), center point (x0, y0), start point (x1, y1) and angles (a, b => y). I need to calculate where the end point (x2, y2) is. I guess this is done with elliptical arc but I have not succeeded in it.

I have taken example from the link mentioned in the comments (How to calculate the SVG Path for an arc (of a circle)) and my code goes like this:

  1. get circle center (pictured as orange dot in the image below)
  2. calculate radius (from the left corner to center point) var radius = Math.sqrt(Math.pow(circleCenter.getY() - corner.getY(), 2) + Math.pow(circleCenter.getX() - corner.getX(), 2));
  3. calculate points like in the opsb's example above

    var start = this.polarToCartesian(circleCenter, radius, angleB);
    var end = this.polarToCartesian(circleCenter, radius, angleA);
    polarToCartesian(center: Coordinate, radius: number, angle: number): Coordinate {
        // zero angle is in 9 o'clock, angle in radian
        var xDiff = radius * Math.cos(angle - Math.PI / 2)
        var yDiff = radius * Math.sin(angle - Math.PI / 2)
        var x = center.getX() + xDiff;
        var y = center.getY() + yDiff;
    
        return new Coordinate(x, y);
    }
    

What I end up with, is here (the arrow points don't meet the lines):

enter image description here

I also tried with wdebeaum's example and got pretty close but not all the way. End points are little off.

Community
  • 1
  • 1
TKirahvi
  • 318
  • 3
  • 19
  • 1
    Can you show what you have tried, and explain how it came up short? – Scott Hunter Dec 16 '15 at 13:53
  • Please check the answers to [this question](http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle). (To the system: Well thank you for educating me that "trivial answer" should have been posted as a comment, but guess what: I don't currently have a right to post a comment. Bah.) – Peti29 Dec 16 '15 at 14:10
  • First I determine the center and start point and get radius with those. Then I try to determine end point with polarToCartesian function linked above. `var end = polarToCartesian(x0, y0, r, Math.PI - a -b);` The problem is that end point isn't always dead on on the other line, sometimes (when angle changes) the arc is too long or too short. Also, sometimes the arc swaps to the other side even though my sweep flat is always the same. I tried to swap/negate sin/cos in polarToCartesian function but didn't get it just right. – TKirahvi Dec 17 '15 at 08:09
  • Don't just describe your code, post it. – Paul LeBeau Dec 17 '15 at 10:14

0 Answers0