Ok, das ist natürlich kein Fehler, aber ich bin verwirrt darüber, wie man über die Bézier-Kurve einen perfekten Kreisbogen zwischen Punkten erzeugt.

Ich brauche eine Form wie diese:

Also habe ich die vier Eckpunkte wie folgt aus Mittelpunkt, Radius und Winkel mit der folgenden Formel berechnet: (x?, Y?) = (X + d cos α, y + d sin α), die in meinem coffeescript sieht ungefähr so ​​aus:

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)

Wie kann ich die Informationen, die ich habe, aufnehmen und ein Pfadelement mit perfekten Kreiskurven erzeugen?

(PS Ich bin neu in SVG und wenn du mir mit der richtigen Syntax für d = helfen willst, wäre das cool, aber ich kann es immer selbst schreiben. Die Herausforderung, bei der ich helfen möchte, hat wirklich mehr mit Bézier zu tun .

UPDATE / LÖSUNG

Unter Verwendung der folgenden Antwort ist eine Anleitung die Funktion, die ich tatsächlich verwendet habe:

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 * 2)) > Math.PI then 1 else 0)
    commands    = []

    commands.push "M" + p[0].join()
    commands.push "L" + p[1].join()
    commands.push "A" + [ outerRadius, outerRadius ].join() + " 0 " + largeArc + " 1 " + p[2].join()
    commands.push "L" + p[3].join()
    commands.push "A" + [ innerRadius, innerRadius ].join() + " 0 " + largeArc + " 0 " + p[0].join()
    commands.push "z"

    return commands.join(" ")