Android高级绘制——绘图篇（三）路径Path绘制以及贝塞尔曲线使用技巧

开篇

废话不说了，直接开凿吧！这篇这要说一下路径（path）的绘制技巧以及 神一样的存在（贝塞尔曲线）的绘制

基本绘制

• 1、直线路径
  

  void moveTo(float x1,float y1)：直线的开始点，即将直线路径的绘制点定在（x1,y1）的位置；
  void lineTo(float x2,float y2)：直线的结束点，又是下一次绘制路径的开始点，lineTo() 可以一直调用
  void close()：如果连续画了几条直线，但没有形成闭环，调用 close() 方法会自动将路径的首尾连接起来，形成闭环。

onDraw 方法实现：

    private void init() {
        //初始化画笔
        paint = new Paint();
        paint.setTextSize(100);
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.STROKE);
        paint.setTextSize(100);     //单位为 sp
        paint.setStrokeWidth(10);
        path = new Path();


    }

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

        path.moveTo(100, 200);
        path.lineTo(200, 200);
        path.lineTo(300, 400);
        path.lineTo(0, 400);
        path.close();
        canvas.drawPath(path, paint);

    }


• 2、矩形路径
  

  void addRect (float left, float top, float right, float bottom, Path.Direction dir)
  void addRect (RectF rect, Path.Direction dir)

这里的 Path 类创建矩形路径的参数与前面 canvas 绘制矩形差不多，唯一不同的一点就是增加了 Path.Direction 参数 Path.Direction 取值： - Path.Direction.CCW：是counter-clockwise缩写，指创建逆时针方向的矩形路径 - Path.Direction.CW：是clockwise的缩写，指创建顺时针方向的矩形路径 示例代码：

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

        RectF rect = new RectF(100, 200, 400, 400);
        path.addRect(rect, Path.Direction.CCW);

        canvas.drawPath(path, paint);


        RectF rect1 = new RectF(500, 200, 800, 400);
        path.addRect(rect1, Path.Direction.CW);

        canvas.drawPath(path, paint);
    }

 貌似从效果图中根本看不出顺时针和逆时针生成有任何区别，是滴，如果仅仅是做展示使用的话确实是没有任何区别，但是如果配合 Text 一起使用的话，那区别就很大了，我们前面有介绍过在路径上绘制 Text ，我们来做一下：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        String text = "搞笑我们是认真的”;

        Path CCWPath = new Path();
        RectF rect = new RectF(100, 200, 400, 400);
        CCWPath.addRect(rect, Path.Direction.CCW);

        canvas.drawPath(CCWPath, paint);
        canvas.drawTextOnPath(text, CCWPath, 0, 0, paint);


        Path CWPath = new Path();
        RectF rect1 = new RectF(500, 200, 800, 400);
        CWPath.addRect(rect1, Path.Direction.CW);

        canvas.drawPath(CWPath, paint);
        canvas.drawTextOnPath(text, CWPath, 0, 0, paint);
    }


• 3、圆角矩形路径

void addRoundRect (RectF rect, float[] radii, Path.Direction dir)
void addRoundRect (RectF rect, float rx, float ry, Path.Direction dir)

参数：

• 第一个构造函数可以定制每个角的圆角大小

  • float[] radii：必须传入 8 个数值，分四组，分别对应每个角所使用的椭圆的横轴半径和纵轴半径，比如（x1,y1,x2,y2,x3,y3,x4,y4)，其中，x1,y1 对应第一个角的（左上角）产生的椭圆的横轴半径和纵轴半径，其他类推

• 第二个构造函数：只能构建统一圆角大小

  • float rx：所产生圆角的椭圆的横轴半径；
  • float ry：所产生圆角的椭圆的纵轴半径；

示例代码：

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

        Path CCWPath = new Path();
        RectF rect = new RectF(100, 200, 400, 400);
        float[] radii = {
  
  30, 30, 50, 50, 70, 70, 90, 90};
        CCWPath.addRoundRect(rect, radii, Path.Direction.CCW);

        canvas.drawPath(CCWPath, paint);


        Path CWPath = new Path();
        RectF rect1 = new RectF(500, 200, 800, 400);
        CWPath.addRoundRect(rect1, 30, 30, Path.Direction.CW);

        canvas.drawPath(CWPath, paint);
    }


}

• 4、圆形路径
  

  void addCircle (float x, float y, float radius, Path.Direction dir)

参数：
- float x：圆心X轴坐标
- float y：圆心Y轴坐标
- float radius：圆半径

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        path.addCircle(300, 300, 200, Path.Direction.CW);
        canvas.drawPath(path, paint);
    }


}


• 5、椭圆路径
  

  void addOval (RectF oval, Path.Direction dir)

参数：
- RectF oval：生成椭圆所对应的矩形
- Path.Direction :生成方式，与矩形一样，分为顺时针与逆时针，意义完全相同，不再重复

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        RectF rectF = new RectF(300, 300, 700, 500);
        path.addOval(rectF, Path.Direction.CW);
        canvas.drawPath(path, paint);


    }


• 6