Android canvas绘制方法

痛定思痛。 2022-12-29 12:46 197阅读 0赞

canvas绘制分为如下几类：

*  1、几何图形绘制
 *  2、文本绘制
 *  3、颜色绘制
 *  4、图片绘制

### 一、几何图形绘制 ###

1. `drawLine`

简单的绘制一条线

canvas.drawLine(startX, startY, endX, endY, paint)

![59a0a5af50c927367f5a2e11d15c4b3f.png][]

2. drawLines

如果你想要绘制多条线，相比于多次执行`drawLine`，我们推荐使用`drawLines`来完成，我们只需要提供一个坐标值的平面`float`数组列表，如下所示。

canvas.drawLines(
        floatArrayOf(
            startFirstX, startFirstY, endFirstX, endFirstY,
            startSecondX, startSecondY, endSecondX, endSecondY),
        paint)

![format_png][]

3. drawPoint

虽然您可以通过以相同的起点和终点坐标画一条线来画点，这是一种技巧。我们可以使用专门提供的绘制点的方法，`drawPoint`函数。

canvas.drawPoint(coordinateX, coordinateY, paint)

4. drawPoints

和`lines`一样，你可以通过提供一个平面坐标数组来绘制多个点。

canvas.drawPoints(
        floatArrayOf(
            startX, startY,
            startSecondX, startSecondY),
        paint)

5. drawRect

使用坐标或`Rect`类绘制矩形。

canvas.drawRect(
        Rect(startX, topY, endX, bottomY), 
        paint)

![format_png 1][]

6. drawRoundRect

如果你想要绘制一个圆角矩形，可以使用`drawRoundRect`，它和`drawRect`法法很像，但是增加了两个参数`radiusX`和`radiusY`来定义圆角的弯曲程度。

canvas.drawRoundRect(rect, radiusX, radiusY, projectResources.paint)

如果`radiusX`等于`radiusY`，它将绘制均匀的圆角。

![format_png 2][]

当`radiusX = radiusY`时，它将具有常规的圆角，如下所示:

![format_png 3][]

如果`radiusX` 大于 `radiusY` 时，就会出现下面这样的效果：

![format_png 4][]

如果`radiusX` 小于 `radiusY` 时，又变成了这样：

![format_png 5][]

7. drawCircle

`drawCircle`非常简单，它只需要一个圆心坐标和半径。

canvas.drawCircle(
        centerCoordinateX, centerCoordinateY,
        radius,
        paint)

![format_png 6][]

8. drawOval

不像绘制圆形那样，绘制椭圆时，我们不需要提供半径，而是提供一个`rect`，然后椭圆就会被正确绘制

canvas.drawOval(rect, paint)

![format_png 7][]

9. drawArc

绘制弧形和绘制椭圆时一样的机制，使用`rect`，它还增加了几个参数:`startAngle`，`sweepAngle`和`useCenter`。

canvas.drawArc(rect, startAngle, sweepAngle, useCenter, paint)

对于`startAngle`，将`rect`的中间端作为起点，即顺时针`90°`。从那里开始，`startAngle`被认为是`0°`。然后从`startAngle`计算`sweepAngle`。两者都使用角度度`°`值。

`useCenter`是一个布尔变量，用于确定圆弧是否连接到中心。下图说明了`useCenter`为`false`和`true`之间的区别。

`useCenter = false`:

![format_png 8][]

`useCenter = true` :

![format_png 9][]

@Override
        protected void onDraw(Canvas canvas) {
    
            //绘制弧线区域
    
            RectF rect = new RectF(0, 0, 100, 100);
    
            canvas.drawArc(rect, //弧线所使用的矩形区域大小
                    0,  //开始角度
                    90, //扫过的角度
                    false, //是否使用中心
                    paint);
    
        }

![d5a7a8bf4f7c3ca2276d1dee16ff7244.png][]

protected void onDraw(Canvas canvas) {
    
            //绘制弧线区域
    
            RectF rect = new RectF(0, 0, 100, 100);
    
            canvas.drawArc(rect, //弧线所使用的矩形区域大小
                    0,  //开始角度
                    90, //扫过的角度
                    true, //是否使用中心
                    paint);
    
        }

![aea7e496ce2fd301255e9767666c5b01.png][]

