Android canvas 画布详细讲解

1、简介

比较清楚详细的讲解画布的一些基础方法，一些参数的含义，让读者能够更清楚地使用 canvas 绘制想要的图形。

1) 功能架构

2）MainActivity.java 文件

主函数

package myapplication21.lum.com.mycanvas;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

3） activity_main.xml 添加自己画的view 组件

<?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">

    <myapplication21.lum.com.mycanvas.MyView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

4）MyView.java 自己画的view

package myapplication21.lum.com.mycanvas;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

public class MyView extends View {
    String TAG = "lum_ : ";
     Paint paint;
    public MyView(Context context) {
        super(context);
        Log.i(TAG,"1");
    }

    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        Log.i(TAG,"2");
        //就是通过修改画笔的一些参数设置
        paint = new Paint(); //新建一个画笔对象
        paint.setAntiAlias(true);//抗锯齿功能
        paint.setColor(Color.RED);  //设置画笔颜色
        paint.setStyle(Paint.Style.STROKE);//设置填充样式 中空
        paint.setStrokeWidth(10);//设置画笔宽度 ，单位px
    }

    public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        Log.i(TAG,"3");

    }

    public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        Log.i(TAG,"4");
    }
 
    protected void onDraw(Canvas canvas) {
     // 在这里进行创建自定义组件的绘制
    }

}

2、常用的绘画方法 draw*

1）drawCircle

（1） 画笔设置 Paint.Style.STROKE 中空模式

//画笔设置
        paint = new Paint(); //新建一个画笔对象
        paint.setAntiAlias(true);//抗锯齿功能
        paint.setColor(Color.RED);  //设置画笔颜色
        **paint.setStyle(Paint.Style.STROKE);//设置填充样式 中空**
        paint.setStrokeWidth(10);//设置画笔宽度 ，单位px

       //省略·····
    protected void onDraw(Canvas canvas) {
        /*
        * 圆心 x 点坐标  
         * 圆心 y 点坐标
         *圆心 半径
        * 使用的画笔
        * */
        canvas.drawCircle(100, 100, 50, paint);
    }

画出一个 与那还宽度为 10 ,整体半径为50的 圆环

（2）画笔设置 Paint.Style.FILL 实心模式

        paint.setStyle(Paint.Style.FILL);//设置填充样式 完全

会画出一个实心圆

2）drawRect

1） 画笔设置 Paint.Style.STROKE 中空模式

        paint = new Paint(); //新建一个画笔对象
        paint.setAntiAlias(true);//抗锯齿功能
        paint.setColor(Color.RED);  //设置画笔颜色
        paint.setStyle(Paint.Style.STROKE);//设置填充样式
        paint.setStrokeWidth(10);//设置画笔宽度 ，单位px
       //省略·····
        //绘制矩形区域
        //参数 矩形相对 边框的上下左右位置
        rect = new RectF(200, 200, 600, 600);

    protected void onDraw(Canvas canvas) {
        //定义的矩形区域，画笔
        canvas.drawRect(rect, paint);
    }

2）画笔设置 Paint.Style.FILL 实心模式

        paint.setStyle(Paint.Style.FILL);//设置填充样式 完全

3） drawArc

1） 画笔设置 Paint.Style.STROKE 中空模式

        paint = new Paint(); //新建一个画笔对象
        paint.setAntiAlias(true);//抗锯齿功能
        paint.setColor(Color.RED);  //设置画笔颜色
        paint.setStyle(Paint.Style.STROKE);//设置填充样式
        paint.setStrokeWidth(10);//设置画笔宽度 ，单位px
        //绘制矩形区域
        rect = new RectF(200, 200, 600, 600);
       //省略·····
       
        protected void onDraw(Canvas canvas) {
        canvas.drawRect(rect,paint); //我们把辅助位置的矩形画出来
        paint.setColor(Color.BLUE);
        canvas.drawArc(rect, //确定弧形区域使用到的矩形，可以看到弧线是内切矩形
                0, //开始角度
                90, //扫过的角度
                false, //是否使用中心
                paint);

    }

2）画笔设置 Paint.Style.FILL 实心模式，
（1）

        paint.setStyle(Paint.Style.FILL);//设置填充样式

  canvas.drawArc(rect, //确定弧形区域使用到的矩形
                0, //开始角度
                90, //扫过的角度
                true, //使用中心
                paint);

