自定义view-贝塞尔曲线的简单使用

最新推荐文章于 2022-08-04 23:14:08 发布

呆--呆

最新推荐文章于 2022-08-04 23:14:08 发布

阅读量283

点赞数 2

分类专栏： Android 文章标签：贝塞尔曲线自定义view

本文链接：https://blog.csdn.net/qq_34829270/article/details/85119751

版权

Android 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

理解贝塞尔曲线的原理
贝塞尔曲线是用一系列点来控制曲线状态的，我将这些点简单分为两类：数据点、控制点。通过调整控制点，贝塞尔曲线形状会发生变化。

数据点：确定曲线的起始和结束位置
控制点：确定曲线的弯曲程度

一阶曲线原理
一阶曲线是没有控制点的，仅有两个数据点(A 和 B)，最终效果一个线段。
在这里插入图片描述
一阶公式如下：

二阶曲线原理
二阶曲线由两个数据点(A 和 C)，一个控制点(B)来描述曲线状态，大致如下：

那么AC之间的红线是怎么生成的呢，让我们了解一下

在AB线段和BC线段分别去D、E两点，且满足条件
在这里插入图片描述
连接DE，取点F，使得: ，这样获取到的点F就是贝塞尔曲线上的一个点，动态图如下：

二阶公式如下：

三阶曲线原理
三阶曲线由两个数据点(A 和 D)，两个控制点(B 和 C)来描述曲线状态

动态图如下：
在这里插入图片描述
三阶公式如下：

四阶曲线

五阶曲线

通用公式：

实现简单的小例子
在我们Android中Path类中其实是有已经封装好了关于贝塞尔曲线的函数的

//二阶贝赛尔 
public void quadTo(float x1, float y1, float x2, float y2) 
public void rQuadTo(float dx1, float dy1, float dx2, float dy2) 
//三阶贝赛尔 
public void cubicTo(float x1, float y1, float x2, float y2,float x3, float y3) 
public void rCubicTo(float x1, float y1, float x2, float y2,float x3, float y3)

quadTo（）方法
让我们先来看一下源码

	/**
     * Add a quadratic bezier from the last point, approaching control point
     * (x1,y1), and ending at (x2,y2). If no moveTo() call has been made for
     * this contour, the first point is automatically set to (0,0).
     *
     * @param x1 The x-coordinate of the control point on a quadratic curve
     * @param y1 The y-coordinate of the control point on a quadratic curve
     * @param x2 The x-coordinate of the end point on a quadratic curve
     * @param y2 The y-coordinate of the end point on a quadratic curve
     */
    public void quadTo(float x1, float y1, float x2, float y2) {
        isSimplePath = false;
        native_quadTo(mNativePath, x1, y1, x2, y2);
    }

从源码的注释上我们可以得到的信息如下：参数中(x1,y1)是控制点坐标，(x2,y2)是终点坐标。

大家可能会有一个疑问：有控制点和终点坐标，那起始点是多少呢？整条线的起始点是通过Path.moveTo(x,y)来指定的，而如果我们连续调用quadTo()，前一个quadTo()的终点，就是下一个quadTo()函数的起点；如果初始没有调用Path.moveTo(x,y)来指定起始点，则默认以控件左上角(0,0)为起始点；

rQuadTo（）
先来看一下它的源码，代码如下：

	/**
     * Same as quadTo, but the coordinates are considered relative to the last
     * point on this contour. If there is no previous point, then a moveTo(0,0)
     * is inserted automatically.
     *
     * @param dx1 The amount to add to the x-coordinate of the last point on
     *            this contour, for the control point of a quadratic curve
     * @param dy1 The amount to add to the y-coordinate of the last point on
     *            this contour, for the control point of a quadratic curve
     * @param dx2 The amount to add to the x-coordinate of the last point on
     *            this contour, for the end point of a quadratic curve
     * @param dy2 The amount to add to the y-coordinate of the last point on
     *            this contour, for the end point of a quadratic curve
     */
    public void rQuadTo(float dx1, float dy1, float dx2, float dy2) {
        isSimplePath = false;
        native_rQuadTo(mNativePath, dx1, dy1, dx2, dy2);
    }

从上面的方法注释我们可以看到，这是一个相对坐标，具体参数意思如下：

dx1:控制点X坐标，表示相对上一个终点X坐标的位移坐标，可为负值，正值表示相加，负值表示相减；
dy1:控制点Y坐标，相对上一个终点Y坐标的位移坐标。同样可为负值，正值表示相加，负值表示相减；
dx2:终点X坐标，同样是一个相对坐标，相对上一个终点X坐标的位移值，可为负值，正值表示相加，负值表示相减；
dy2:终点Y坐标，同样是一个相对，相对上一个终点Y坐标的位移值。可为负值，正值表示相加，负值表示相减；

cubicTo（）
这是Android的三阶贝塞尔曲线方法，先来看一下每一参数的意义

	/**
     * Add a cubic bezier from the last point, approaching control points
     * (x1,y1) and (x2,y2), and ending at (x3,y3). If no moveTo() call has been
     * made for this contour, the first point is automatically set to (0,0).
     *
     * @param x1 The x-coordinate of the 1st control point on a cubic curve
     * @param y1 The y-coordinate of the 1st control point on a cubic curve
     * @param x2 The x-coordinate of the 2nd control point on a cubic curve
     * @param y2 The y-coordinate of the 2nd control point on a cubic curve
     * @param x3 The x-coordinate of the end point on a cubic curve
     * @param y3 The y-coordinate of the end point on a cubic curve
     */
    public void cubicTo(float x1, float y1, float x2, float y2,
                        float x3, float y3) {
        isSimplePath = false;
        native_cubicTo(mNativePath, x1, y1, x2, y2, x3, y3);
    }

从上面源码可以看到参数(x1,y1)是第一个控制点坐标，(x2,y2)是第二个控制点坐标，(x3，y3)是终点坐标。

整条线的起始点是通过Path.moveTo(x,y)来指定的，而如果我们连续调用cubicTo()，前一个cubicTo()的终点，就是下一个cubicTo()函数的起点；如果初始没有调用Path.moveTo(x,y)来指定起始点，则默认以控件左上角(0,0)为起始点；和我们的quadTo（）方法一样。