Android 自定义 View 绘制篇：绘制空心圆

2023-12-27 16:00:15

Android 自定义 View 简单指南 (02 绘制)

在上一章中，我们成功地创建了一个自定义 View 并对其进行了测量和布局。现在，是时候踏入激动人心的世界：绘制！在本指南的这一部分中，我们将指导您绘制一个空心圆，圆心位于 View 的中心。

初始化画笔

private Paint paint = new Paint();

画笔是绘制各种图形的基础工具，从简单的形状到复杂的路径。它允许我们定义线条的粗细、颜色和样式。在上面给出的代码中，我们创建了一个 Paint 对象，为后续的绘制操作做准备。

设置画布

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    // 设置画布为白色
    canvas.drawColor(Color.WHITE);

    // 将画布平移到 View 的中心
    canvas.translate(getWidth() / 2, getHeight() / 2);
}

在 onDraw() 方法中，我们首先通过调用 super.onDraw(canvas) 委托给基类。然后，我们将画布设置为白色背景，并将其平移到 View 的中心。此平移操作确保我们的圆形将居中绘制。

绘制空心圆

// 设置画笔属性
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(10f);
paint.setColor(Color.BLACK);

// 绘制半径为 100 像素的空心圆
canvas.drawCircle(0, 0, 100f, paint);

现在，我们准备好绘制圆形了。首先，我们设置画笔的样式为描边，设置描边宽度为 10 像素，并将其颜色设置为黑色。然后，我们使用 drawCircle() 方法绘制一个半径为 100 像素的空心圆，其圆心位于画布中心（0, 0）。

完整代码

public class CustomView extends View {

    private Paint paint;

    public CustomView(Context context) {
        super(context);

        paint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawColor(Color.WHITE);

        canvas.translate(getWidth() / 2, getHeight() / 2);

        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(10f);
        paint.setColor(Color.BLACK);

        canvas.drawCircle(0, 0, 100f, paint);
    }
}