Android--Paint与Canvas用法

前言：

在日常开发当中，有时候控件并不能满足于我们的需求，那么这时候就必须自己绘制自定义控件，自定义控件具有很强的灵活性，可以根据你自己的想法绘制各种各种的图形，那么在Android当中，提供了graphics类来显示2D图形，而graphics类中包括了Canvas（画布）、Paint（画笔）等等，那么，今天我们一起来学习Paint与Canvas的基本介绍和使用，相信我们学完了之后，就可以在自定义View中绘制各种基本图形了。

一、Paint与Canvas的基本介绍

大家都知道，我们平时画画的时候需要两个工具，一个是画笔Paint，一个是画布Canvas。在这里，Paint就是我们的画笔，Canvas就是我们的画布，所以我们在画画的时候，想要修改画笔的颜色，大小，透明度，画笔的样式等等....这时候就需要用到我们Paint画笔去设置相关的属性。画笔设置好了之后，我们就要将各种几何图形绘制到Canvas画布上面，比如圆形，矩形，等等相关的都是在Canvas里生成的。那么下面就让我们一起来学习Paint与Canvas的基本使用...

二、Paint的基本使用

有关Paint的基本使用我们分为两部分学习。

1、我们先学习Paint基本设置分别有哪些。

paint.setAntiAlias(true);   //等于true时表示设置抗锯齿功能
paint.setColor(Color.RED);  //设置画笔颜色
paint.setStyle(Style.FILL); //设置填充样式
paint.setStrokeWidth(30);    //设置画笔宽度
paint.setTextSize(float textSize); //设置字体的大小
paint.setShadowLayer(10, 15, 15, Color.GREEN);//设置阴影
paint.setDither(boolean dither);//设置是否抖动,如果不设置感觉就会有一些僵硬的线条
paint.setUnderlineText(boolean underlineText);//设置文本的下划线
paint.setStrikeThruText(setStrikeThruText);   //设置文本的删除线
paint.setFakeBoldText(boolean fakeBoldText);  //设置文本的粗体
paint.setAlpha(int a);	//设置画笔的透明度[0-255]，0是完全透明，255是完全不透明

在这里需要注意的是，在：paint.setStyle(Style.FILL); //设置填充样式的时候，这里有三种常见的样式，分别有：

Paint.Style.FILL    :填充内部
Paint.Style.FILL_AND_STROKE  ：填充内部和描边
Paint.Style.STROKE  ：仅描边

2、新建MyView类继承View,重写ondraw函数。具体代码如下：

package com.amandu.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
* Created by Administrator on 2017/9/19.
*/

public class MyView extends View{
/**
* 声明画笔
*/
private Paint mPaint;

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

public MyView(Context context, AttributeSet attrs) {
this(context,attrs,0);
}

/**
*在构造函数中--创建我们的画笔以及设置画笔相关属性
* @param context
* @param attrs
* @param defStyleAttr
*/
public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint=new Paint();     //创建画笔对象
mPaint.setAntiAlias(true);//抗锯齿功能
mPaint.setColor(Color.RED);  //设置画笔颜色
mPaint.setStyle(Paint.Style.FILL);//设置填充样为填充内部,
mPaint.setStrokeWidth(10f);//设置画笔宽度
}

