前言

由于貝塞爾曲線控制簡便且具有極強的描述能力，它常被用來生成復雜的平滑曲線；圓形是一種很常用的普通圖形，在計算機圖形學中也有很多畫圓的算法，本文想探究一下如何用三階貝塞爾曲線擬合圓形。
在研究這個問題時，我從Stackoverflow上搜到了(4/3)tan(π/(2n))這個公式，她的幾何意義如下圖所示。該公式的值表達的具體意義可以描述為：由n段三階貝塞爾曲線擬合圓形時，曲線端點到該端點最近的控制點的最佳距離是(4/3)tan(π/(2n))。

一開始看到這個值覺得很奇怪，想知道她是如何被推導出來的，于是花了一點功夫去調查，并自己求解證明，原來是一堆中學生就會的平面幾何運算題。下面給出我的求解過程。

求解魔法數值

大家把這個用三階貝塞爾曲線擬合圓形的數值叫做魔法數，可能是因為她的不同取值會影響到擬合的圓形的效果，這個值決定了貝塞爾曲線擬合圓形的誤差。我通過在上面的幾何圖中添加輔助線、運用平面幾何性質來求解該魔法數值。

輔助線及點位置說明

如上圖命名各點，點O是圓心，P0、P3分別是圓弧（也是貝塞爾曲線）上的起點和終點，P1、P2是貝塞爾曲線的兩個控制點， 點M2是線段P1P2的中點，C1、C2分別是線段P0P1和P2P3的中點，連接OM2并延長與P0P1的延長線交于點F1，過點P1作線段P0P3的垂線交于點F0。
點M1是線段C1M2和C2M2的中點的連線的中點，根據貝塞爾曲線上點的性質可知點M1是圓弧上的點，且是圓弧P0P3的中點，線段P0P3與OF1交于點M0.

證明及推算

一個隱含的條件（或者根據貝塞爾曲線的數學性質可證明的）是|P2P3|=|P0P1|，我們的目標就是要求出這個長度值，記為l（小寫L）。
易知圓弧P0P3被射線OF1對稱平分，且OF1與線段P0P3、C1C2和P1P2均垂直相交，又因為點C1、C2和M2是相關線段的中點，容易證明|M1M2| = |M0M2|/4，|P1F0| = |M0M2|，所以|M0M1| = (3/4)|M0M2| = (3/4)|P1F0|。
記|P1F0| = d，圓弧半徑為r，∠P0-O-P3為θ，則∠P0-O-M0 = θ/2，|M0M1| = (3/4)d，|OM0| = |OM1| - |M0M1| = r - (3/4)d = r·cos(θ/2)，整理等式為
(3/4)d = r - r·cos(θ/2) ····················· ①
因為線段P0P1與圓弧相切于點P0，OP0是圓弧的半徑，容易證明?P0-F0-P1與?O-M0-P0相似，∠P1-P0-F0 = θ/2，則
d = l·sin(θ/2) ································ ②
由方程①②聯立解得 l = (4/3)·r·(1-cos(θ/2))/sin(θ/2)
若圓弧半徑為1，再由下面的三角函數二倍角公式推導
sin2α = 2·sinα·cosα
cos2α = (cosα)^2 - (sinα)^2 = 1 - 2·(sinα)^2
得到 l = (4/3)tan(θ/4)，即是上面圖中的值(4/3)tan(π/(2n))

用貝塞爾方程求解魔法數

上面用幾何運算的方式求解了魔法數，還可以直接根據貝塞爾曲線方程代入特殊點坐標計算該數值。
用三階貝塞爾曲線擬合圓形的問題可以簡化為考慮擬合1/4圓弧，如下圖圓弧P0P3即是端點為P0、P3，控制點為P1、P2的貝塞爾曲線，它們的坐標分別為P0 = (0,1), P1 = (h,1), P2 = (1,h), P3 = (1,0)

我們知道三階貝塞爾曲線的一般方程如下

把上面的點坐標分別代入曲線方程，取t=0.5計算得到點坐標

另外根據貝塞爾曲線的數學性質可知曲線方程中t=0.5時的點一定在圓弧上，根據圓形方程定義，可得到下面的等式

這樣，容易解出h的值為 h=(4/3)(sqrt(2)-1) ≈ 0.552284749831

用貝塞爾曲線畫圓關鍵代碼

