自定义view - 画弧线填充描边与使用中心

最新推荐文章于 2021-05-27 19:36:44 发布

Mars-xq

最新推荐文章于 2021-05-27 19:36:44 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：自定义view 自定义view

本文链接：https://blog.youkuaiyun.com/sinat_31057219/article/details/54906390

自定义view 同时被 2 个专栏收录

43 篇文章

订阅专栏

自定义view

26 篇文章

订阅专栏

本文详细介绍了在绘图中如何使用不同画笔样式实现描边、填充及二者结合的效果，并通过实例展示了不同样式在圆形和弧形绘制上的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置画笔样式的时候是这样的：

mPaint.setStyle(Paint.Style.FILL);
//设置画笔模式为填充

实际上画笔有三种模式，如下：

STROKE                //描边
FILL                  //填充
FILL_AND_STROKE       //描边加填充

Paint paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStrokeWidth(40);     //为了实验效果明显，特地设置描边宽度非常大

// 描边
paint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(200,200,100,paint);

// 填充
paint.setStyle(Paint.Style.FILL);
canvas.drawCircle(200,500,100,paint);

// 描边加填充
paint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawCircle(200, 800, 100, paint);

由图可以看出，填充是内容，描边是边界。描边的宽度向外扩展。

画弧线的对比

注意：顺时针方向为角度正方向

        paint.setStyle(Paint.Style.STROKE);//描边
        RectF rectF1 = new RectF(100f, 100f, 500f, 300f);
        canvas.drawArc(rectF1, 270, 90, false, paint);//不用中心

        paint.setStyle(Paint.Style.STROKE);//描边
        RectF rectF2 = new RectF(100f, 300f, 500f, 500f);
        canvas.drawArc(rectF2, 270, 90, true, paint);//用中心

        paint.setStyle(Paint.Style.FILL);//填充
        RectF rectF3 = new RectF(100f, 500f, 500f, 700f);
        canvas.drawArc(rectF3, 270, 90, false, paint);//不用中心

        paint.setStyle(Paint.Style.FILL);//填充
        RectF rectF4 = new RectF(100f, 700f, 500f, 900f);
        canvas.drawArc(rectF4, 270, 90, true, paint);//用中心

        paint.setStyle(Paint.Style.FILL_AND_STROKE);//描边加填充
        RectF rectF5 = new RectF(100f, 900f, 500f, 1100f);
        canvas.drawArc(rectF5, 270, 90, false, paint);//不用中心

        paint.setStyle(Paint.Style.FILL_AND_STROKE);//描边加填充
        RectF rectF6 = new RectF(100f, 1100f, 500f, 1300f);
        canvas.drawArc(rectF6, 270, 90, true, paint);//用中心

效果图：

这里写图片描述

实心文字：

    textPaint.setStyle(Paint.Style.FILL);

这里写图片描述

空心文字：

    textPaint.setStyle(Paint.Style.STROKE);

这里写图片描述

描边，不用中心

mPaint.setStyle(Paint.Style.STROKE);//描边
canvas.drawArc(rectF3,270,90,false,mPaint);//用中心

Markdown

描边，用中心

mPaint.setStyle(Paint.Style.STROKE);//描边
canvas.drawArc(rectF3,270,90,true,mPaint);//用中心

Markdown

填充，不用中心

mPaint.setStyle(Paint.Style.FILL);//填充
canvas.drawArc(rectF3,270,90,false,mPaint);//用中心

Markdown

填充，用中心

mPaint.setStyle(Paint.Style.FILL);//填充
canvas.drawArc(rectF3,270,90,true,mPaint);//用中心

Markdown

填充描边，不用中心

 mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//描边填充
 canvas.drawArc(rectF3,270,90,false,mPaint);//不用中心

Markdown

填充描边，用中心

mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//描边填充
canvas.drawArc(rectF3,270,90,true,mPaint);//不用中心

Markdown