两图对比我们可以发现，当 drawArcs(rect,startAngel,sweepAngel,useCenter,paint)中的useCenter为false时，弧 线区域是用弧线开始角度和结束角度直接连接起来的，当useCenter为true时，是弧线开始角度和结束角度都与中心点连接，形成一个扇形。

10. drawPath

有时候，我们想画一些不限于普通几何线的东西，我们可以使用`drawPath`，这里的`Path`是一个包含了我们想要绘制路径的一个对象，它由铅笔画和移动之类的功能如`moveTo`和`lineTo`组成。

以下是我们绘制十字标记的路径的示例

val path = Path()
    path.moveTo(startX, topY)
    path.lineTo(endX, bottomY)
    path.moveTo(startX, bottomY)
    path.lineTo(endX, topY)
    canvas.drawPath(path, paint)

![format_png 10][]

`drawPath`是一个非常有用的功能。许多人使用它在Android中制作绘图应用程序。

11. drawVertices

这是一个相对复杂的函数，它以最小的点绘制三角形或顶点。例如，使用六个坐标，一个可以绘制四个三角形:

![format_png 11][]

### 二、文本绘制 ###

12. drawText

在Android中，我们一般使用`TextView` 来显示文本，但是如果你要更好的控制文本的话，如：动态更换，精准定位等等。Canvas的`drawText`就派上了用场。

方法如下，有`text`，`coordinate`和`paint`。

canvas.drawText(text, coordinateX, coordinateY, paintText)

13. Draw StaticLayout

`drawText`有局限性。它不会将较长的单词包装到第二行。它也不处理`/n`进位返回

因此，我们需要一个可将长字换行的文本到第二行来绘制的`StaticLayout` 。

StaticLayout实际上并不是Canvas的绘制函数，而是将自身绘制到画布中。下面是它的绘制方式：

val staticLayout =
        StaticLayout.Builder.obtain(
            TEXT, 0, TEXT.length, textPaint, width
        ).build()
    
    canvas.save()
    canvas.translate(coordinateX, coordinateY)
    staticLayout.draw(canvas)
    canvas.restore()

结果如下：

![format_png 12][]

Staticlayout的构造函数：

public StaticLayout(CharSequence source, TextPaint paint, int width, Alignment align, float spacingmult, float spacingadd, boolean includepad) {
        super((CharSequence)null, (TextPaint)null, 0, (Alignment)null, 0.0F, 0.0F);
        throw new RuntimeException("Stub!");
    }
    
    public StaticLayout(CharSequence source, int bufstart, int bufend, TextPaint paint, int outerwidth, Alignment align, float spacingmult, float spacingadd, boolean includepad) {
        super((CharSequence)null, (TextPaint)null, 0, (Alignment)null, 0.0F, 0.0F);
        throw new RuntimeException("Stub!");
    }
    
    public StaticLayout(CharSequence source, int bufstart, int bufend, TextPaint paint, int outerwidth, Alignment align, float spacingmult, float spacingadd, boolean includepad, TruncateAt ellipsize, int ellipsizedWidth) {
        super((CharSequence)null, (TextPaint)null, 0, (Alignment)null, 0.0F, 0.0F);
        throw new RuntimeException("Stub!");
    }

source：文本内容

paint：画笔

width：文本内容长度超过该数值则换行

align：对齐方式

spacingmult：行距，表示字体高度的倍数，默认是1，小于1则是减少行距，大于则是增加行距

spacingadd：行距，表示行间距增加的距离（与spacingmult配合使用）

includepad：是否留白

其中paint可以设置字体类型，setTypeface（），不同字体类型有着不同的绘制规则。

![70][]

![70 1][]

重要的属性有：

### top，bottom，ascent，descent，baseline ###

通过Paint.getFontMetricsInt()可以获取到这些值，例如：mPaint.getFontMetricsInt().baseline

*  baseline：基准点，字符在TextView中的基准点，字符的绘制就是通过这个基准点来绘制的，相当于字符的零点，top，bottom，ascent，descent的值就是以这个为零点来得到的，在baseline上面的top和ascent是负数，在baseline下面的bottom和descent是正数
 *  top：是指的是最高字符到baseline的值，即ascent的最大值，为负数
 *  ascent：是baseline之上至字符最高处的距离，为负数
 *  bottom：是指最低字符到baseline的值，即descent的最大值，为正数
    
    descent：是baseline之下至字符最低处的距离，为正数

14. drawPosText

`drawPosText`使每个字符都可以放置在指定位置。在下面，单词`fly`被写在不同的`Y`位置。

![format_png 13][]

API如下所示：

val posArray = listOf(x1, y1, x2, y2, x3, y3 ...).toFloatArray()
    canvas.drawPosText(TEXT, startIndex, endIndex, posArray, paint)

提供的坐标点必须至少与要绘制的字母相同，否则将崩溃。

@Override
        protected void onDraw(Canvas canvas) {
    
            //按照既定点 绘制文本内容
            canvas.drawPosText("Android777", new float[]{
                    10,10, //第一个字母在坐标10,10
                    20,20, //第二个字母在坐标20,20
                    30,30, //....
                    40,40,
                    50,50,
                    60,60,
                    70,70,
                    80,80,
                    90,90,
                    100,100
            }, paint);
    
        }

![54b8666a5848378242338d245737e72c.png][]

15. drawTextOnPath

在绘制文本的基础上加上一个路径，我们就可以沿着提供的`path`来绘制文本，`x`和`y`的位置相对于`path`给定的位置。

canvas.drawTextOnPath(TEXT, path, x, y, paint)

下面是一个V字行的路径，我们沿着`path`绘制文本。

![format_png 14][]

16. drawTextRun

这个绘制方法就有点复杂了，因为它通常不与英语单词一起使用。它仅适用于其字母根据周围字母的可见性而绘制不同的语言。

### 三、颜色绘制 ###

17. drawRGB

这个方法仅是在画布`canvas`上绘制颜色，这对于设置背景色非常有用

canvas.drawRGB(red, green, blue)
    // Each is between 0 and 255, where 0 is not there, and 255 is full.
    // When alpha is 255, it is opaque, and 0 is transparent.

18. drawARGB

和`drawRGB`相似，`drawARGB`增加了使颜色有透明度的能力。

canvas.drawARGB(alpha, red, green, blue)
    // When alpha is 255, it is opaque, and 0 is transparent.

这对于设置正面颜色并使后面的项目变暗很有用。

正常图片：

![format_png 15][]

设置了红色透明度的图片：

![format_png 16][]

19. drawColor

使用这个方法，我们可以使用颜色`资源`来代替`ARGB`颜色，用下面这个API:

canvas.drawColor(context.getColor(R.color.colorPrimary))

20. drawPaint

有时，我们喜欢画一些奇特的颜色，代替使用`ARGB`或资源颜色，我们可以创建一个`Paint`对象。下面是一个示例：

