bezier

曲线的魔力——初识贝塞尔曲线

为什么我们需要贝塞尔曲线?

设想一下平时曲线对计算机来说是画出来的呢。无非就是要用一个函数y = f(x)来绘制曲线。但是我们能拿到手就用的函数曲线无非是sin,cos这种函数了,若我们想要更复杂的曲线,获取它的方程将会是很难的。

curve

如何产生这个曲线的方程呢?

这个时候,贝塞尔曲线的作用就来了。

什么是贝塞尔曲线?

贝塞尔曲线(英语:Bézier curve)是电脑图形学中相当重要的参数曲线。是用几个很少的控制点就可以产生平滑复杂的曲线的方法。我们经常在开发中用贝塞尔曲线来绘制曲线,或者控制动画的时间变化(擦除函数)。

下面展示一下贝塞尔曲线算法的绘制过程:

先定义三个点

贝塞尔1

 

在第一条线段上任选一个点 D。计算该点到线段起点的距离 AD,与该线段总长 AB 的比例。

贝塞尔2

 

根据上一步得到的比例,从第二条线段上找出对应的点 E,使得 AD:AB = BE:BC

贝塞尔3

 

连接D,E得

贝塞尔4

 

从新的线段 DE 上再次找出相同比例的点 F,使得 DF:DE = AD:AB = BE:BC。

贝塞尔6如果把这个过程反复的做下去将形成一个曲线!

贝塞尔5

 

wiki上的动图效果如下:(好像要点开才看得到)

Bézier_2_big

 

当然控制点还可以有更多来操作出更复杂的曲线。

在Android里的应用

Android里的Path提供了画贝塞尔曲线的API,下面我来做一个简单介绍。

Path包含贝塞尔曲线的API主要包括,quadTo,cubicTo,rCubicTo,rQuadTo。

其中quadTo是有两个控制点的贝赛尔曲线,cubicTo有三个控制点。

例子:

cubicTo(float x1, float y1, float x2, float y2, float x3, float y3)

/**
 * Created by Jiaqi Ning on 5/7/2015.
 */
public class PathView extends View {
    Paint paint;

    public PathView(Context context) {
        super(context);

        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(0xff41be9d);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    //draw the curve
        Path path = new Path();
        path.moveTo(50,50);
        path.cubicTo(50,50,50,300,250,300);
        canvas.drawPath(path,paint);
// draw the control line
        path.reset();
        paint.setColor(Color.GRAY);
        paint.setStrokeWidth(2);
        path.moveTo(50,50);
        path.lineTo(50,300);
        path.lineTo(250,300);
        canvas.drawPath(path,paint);

    }
}

curve_screenshot更强大的用法,考完试再写吧 Orz…

参考:

 

 

曲线的魔力——初识贝塞尔曲线》有1个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>