When creating a graphical editor for drawing arcs I am going to use the arc method (double centerX, double centerY, double radiusX, double radiusY, double startAngle, double length). startAngle is the angle on the circle in degrees, length is the arc length in degrees. How can I determine this angle (startAngle) if I have the coordinates of the center of the drawn circle and the length of the radius? Code of the method itself

public void draw(GraphicsContext gc) { gc.beginPath(); gc.arc(x + center.x, y + center.y, radius, radius, startAngle, length); gc.stroke(); }

enter image description here

Two words about the principle of my implementation: when the mouse is clamped, I draw a 360 * arc at the appropriate coordinates (I have the coordinates of the center of the circle and the radius), but I don’t know how to calculate the angle further. Thank you in advance!

  • one
    Maybe cosine theorem will help - Andrey M
  • I just did it 3 days ago only on svg, but since the animation there lays I will redo it under the canvas today I will write the answer (if I don’t forget) (dig in the direction of cosines and sines and pi) - Gotha

1 answer 1

This graph will help you for a long time. I tried to figure out how to draw the arcs, so that you decide (if it comes out, throw off what you compare), closer to an hour I will throw my decision with code

  function line(o){ var X = ox||0, //позиция центра по XY = oy||0, //позиция центра по Y SP = o.sp||0, // 1 точка дуги (в пи) EP = o.ep||2.0, // 2 точка дуги (в пи) R = or||10, // радиус S = os||10, //количество точек в дуге W = (ow)? (ow<=R*2)?ow:R*2 : 10; //ширина W = [R-(W/2),R+(W/2)];// выравниваем ширину по центру EP = (EP-SP <= 6.28)?EP:EP-(EP-SP-6.28); // определяем длину дуги и не даем ей быть больше чем 2пи P = EP-SP; P = (Math.round(P * 100)/100); //функция для уменьшения нулей function mr(Nn){ return (Math.round(Nn * 100)/100) } var linP = 'M'+(Math.cos(SP)*W[0]+X)+','+(Math.sin(SP)*W[0]+Y); //перемещение курсора в точку начала полоски linP += ((P == 6.28)?" M":" L")+mr((Math.cos(SP)*W[0]+X))+','+mr((Math.sin(SP)*W[0]+Y)); linP += ((P == 6.28)?" M":" L")+mr((Math.cos(SP)*W[1]+X))+','+mr((Math.sin(SP)*W[1]+Y)); //рисование первой закрывающей линии,если круг полный перемещение курсора for(i=1;i<S;i++){ var Vect = (i*(P)/(2))/(S/2)+SP; linP += ' L'+mr((Math.cos(Vect)*W[1]+X))+','+mr((Math.sin(Vect)*W[1]+Y)); } linP += ((P == 6.28)?"z":"") //рисование ДУГИ если круг полный замыкаем линию. //тоже самое только с нижней дугой и 2 закрывающей линией \/ linP += ((P == 6.28)?" M":" L")+mr((Math.cos(EP)*W[1]+X))+','+mr((Math.sin(EP)*W[1]+Y)); linP += ((P == 6.28)?" M":" L")+mr((Math.cos(EP)*W[0]+X))+','+mr((Math.sin(EP)*W[0]+Y)); for(i=S;i>0;i--){ var Vect = (i*(P)/(2))/(S/2)+SP; linP += ' L'+mr((Math.cos(Vect)*W[0]+X))+','+mr((Math.sin(Vect)*W[0]+Y)); } linP += "z" return linP //на выходе кординаты точек правдо тут еще вписаны буквы для svg }
  • I currently can not deal with this issue, because for the time being, I'm doing something else. Your link will definitely see. BUT, if you also solve this problem, then the following code can help you: the angle of the segment AB (a-point on the canvas, in the center of the circle) in radians can be measured by the following function: pi-atan2 (y (B) -y ( A), - (x (B) -x (A))) - uncleSAM
  • @uncleSAM I didn’t understand how to use your function, but I dropped the code there for svg or there are letters, and there are just cords. I don’t know what to do there for the canvas. I have never worked, but the function’s recording will hardly change much. I just now noticed that you are now in javafx. I hope you will understand the code on pure js) - Gotha
  • @uncleSAM I looked at the canvas a little (tag in HTML) there is already a ready-made function for drawing the arc, but as I understand, you don’t need the canvas tag, I just made the code with exactly js but it would be easy to rewrite it to another language jsfiddle.net/jkchzhtv ) - Gotha
  • one
    you're cool, what else to say?) - uncleSAM
  • it's just that he himself has long suffered in addition to helping his comrades - Gotha