相关疑难解决方法(0)

好的,这不是一个错误,但我对如何通过Bézier曲线在点之间获得完美的圆弧感到困惑.

我需要这样的形状:

所以我从中心点,半径和角度计算出这样的四个角点,用下面的公式计算:(x？,y？)=(x + dcosα,y + dsinα),这在我的coffeescript看起来像这样:

x1 = centerPointX+outerRadius*Math.cos(currentAngle)
y1 = centerPointY+outerRadius*Math.sin(currentAngle)
x2 = centerPointX+innerRadius*Math.cos(currentAngle)
y2 = centerPointY+innerRadius*Math.sin(currentAngle)
x3 = centerPointX+outerRadius*Math.cos(currentAngle2)
y3 = centerPointY+outerRadius*Math.sin(currentAngle2)
x4 = centerPointX+innerRadius*Math.cos(currentAngle2)
y4 = centerPointY+innerRadius*Math.sin(currentAngle2)

如何获取我所拥有的信息并生成具有完美圆形曲线的路径元素？

(PS我对SVG很新,如果你想帮助我使用d =的正确语法,那将很酷,但我总是可以自己写.我想要帮助的挑战更多是与Bézier有关.

更新/解决方案

使用下面的答案,下面的指导是我实际使用的功能:

annularSector = (centerX,centerY,startAngle,endAngle,innerRadius,outerRadius) ->               
    startAngle  = degreesToRadians startAngle+180
    endAngle    = degreesToRadians endAngle+180
    p           = [ 
        [ centerX+innerRadius*Math.cos(startAngle),     centerY+innerRadius*Math.sin(startAngle) ]
        [ centerX+outerRadius*Math.cos(startAngle),     centerY+outerRadius*Math.sin(startAngle) ]
        [ centerX+outerRadius*Math.cos(endAngle),       centerY+outerRadius*Math.sin(endAngle) ]
        [ centerX+innerRadius*Math.cos(endAngle),       centerY+innerRadius*Math.sin(endAngle) ] 
    ]
    angleDiff   = endAngle - startAngle
    largeArc    = (if (angleDiff % (Math.PI * …