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

image-20181028145550787

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

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

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

image-20181028150752952

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

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

image-20181028151044078

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

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

公众号:亦袁非猿

欢迎关注,交流学习