Canvas中drawRoundRect()方法介绍

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

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

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

基本语法

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

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

参数说明

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

圆心位置

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

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

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

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)
}    

image

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

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

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)
}  

image

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

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)
}  

image

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

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