用三阶贝塞尔曲线拟合圆

效果图

图片 1

 

图片 2

前言

由于贝塞尔曲线控制简便且具有极强的描述能力,它常被用来生成复杂的平滑曲线;圆形是一种很常用的普通图形,在计算机图形学中也有很多画圆的算法,本文想探究一下如何用三阶贝塞尔曲线拟合圆形。
在研究这个问题时,我从Stackoverflow上搜到了(4/3)tan(π/(2n))这个公式,她的几何意义如下图所示。该公式的值表达的具体意义可以描述为:由n段三阶贝塞尔曲线拟合圆形时,曲线端点到该端点最近的控制点的最佳距离是(4/3)tan(π/(2n))。

图片 3

一开始看到这个值觉得很奇怪,想知道她是如何被推导出来的,于是花了一点功夫去调查,并自己求解证明,原来是一堆中学生就会的平面几何运算题。下面给出我的求解过程。

相关知识

这部分基本就是废话,网上都能找到,我只不过是整理了以下.建议先不看,用到的时候可以回来看看

贝塞尔曲线学习

求解魔法数值

大家把这个用三阶贝塞尔曲线拟合圆形的数值叫做魔法数,可能是因为她的不同取值会影响到拟合的圆形的效果,这个值决定了贝塞尔曲线拟合圆形的误差。我通过在上面的几何图中添加辅助线、运用平面几何性质来求解该魔法数值。

贝塞尔曲线

先来看两组图,有助于理解什么是贝塞尔曲线图片 4(图片取自维基百科,参考链接1)

二次贝塞尔曲线:

图片 5图片 6

P0是起点,P2是终点,P1是控制点

三次贝塞尔曲线:

图片 7图片 8

 P0是起点,P3是终点,P1是控制点1,P2是控制点2

依次连接所有点,组成线段

t是比例,在0-1之间,就是每条线段的长度都是1

贝塞尔曲线就是最里层的线段在t位置的点所组成的路径

三次贝塞尔曲线公式:B(t)=(1-t)^3*P0 3(1-t)^2*t*P1 3(1-t)*t^2*P2 t^3*P3,0<=t<=1

B(t)代表曲线上任意点,P0,1,2,3分别代表决定曲线的4个点,t代表曲线长度为1的任意取值

APK下载地址

辅助线及点位置说明

图片 9

如上图命名各点,点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.

其他知识

没接触过贝塞尔曲线的话,可能得花些时间整理下,其他的知识就比较简单了

图片 10

直角三角形,角A的对边a,临边b,斜边c

三角函数:

sinA=a/c

cosA=b/c

勾股定理:

c^2=a^2 b^2

1.贝塞尔曲线

以下公式中:
B(t)为t时间下 点的坐标;
P0为起点,Pn为终点,Pi为控制点

一阶贝塞尔曲线(线段)

图片 11

一阶贝塞尔曲线公式

图片 12

一阶贝塞尔曲线演示

意义:由 P0 至 P1 的连续点, 描述的一条线段

二阶贝塞尔曲线(抛物线)

图片 13

二阶贝塞尔曲线公式

图片 14

二阶贝塞尔曲线演示

原理:由 P0 至 P1 的连续点 Q0,描述一条线段。

由 P1 至 P2 的连续点 Q1,描述一条线段。 由 Q0 至 Q1 的连续点 B(t),描述一条二次贝塞尔曲线。 经验:P1-P0为曲线在P0处的切线。

三阶贝塞尔曲线:

图片 15

三阶贝塞尔曲线公式

图片 16

三阶贝塞尔曲线演示

通用公式:

图片 17

通用贝塞尔曲线公式

高阶贝塞尔曲线
4阶曲线:

图片 18

四阶贝塞尔曲线演示

5阶曲线:

图片 19

五阶贝塞尔曲线演示

证明及推算

一个隐含的条件(或者根据贝塞尔曲线的数学性质可证明的)是|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))

概括介绍

这个效果难点就两部分:一是水球分离和融合时候的连接,二是主体圆的抖动

然而其实网上都有解决方案了

第一部分是在两个圆之间加个用贝塞尔曲线组成的path,用一样的颜色,其实是障眼法.见参考链接4

第二部分是用4段三次贝塞尔曲线组成的path代替Ellipse,因为Ellipse是抖动不起来的,这样就可以控制贝塞尔曲线的点来让圆抖动.见参考链接3

1.1.生成贝塞尔曲线-迭代法

下面我们用代码来生成贝塞尔曲线,来展示如何贝塞尔曲线的生成原理:

package com.che.chechengwang.support.view.bezier;

import android.animation.FloatEvaluator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;

/**
 * 生成贝塞尔曲线-迭代法
 * <p/>
 * 作者:余天然 on 16/6/14 下午2:10
 */
public class BezierGenerater1 extends View {