（2）
不使用中心

canvas.drawArc(rect, //确定弧形区域使用到的矩形
        0, //开始角度
        90, //扫过的角度
        false, //是否使用中心
        paint);

4） drawColor

protected void onDraw(Canvas canvas) {
    canvas.drawColor(Color.BLUE);
}

是直接将View显示区域用某个颜色填充满。

5）drawLine

        paint = new Paint(); //新建一个画笔对象
        paint.setAntiAlias(true);//抗锯齿功能
        paint.setColor(Color.RED);  //设置画笔颜色
        paint.setStyle(Paint.Style.FILL);//设置填充样式
        paint.setStrokeWidth(10);//设置画笔宽度 ，单位px

    protected void onDraw(Canvas canvas) {
        //画一条线 x轴起点 ，y 轴起点， x 轴终点，y 轴终点
        canvas.drawLine(100, 100, 600, 600, paint);
    }

6）drawOval

（1）画笔填充设置 为 中空STROKE

        paint = new Paint(); //新建一个画笔对象
        paint.setAntiAlias(true);//抗锯齿功能
        paint.setColor(Color.RED);  //设置画笔颜色
        paint.setStyle(Paint.Style.STROKE);//设置填充样式
        paint.setStrokeWidth(10);//设置画笔宽度 ，单位px

        //绘制矩形区域
        rect = new RectF(200, 200, 1000, 600);

    protected void onDraw(Canvas canvas) {
        canvas.drawRect(rect,paint);//画出参考的矩形区域
       //矩形区域内切椭圆
        canvas.drawOval(rect, paint);
    }

（2） 画笔模式设置为填充

        paint.setStyle(Paint.Style.FILL);//设置填充样式
  //省略······
    protected void onDraw(Canvas canvas) {
        canvas.drawRect(rect,paint);//画出参考的矩形区域
        paint.setColor(Color.BLUE);
       //矩形区域内切椭圆
        canvas.drawOval(rect, paint);
    }

7）drawPosText

        paint = new Paint(); //新建一个画笔对象
        paint.setAntiAlias(true);//抗锯齿功能
        paint.setColor(Color.RED);  //设置画笔颜色
        paint.setStyle(Paint.Style.FILL);//设置填充样式
        paint.setStrokeWidth(10);//设置画笔宽度 ，单位px
        paint.setTextSize(50); //设置字体大小



    protected void onDraw(Canvas canvas) {
        //按照既定点 绘制文本内容  
        canvas.drawPosText("Hello", new float[]{
                60, 60,   //第一个字符的xy位置
                120,120, //第二个字符xy 位置
                180, 180,
                240, 240,
                300, 300
        }, paint);
    }

8）drawRoundRect

        paint = new Paint(); //新建一个画笔对象
        paint.setAntiAlias(true);//抗锯齿功能
        paint.setColor(Color.RED);  //设置画笔颜色
        paint.setStyle(Paint.Style.FILL);//设置填充样式 FILL
        paint.setStrokeWidth(10);//设置画笔宽度 ，单位px
        //绘制矩形区域
        rect = new RectF(200, 200, 600, 600);

    protected void onDraw(Canvas canvas) {
        canvas.drawRoundRect(rect,
                60, //x轴的半径
                60, //y轴的半径
                paint);
    }

9） drawPath

（1） 画笔填充设置 为 中空STROKE

        paint = new Paint(); //新建一个画笔对象
        paint.setAntiAlias(true);//抗锯齿功能
        paint.setColor(Color.RED);  //设置画笔颜色
        paint.setStyle(Paint.Style.STROKE);//设置填充样式
        paint.setStrokeWidth(10);//设置画笔宽度 ，单位px

        path = new Path(); //定义一条路径
        path.moveTo(100, 100); //移动到 坐标10,10
        path.lineTo(200, 300); //移动到 坐标200,300
        path.lineTo(500,600); 

    protected void onDraw(Canvas canvas) {
        canvas.drawPath(path, paint);
    }

（2） 画笔模式设置为填充

        paint.setStyle(Paint.Style.FILL);//设置填充样式

