贝塞尔曲线原理及应用

今天在学习贝塞尔曲线的过程中觉得很新奇，特别是之前觉得很神秘的东西一下全部融会贯通了，为了实践，特地写了一个demo——波浪图，先看效果图：

纸上得来终觉浅，绝知此事要躬行！本来觉得挺简单的一件事结果各种坑！什么，你说贝塞尔曲线不简单？no，no，看看大神们是怎么总结的？

二阶贝塞尔曲线形成原理：

1.连接 A，B 形成 AB 线段，连接 B，C 形成 BC 线段。

2.在 AB 线段取一个点 D，BC 线段取一个点 E ，使其满足条件： AD/AB = BE/BC，连接 D，E 形成线段 DE。

3.在 DE 取一个点 F，使其满足条件：AD/AB = BE/BC = DF/DE。

4.而满足这些条件的所有的F点所形成的轨迹就是二阶贝塞尔曲线，动态过程如下：

上面的代码解释得很清楚了，已知D，可以求得E，已知D、E可以求得F，如果D为一个变量，则F在二维平面就是一条曲线，如图四。

那么知道了二阶贝塞尔曲线的原理以后，怎么运用呢？

方法预览：

public void quadTo (float x1, float y1, float x2, float y2)

怎么用：

因为二阶贝塞尔曲线需要三个点才能确定，所以quadTo方法中的四个参数分别是确定第二，第三的点的。第一个点就是path上次操作的点。
现在用一个实例来练习下这个方法：

水波纹效果：

实现思路：

我看见这幅图的第一思路是首先得到波浪长度mWL、波浪中心点mCenterY。因为图中的波浪宽度为整个屏幕宽度，所以我们需要得到屏幕的宽度。百度一下方法就出来了：

方法一:

       //获取屏幕的宽度      public static int getScreenWidth(Context context) {          WindowManager manager = (WindowManager) context                  .getSystemService(Context.WINDOW_SERVICE);          Display display = manager.getDefaultDisplay();          return display.getWidth();      }      //获取屏幕的高度      public static int getScreenHeight(Context context) {          WindowManager manager = (WindowManager) context                  .getSystemService(Context.WINDOW_SERVICE);          Display display = manager.getDefaultDisplay();          return display.getHeight();      }  

方法二：

DisplayMetrics  dm = new DisplayMetrics();      getWindowManager().getDefaultDisplay().getMetrics(dm);      int screenWidth = dm.widthPixels;                int screenHeight = dm.heightPixels;    

由于第二种方法只能在Activity里面使用，所以这里使用第一种方法。但是在写的过程中我又发现一个提醒：

有强迫症的我马上去官网查了一下，发现官网推荐的是另一个方法，于是马上就改用了另一个方法：

于是，我们现在就可以根据波浪的宽度和中心点绘制一条静态的波浪线，代码如下：

 @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        mPath.reset();        mPath.moveTo(-mWL, mCenterY); //将path操作的起点移动到(-mWL,mCenterY)       mPath.quadTo((-mWL * 3 / 4) , mCenterY + 60, (-mWL / 2), mCenterY); //画出第一段波纹的第一条曲线       mPath.quadTo((-mWL / 4) , mCenterY - 60, 0, mCenterY); //画出第一段波纹的第二条曲线       mPath.quadTo((mWL /4) , mCenterY + 60, (mWL / 2), mCenterY); //画出第二段波纹的第一条曲线       mPath.quadTo((mWL * 3/ 4) , mCenterY - 60, mWL, mCenterY);  //画出第二段波纹的第二条曲线        mPath.lineTo(mScreenWidth, mScreenHeight);        mPath.lineTo(0, mScreenHeight);        mPath.close();        canvas.drawPath(mPath,mPaint);    }

查看加载效果的时候发现一个坑，就是荣耀的真机显示绘制结果的时候左边居然有一条很宽的线，这个时候为了检查不是贝塞尔曲线的问题，我还在贝塞尔曲线X方向起点到终点绘制了一条直线，但是依然如此。

然后我用自己的小米5测试了一下，居然完全没有任何问题：

虽然后来发现是因为使用了ConstraintLayout布局，然后自定义控件左边距有8dp，然后给自定义控件写死了宽度，因此小米5的宽度刚刚合适，，，，，

修改了以后正常了，于是继续将静态的波浪线调整成动态的波浪线。其实逻辑是很简单，就是给自定义View一个点击事件，然后在时间中启动一个属性动画，动态的修改波浪线水平方向右移的位置，全部代码写出来：

