Android 中的 Canvas API

编程入门行业动态更新时间:2024-10-12 05:49:49

Android 中的 Canvas API

使用 Android Widget 组中不存在的自定义 UI 元素并想知道它是如何制作的？

这是 Android 中存在的 Canvas API 的魔力。我认为画布这个名字本身就定义了它是艺术家的游乐场，你必须展示你最好的艺术。

在这个博客中，我们将了解我们将如何学习，

什么是 Android 中的 Canvas API？
了解Canvas实现。
我们如何使用 canvas API 制作自己的 UI 元素？

什么是Android 中的Canvas API？

Android 中的 Canvas API 是一个绘图框架，可帮助我们绘制自定义设计，如线条、圆形甚至矩形。使用这些我们可以根据设计制作任何我们想要的形状。

画布的绘制发生在位图中，我们在其中绘制轮廓，然后 Paint API 帮助填充颜色和我们需要的任何样式。

Canvas有助于创建骨架，而油漆有助于美化设计。

了解Canvas实现

所以，既然我们知道 Canvas 有助于设计视图，那么让我们了解一下视图的渲染方式。有一些布局方法被调用，它们是

在这里，onMeasure() - 测量视图和那里的孩子的大小，onLayout() - 有助于设置大小，而 onDraw() 是有助于在视图上绘制的。

因此，在 onDraw() 中，Canvas用于使用其预先包含的方法进行绘制，例如 drawLine、drawArc 等。但是，画布实际上是如何在屏幕上绘制自身的呢？

Canvas 遵循坐标系在屏幕上绘制自身。它将手机屏幕视为自己的坐标系。

看下图感受一下

所以在这里

左上角代表坐标系中的 (0,0) 点。
然后右下角是坐标系中的 (x,y) 点。
因此，以这种方式，屏幕的中心由 (x/2,y/2) 点表示。

到目前为止，我们已经了解了如何使用 Canvas 以及在画布上绘图时需要注意哪些因素。现在，让我们看看如何使用画布实际绘制。

要绘制我们自己的自定义绘图，我们可以在自己的视图类中进行。在这里，我将创建自己的 CanvasView，

class CanvasView @JvmOverloads constructor(context: Context,attrs: AttributeSet? = null,defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {override fun onDraw(canvas: Canvas?) {super.onDraw(canvas)//here we have to use the canvas API to draw}
}

如您所见，在 onDraw() 中，我们将绘制我自己的设计。

现在，要在 Canvas 上绘图，我们需要视图类中的Paint对象。所以要定义油漆，

定义油漆，我将使用

private val myViewPaint =Paint().apply {isAntiAlias = truecolor = Color.BLACKstyle = Paint.Style.STROKE}

在这里，我已经初始化了绘制对象，并为其设置了一个自定义属性，例如颜色和样式，以存储要在画布上绘制的信息。

isAntiAlias - 用于在绘制时使边缘平滑。

现在，让我们从在画布上画一条线开始。在， onDraw() 我会写，

canvas?.drawLine(0f, 5f, 0f, 10f, myViewPaint)

在这里，drawLine() 采用两点坐标和油漆来绘制自身。在上面的代码中，0f 和 5f 是第一个点的 x 和 y 坐标，0f 和 10f 是第二个点的坐标。

同样，我们也可以使用Path()来代替通过点坐标来绘制自定义形状。

路径用于通过将形状从一个点传递到另一个点来绘制形状。要使用 Path 绘制一条线，我们必须使用，

val path = Path().apply {moveTo(x1, y1)lineTo(x2, y2)close()
}
canvas?.drawPath(path, myViewPaint)

在这里，在上面的代码中，我们使用了一条路径来绘制一条线。让我逐行分解以使您理解。

moveTo - 这用于将绘图尖端从一个点移动到另一个点。所以这里的绘图提示已经移动到 (x1, y1)。

lineTo - 用于从 (x1,y1) 到 (x2, y2) 画一条线。当我们移动到 (x1, y1) 时，这将是我们画线的起点。

PS。使用路径，您可以绘制您想要的任何类型的形状。

现在，为了使用路径画线，我们需要使用 canvas.drawPath 而不是之前代码中使用的 canvas.drawLine。

同样，要画一个圆，我们使用

canvas?.drawCircle(x,y,radius,myViewPaint)

其中 x 和 y 是该点的坐标，我们通过圆的半径。

现在，为了最终在屏幕上绘制它，我们在视图的 onDraw 中调用 invalidate()。

要在 Activity 中使用上述 View 类，我们只需在 XML 文件中使用以下内容，

<LinearLayout xmlns:android=""android:layout_width="match_parent"android:layout_height="match_parent"><app.himanshu.playground.CanvasViewandroid:layout_width="match_parent"android:layout_height="match_parent" />
</LinearLayout>

要记住的要点，