如何计算弧的起点和终点的精确点位置 [英] How to calculate the exact point position of the beginning and end of the arc

问题描述

我想通过计算找到弧的终点和起点。

I want to find the end point and the start point of the arc by calculate.

你可以输入

范围Raduis：150

Range Raduis :150

范围起始角度：60

范围结束角度：160

Range End Angle: 160

请参阅 Demo jsFiddle

链接到屏幕截图显示问题

非常感谢

function draw(val,StartAngle,EndAngle,XAxis,YAxis){
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d'),
        x = 200,//center raduis
        y = 400;//center raduis
        d = EndAngle;//End Angle
        s = StartAngle;//Start angle
        X_Axis = XAxis;//feature to enable to move the circle on axis X
        Y_Axis = YAxis;// feature to enable to move the circle on axis Y

        p ={}
        p.r = val;
        p.d = d*2*Math.PI/360;
        p.s = s*2*Math.PI/360;
        p.x = X_Axis + p.d*Math.cos(p.r);
        p.y = Y_Axis + p.d*Math.sin(p.r);

        p.pex = p.x + p.r*Math.cos(d);
        p.pey = p.y - p.r*Math.sin(s);

        p.psx = p.x - Math.sin(s) * p.r;
        p.psy = p.y - Math.cos(s) * p.r ;

        context.clearRect(0, 0, canvas.width, canvas.height);

        context.beginPath();
        context.lineWidth = 1;

        context.arc(p.x ,p.y ,p.r,p.s,p.d);

        context.fillStyle = 'green';
        context.fillRect(x,y+val,2,2); // crnter circle

        context.fillStyle = 'yellow';
        context.moveTo(x-p.d,y+p.d);
        context.lineTo(x+p.d,y+p.d);

        context.stroke();

        // line color
        context.strokeStyle = 'black';
        context.stroke();

        // Cut off the top of the circle.
        //context.clearRect(0, 0, canvas.width, y);

        // This stuff's just to show some dots
        context.fillStyle = 'red';
        context.fillRect(x-1,y-1,2,2); // Middle
        context.fillRect(p.pex,p.pey,4,4);//Target point 1
        context.fillRect(p.psx,p.psy,4,4);// Target point 2

        context.fillRect(x-2,y+d+val-2,4,4); // Point on circle
        context.fillStyle = 'black';


    }

推荐答案

< h1>一般解决方案

General solution

  var r_length = ... // radius
  var r_start_angle = RangeStartAngle / 360 * 2 * Math.PI; // lets convert degrees to radians
  var r_end_angle = RangeEndAngle / 360 * 2 * Math.PI;

开始头寸

  x = circle_center_x + Math.cos(r_start_angle) * r_length;
  y = circle_center_y + Math.sin(r_start_angle) * r_length;

结束职位

  x = circle_center_x + Math.cos(r_end_angle) * r_length;
  y = circle_center_y + Math.sin(r_end_angle) * r_length;

绘制弧线

  context.arc(circle_center_x ,circle_center_y, r_start_angle, r_end_angle);

您可能想要使用该知识重写您的功能

You may want to rewrite your function using that knowledge

这篇关于如何计算弧的起点和终点的精确点位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！