autojs 进度条，autojs画圆润的圆角矩形

小君 2023-01-06 04:26:48 795

autojs 进度条，autojs画圆润的圆角矩形这要从一条直线说起我们今天的主题就是用canvas画圆角矩形要圆润的那种右上角仔细看可以看到直线与圆弧的刚刚连接的部位有一点点不圆润我们今天就处理这个问题 public void draw(Canvas canvas) { final Paint paint = mPaint; final boolean clearColorFilter; if (mTintFilter != null && paint.getColorFilter() == null) { paint.setColorFilter(mTintFilter); clearColorFilter = true; } else { clearColorFilter

牙叔教程简单易懂

问题

以cardView为例

autojs 进度条，autojs画圆润的圆角矩形(1)

我们放大四个角看看

左上角

autojs 进度条，autojs画圆润的圆角矩形(2)

右上角

autojs 进度条，autojs画圆润的圆角矩形(3)

仔细看可以看到直线与圆弧的刚刚连接的部位有一点点不圆润我们今天就处理这个问题

cardView的圆角是怎么弄的

public void draw(Canvas canvas) { final Paint paint = mPaint; final boolean clearColorFilter; if (mTintFilter != null && paint.getColorFilter() == null) { paint.setColorFilter(mTintFilter); clearColorFilter = true; } else { clearColorFilter = false; } canvas.drawRoundRect(mBoundsF mRadius mRadius paint); if (clearColorFilter) { paint.setColorFilter(null); } } ... final RoundRectDrawable background = new RoundrectDrawable(backgroundColor radius); cardView.setCardBackground(background);

使用canvas画的圆角矩形

我们今天的主题就是用canvas画圆角矩形要圆润的那种

为什么圆角不圆润

这要从一条直线说起

首先我们画一条直线

"ui"; importClass(android.graphics.PorterDuff); importClass(android.graphics.Color); /* -------------------------------------------------------------------------- */ ui.layout( <vertical gravity="center_horizontal"> <canvas id="board" w="300dp" h="300dp"></canvas> </vertical> ); let paint = new Paint(); paint.setColor(Color.RED); paint.setStrokeWidth(2); ui.board.on("draw" function (canvas) { canvas.drawColor(Color.TRANSPARENT PorterDuff.Mode.CLEAR); canvas.drawLine(0 0 canvas.getWidth() canvas.getHeight() paint); });

autojs 进度条，autojs画圆润的圆角矩形(4)

这是一条普通的直线

角度不适合这个教程我们把直线画到中间

paint.setStrokeWidth(60); ui.board.on("draw" function (canvas) { canvas.drawColor(Color.TRANSPARENT PorterDuff.Mode.CLEAR); canvas.drawLine(0 canvas.getHeight() / 2 canvas.getWidth() canvas.getHeight() / 2 paint); });

autojs 进度条，autojs画圆润的圆角矩形(5)

这条线的高度是60px

现在直线在中间我在底部画一条同样高度是60px的直线

canvas.drawLine(0 canvas.getHeight() / 2 canvas.getWidth() canvas.getHeight() / 2 paint); canvas.drawLine(0 canvas.getHeight() canvas.getWidth() canvas.getHeight() paint);

autojs 进度条，autojs画圆润的圆角矩形(6)

底部的直线高度还是60 但是我们能看见的只有30 另外一半在画板外面

直线就是这样的下面我们来看看圆角矩形

绘制圆角矩形的方法

函数名称：public void drawRoundRect (RectF rect float rx float ry Paint paint)

参数说明：

rect：RectF对象。

rx：x方向上的圆角半径。

ry：y方向上的圆角半径。

paint：绘制时所使用的画笔。

先构造rect

let rect = new RectF(0 0 board.getWidth() board.getHeight());

再画圆角矩形

canvas.drawRoundRect(rect rx ry paint);

autojs 进度条，autojs画圆润的圆角矩形(7)

可以看到这个圆角矩形也就是这个圆它在上下左右贴近正方形四边的时候笔画变细了

因为有一半漏到画板外面了我们也看不见

我们修改一下画板高度看看圆角矩形的样子

autojs 进度条，autojs画圆润的圆角矩形(8)

从图中可以看到圆角矩形挨着长方形四条边的地方都有半截漏到了画板外面

但是有一部分是没有漏到外面的那就是四个角的四条弧

这就是为什么觉得圆角不圆润的原因

这就是为什么感觉圆弧比直线粗一点的原因所在

解决圆角矩形直线和圆弧粗细不一样的方法

那这个问题怎么解决呢?

我们把四条边的直线往里面推一推压一压都看见不就好啦!

这个主要是修改参数rect 左上右下都往里面压30px

let k = 30; let rect = new RectF(0 k 0 k board.getWidth() - k board.getHeight() - k);

autojs 进度条，autojs画圆润的圆角矩形(9)

和上面的圆角矩形比一下这个效果要好很多

实际效果

我们来给textview添加圆角背景

function setBackground(view offset) { offset = offset || 0; let rect = new RectF(0 offset 0 offset view.getWidth() - offset view.getHeight() - offset); let rx = view.height; let ry = rx; var drawable = new android.graphics.drawable.Drawable({ draw: function (canvas) { canvas.drawRoundRect(rect rx ry paint); } }); view.setBackgroundDrawable(drawable); }

autojs 进度条，autojs画圆润的圆角矩形(10)

看上去没什么区别

我们再用另外一种办法试试: 裁剪画布

function setBackground(view offset) { offset = offset || 0; let rect = new RectF(0 offset 0 offset view.getWidth() - offset view.getHeight() - offset); let rx = view.height; let ry = rx; let path = new Path(); path.addRoundRect(rect rx ry Path.Direction.CW); var drawable = new android.graphics.drawable.Drawable({ draw: function (canvas) { canvas.drawColor(Color.TRANSPARENT PorterDuff.Mode.CLEAR); canvas.clipPath(path); canvas.drawColor(Color.BLUE); } }); view.setBackgroundDrawable(drawable); }

autojs 进度条，autojs画圆润的圆角矩形(11)