Android自定义View之Canvas的使用

标签: Android  Canvas

Android自定义View系列

用继承View的方式来自定义View,我们就需要重写onDraw方法,也就是得咱自己来画图了。画图就得用到画笔和画布,也就是Paint和Canvas。我们来了解下Canvas。

Canvas

Canvas我们可以简单理解为画布或是ps里面的图层,是绘制图形的直接对象,控制着图形的形状,比如矩形、圆形等。我们在自定义View时,通过调用Canvas的API来绘制具体的图形。

Canvas的常见API

  • 绘制文字
//参数分别表示绘制的内容、绘制起点的坐标和画笔Paint
canvas.drawText(@NonNull String text, float x, float y, @NonNull Paint paint);
  • 绘制点
//参数表示绘制的点的坐标和画笔Paint
canvas.drawPoint(float x, float y, @NonNull Paint paint);
  • 绘制线
//参数分别表示线段的起点和终点坐标,以及画笔Paint
canvas.drawLine(float startX, float startY, float stopX, float stopY,@NonNull Paint paint)
  • 绘制矩形
//参数分别表示四条边距离绘制原点的偏离距离,以及画笔Paint
canvas.drawRect(float left, float top, float right, float bottom, @NonNull Paint paint)
  • 绘制圆角矩形
//参数分别表示矩形的参数、圆角的X方向的半径以及Y方向的半径
canvas.drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint)
  • 绘制圆
//参数分别表示圆点的坐标以及圆的半径,画笔Paint
canvas.drawCircle(float cx, float cy, float radius, @NonNull Paint paint)
  • 绘制圆弧
//参数分别表示用于定义圆弧的边界椭圆、起始角度、弧度,useCenter表示是否有中心点,以及画笔Paint
drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,@NonNull Paint paint)
  • 绘制椭圆
//参数分别表示要绘制的椭圆的外接矩形和画笔Paint
canvas.drawOval(@NonNull RectF oval, @NonNull Paint paint)

Canvas的常见API

Canvas的常见API


Canvas的四大方法

  • 保存画布
canvas.save()

作用是将之前的所有已经绘制的图像保存起来,让后续的操作就好像在一个新的图层上操作一样

  • 合并画布
canvas.restore()

可以理解为PS中的合并图层操作。作用是在save()之后绘制的所有图像和save()之前的图像进行合并。

  • 平移画布
canvas.translate(float dx, float dy)

默认的绘图原点在(0,0),调用translate(x,y)后,则将原点移动到了(x,y)。之后的所有绘图操作都将以(x,y)为原点执行。

  • 旋转画布
canvas.rotate()

将坐标系旋转一定的角度


下面以绘制一个钟表盘为例子来实际运用canvas

以绘制一个位于屏幕中间的钟表盘为例子,这是一个自定义View,在布局文件中LayoutParams属性都设置为match_parent。这样子后面调用View的getWidth()和getHeight()获取的都是屏幕的宽高

<android.support.constraint.ConstraintLayout 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="com.xxq2dream.learningtests.MainActivity">

    <com.xxq2dream.myview.CanvasTestView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

(1)首先需要绘制最外面的圆

  • 准备外面圆的画笔Paint
Paint circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
circlePaint.setColor(Color.parseColor("#000000"));
circlePaint.setStrokeWidth(5);
circlePaint.setStyle(Paint.Style.STROKE);
  • 画圆,这里我们画在屏幕的中间,半径为getWidth()/4
//画圆
canvas.drawCircle(getWidth()/2, getHeight()/2, getWidth()/4, circlePaint);

最外面的圆

(2)画刻度线和刻度

  • 准备画笔Paint
//准备画笔Paint
Paint keduPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
keduPaint.setStrokeWidth(3);
keduPaint.setColor(Color.parseColor("#000000"));
keduPaint.setStyle(Paint.Style.STROKE);
  • 确定刻度线的起点和终点坐标

