Android自定义系列——3.Canvas详解

2022-06-22 13:08:22 浏览数 (1)

3.1 Canvas图形绘制 Canvas也称之为画布,能够在上面绘制各种东西,是安卓平台2D图形绘制的基础,非常强大,Android Api中Canvas的相关 Api有许多。

1.绘制颜色 绘制颜色是填充整个画布,常用于绘制底色。例如我想将整个画布绘制为蓝色,可以使用如下方法:

代码语言:javascript复制
canvas.drawColor(Color.BLUE);

2.创建画笔 要想绘制内容,首先需要先创建一个画笔,画笔创建大致方法如下:

代码语言:javascript复制
// 1.创建一个画笔
private Paint mPaint = new Paint();

// 2.初始化画笔
private void initPaint() {
	mPaint.setColor(Color.BLACK);       //设置画笔颜色
	mPaint.setStyle(Paint.Style.FILL);  	  //设置画笔模式为填充
	mPaint.setStrokeWidth(10f);         //设置画笔宽度为10px
}

// 3.在构造函数中初始化
public SloopView(Context context, AttributeSet attrs) {
   super(context, attrs);
   initPaint();
}

在创建完画笔之后,就可以在Canvas中绘制各种内容了。

3.绘制点 通过Api可以绘制一个点,也可以绘制一组点,具体实现如下:

代码语言:javascript复制
canvas.drawPoint(200, 200, mPaint);     //在坐标(200,200)位置绘制一个点
canvas.drawPoints(new float[]{          //绘制一组点,坐标位置由float数组指定
      500,500,
      500,600,
      500,700
},mPaint);

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

4.绘制直线 绘制直线需要两个点,初始点和结束点,同样绘制直线也可以绘制一条或者绘制一组:

代码语言:javascript复制
canvas.drawLine(300,300,500,600,mPaint);    // 在坐标(300,300)(500,600)之间绘制一条直线
canvas.drawLines(new float[]{               // 绘制一组线 每四数字(两个点的坐标)确定一条线
    100,200,200,200,
    100,300,200,300
},mPaint);

5.绘制矩形 确定一个矩形最少需要四个数据,就是对角线的两个点的坐标值,这里一般采用左上角和右下角的两个点的坐标。 关于绘制矩形,Canvas提供了三种重载方法,第一种就是提供四个数值(矩形左上角和右下角两个点的坐标)来确定一个矩形进行绘制。 其余两种是先将矩形封装为Rect或RectF(实际上仍然是用两个坐标点来确定的矩形),然后传递给Canvas绘制,方法如下:

代码语言:javascript复制
// 第一种
canvas.drawRect(100,100,800,400,mPaint);

// 第二种
Rect rect = new Rect(100,100,800,400);
canvas.drawRect(rect,mPaint);

// 第三种
RectF rectF = new RectF(100,100,800,400);
canvas.drawRect(rectF,mPaint);

以上三种方法所绘制出来的结果是完全一样的。 看到这里,相信很多读者会产生一个疑问,为什么会有Rect和RectF两种?两者有什么区别吗? 答案当然是存在区别的,两者最大的区别就是精度不同,Rect是int(整形)的,而RectF是float(单精度浮点型)的。除了精度不同,两种提供的方法也稍微存在差别,在这里我们暂时无需关注。

6.绘制圆角矩形 绘制圆角矩形也提供了两种重载方式,如下:

代码语言:javascript复制
// 第一种
RectF rectF = new RectF(100,100,800,400);
canvas.drawRoundRect(rectF,30,30,mPaint);

// 第二种
canvas.drawRoundRect(100,100,800,400,30,30,mPaint);

上面两种方法绘制效果也是一样的,但鉴于第二种方法在API21的时候才添加上,所以我们一般使用的都是第一种。

代码语言:javascript复制
// 矩形
RectF rectF = new RectF(100,100,800,400);  

// 绘制背景矩形
mPaint.setColor(Color.GRAY);
canvas.drawRect(rectF,mPaint);

// 绘制圆角矩形
mPaint.setColor(Color.BLUE);
canvas.drawRoundRect(rectF,700,400,mPaint);

7.绘制椭圆

代码语言:javascript复制
// 第一种
RectF rectF = new RectF(100,100,800,400);
canvas.drawOval(rectF,mPaint);

// 第二种
canvas.drawOval(100,100,800,400,mPaint);

8.绘制圆

代码语言:javascript复制
canvas.drawCircle(500,500,400,mPaint);  // 绘制一个圆心坐标在(500,500),半径为400 的圆。

绘制圆形有四个参数,前两个是圆心坐标,第三个是半径,最后一个是画笔。

9.绘制圆弧 为了更好理解圆弧的绘制,我们先了解它需要的几个参数:

代码语言:javascript复制
// 第一种
public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint){}
    
// 第二种
public void drawArc(float left, float top, float right, float bottom, float startAngle,
            float sweepAngle, boolean useCenter, @NonNull Paint paint) {}

10.Paint 绘制的基本形状由Canvas确定,但绘制出来的颜色,具体效果则由Paint确定。如果你注意到了的话,在一开始我们设置画笔样式的时候是这样的:

代码语言:javascript复制
mPaint.setStyle(Paint.Style.FILL);  //设置画笔模式为填充

为了展示方便,容易看出效果,之前使用的模式一直为填充模式,实际上画笔有三种模式,如下:

代码语言:javascript复制
STROKE                //描边
FILL                    //填充
FILL_AND_STROKE     //描边加填充

为了区分三者效果我们做如下实验:

代码语言:javascript复制
Paint paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStrokeWidth(40);     //为了实验效果明显,特地设置描边宽度非常大

// 描边
paint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(200,200,100,paint);

// 填充
paint.setStyle(Paint.Style.FILL);
canvas.drawCircle(200,500,100,paint);

// 描边加填充
paint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawCircle(200, 800, 100, paint);

0 人点赞