自定义View之绘制流程

原创已于 2022-05-17 17:39:09 修改 · 779 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #webview #java

于 2022-05-17 10:27:05 首次发布

Android 专栏收录该内容

21 篇文章

订阅专栏

本文探讨了Android自定义View的绘制流程，包括Bitmap的加载、Options参数的控制以优化性能，onDraw方法的使用，Canvas的绘制和变换操作，以及Paint和Path在自定义图形中的应用。详细阐述了View的绘制顺序，以及在继承和子View处理中的注意事项。

持续编辑中，尚未完成

先记录一下bitmap相关知识，因为在绘制图片相关的时候会用到bitmap。

BitMap

BitMap在Android中表示已经加载好的图片资源，通过BitMapFactory来加载图片资源，有四种方法，分别是decodeFile（从文件中读取图片），decodeResource（从资源，drawmap目录），decodeStream（从输入流中读取）和decodeByteArray（从字节数组加载），从资源和文件读取的方法，都会转换为输入流然后调用decodeStream方法，最终会调用两个native方法读取资源生成bitmap。

Options参数

控制Options参数可以用来提高bitmap加载速度和控制bitmap的大小。举个例子，imageView里面需要加载一个分辨率很高的图像，可以通过设置采样率的方式对图片进行缩放，避免内存溢出和提升加载速度。

override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        val options = BitmapFactory.Options()
        options.inSampleSize=4
        val bitmap =
            BitmapFactory.decodeResource(resources, R.drawable.img,options)
        canvas?.drawBitmap(bitmap,0F,0F,Paint())
    }

在这个简单的例子中通过设置采样率为4，将图片长宽缩小为1/4，占用内存缩小到了原来的1/16。

onDraw（）

自绘View只需要重写onDraw方法就能实现，这个方法会传入一个Canvas参数用来绘制内容。

canvas

用来绘制view的内容，实现绘制和裁切旋转的效果。

绘制类方法

canvas拥有一系列draw*()方法,这些方法是绘制内容的核心方法。

例如drawColor方法会将整个区域绘制上一种颜色，drawBitmap会将一张图片绘入区域，drawLine，drawPoint，drawRect，drawCircle会绘制出相应的图形，drawPath会根据传入的Path绘制出自定义图形。

辅助类方法

使用canvas可以对绘制内容裁切或者是几何变换，实现局部显示，平移旋转，放大缩小和错切的效果。下面给出效果实例和方法简述：

裁切

通过canvas的clipRect()可以实现切出一个矩形区域

override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        val options = BitmapFactory.Options()
        options.inSampleSize=8
        val bitmap =
            BitmapFactory.decodeResource(resources, R.drawable.img,options)
        canvas?.save()
        //这行代码划定了裁切后范围的四个顶点坐标
        canvas?.clipRect(200,100,800,800)
        canvas?.drawBitmap(bitmap,0F,0F,Paint())
        canvas?.restore()
}

通过clipPath()可以自定义裁切的范围，参数是一个path实例，以裁切为一个圆为例子：

canvas?.save()
val path=Path()
//最后一个参数用来描述以顺时针还是逆时针
path.addCircle(200F,200F,100F,Path.Direction.CCW)
canvas?.clipPath(path)
canvas?.drawBitmap(bitmap,0F,0F,Paint())
canvas?.restore()

平移

//这里表示右移100px，上移动50px
canvas?.translate(100F,-50F)

旋转

//这里表示以100，100为圆心旋转45°
canvas?.rotate(45F,100F,100F)

放缩

//这里表示以100，100为原点放大图形到1.5倍
canvas?.scale(1.5F,1.5F,100F,100F)

错切

//第一个参数描述在x轴也就是左右的扭曲方向，第二个是y轴
canvas?.skew(0.3F,0.3F)

以上方法都是通过对canvas内置的矩阵进行变换实现的，因此我们也可以直接使用Matrix的setPolyToPoly方法进行点对点变换的映射。

三维变换

要实现三维变换的效果，需要使用到另外一个组件Camera，它与canvas一样使用前后需要保存切换状态，这里举个旋转三十度的例子

        val camera=Camera()
        camera.save()
        //沿x方向旋转30°
        camera.rotateX(20F)
        //canvas的绘制流程是反的，这里是将画布的中心移动回去
        canvas?.translate(300F,300F)
        //将旋转应用到目标canvas
        camera.applyToCanvas(canvas)
        //将canvas的绘制中心，也就是旋转中心移动到图像的中心，使得旋转效果正常化
        canvas?.translate(-300F,-300F)
        canvas?.clipRect(100F,100F,500F,500F)
        canvas?.drawBitmap(bitmap,0F,0F,Paint())
        camera.restore()

效果如图，注意canvas的绘制流程是反着来的。

Paint

paint是画笔，作为canvas的参数用来描述绘制内容的，可以用来实现渐变色彩，图片填充等功能。

待续

Path

path用来描述自定义的图形，可以采用add*的一系列方法增添图形，也可以直接画线绘制图形。

待续

绘制顺序

总体来说View的绘制顺序遵循这样的规则：

// 这里是朱凯大佬的示例
// View.java 的 draw() 方法的简化版大致结构（是大致结构，不是源码哦）：

public void draw(Canvas canvas) {
    ...

    drawBackground(Canvas); // 绘制背景（不能重写）
    onDraw(Canvas); // 绘制主体
    dispatchDraw(Canvas); // 绘制子 View
    onDrawForeground(Canvas); // 绘制滑动相关和前景

    ...
}

总结一下，先绘制背景，然后绘制本体，再绘制子View，最后绘制前景和处理滑动相关。