val gradientPaint by lazy {
        Paint().apply {
            shader = RadialGradient(
                width/2f,
                height/2f,
                height/2f,
                Color.GREEN,
                Color.RED,
                Shader.TileMode.MIRROR
            )
        }
    canvas.drawPaint(gradientPaint)

![format_png 17][]

### 四、图片绘制 ###

21. drawBitmap

给一个`bitmap`，我们可以将它绘制到画布上

private val bitmap by lazy {
        BitmapFactory.decodeResource(resources, R.drawable.image)
    }
    canvas.drawBitmap(bitmap, sourceRect, destRect, paint)

必须的参数是`bitmap` 和 `destRect`:

*  `bitmap` 可以从资源文件加载
 *  `destRect` 是画布上将要绘制的矩形区域

可选择的参数(可以为`null`)是`sourceRect` 和`paint`：

*  `sourceRect`是一个矩形，代表要绘制图片的哪个子集。如果为空，则拍摄整个照片（注意：这对于某些动画非常有用，比如要添加整个动画图形的图片，并且一次只显示一个子集时。）
 *  `paint`可以设置为null，并且位图将照常绘制。如果我们计划用另一幅图像将其遮蔽，则paint很有用。

22. drawPicture

如果你想要绘制的东西组合在一起，并且要多次执行，并且您不希望处理变慢并且必须重新绘制每个时间，则可以将整个图形放入“图片（Picture）”中。

下面是一个简单的示例，其中我们将图形存储到图片中：

private val picture by lazy {
        val picture = Picture()
        val pCanvas = picture.beginRecording(width, height)
        pCanvas.drawBitmap(bitmap, null, rect, null)
        picture.endRecording()
        picture
    }

需要时，只需执行这行代码：

canvas.drawPicture(picture)

这样可以加快整个绘制过程的速度，以完成需要一遍又一遍的绘制。

23. drawBitmapMesh

这是为了操纵绘制的位图图像。给定一个图像，我们可以在图像内设置坐标，然后将一个点平移到另一个位置，从而转换它的图像。

例如。下图的中心X，Y显示在白线横截面中。

![format_png 18][]

然而，使用`drawBitmapMesh`，我们可以移动坐标并相应地变换图像。

![format_png 19][]

[59a0a5af50c927367f5a2e11d15c4b3f.png]: /images/20221120/1cd46fc421ef4ecc814bf667da8711c7.png
[format_png]: https://img-blog.csdnimg.cn/img_convert/95572aaae813bf51126062cd5072e3d7.webp?x-oss-process=image/format,png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/aab847909f4c2f5cabb7582e07b873b6.webp?x-oss-process=image/format,png
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/1ec4b665832bee0a39026c5c627a694c.webp?x-oss-process=image/format,png
[format_png 3]: https://img-blog.csdnimg.cn/img_convert/2c34becc0aa52af2190c717f8e8d7462.webp?x-oss-process=image/format,png
[format_png 4]: https://img-blog.csdnimg.cn/img_convert/b84464c0b9d1cb006503d21de4854f1b.webp?x-oss-process=image/format,png
[format_png 5]: https://img-blog.csdnimg.cn/img_convert/04cc6186ef4e677c876fd0547cc80e1e.webp?x-oss-process=image/format,png
[format_png 6]: https://img-blog.csdnimg.cn/img_convert/a00246d7c684f392d7ba1078657b916f.webp?x-oss-process=image/format,png
[format_png 7]: https://img-blog.csdnimg.cn/img_convert/088d770ac4f21d5a162ddb43015941e0.webp?x-oss-process=image/format,png
[format_png 8]: https://img-blog.csdnimg.cn/img_convert/9b2081e7c59dc2c9635354f03ae79aaa.webp?x-oss-process=image/format,png
[format_png 9]: https://img-blog.csdnimg.cn/img_convert/3d4cf28839e5a3c7d69b4fc2c744c3e7.webp?x-oss-process=image/format,png
[d5a7a8bf4f7c3ca2276d1dee16ff7244.png]: https://img-blog.csdnimg.cn/img_convert/d5a7a8bf4f7c3ca2276d1dee16ff7244.png
[aea7e496ce2fd301255e9767666c5b01.png]: https://img-blog.csdnimg.cn/img_convert/aea7e496ce2fd301255e9767666c5b01.png
[format_png 10]: https://img-blog.csdnimg.cn/img_convert/0feb5f4b01bfc4ea5e7146082a673502.webp?x-oss-process=image/format,png
[format_png 11]: https://img-blog.csdnimg.cn/img_convert/c4375061a1314efaf6cbdf699bb5f39b.webp?x-oss-process=image/format,png
[format_png 12]: https://img-blog.csdnimg.cn/img_convert/ffb573e818c11d457f9e9525df0c7632.webp?x-oss-process=image/format,png
[70]: https://img-blog.csdn.net/20180711134122716?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1ODgxNjA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180711134249129?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1ODgxNjA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[format_png 13]: https://img-blog.csdnimg.cn/img_convert/e2fa5ecb34f242a75ba060c23c7f16ac.webp?x-oss-process=image/format,png
[54b8666a5848378242338d245737e72c.png]: https://img-blog.csdnimg.cn/img_convert/54b8666a5848378242338d245737e72c.png
[format_png 14]: https://img-blog.csdnimg.cn/img_convert/ca4b108520a790eb0c3d7906b1787740.webp?x-oss-process=image/format,png
[format_png 15]: https://img-blog.csdnimg.cn/img_convert/4582910da0248663b03139e6d685ffe1.webp?x-oss-process=image/format,png
[format_png 16]: https://img-blog.csdnimg.cn/img_convert/86f4bab89e355e1c14ae8e7ede9306ba.webp?x-oss-process=image/format,png
[format_png 17]: https://img-blog.csdnimg.cn/img_convert/39733a4f2282f1b9c79b3baf85443588.webp?x-oss-process=image/format,png
[format_png 18]: https://img-blog.csdnimg.cn/img_convert/e4c612efe8c3a9bd43642dcfaf4877fc.webp?x-oss-process=image/format,png
[format_png 19]: https://img-blog.csdnimg.cn/img_convert/176bd5a50b0f8005e4c25acd1b75529e.webp?x-oss-process=image/format,png