Android自定义View——绘制基本形状

1、画一个矩形

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

        Paint paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.FILL);

        //绘制一个宽度100dp、高50dp的矩形
        canvas.drawRect(0, 0, dpToPx(100), dpToPx(50), paint);
    }

Screenshot_20251101_164404.png

2、画一个圆角矩形

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

        Paint paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.FILL);

        //绘制一个宽度100dp、高50dp的圆角矩形
        float radiusX = dpToPx(10);//X方向的圆角半径
        float radiusY = dpToPx(10);//y方向的圆角半径
        canvas.drawRoundRect(0, 0, dpToPx(100), dpToPx(50), radiusX, radiusY, paint);
    }

Screenshot_20251101_170115.png

3、Path
在Android中Path类是一个非常重要的类，用于绘制二维图形路径，它可以包含直线、二次曲线、贝塞尔曲线等，path类提供了一系列方法来定义路径

Path常见用法

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

        Paint paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(dpToPx(2));

        //使用Path绘制一个半径为150dp的圆，并且距离左边10dp，顶部30dp
        float radius = dpToPx(150);//半径
        float left = dpToPx(10);//距离左边10dp
        float top = dpToPx(30);//距离顶部30dp

        Path path = new Path();
        //1、将路径的起点移动到9点钟位置
        float startX = left;//X轴等于左侧
        float startY = radius + top;//Y轴等于半径+顶部
        path.moveTo(startX, startY);

        //2、从当前点画二次贝塞尔曲线，控制点为(x1,y1)，终点为(x2,y2)也就是12点位置
        float conX = left;//控制点为左侧顶点位置
        float conY = top;
        float endX = radius + left;//终点X轴等于半径+左侧
        float endY = top;//终点Y轴等于距离定位的位置
        path.quadTo(conX, conY, endX, endY);

        //3、这次的终点是3点钟位置
        float conXRight = 2 * radius + left;//控制点为右侧顶点位置,等于直径+左侧
        float conYRight = top;
        float endXRight = 2 * radius + left;//终点X轴等于直径+左侧
        float endYRight = radius + top;//终点Y轴等于半径+顶部
        path.quadTo(conXRight, conYRight, endXRight, endYRight);

        //4、这次的终点是6点钟位置
        float conXBottom = 2 * radius + left;//控制点在右下角
        float conYBottom = 2 * radius + top;
        float endXBottom = radius + left;//终点X轴为半径+左侧
        float endYBottom = 2 * radius + top;//终点Y轴直径+顶部
        path.quadTo(conXBottom, conYBottom, endXBottom, endYBottom);

        //5、终点回到起点，控制点在左下角
        float conXLeftBottom = left;
        float conYLeftBottom = 2 * radius + top;
        path.quadTo(conXLeftBottom, conYLeftBottom ,startX, startY);

        path.close();
        canvas.drawPath(path, paint);
    }

Screenshot_20251101_180252.png