Android自定义View之图形图像工具类Path的特殊用法

概述：

没什么好说的。

Demo

新建一个自定义View

public class MyPathView extends View {
    private int width;
    private int height;
    private Paint mPaint;
    private Path mPath;
    private Paint mPaintPoint;
    private Paint mPaintText;

    private boolean isAdd = true;

    public MyPathView(Context context) {
        super(context);
    }

    public MyPathView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setColor(Color.GREEN);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setTextSize(50);
        mPaint.setAntiAlias(true);

        mPaintPoint = new Paint();
        mPaintPoint.setAntiAlias(true);
        mPaintPoint.setColor(Color.RED);
        mPaintPoint.setStyle(Paint.Style.STROKE);
        //mPaintPoint.setStrokeWidth(10);

        mPaintText = new Paint();
        mPaintText.setAntiAlias(true);
        mPaintText.setColor(Color.BLACK);
        mPaintText.setTextAlign(Paint.Align.CENTER);
        mPaintText.setTextSize(20);

        mPath = new Path();

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(),widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(),heightMeasureSpec);
        setMeasuredDimension(width,height);


    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //画一个三角形
        mPath.moveTo(100, 100);//起始位置
        mPath.lineTo(0, 200);//从起始位置移动到此位置
        mPath.lineTo(200, 200);//从上一位置移动到下一位置
        mPath.close();//前面只画了两条边，调用close()可以让三角形自动闭合
        canvas.drawPath(mPath, mPaint);//把path经历的轨迹画出来
    }
}

画一个圆，沿着圆写一段文字，修改onDraw()方法：

/*画一个圆，并沿着圆写一段文字*/
        //参数依次为：圆心x坐标，圆心y坐标,圆的半径，CW顺时针（CCW逆时针）方向
        mPath.addCircle(width / 2, height / 2, 300, Path.Direction.CW);
        canvas.drawPath(mPath, mPaint);
        //沿着path的轨迹写一段文字
        canvas.drawTextOnPath("我要沿着圆形写文字", mPath, 0, 0, mPaint);
        canvas.drawPath(mPath, mPaint);

演示结果：

贝塞尔曲线：
贝塞尔曲线也可以叫做贝济埃曲线或者贝兹曲线，它由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋。一般的矢量图形软件常利用贝塞尔曲线来精确画出曲线。
Android提供的贝塞尔曲线绘制接口

   在Android开发中，要实现贝塞尔曲线其实还是很简单的，因为Android已经给我们提供了相关接口，但此接口方法，藏于Path类中（android.graphics.Path）。此方法如下：

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

   Since: API Level 1

   参数说明：

   x1：操作点的x坐标

   y1：操作点的y坐标

   x2：结束点的x坐标

   y2：结束点的y坐标

mPath.moveTo(100, 100);
        //画一条贝塞尔曲线，参数依次为：控制点的x坐标，控制点的y坐标，结束点的x坐标，结束点的y坐标
        mPath.quadTo(100, 400, 300, 300);
        canvas.drawPath(mPath, mPaint);
        canvas.drawPoint(100, 100, mPaintPoint);
        canvas.drawPoint(100, 400, mPaintPoint);
        canvas.drawPoint(300, 300, mPaintPoint);
        //会出以上贝塞尔曲线的起始点、控制点、结束点
        canvas.drawText("起始点", 100, 100, mPaintText);
        canvas.drawText("控制点", 100, 400, mPaintText);
        canvas.drawText("结束点", 300, 300, mPaintText);

演示结果：

用path绘制动态贝塞尔曲线——模拟水面：

public class MyPathView extends View {
    private int width;
    private int height;
    private Paint mPaint;
    private Path mPath;
    private Paint mPaintPoint;
    private Paint mPaintText;

    private int size = 0;
    private int count;
    private boolean isAdd = true;
    private static final int START_WAVE = 0x21;

    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case START_WAVE:
                    count+=5;
                    if(count>=80){
                        count=0;
                    }
                    if (isAdd){
                        size++;
                        if(size>10){
                            isAdd = false;
                        }
                    }else{
                        size--;
                        if(size<=-10){
                            isAdd =true;
                        }
                    }
                    invalidate();
                    sendEmptyMessageDelayed(START_WAVE,100);
                    break;
            }
        }
    };
    public MyPathView(Context context) {
        super(context);
    }

    public MyPathView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setColor(Color.GREEN);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setTextSize(50);
        mPaint.setAntiAlias(true);

        mPaintPoint = new Paint();
        mPaintPoint.setAntiAlias(true);
        mPaintPoint.setColor(Color.RED);
        mPaintPoint.setStyle(Paint.Style.STROKE);
        //mPaintPoint.setStrokeWidth(10);

        mPaintText = new Paint();
        mPaintText.setAntiAlias(true);
        mPaintText.setColor(Color.BLACK);
        mPaintText.setTextAlign(Paint.Align.CENTER);
        mPaintText.setTextSize(20);

        mPath = new Path();
        handler.sendEmptyMessageDelayed(START_WAVE,1000);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(),widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(),heightMeasureSpec);
        setMeasuredDimension(width,height);


    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        /*
        画一条个模拟流动的波浪
         */
        mPath.reset();
        //当count增大时，重绘会显示向前流动效果
        mPath.moveTo(count, 200);
        //size的从大到小从小到大变化，重绘时会产生波浪起伏效果
        for(int i=0;i<10;i++) {
            /*
            rQuadTo()方法每次都会自动移动到下一位置，参数依次为水平幅度，
            垂直幅度，水平位移，处置位移
            */
            mPath.rQuadTo(20, size, 40, 0);
            mPath.rQuadTo(20, -size, 40, 0);
        }
        canvas.drawPath(mPath,mPaintPoint);
        canvas.drawCircle(width / 2, 200, 100, mPaint);

    }
}

结果演示：

我们猿类工作压力大，很需要有自己的乐趣，于是乎，我开通了音乐人账号，以后的作品将会上传到我的音乐人小站上。如果这篇博客帮助到您，希望您能多关注，支持，鼓励我将创作进行下去，同时也祝你能在工作和生活乐趣两发面都能出彩！

网易云音乐人，直接打开客户端搜索音乐人 “星河河”

豆瓣音乐人地址：https://site.douban.com/chuxinghe/ 星河河