前言

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

一開始看到這個值覺得很奇怪沪斟，想知道她是如何被推導(dǎo)出來的广辰，于是花了一點(diǎn)功夫去調(diào)查暇矫，并自己求解證明，原來是一堆中學(xué)生就會的平面幾何運(yùn)算題择吊。下面給出我的求解過程李根。

求解魔法數(shù)值

大家把這個用三階貝塞爾曲線擬合圓形的數(shù)值叫做魔法數(shù)，可能是因?yàn)樗牟煌≈禃绊懙綌M合的圓形的效果几睛，這個值決定了貝塞爾曲線擬合圓形的誤差房轿。我通過在上面的幾何圖中添加輔助線、運(yùn)用平面幾何性質(zhì)來求解該魔法數(shù)值所森。

輔助線及點(diǎn)位置說明

如上圖命名各點(diǎn)囱持，點(diǎn)O是圓心，P0焕济、P3分別是圓环鬃薄（也是貝塞爾曲線）上的起點(diǎn)和終點(diǎn)，P1晴弃、P2是貝塞爾曲線的兩個控制點(diǎn)掩幢， 點(diǎn)M2是線段P1P2的中點(diǎn)，C1上鞠、C2分別是線段P0P1和P2P3的中點(diǎn)际邻，連接OM2并延長與P0P1的延長線交于點(diǎn)F1，過點(diǎn)P1作線段P0P3的垂線交于點(diǎn)F0旗国。
點(diǎn)M1是線段C1M2和C2M2的中點(diǎn)的連線的中點(diǎn)枯怖，根據(jù)貝塞爾曲線上點(diǎn)的性質(zhì)可知點(diǎn)M1是圓弧上的點(diǎn)，且是圓弧P0P3的中點(diǎn)能曾，線段P0P3與OF1交于點(diǎn)M0.

證明及推算

一個隱含的條件（或者根據(jù)貝塞爾曲線的數(shù)學(xué)性質(zhì)可證明的）是|P2P3|=|P0P1|度硝，我們的目標(biāo)就是要求出這個長度值，記為l（小寫L）寿冕。
易知圓弧P0P3被射線OF1對稱平分蕊程，且OF1與線段P0P3、C1C2和P1P2均垂直相交驼唱，又因?yàn)辄c(diǎn)C1藻茂、C2和M2是相關(guān)線段的中點(diǎn)，容易證明|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) ····················· ①
因?yàn)榫€段P0P1與圓弧相切于點(diǎn)P0，OP0是圓弧的半徑换吧，容易證明?P0-F0-P1與?O-M0-P0相似折晦，∠P1-P0-F0 = θ/2，則
d = l·sin(θ/2) ································ ②
由方程①②聯(lián)立解得 l = (4/3)·r·(1-cos(θ/2))/sin(θ/2)
若圓弧半徑為1沾瓦，再由下面的三角函數(shù)二倍角公式推導(dǎo)
sin2α = 2·sinα·cosα
cos2α = (cosα)^2 - (sinα)^2 = 1 - 2·(sinα)^2
得到 l = (4/3)tan(θ/4)满着，即是上面圖中的值(4/3)tan(π/(2n))

用貝塞爾方程求解魔法數(shù)

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

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

把上面的點(diǎn)坐標(biāo)分別代入曲線方程撕蔼，取t=0.5計(jì)算得到點(diǎn)坐標(biāo)

另外根據(jù)貝塞爾曲線的數(shù)學(xué)性質(zhì)可知曲線方程中t=0.5時的點(diǎn)一定在圓弧上豁鲤，根據(jù)圓形方程定義，可得到下面的等式

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

用貝塞爾曲線畫圓關(guān)鍵代碼

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

private void initData() {
    mPaint = new Paint();
    mPaint.setColor(Color.BLACK);
    mPaint.setStrokeWidth(8);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setTextSize(60);
    // 初始化數(shù)據(jù)點(diǎn)
    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;

    // 初始化控制點(diǎn)
    float mDifference = mCircleRadius * C;  //圓形的控制點(diǎn)與數(shù)據(jù)點(diǎn)的差值
    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);   // 將坐標(biāo)系移動到畫布中央
    canvas.scale(1,-1);                       // 翻轉(zhuǎn)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) {
    // 繪制數(shù)據(jù)點(diǎn)和控制點(diǎn)
    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);
}

效果圖

總結(jié)

這篇博文是在前一篇《貝塞爾曲線學(xué)習(xí)筆記》的基礎(chǔ)上做的一個關(guān)于貝塞爾曲線應(yīng)用的深入探索琳骡，是筆者在工作之余的一點(diǎn)學(xué)習(xí)收獲，內(nèi)容比較淺陋讼溺，主要的收獲在于喚起了我的學(xué)習(xí)興趣楣号。關(guān)于前文主要求解的魔法數(shù)值，還應(yīng)該深入討論貝塞爾曲線擬合圓形的誤差怒坯，Approximate a circle with cubic Bézier curves這篇文章中作了誤差分析炫狱，并給出了一個更精確的魔法數(shù)值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
用三次貝塞爾曲線擬合圓弧