canvas 是绘图的基础 API ,我们实现自定义 view ,绘制的部分都只能依靠 canvas 来实现。借用 GcsSloop 魔法师的话来说:
一般来说,比较基础的东西有两大特点:
- 可操作性强:由于这些是构成上层的基础,所以可操作性必然十分强大。
- 比较难用:各种方法太过基础,想要完美的将这些操作组合起来有一定难度。
所以对于 canvas 大家也不要有什么负担,我们静下心来,花上一些时间把 canvas 搞明白是非常必要的,也花不了大家多少时间,canvas 是看着难,但是不难懂的部分
上面就是 canvas 的全部 API 操作了,忘了的可以来看哦,本文是科普查阅文,解释不是很详细,更多的请看参考资料
drawColor 绘制颜色
canvas.drawColor(Color.BLUE); //绘制蓝色
在 canvas 画布上绘制颜色就是绘制背景颜色,这个函数不能控制绘制区域,那么就是在整个画布画一个颜色,和背景色有什么区别。而且通过绘制颜色来设置背景色比设置背景图片合适的多,绘制颜色课不会产生 bitmap 位图,内存上开销少太多了
绘制点
// 绘制一个点
canvas.drawPoint(200, 200, mPaint);
// 绘制一组点,参数以数组形式传入
canvas.drawPoints(new float[]{
200,200,
200,230,
200,260,
200,290
},mPaint);
画点很简单了,一看便知,参数上可以接受一个组数,也可以接受一对数字
绘制线
// 绘制一个点,4个数字,2个点确定一条线
canvas.drawLine(300,300,500,600,mPaint);
// 绘制一组点,参数以数组形式传入
canvas.drawLines(new float[]{
200,200,260,200,
200,230,260,230,
400,230,800,530
},mPaint);
和画点一样,画线也是很简单的多, 一样可以接受一组或是多组参数,注意点不连续的话,画出来的线也是不连续的
绘制矩形
// 第一种
canvas.drawRect(100,100,800,400,mPaint);
// 第二种
Rect rect = new Rect(100,100,800,400);
canvas.drawRect(rect,mPaint);
// 第三种
RectF rectF = new RectF(100,100,800,400);
canvas.drawRect(rectF,mPaint);
2个点能确定一条线,那么对角线的2个点就能确定一个矩形。具体的 api 3种,区别就是传参形式比一样,本质的都是对角线2个点的 x,y 坐标
Rect 和 RectF 有什么区别吗?
- 区别就是精度不同,Rect是int(整形)的,而RectF是float(单精度浮点型)的
绘制圆角矩形
// 第一种
RectF rectF = new RectF(100,100,800,400);
canvas.drawRoundRect(rectF,30,30,mPaint);
// 第二种 API21
canvas.drawRoundRect(100,100,800,400,30,30,mPaint);
第二种方法在API21的时候才添加上,所以我们一般使用的都是第一种
圆角矩形比单纯的矩形多了2个参数,rx、ry 描述了一个矩形的长和宽,圆角说白了就是一个弧线,我们可以用一个矩形来画一个弧,所以这里用 rx、ry 来描述圆弧,注意这个弧既可以是正圆的圆弧,也可以是椭圆的圆弧
绘制椭圆
// 第一种
RectF rectF = new RectF(100,100,800,400);
canvas.drawOval(rectF,mPaint);
// 第二种
canvas.drawOval(100,100,800,400,mPaint);
有了上面圆角矩形的铺垫,到这里用一个矩形来描述椭圆大家就能理解了把,其实不光是椭圆,弧也可以用矩形来画
绘制弧
// 第一种
public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint){}
// 第二种
public void drawArc(float left, float top, float right, float bottom, float startAngle,
float sweepAngle, boolean useCenter, @NonNull Paint paint) {}
最后面的三个参数决定了弧的样式:
- startAngle 开始角度
- sweepAngle 结束角度
- useCenter 是否使用中心
startAngle 和 sweepAngel 通过字面意思我们就知道是干什么的了,就是弧的起始位置和结束位置, 不过这个中心点是干什么的,大家看下面的对比就知道了
RectF rectF = new RectF(100,100,800,400);
// 绘制背景矩形
mPaint.setColor(Color.GRAY);
canvas.drawRect(rectF,mPaint);
// 绘制圆弧
mPaint.setColor(Color.BLUE);
canvas.drawArc(rectF,0,90,false,mPaint);
//-------------------------------------
RectF rectF2 = new RectF(100,600,800,900);
// 绘制背景矩形
mPaint.setColor(Color.GRAY);
canvas.drawRect(rectF2,mPaint);
// 绘制圆弧
mPaint.setColor(Color.BLUE);
canvas.drawArc(rectF2,0,90,true,mPaint);
看图就理解了,没什么复杂的,至于0度在哪的问题,这里画弧,自然坐标原点在矩形的中心,角度的增加是顺时针的,所以 0-90 度就在上图的位置了
绘制圆
canvas.drawCircle(500,500,400,mPaint);
canvas 学习到这里,画圆就很简单了,3个参数猜也能才出来是啥了,前面2个是圆形中心点坐标,后面是半径
参考资料:
- Canvas - 绘制图形