/** * 自定义波浪图 * Created by 魏兴 on 2017/6/12. */public class WaveView1 extends View implements View.OnClickListener{    private static final String TAG = "WaveView";    private Context mContext;    /**     * 波纹段长度     */    private int mWL;    /**     * 波浪高度中点     */    private float mCenterY;    private float mScreenWidth;    private float mScreenHeight;    private int mOffset;    private int mWaveCount;    private Path mPath;    private Paint mPaint;    private Paint mCyclePaint;    public WaveView1(Context context) {        super(context);        this.mContext = context;//        init();    }    public WaveView1(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        this.mContext = context;//        init();    }    public WaveView1(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        this.mContext = context;//        init();    }    private void init() {        WindowManager manager = (WindowManager) mContext .getSystemService(Context.WINDOW_SERVICE);        Display display = manager.getDefaultDisplay();        Point po = new Point();        display.getSize(po);        mWL = po.x;        mCyclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);        mCyclePaint.setColor(Color.RED);        mCyclePaint.setStyle(Paint.Style.FILL_AND_STROKE);    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        mPaint = new Paint();       // 创建画笔        mPaint.setColor(Color.BLUE);  // 画笔颜色 - 黑色        mPaint.setAntiAlias(true);        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);  // 填充模式 - 填充        mPath = new Path();        mWL = w*3/4;        mCenterY = h/2f;        mScreenHeight = h;        mScreenWidth = w;        //加1.5：至少保证波纹有2个，至少2个才能实现平移效果        mWaveCount = (int) Math.round(mScreenWidth / mWL + 1.5);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        mPath.reset();        //移到屏幕外最左边        mPath.moveTo(-mWL + mOffset, mCenterY);        for (int i = 0; i < mWaveCount; i++) {            //正弦曲线            mPath.quadTo((-mWL * 3 / 4) + (i * mWL) + mOffset, mCenterY + 60, (-mWL / 2) + (i * mWL) + mOffset, mCenterY);            mPath.quadTo((-mWL / 4) + (i * mWL) + mOffset, mCenterY - 60, i * mWL + mOffset, mCenterY);            //测试红点//            canvas.drawCircle((-mWL * 3 / 4) + (i * mWL) + mOffset, mCenterY + 60, 5, mCyclePaint);//            canvas.drawCircle((-mWL / 2) + (i * mWL) + mOffset, mCenterY, 5, mCyclePaint);//            canvas.drawCircle((-mWL / 4) + (i * mWL) + mOffset, mCenterY - 60, 5, mCyclePaint);//            canvas.drawCircle(i * mWL + mOffset, mCenterY, 5, mCyclePaint);        }        //填充矩形        mPath.lineTo(mScreenWidth, mScreenHeight);        mPath.lineTo(0, mScreenHeight);        mPath.close();        canvas.drawPath(mPath, mPaint);    }    @Override    public void onClick(View view) {        try {            ValueAnimator animator = ValueAnimator.ofInt(-mWL, mWL);            animator.setDuration(1000);            animator.setRepeatCount(ValueAnimator.INFINITE);            animator.setInterpolator(new LinearInterpolator());            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                @Override                public void onAnimationUpdate(ValueAnimator animation) {                    mOffset = (int) animation.getAnimatedValue();                    postInvalidate();                }            });            animator.start();        } catch (Exception e) {            e.printStackTrace();        }    }}

然后在实例化控件以后调用Click方法（不能直接点击View，因为Click方法此处并没有响应，需要重写boolean onTouchEvent(MotionEvent event)方法来定义Click事件——我猜的哈，反正我直接点击的时候此处方法并没有响应）。于是我简单申明控件以后直接调用了Click方法。大坑出现了！

此处波浪图并没有动起来，而且属性方法里面打印的日志显示设置的ofint()方法参数（这个是成员变量，即波浪宽度）为900，偏移量为0。上网百度“属性动画失效”找不到资料，后来查了半天发现是因为Activity里面声明控件并调用了Click方法，这个时候宽度默认为0，因此属性动画的偏移量一直为0。
于是修改调用代码：

public class WaveActivity extends AppCompatActivity {    private WaveView1 mWave;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_wave);        mWave = (WaveView1) findViewById(R.id.waveView);        final Handler handler = new Handler();        handler.postDelayed(new Runnable() {            @Override            public void run() {                handler.post(new Runnable() {                    @Override                    public void run() {                        mWave.onClick(null);                    }                });            }        },500);    }}

续三阶贝塞尔曲线形成原理：

1.连接 A，B 形成 AB 线段，连接 B，C 形成 BC 线段，连接 C，D 形成 CD 线段。

2.在AB线段取一个点 E，BC 线段取一个点 F，CD 线段取一个点 G，使其满足条件： AE/AB = BF/BE = CG/CD。连接 E，F 形成线段 EF，连接 F，G 形成线段 FG。

3.在EF线段取一个点 H，FG 线段取一个点 I，使其满足条件： AE/AB = BF/BE = CG/CD = EH/EF = FI/FG。连接 H，I 形成线段 HI。

4.在 HI 线段取一个点 J，使其满足条件： AE/AB = BF/BE = CG/CD = EH/EF = FI/FG = HJ/HI。

5.而满足这些条件的所有的J点所形成的轨迹就是三阶贝塞尔曲线，动态过程如下：

方法预览：
public void quadTo (float x1, float y1, float x2, float y2)
绘制圆形：

修改坐标：

最终效果：

最后再来一张效果图：

参考资料：

Path从懵逼到精通（2）——贝塞尔曲线

Android自定义View——贝塞尔曲线实现水波纹效果