    private Paint paint;
    private int centerX, centerY;
    private List<PointF> points;
    private FloatEvaluator evaluator;
    private float fraction;
    private Map<Integer, Integer> colors;
    private List<PointF> destPoints;

    public BezierGenerater1(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        evaluator = new FloatEvaluator();
        startAnim();
    }

    //初始化数据点和控制点的位置
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        centerX = w / 2;
        centerY = h / 2;
        points = new ArrayList<>();
        points.add(new PointF(centerX - 150, centerY));
        points.add(new PointF(centerX - 50, centerY - 300));
        points.add(new PointF(centerX   50, centerY   300));
        points.add(new PointF(centerX   150, centerY));
        colors = new HashMap<>();
        for (int i = 0; i < points.size(); i  ) {
            colors.put(i, getRanColor());
        }
        destPoints = new ArrayList<>();
        destPoints.add(points.get(0));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //静态的
        drawPoint(canvas, points, Color.BLACK);
        drawLine(canvas, points, Color.GRAY);
        //动态的
        List<PointF> subData = getSubData(points, fraction);
        drawData(canvas, subData, fraction);
    }

    // 绘制数据点
    private void drawPoint(Canvas canvas, List<PointF> data, int color) {
        paint.setColor(color);
        paint.setStrokeWidth(20);
        for (int i = 0; i < data.size(); i  ) {
            PointF pointF = data.get(i);
            canvas.drawPoint(pointF.x, pointF.y, paint);
        }
    }

    //绘制基准线
    private void drawLine(Canvas canvas, List<PointF> data, int color) {
        paint.setColor(color);
        paint.setStrokeWidth(4);
        for (int i = 0; i < data.size() - 1; i  ) {
            PointF start = data.get(i);
            PointF end = data.get(i   1);
            canvas.drawLine(start.x, start.y, end.x, end.y, paint);
        }
    }

    //绘制路径
    private void drawPath(Canvas canvas, List<PointF> data) {
        Path path = new Path();
        PointF start = data.get(0);
        path.moveTo(start.x, start.y);
        for (int i = 1; i < data.size() - 1; i  ) {
            PointF point = data.get(i);
            path.lineTo(point.x, point.y);
        }
        paint.setColor(Color.RED);
        paint.setStrokeWidth(4);
        canvas.drawPath(path, paint);
    }

    //迭代绘制集合
    private void drawData(Canvas canvas, List<PointF> data, float fraction) {
        if (data.size() == 1) {
            drawPoint(canvas, data, Color.BLACK);
            destPoints.add(data.get(0));
            drawPath(canvas, destPoints);
        } else {
            drawLine(canvas, data, colors.get(data.size() - 1));
            //迭代
            List<PointF> subData = getSubData(data, fraction);
            drawData(canvas, subData, fraction);
        }
    }

    private void startAnim() {
        ValueAnimator animator = ValueAnimator.ofFloat(0, 100);
        animator.setInterpolator(new LinearInterpolator());
        animator.setDuration(5000);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                fraction = animation.getAnimatedFraction();
                invalidate();
            }

        });
        animator.start();
    }

    //生成随机颜色
    private int getRanColor() {
        return 0xff000000 | new Random().nextInt(0x00ffffff);
    }

    //获取子数据源
    private List<PointF> getSubData(List<PointF> data, float fraction) {
        List<PointF> subData = new ArrayList<>();
        for (int i = 0; i < data.size() - 1; i  ) {
            PointF start = data.get(i);
            PointF end = data.get(i   1);
            float x = evaluator.evaluate(fraction, start.x, end.x);
            float y = evaluator.evaluate(fraction, start.y, end.y);
            subData.add(new PointF(x, y));
        }
        return subData;
    }
}

用贝塞尔方程求解魔法数

上面用几何运算的方式求解了魔法数,还可以直接根据贝塞尔曲线方程代入特殊点坐标计算该数值。
用三阶贝塞尔曲线拟合圆形的问题可以简化为考虑拟合1/4圆弧,如下图圆弧P0P3即是端点为P0、P3,控制点为P1、P2的贝塞尔曲线,它们的坐标分别为P0 = (0,1), P1 = (h,1), P2 = (1,h), P3 = (1,0)

图片 20

我们知道三阶贝塞尔曲线的一般方程如下

图片 21

把上面的点坐标分别代入曲线方程,取t=0.5计算得到点坐标

图片 22

另外根据贝塞尔曲线的数学性质可知曲线方程中t=0.5时的点一定在圆弧上,根据圆形方程定义,可得到下面的等式

图片 23

这样,容易解出h的值为 h=(4/3)(sqrt(2)-1) ≈ 0.552284749831

本文由糖果派对电玩城发布于独家专题,转载请注明出处:用三阶贝塞尔曲线拟合圆

您可能还会对下面的文章感兴趣: