自定义控件零基础教学（五）—— canvas的基础方法使用

最新推荐文章于 2025-06-11 11:09:42 发布

客舟

最新推荐文章于 2025-06-11 11:09:42 发布

阅读量248

点赞数

CC 4.0 BY-SA版权

分类专栏：安卓自定义控件

本文链接：https://blog.csdn.net/xw960219/article/details/79864605

安卓自定义控件专栏收录该内容

5 篇文章

订阅专栏

这篇博客通过实例讲解Canvas的基础方法，从简单的回形正方形开始，逐步深入到尺子绘制，最后解析复杂的时钟图形绘制原理。作者强调理解图形之间的关联和旋转绘制的原理，帮助读者掌握Canvas的使用技巧。

开篇之言：

循循渐进是一个过程，不忘初心是一种本能。如果失去了初心，忽略了过程，人就会迷失在无底的深渊。

—— 吴缘

这两天在面试，没有时间更新博客，在这里对正在学习的同学说声抱歉，见谅。

关于canvas，它比Paint抽象一些，所以对于它的方法，就不能像Paint那样去教学，只有多试验它的方法，心中有了些了解才会对canvas随心所欲。

所以这篇博客就以画几个图形来带大家领略一下canvas。

先看效果图。

我们来逐步分析，从第一个回形正方形开始。这里主要是对逻辑不是很感冒的同学进行讲解，懂得原理的同学可以跳过，因为这个实现起来并不难。

在这三个图形中，细心的同学可能会发现，它们有着相互关联的地方，也有着自己特殊的地方，并且难度逐渐升高。可能有的同学认为前面第一第二个图形过于简单，但其实我是为了过渡第三个图形，让同学们去更好的理解第三个图形绘制出来的原理。

现在我们来讲第二个图形——尺子的绘制原理。

现在到重头戏了，最后的图形，时钟图形的绘制原理。

for循环里的if条件内的代码原理跟上面尺子代码一样，所以这里就不再多述，这里就讲下循环里最后一句代码，canvas.rotate(6,getWidth/2,850)。

第一个参数，旋转的度数，6度，6*60=360，即为一圈，刻度线之间的角度差就是6度。第二第三个参数，旋转点，默认是原点。在这里讲下第二个传递进去的参数值——getWidth。

从字面上看去，get，得到。Width，宽度。意思就是得到宽度。得到的是屏幕的宽度，例如480，720等等，不同屏幕大小的手机它们的宽高度就可能不一样。有getWidth，自然也有getHeight，这里用不到，因此没写出来。

下面讲述下画布旋转绘画的原理。

在旋转绘制的时候，绘画不是根据显示屏幕来绘画的，而是根据画布来绘画的，而画布上的内容最终是要显示在屏幕上的，要注意两者的区别。所以尽管旋转了角度，但那个中心点还是那个中心点，那条直线的坐标和长度仍然没有变，只是最后显示出来的效果让我们感觉不同罢了。

下面贴出代码。

XML代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.example.administrator.csdn.MainActivity">

    <com.example.administrator.csdn.CustomView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

JAVA代码

package com.example.administrator.csdn;

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

/**
 * Created by Administrator on 2018/4/6.
 */
public class CustomView extends View{
    private Paint mPiant;//画笔

    public CustomView(Context context) {
        super(context);
        mPiant = new Paint();

    }

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPiant = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {//这里的canvas就是画布，也就是我们前面想象里的纸张
        super.onDraw(canvas);
        Log.e("getWidth", "onDraw: "+getWidth());
        mPiant.setStyle(Paint.Style.STROKE);
        mPiant.setStrokeWidth(2);
        for (int i = 0; i <5 ; i++) {
            canvas.drawRect(20+i*20,20+i*20,300-i*20,300-i*20,mPiant);
        }

        canvas.drawRect(20,350,700,550,mPiant);
        for (int i = 0; i <34 ; i++) {
            if (i%5==0) {
                canvas.drawLine(20+i*20,450,20+i*20,550,mPiant);
            }
            canvas.drawLine(20+i*20,500,20+i*20,550,mPiant);
        }

        canvas.drawCircle(getWidth()/2,850,200,mPiant);
        for (int i = 0; i <60 ; i++) {
            if (i%5==0) {
                canvas.drawLine(getWidth()/2+200-45,850,getWidth()/2+200,850,mPiant);
            }else {
                canvas.drawLine(getWidth()/2+200-30,850,getWidth()/2+200,850,mPiant);
            }
            canvas.rotate(6,getWidth()/2,850);
        }
    }
}