svg - Bezier または Elliptical パスを使用して楕円の一部をプログラムで描画する — SVG と raphael.js

Question

指定されたマージンで楕円を囲むベジェ曲線を描画しようとしています:

これをプログラムで実現したいので、楕円のサイズを変更すると、曲線がそれに追従します。

現時点では、この関数を作成しました:

function bezierPathTopRounded(ellipse, margin) {
    var box = ellipse.paper.getBBox();

    var leftX = box.x - margin; 

    var rightX = box.x + margin + box.width;

    var y = box.y + box.height/2 - margin; 

    var p = "M "+ leftX  + ", "+ y
    + " C " //could be relative too
    + ( box.x - margin + (box.width/15)  )  + ", " + ( box.y + margin - (box.height/4.5)  ) + " "
    + ( box.x + margin + box.width - (box.width/15)  )  + ", " + ( box.y + margin - (box.height/4.5) ) + " "
    + rightX +", " + y;

    return p;   
}

しかし、どの楕円でも機能するように、この方向点の値を計算する方法がわかりません。

• ボックスの幅/15
• ボックスの高さ/4.5

この例にはフィドルがあります。

私はこのスタックオーバーフローの質問を読んで、私の例で同じことを試しましたが、まだ簡単な解決策を見つけることができず、ランダムなままです...

編集

今、私は楕円形のArc を試していますが、結果は Bezier Path よりも悪いです:

私が使っている機能があります。マージンを削除すると、楕円に正確に従います...最後に、マージンを使用して楕円をたどる方法は次のとおりです。

function borderPath(ellipse, margin, flag) {
    var flag = flag == undefined ? 1 : 0;

    var box = ellipse.paper.getBBox();

    var leftX = box.x - margin;

    var rightX = box.x + margin + box.width;

    var y = box.y + box.height/2;
    y += (flag == 1) ? -margin : margin;

    var rx = box.width/2 + margin;
    var ry = box.height/2;

    var p = "M "+ leftX + ", "+ y
    + " A "
    + rx + " " + ry
    + " 0 0 "+ flag +" "
    + rightX +", " + y;

    return p;
}

ここで更新されたフィドルを参照してください。

ひどい色で本当に申し訳ありません。これらは目的のためです。