/**
* 重写OnDraw（)函数,有了OnDraw函数之后，我们就可以自由地绘制各种图形
* @param canvas
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//通过Canvas绘制一个圆形
canvas.drawCircle(200, 200, 200, mPaint);
}
}

解释代码中已经给出了。

现在自定义MyView写好之后，为了显示出来，所以我把它放到MainActivity布局文件里面，具体代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.amandu.draw.MainActivity">

<com.amandu.view.MyView
android:id="@+id/myView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

好了，下面让我们看看效果图：



我们主要在MyView的onDraw函数中通过Canvas.drawCircle绘制出来一个圆形，那么有关于Canvas的基本使用我们在后面一起来学习。

三、Canvas的基本使用

说到Canvas的基本使用，无非就是在当前View上面绘制各种各样的几何图形了，比如有圆形，椭圆形，矩形等等，那么下面我们将学习Canvas常用的几种图形绘制。

首先，我们先看看Canvas常用操作速查表



 PS:Canvas常用方法在上面表格中已经全部列出了，当然还有一些方法未写出，但是这都是常见的，有关更多Canvas方法具体可以参考官方文档。

下面我们开始讲解如何通过Canvas绘制各种基本图形。

1、绘制颜色

绘制颜色是填充整个View视图，常用于绘制底色

canvas.drawColor(Color.RED);	//参数表示颜色

2、绘制点

这里需要注意的是，绘制点有两个构造方法，一个是绘制一个点，一个是绘制一组

canvas.drawPoint(200,200,mPaint);  	//在坐标(x=200,y=200)位置绘制一个点
canvas.drawPoints(new float[]{500,600,500,700},mPaint); //绘制一组点，坐标由float[]数组决定的。

关于坐标原点默认在左上角，水平向右为x轴增大方向，竖直向下为y轴增大方向。



3、绘制直线

绘制直线的时候需要两个点，即开始点和结束点，同样绘制直线也可以绘制一组直线:

//参数1表示开始点x坐标，参数2表示开始点y坐标，参数3表示结束点x坐标，参数4结束点y坐标标
canvas.drawLine(100,100,200,100,mPaint);
//绘制一组直线，坐标由float[]数组决定的
canvas.drawLines(new float[]{200,200,400,200,200,300,400,300},mPaint);

4、绘制矩形

在这里需要注意的是，在Android中绘制矩形有两个工具类，一个是Rect，另外一个是RectF，那么这里估计会有人问：这两个有什么区别吗？其实两者最大的区别就是精度不同，Rect是int(整形)的，而RectF是float(单精度浮点型)的，但是一般做法我们使用Rect就可以了。

//方法一
canvas.drawRect(100,100,800,400,mPaint);   //参数1、2分别表示开始绘制x,y坐标距离,参数3表示右下角距离屏幕x原点距离，参数4表示右下角距离屏幕y原点距离
//方法二
Rect rect=new Rect(100,500,800,800);        //参数意思同上
canvas.drawRect(rect,mPaint);

由此可见，方法1我们直接通过canvas.drawRect直接创建矩形，方法2是先通过Rect矩形对象创建出来后，再把Rect矩形对象添加到drawRect中。



5、绘制椭圆

在绘制椭圆的时候估计会有人问：里面的圆角的什么决定的，其实里面4个角有多圆，是由于你设置参数的宽高决定的，在这里我习惯叫宽高了，其实也可以这样理解的，但是真正的意思，在绘制矩形时候3和4参数里面已经有解释了，当然了你在绘制椭圆的时候，宽高设置为同等了，绘制出来自然也就是一个圆形的了。

canvas.drawOval(100,100,800,400,mPaint);     //参数意思和上面绘制矩形一致,当然绘制方法也有如下绘制矩形Rect那种，这里我就不写了

大家有没有发现，这个切图是不是和上面那些不一样的，确实如此，为什么呢？是因为Android在绘制椭圆提供的api是需要支持22,也就是5.0版本以上的，前面那些都是用夜神模拟器切的，是因为夜神模拟器官网目前只提供4.0版本，所以，大家在绘制矩形的时候，要注意api22以上才能支持！

6、绘制圆

canvas.drawCircle(400,400,200,mPaint);  //参数1表示圆心距离x坐标,参数2表示圆心距离y坐标,参数3表示圆的半径

7、绘制弧

绘制弧在日常开发中其实我们并不是经常看到的，但是在自定义View需要做出那种很炫酷的效果时候，却经常出现。

RectF rect1 = new RectF(100, 100, 300, 300);     //参数1、2分别表示开始绘制x,y坐标距离,参数3表示右下角距离屏幕x原点距离，参数4表示右下角距离屏幕y原点距离
canvas.drawArc(rect1,0,90,true,mPaint);         //参数1绘制边界对象，参数2表示弧的开始角度，参数3表示弧的持续角度，参数4等于true表示有弧的两条边，flase表示只有一条弧

RectF rect2 = new RectF(400, 100, 600, 300);
canvas.drawArc(rect2, 0, 90, false, mPaint);    //参数4等于flase表示只有一条弧

大家有没有发现，在绘制弧一条边的时候为什么是填充的呢？没错，是因为我们在创建画笔的时候设置了画笔样式mPaint.setStyle(Paint.Style.FILL);填充内部，如果我们想要绘制弧一条边的时候，只需要把我们画笔样式设置为：mPaint.setStyle(Paint.Style.STROKE);

8、绘制圆角矩形

RectF rect=new RectF(100,100,800,400);
canvas.drawRoundRect(rect,50,50,mPaint);    //参数1就不说了，参数2表示生成圆角的椭圆的X轴半径，参数3表示生成圆角的椭圆的Y轴半径

一般情况下参数2和参数3我们设置为一致就行了，这样就能保证两个圆角一致，如果有特殊需求外....

由于时间关系，关于Canvas更多操作以及相关用法，在后面有时间再和大家一起来学习！