Svg 椭圆弧端点的计算

Svg 椭圆弧端点的计算,svg,Svg,我需要画一个圆弧到一个我知道半径(r)、中心点(x0,y0)、起点(x1,y1)和角度(a,b=>y)的图像上。我需要计算终点(x2,y2)的位置。我想这是用椭圆弧做的,但我还没有成功 我从注释()中提到的链接中选取了一个示例,我的代码如下所示: 获取圆心(如下图中的橙色圆点所示) 计算半径(从左角到中心点) var radius=Math.sqrt(Math.pow(circleCenter.getY()-corner.getY(),2)+Math.pow(circleCenter.getX(

我需要画一个圆弧到一个我知道半径(r)、中心点(x0,y0)、起点(x1,y1)和角度(a,b=>y)的图像上。我需要计算终点(x2,y2)的位置。我想这是用椭圆弧做的,但我还没有成功

我从注释()中提到的链接中选取了一个示例,我的代码如下所示:

  • 获取圆心(如下图中的橙色圆点所示)
  • 计算半径(从左角到中心点)
    var radius=Math.sqrt(Math.pow(circleCenter.getY()-corner.getY(),2)+Math.pow(circleCenter.getX()-corner.getX(),2))
  • 计算点,如上面的opsb示例所示

    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);
    }
    
  • 我最终得到的结果是(箭头不符合直线):


    我还尝试了wdebeaum的例子,结果非常接近,但并非完全如此。终点差不了多少

    你能展示一下你尝试过的东西,并解释一下它是如何失败的吗?请检查答案。(对系统来说:谢谢你教育我“琐碎的答案”应该作为评论发布,但是你猜怎么着:我现在没有权利发布评论。呸。)首先,我确定中心和起点,然后用这些来获得半径。然后我尝试用上面链接的极笛卡尔函数来确定终点<代码>var端=极笛卡尔(x0,y0,r,Math.PI-a-b)问题在于,终点并不总是死在另一条线上,有时(当角度改变时)弧太长或太短。此外,有时圆弧交换到另一侧,即使我的扫掠平面始终相同。我试图在极笛卡尔函数中交换/否定正/反,但没有得到正确的结果。不要只是描述你的代码,发布它。