返回

深入探讨 Android Canvas 中的 23 种绘制方法

Android

简介

在 Android 中构建自定义视图时，Canvas 是一个至关重要的工具，它允许您直接控制绘制操作。Canvas 提供了一系列强大的方法，可以帮助您创建各种图形形状、文本和图像。

本文旨在提供 Android Canvas 中 23 种绘制方法的全面指南，从基础到高级。我们将逐一介绍每个方法，提供详细的、代码示例和最佳实践。通过掌握这些方法，您将能够创建引人入胜且高效的自定义视图。

1. 绘制线条：drawLine() 和 drawLines()

  • drawLine()： 绘制从指定起点到终点的直线。
  • drawLines()： 绘制一系列从指定点集连接而成的线段。

代码示例：

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

val points = floatArrayOf(startX, startY, endX, endY)
canvas.drawLines(points, paint)

2. 绘制矩形：drawRect()、drawRoundRect() 和 drawOval()

  • drawRect()： 绘制具有指定矩形边界的矩形。
  • drawRoundRect()： 绘制具有指定矩形边界的矩形，其角具有指定的圆角半径。
  • drawOval()： 绘制具有指定椭圆边界并可选择填充的椭圆。

代码示例：

canvas.drawRect(left, top, right, bottom, paint)

val rx = 10f
val ry = 15f
canvas.drawRoundRect(left, top, right, bottom, rx, ry, paint)

canvas.drawOval(left, top, right, bottom, paint)

3. 绘制圆形：drawCircle()

  • drawCircle()： 绘制具有指定半径和中心的圆。

代码示例：

canvas.drawCircle(centerX, centerY, radius, paint)

4. 绘制路径：drawPath()

  • drawPath()： 绘制指定的路径对象，该对象定义了一系列线段和曲线。

代码示例：

val path = Path()
path.moveTo(startX, startY)
path.lineTo(endX, endY)
canvas.drawPath(path, paint)

5. 绘制文本：drawText()

  • drawText()： 绘制具有指定文本、位置和样式的文本字符串。

代码示例：

canvas.drawText("Hello World", x, y, paint)

6. 绘制位图：drawBitmap()

  • drawBitmap()： 绘制指定的位图对象，该对象包含一个图像。

代码示例：

val bitmap = BitmapFactory.decodeResource(resources, R.drawable.image)
canvas.drawBitmap(bitmap, x, y, paint)

7. 绘制弧线：drawArc()

  • drawArc()： 绘制具有指定边界的弧线。

代码示例：

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

8. 绘制扇形：drawArc() 和 drawSector()

  • drawArc()： 绘制具有指定边界的弧线段。
  • drawSector()： 绘制具有指定边界的弧线扇区。

代码示例：

canvas.drawArc(oval, startAngle, sweepAngle, false, paint)
canvas.drawSector(oval, startAngle, sweepAngle, true, paint)

9. 绘制点：drawPoint()

  • drawPoint()： 绘制指定位置的单个点。

代码示例：

canvas.drawPoint(x, y, paint)

10. 绘制点阵：drawPoints()

  • drawPoints()： 绘制一系列点，这些点由指定点阵指定。

代码示例：

val points = floatArrayOf(x1, y1, x2, y2, ...)
canvas.drawPoints(points, paint)

11. 绘制点集：drawVertices()

  • drawVertices()： 绘制指定顶点阵的点或线段集合。

代码示例：

val vertexMode = VertexMode.TRIANGLES
val vertexArray = floatArrayOf(x1, y1, x2, y2, ...)
canvas.drawVertices(vertexMode, vertexArray, paint)

12. 绘制图片：drawPicture()

  • drawPicture()： 绘制指定的图片对象，该对象包含一个录制绘画操作的序列。

代码示例：

val picture = Picture()
canvas.drawPicture(picture)

13. 保存和恢复 Canvas 状态：save() 和 restore()

  • save()： 保存当前 Canvas 状态，包括变换、剪辑和绘制属性。
  • restore()： 恢复之前保存的 Canvas 状态。

代码示例：

canvas.save()
// ...绘制操作...
canvas.restore()

14. 变换 Canvas：translate()、rotate()、scale() 和 skew()

  • translate()： 平移 Canvas 的原点。
  • rotate()： 围绕指定点旋转 Canvas。
  • scale()： 缩放 Canvas 相对于指定点的比例。
  • skew()： 倾斜 Canvas。

代码示例：

canvas.translate(x, y)
canvas.rotate(angle, pivotX, pivotY)
canvas.scale(scaleX, scaleY)
canvas.skew(sx, sy)

15. 剪辑 Canvas：clipRect() 和 clipPath()

  • clipRect()： 将 Canvas 的剪辑区域限制为指定的矩形。
  • clipPath()： 将 Canvas 的剪辑区域限制为指定的路径。

代码示例：

canvas.clipRect(left, top, right, bottom)
canvas.clipPath(path)

16. 设置画笔属性：Paint

  • Paint： 一个可配置的对象，用于控制绘制操作的外观。
  • 颜色： 使用 setColor() 设置画笔颜色。
  • 样式： 使用 setStyle() 设置画笔样式（FILL、STROKE、FILL_AND_STROKE）。
  • 画笔宽度： 使用 setStrokeWidth() 设置画笔宽度。

代码示例：

val paint = Paint()
paint.setColor(Color.RED)
paint.setStyle(Paint.Style.FILL)
paint.setStrokeWidth(5f)

17. 使用画笔效果：setXfermode()

  • setXfermode()： 设置画笔的混合模式，以控制绘制操作如何与现有像素混合。

代码示例：

val xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_OVER)
paint.setXfermode(xfermode)

18. 使用遮罩过滤：setFilterBitmap()

  • setFilterBitmap()： 设置画笔的过滤方式，以改善位图图像的质量。

代码示例：

val filter = Bitmap.Config.ARGB_8888
paint.setFilterBitmap(true)

19. 抗锯齿：setAntiAlias()

  • setAntiAlias()： 启用或禁用抗锯齿，以平滑绘制的线条和边缘。

代码示例：

paint.setAntiAlias(true)

20. 设置文本对齐：setTextAlign()

  • setTextAlign()： 设置文本对齐方式，包括 LEFT、CENTER 和 RIGHT。

代码示例：

paint.setTextAlign(Paint.Align.CENTER)

21. 设置文本大小：setTextSize()

  • setTextSize()： 设置文本大小以像素为单位。

代码示例：

paint.setTextSize(20f)

22. 设置文本颜色：setColor()

  • setColor()： 设置文本颜色。

代码示例：

paint.setColor(Color.BLACK)

23. 设置文本字体：setTypeface()

  • setTypeface()： 设置文本字体。

代码示例：

val typeface = Typeface.create(Typeface.DEFAULT, Typeface.BOLD)
paint.setTypeface(typeface)

最佳实践

  • 使用视图树： 尽可能使用视图树