Android 圆角边框RoundRect原理

绘制圆角矩形的方法

 /**
     * Draw the specified round-rect using the specified paint. The roundrect will be filled or
     * framed based on the Style in the paint.
     *
     * @param rect The rectangular bounds of the roundRect to be drawn
     * @param rx The x-radius of the oval used to round the corners
     * @param ry The y-radius of the oval used to round the corners
     * @param paint The paint used to draw the roundRect
     */
    public void drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint) {
        super.drawRoundRect(rect, rx, ry, paint);
    }

该方法来自Canvas类，rect代表矩形，rx和ry分别代表形成圆角所需要的椭圆的x和y轴半径，那么rx和ry究竟如何形成圆角呢？

形成圆角的原理
矩形的四个圆角是分别生成的，以左上角的圆角为例：

首先通过rect绘制出矩形，然后以矩形的左上角定点为起点，分别向x和y轴平移rx和ry, 得到的点为中心，以rx和ry为x和y轴的半径绘制椭圆，椭圆的坐上半部分圆弧就是圆角了。如下图所示，图中第一个图形是根据圆角的原理用矩形和椭圆绘制的，第二个图形就是roundRect.
————————————————
版权声明：本文为CSDN博主「LeoHoFly」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Jaden_hool/article/details/80757072

Canvas中drawRoundRect()方法介绍

画布Canvas的一个方法，绘制圆角矩形

逛CSDN的时候，无意看到之前关注的一个博主，出了一本书《Android自定义控件》，以前学自定义控件的时候，就是看他的文章的，这次出书了，再加上当当做活动，就买了一本，支持一下感谢他之前写的文章。

周末翻了一下，看到Canvas章节的时候，不太好理解drawRoundRect()，绘制圆角矩阵的方法，码一下代码实践出真知。为了更明显看到坐标位置，用Sketch绘制一下，果然比自带的画图工具好用（逃）

基本语法

1	public void drawRoundRect(RectF rect, float rx, float ry, Paint paint)

功能：该方法用于在画布上绘制圆角矩形，通过指定RectF对象以及圆角半径来实现。

参数说明

float rx：生成圆角的椭圆的X轴半径
float ry：生成圆角的椭圆的Y轴半径

圆心位置

这个方法中，只需要设置圆角的X轴半径和Y轴半径，那圆心呢？

经过测试，发现圆心是动态变化的，看接下来代码的分析

圆角半径小于矩形宽的一半

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

override fun onDraw(canvas: Canvas) { super.onDraw(canvas) mPaint.color = Color.GRAY mPaint.style = Paint.Style.STROKE mPaint.strokeWidth = 5f // 绘制一个矩形作为背景，可以进行观察 val rect = RectF(0f, 0f, 800f, 600f) canvas.drawRect(rect, mPaint) // 绘制圆角，半径小于矩形宽的一半 mPaint.color = Color.BLACK // 发现，绘制后，圆角弧度与 canvas.drawRoundRect(rect, 200f, 200f, mPaint) canvas.drawCircle(200f, 200f, 200f, mPaint) }

从图片的圆角矩阵与圆重叠的部分，就可以看到弧度是怎样绘制出来的

圆角半径等于矩形宽的一半

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

override fun onDraw(canvas: Canvas) { super.onDraw(canvas) mPaint.color = Color.GRAY mPaint.style = Paint.Style.STROKE mPaint.strokeWidth = 5f // 绘制一个矩形作为背景，可以进行观察 val rect = RectF(0f, 0f, 800f, 600f) canvas.drawRect(rect, mPaint) // 绘制圆角，半径小于矩形宽的一半 mPaint.color = Color.RED // 发现，绘制后，圆角弧度与 canvas.drawRoundRect(rect, 300f, 300f, mPaint) canvas.drawCircle(300f, 300f, 300f, mPaint) }

圆角半径大于矩形宽的一半

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

override fun onDraw(canvas: Canvas) { super.onDraw(canvas) mPaint.color = Color.GRAY mPaint.style = Paint.Style.STROKE mPaint.strokeWidth = 5f // 绘制一个矩形作为背景，可以进行观察 val rect = RectF(0f, 0f, 800f, 600f) canvas.drawRect(rect, mPaint) // 绘制圆角，半径小于矩形宽的一半 mPaint.color = Color.BLUE canvas.drawRoundRect(rect, 500f, 500f, mPaint) // 弧度与半径300的圆重叠了 canvas.drawCircle(300f, 300f, 300f, mPaint) }

出乎意料，居然保持与等于矩形宽的一半一致，看来，超过的话，就保持一致了

文章没啥技术含量，纯属一个验证，既然画图了，就整理一下发表出来，说不定其他人也有这样的疑惑！