10） drawTextOnPath

        paint = new Paint(); //新建一个画笔对象
        paint.setAntiAlias(true);//抗锯齿功能
        paint.setColor(Color.RED);  //设置画笔颜色
        paint.setStyle(Paint.Style.STROKE);//设置填充样式
        paint.setStrokeWidth(10);//设置画笔宽度 ，单位px
        paint.setTextSize(80);//设置字体大小

        path = new Path(); //定义一条路径
        path.moveTo(100, 100); //移动到 坐标10,10
        path.lineTo(200, 300); //移动到 坐标200,300
        path.lineTo(500,600);


    protected void onDraw(Canvas canvas) {
        canvas.drawPath(path,paint);//画出路径参考线
        paint.setColor(Color.BLUE);

                /*
       参数一  显示的文字，
       参数2 绘制的路径
       参数三   hOffset : 与路径起始点的水平偏移距离
       参数四 vOffset : 与路径中心的垂直偏移量
       参数 五 画笔
                * */
        canvas.drawTextOnPath("Android CSDN ", path, 0, 100, paint);

    }

11)drawText

        paint = new Paint(); //新建一个画笔对象
        paint.setAntiAlias(true);//抗锯齿功能
        paint.setColor(Color.RED);  //设置画笔颜色
        paint.setStyle(Paint.Style.STROKE);//设置填充样式
        paint.setStrokeWidth(10);//设置画笔宽度 ，单位px
        paint.setTextSize(80);//设置字体大小



    protected void onDraw(Canvas canvas) {
        // 现实的文字， 起始点 x 坐标，起始点 Y 坐标， 画笔
        canvas.drawText("Hello World",300, 300, paint);// 画文本

    }

12)drawPoint

paint = new Paint(); //新建一个画笔对象
paint.setAntiAlias(true);//抗锯齿功能
paint.setColor(Color.RED);  //设置画笔颜色
paint.setStyle(Paint.Style.STROKE);//设置填充样式
paint.setStrokeWidth(30);//设置画笔宽度 ，单位px

protected void onDraw(Canvas canvas) {
    //  起始点 x 坐标，起始点 Y 坐标， 画笔
    canvas.drawPoint(300, 300, paint);//画一个点

}

13) drawBitmap

        paint = new Paint(); //新建一个画笔对象
        paint.setAntiAlias(true);//抗锯齿功能
        paint.setColor(Color.RED);  //设置画笔颜色
        paint.setStyle(Paint.Style.STROKE);//设置填充样式
        paint.setStrokeWidth(30);//设置画笔宽度 ，单位px

        //将图片转化成 bitmap 对象
        bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.vx);

    protected void onDraw(Canvas canvas) {

/**
 * 参数1：bitmap对象
 * 参数2：图像左边坐标点
 * 参数3：图像上边坐标点
 */
        canvas.drawBitmap(bitmap, 200,300, paint);

    }

14) svg drawable.draw(canvas)

svg_flag 是 svg转化的 xml 图片 信息

       VectorDrawableCompat drawable = VectorDrawableCompat.create(getResources(), R.drawable.svg_flag, null);
       drawable.setBounds(0, 0, 100,100);
       drawable.draw(canvas);

3、画布的旋转

对于画布的旋转我们掌握一下三个函数：

canvas.save()； //画布将当前的状态保存
canvas.rotate(）； //讲画布旋转一定角度
canvas.restore(); //恢复画布到上一个保存的状态

canvas.save();与canvas.restore();一般结合使用，.save()函数在前，.restore()函数在后，用来保证在这两个函数之间所做的操作不会对原来在canvas上所画图形产生影响。

（1） 我们先画一个图片–>保存画布—>旋转画布—>画一个图片----->恢复画布---->再画一个图片

        paint = new Paint(); //新建一个画笔对象
        paint.setAntiAlias(true);//抗锯齿功能
        paint.setColor(Color.RED);  //设置画笔颜色
        paint.setStyle(Paint.Style.STROKE);//设置填充样式
        paint.setStrokeWidth(30);//设置画笔宽度 ，单位px

        //将图片转化成 bitmap 对象
        bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.vx);

    protected void onDraw(Canvas canvas) {

        /**
         * 参数1：bitmap对象
         * 参数2：图像左边坐标点
         * 参数3：图像上边坐标点
         */
        canvas.drawBitmap(bitmap, (getWidth() - bitmap.getWidth())/2,getHeight()/2 - bitmap.getHeight() - 200, paint);
        canvas.save(); //保存当前画布的状态
        //参数 旋转的角度，旋转的 x 点坐标，旋转的 y 点坐标
        canvas.rotate(45,getWidth()/2 , getHeight()/2);
        canvas.drawBitmap(bitmap,(getWidth() - bitmap.getWidth())/2,(getHeight() - bitmap.getHeight())/2,paint); //在旋转后的画布上画图
        canvas.restore();//画布返回上一次的状态
        canvas.drawBitmap(bitmap,(getWidth() - bitmap.getWidth())/2,getHeight()/2  + 200,paint);

    }

