用三阶贝塞尔曲线拟合圆

前言

由于贝塞尔曲线控制简便且具有极强的描述能力，它常被用来生成复杂的平滑曲线；圆形是一种很常用的普通图形，在计算机图形学中也有很多画圆的算法，本文想探究一下如何用三阶贝塞尔曲线拟合圆形。
在研究这个问题时，我从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
用三次贝塞尔曲线拟合圆弧