刻度线就是一条线段肯定要用drawLine()方法,所以我们需要计算出每个刻度线的起点终点坐标,最上面的12点的刻度线最简单,起点的坐标为(getWidth()/2, getHeight()/2-getWidth()/4),Y轴就是圆心减去半径,而终点的坐标Y值只需要加上个线的长度,终点坐标为(getWidth()/2,getHeight()/2-getWidth()/4+50)。

而要计算其他的刻度线坐标,就需要将我们的坐标系旋转一个角度,也就是一个刻度的角度。这样一来刻度线的起点终点坐标就和上面的一样了。

//旋转坐标系
canvas.rotate(15, getWidth()/2, getHeight()/2);
  • 刻度线应该有长有短,我们画的刻度是24根刻度线,那第0、6、12、18根刻度线要长一些,其他的要短一些,也就是上面的线段的终点Y坐标少加一点,比如(getWidth()/2,getHeight()/2-getWidth()/4+25)
  • 我们还要绘制刻度,也就是文字,肯定得用到drawText()方法,文字内容就是刻度值。为了让文字相对于刻度居中,文字的起点要考虑文字的宽度,文字的纵坐标的话离刻度线的终点向下偏移一点就行了
String degree = String.valueOf(i);
canvas.drawText(degree, getWidth()/2-keduPaint.measureText(degree)/2, getHeight()/2-getWidth()/4 + 80, keduPaint);
  • 综上分析,绘制刻度和刻度线就比较简单了
//画刻度线和刻度
Paint keduPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
keduPaint.setStrokeWidth(3);
keduPaint.setColor(Color.parseColor("#000000"));
keduPaint.setStyle(Paint.Style.STROKE);

for (int i=0; i<24; i++) {
    if (i==0 || i==6 || i== 12 || i==18) {
        keduPaint.setStrokeWidth(3);
        keduPaint.setTextSize(30);
        canvas.drawLine(getWidth()/2, getHeight()/2-getWidth()/4, getWidth()/2,getHeight()/2-getWidth()/4+50, keduPaint);
        String degree = String.valueOf(i);
        canvas.drawText(degree, getWidth()/2-keduPaint.measureText(degree)/2, getHeight()/2-getWidth()/4 + 80, keduPaint);
    }else {
        keduPaint.setStrokeWidth(1);
        keduPaint.setTextSize(15);
        canvas.drawLine(getWidth()/2, getHeight()/2-getWidth()/4, getWidth()/2,getHeight()/2-getWidth()/4+25, keduPaint);
        String degree = String.valueOf(i);
        canvas.drawText(degree, getWidth()/2-keduPaint.measureText(degree)/2, getHeight()/2-getWidth()/4 + 60, keduPaint);

    }
    canvas.rotate(15, getWidth()/2, getHeight()/2);
}

画刻度和刻度线

(3)画一长一短2根指针

2根指针就是2条线段,指针的起点都在圆心,终点的话就是在原点的基础上偏移一段距离。所以为了方便计算,我们可以直接把坐标系移到圆心处

//画2根指针
Paint hourPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
hourPaint.setColor(Color.parseColor("#000000"));
hourPaint.setStrokeWidth(20);
hourPaint.setStyle(Paint.Style.STROKE);

Paint minutePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
minutePaint.setColor(Color.parseColor("#000000"));
minutePaint.setStrokeWidth(10);
minutePaint.setStyle(Paint.Style.STROKE);

canvas.save();
//将坐标系平移到圆点
canvas.translate(getWidth()/2, getHeight()/2);
canvas.drawLine(0, 0, 100, 100, hourPaint);
canvas.drawLine(0, 0, 100, 150, minutePaint);
canvas.restore();

效果图

总结

  • Canvas是绘制图像的直接操作对象,和Paint搭配使用能绘制丰富的图像
  • 要掌握Canvas的常用的一些API
  • 要掌握Canvas的平移和旋转操作,能帮我们简化很多图像坐标的计算


欢迎关注我的微信公众号,和我一起每天进步一点点!
AntDream

原文链接:加载失败,请重新获取