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:
- get circle center (pictured as orange dot in the image below)
- 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));
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):
I also tried with wdebeaum's example and got pretty close but not all the way. End points are little off.