（2） 我们先画一个图片–>保存画布—>旋转画布—>画一个图片----->不恢复画布---->再画一个图片

    protected void onDraw(Canvas canvas) {

        /**
         * 参数1：bitmap对象
         * 参数2：图像左边坐标点
         * 参数3：图像上边坐标点
         */
        canvas.drawBitmap(bitmap, (getWidth() - bitmap.getWidth())/2,getHeight()/2 - bitmap.getHeight() - 200, paint);
        canvas.save(); //保存当前画布的状态
        //参数 旋转的角度，旋转的 x 点坐标，旋转的 y 点坐标
        canvas.rotate(45,getWidth()/2 , getHeight()/2);
        canvas.drawBitmap(bitmap,(getWidth() - bitmap.getWidth())/2,(getHeight() - bitmap.getHeight())/2,paint); //在旋转后的画布上画图
      //  canvas.restore();//画布返回上一次的状态
        canvas.drawBitmap(bitmap,(getWidth() - bitmap.getWidth())/2,getHeight()/2  + 200,paint);

    }

我们也可以通过如下代码旋转更加直接体会 围绕中心旋转

    protected void onDraw(Canvas canvas) {
      canvas.drawLine(0,0,500,0,paint);
      paint.setColor(Color.BLUE);
      canvas.drawLine(0,0,0,500,paint);

      canvas.rotate(45,getWidth()/2,getHeight()/2); # 画布围绕中心旋转

        paint.setColor(Color.RED);
        canvas.drawLine(0,0,500,0,paint);
        paint.setColor(Color.BLUE);
        canvas.drawLine(0,0,0,500,paint);
    }

4、画布的平移

        paint = new Paint(); //新建一个画笔对象
        paint.setAntiAlias(true);//抗锯齿功能
        paint.setColor(Color.RED);  //设置画笔颜色
        paint.setStyle(Paint.Style.FILL);//设置填充样式
        paint.setStrokeWidth(30);//设置画笔宽度 ，单位px

        rect = new RectF(0,0,300,300);  //在  定点坐标系 新建一个矩形
//省略········
    protected void onDraw(Canvas canvas) {
         canvas.drawRect(rect,paint);   //画第一个 矩形
         
         paint.setColor(Color.BLUE);  //设置画笔颜色
         canvas.translate(200,200);   //画布 在 x, y坐标系，平移  200，200
        canvas.drawRect(rect,paint); //画 第二个 矩形

        paint.setColor(Color.BLACK); //设置画笔颜色
        canvas.translate(200,200); //画布 在 x, y坐标系，平移  200，200 （默认是相对上一个原点的坐标）
        canvas.drawRect(rect,paint);//画第三个矩形

    }

5、画布的缩放

1） canvas.scale(sx, sy);

        paint = new Paint(); //新建一个画笔对象
        paint.setAntiAlias(true);//抗锯齿功能
        paint.setColor(Color.RED);  //设置画笔颜色
        paint.setStyle(Paint.Style.FILL);//设置填充样式
        paint.setStrokeWidth(30);//设置画笔宽度 ，单位px

        rect = new RectF(0,0,600,600);  //定义一个 矩形 原点，大小 600 * 600
        //省略······
            protected void onDraw(Canvas canvas) {
         canvas.drawRect(rect,paint); //画 第一个 矩形

         // x,y轴所放的大小比例
         canvas.scale(0.5f,0.5f);   //缩小画布
         paint.setColor(Color.BLUE); /设置画笔颜色
         canvas.drawRect(rect,paint);//画第二个矩形

    }

2. canvas.scale(sx, sy, px，py)
   依照 原点 px,py 一点 进行缩放
   类似于先平移，在缩放

         canvas.scale(0.5f,0.5f,600,600);