……
private Paint mPaint;
private Path path = new Path();
private float[] mData = new float[8];               // 順時針記錄繪制圓形的四個數據點
private float[] mCtrl = new float[16];              // 順時針記錄繪制圓形的八個控制點
private static final float C = 0.552284749831f;     // 用來計算繪制圓形貝塞爾曲線控制點的位置的常數

private void initData() {
    mPaint = new Paint();
    mPaint.setColor(Color.BLACK);
    mPaint.setStrokeWidth(8);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setTextSize(60);
    // 初始化數據點
    mData[0] = 0;
    float mCircleRadius = 200;  //圓半徑
    mData[1] = mCircleRadius;

    mData[2] = mCircleRadius;
    mData[3] = 0;

    mData[4] = 0;
    mData[5] = -mCircleRadius;

    mData[6] = -mCircleRadius;
    mData[7] = 0;

    // 初始化控制點
    float mDifference = mCircleRadius * C;  //圓形的控制點與數據點的差值
    mCtrl[0]  = mData[0]+ mDifference;
    mCtrl[1]  = mData[1];

    mCtrl[2]  = mData[2];
    mCtrl[3]  = mData[3]+ mDifference;

    mCtrl[4]  = mData[2];
    mCtrl[5]  = mData[3]- mDifference;

    mCtrl[6]  = mData[4]+ mDifference;
    mCtrl[7]  = mData[5];

    mCtrl[8]  = mData[4]- mDifference;
    mCtrl[9]  = mData[5];

    mCtrl[10] = mData[6];
    mCtrl[11] = mData[7]- mDifference;

    mCtrl[12] = mData[6];
    mCtrl[13] = mData[7]+ mDifference;

    mCtrl[14] = mData[0]- mDifference;
    mCtrl[15] = mData[1];
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.translate(mCenterX, mCenterY);   // 將坐標系移動到畫布中央
    canvas.scale(1,-1);                       // 翻轉Y軸

    drawAuxiliaryLine(canvas);

    // 繪制貝塞爾曲線
    mPaint.setColor(Color.RED);
    mPaint.setStrokeWidth(6);
    path.moveTo(mData[0],mData[1]);

    path.cubicTo(mCtrl[0],  mCtrl[1],  mCtrl[2],  mCtrl[3],     mData[2], mData[3]);
    path.cubicTo(mCtrl[4],  mCtrl[5],  mCtrl[6],  mCtrl[7],     mData[4], mData[5]);
    path.cubicTo(mCtrl[8],  mCtrl[9],  mCtrl[10], mCtrl[11],    mData[6], mData[7]);
    path.cubicTo(mCtrl[12], mCtrl[13], mCtrl[14], mCtrl[15],    mData[0], mData[1]);

    canvas.drawPath(path, mPaint);
}

// 繪制輔助線
private void drawAuxiliaryLine(Canvas canvas) {
    // 繪制數據點和控制點
    mPaint.setColor(Color.GRAY);
    mPaint.setStrokeWidth(10);

    for (int i=0; i<8; i+=2){
        canvas.drawPoint(mData[i],mData[i+1], mPaint);
    }
    for (int i=0; i<16; i+=2){
        canvas.drawPoint(mCtrl[i], mCtrl[i+1], mPaint);
    }

    // 繪制輔助線
    mPaint.setStrokeWidth(4);
    for (int i=2, j=2; i<8; i+=2, j+=4){
        canvas.drawLine(mData[i],mData[i+1],mCtrl[j],mCtrl[j+1],mPaint);
        canvas.drawLine(mData[i],mData[i+1],mCtrl[j+2],mCtrl[j+3],mPaint);
    }
    canvas.drawLine(mData[0],mData[1],mCtrl[0],mCtrl[1],mPaint);
    canvas.drawLine(mData[0],mData[1],mCtrl[14],mCtrl[15],mPaint);
}

效果圖

總結

這篇博文是在前一篇《貝塞爾曲線學習筆記》的基礎上做的一個關于貝塞爾曲線應用的深入探索，是筆者在工作之余的一點學習收獲，內容比較淺陋，主要的收獲在于喚起了我的學習興趣。關于前文主要求解的魔法數值，還應該深入討論貝塞爾曲線擬合圓形的誤差，Approximate a circle with cubic Bézier curves這篇文章中作了誤差分析，并給出了一個更精確的魔法數值0.551915024494。

Thanks To

How to create circle with Bézier curves?
Approximate a circle with cubic Bézier curves
Drawing a circle with Bézier Curves
用三次貝塞爾曲線擬合圓弧