Android开发之Path的高级用法用贝塞尔曲线绘制波浪线

前言：贝塞尔曲线分为一级曲线，二级曲线，三级曲线和多级曲线，利用贝塞尔曲线可以做出很多有意思的动画和图形，今天我们就来实现一个比较简单的波浪线。

-----------------分割线---------------

初步认识贝塞尔曲线：

mPath.moveTo：设置起点。

mPath.rQuadTo：绘制曲线。

注意：第二个mPath.rQuadTo相对于自己的起始点--也即是上一个曲线的终点。

mPath.lineTo：闭合。

我们也可以使用path.quadTo(x1, y1, x2, y2)绘制二级贝塞尔曲线。

ok看完整代码：

import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.view.View;/** * Created by Fly on 2017/6/14. */public class MyView extends View {    Paint mPaint;    Path mPath;    public MyView(Context context) {        super(context);        mPaint = new Paint();        mPaint.setColor(Color.RED);        mPaint.setStyle(Paint.Style.STROKE);        mPaint.setStrokeWidth(10);        mPath = new Path();    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        mPath.moveTo(100, 400);        mPath.rQuadTo(100, -150, 200, 0);        mPath.rQuadTo(100, 150, 200, 0);        mPath.lineTo(100, 400);        canvas.drawPath(mPath, mPaint);    }}

效果图：

---------------分割线---------------

如果想画动态的波浪线，需要我们不断的改变起点，废话不说直接看代码：

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.util.AttributeSet;import android.view.View;import android.view.animation.LinearInterpolator;import java.util.Random;/** * Created by Fly on 2017/6/13. */public class WaveView2 extends View {    private Paint mPaint;    private Path mPath;    private int mWaveLength = 100;    private int dx;    private int dy;    public WaveView2(Context context) {        super(context);        init();    }    public WaveView2(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    private void init() {        mPaint = new Paint();        mPaint.setColor(Color.RED);        mPaint.setStyle(Paint.Style.STROKE);        mPaint.setStrokeWidth(10);        mPath = new Path();    }    int s = 50;    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        mPath.reset();        int originY = 300;        int mWaveHalfLength = mWaveLength / 2;        mPath.moveTo(-mWaveLength + dx, originY);        int max = 60;        int min = 40;        int maxW = 120;        int minW = 80;        Random random = new Random();        try {            Thread.sleep(500);            s = random.nextInt(max) % (max - min + 1) + min;            mWaveLength = random.nextInt(maxW) % (maxW - minW + 1) + minW;        } catch (InterruptedException e) {            e.printStackTrace();        }        //屏幕的宽度里面放多少个波长        for (int i = -mWaveLength; i < getWidth() + mWaveLength; i += mWaveLength) {            //相对绘制二阶贝塞尔曲线(相对于自己的起始点--也即是上一个曲线的终点  的距离dx1)            mPath.rQuadTo(mWaveHalfLength / 2, -s, mWaveHalfLength, 0);            mPath.rQuadTo(mWaveHalfLength / 2, s, mWaveHalfLength, 0);            //path.quadTo(x1, y1, x2, y2)        }        //颜色填充        //画一个封闭的空间//        mPath.lineTo(getWidth(), getHeight());//        mPath.lineTo(0, getHeight());//        mPath.close();        canvas.drawPath(mPath, mPaint);    }    public void startAnimation() {        ValueAnimator animator = ValueAnimator.ofInt(0, mWaveLength);        animator.setDuration(1000);        animator.setInterpolator(new LinearInterpolator());        //无限循环        animator.setRepeatCount(ValueAnimator.INFINITE);        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                dx = (int) animation.getAnimatedValue();                postInvalidate();            }        });        animator.start();    }}

然后在MainActivity中开启动画：

public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        WaveView2 waveView = (WaveView2) findViewById(R.id.wv);        waveView.startAnimation();    }}

布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity">    <com.fly.lsn35_waveview.WaveView2        android:id="@+id/wv"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>

效果：

---------------------完-----------------