自定义 view - canvas

canvas 是绘图的基础 API ,我们实现自定义 view ,绘制的部分都只能依靠 canvas 来实现。借用 GcsSloop 魔法师的话来说:

一般来说,比较基础的东西有两大特点:

  • 可操作性强:由于这些是构成上层的基础,所以可操作性必然十分强大。
  • 比较难用:各种方法太过基础,想要完美的将这些操作组合起来有一定难度。

所以对于 canvas 大家也不要有什么负担,我们静下心来,花上一些时间把 canvas 搞明白是非常必要的,也花不了大家多少时间,canvas 是看着难,但是不难懂的部分

自定义 view - canvas_第1张图片
Snip20181020_26.png

上面就是 canvas 的全部 API 操作了,忘了的可以来看哦,本文是科普查阅文,解释不是很详细,更多的请看参考资料

drawColor 绘制颜色


自定义 view - canvas_第2张图片
Snip20180718_3.png
canvas.drawColor(Color.BLUE); //绘制蓝色

在 canvas 画布上绘制颜色就是绘制背景颜色,这个函数不能控制绘制区域,那么就是在整个画布画一个颜色,和背景色有什么区别。而且通过绘制颜色来设置背景色比设置背景图片合适的多,绘制颜色课不会产生 bitmap 位图,内存上开销少太多了

绘制点


自定义 view - canvas_第3张图片
Snip20180718_4.png
// 绘制一个点
canvas.drawPoint(200, 200, mPaint);     
 // 绘制一组点,参数以数组形式传入
canvas.drawPoints(new float[]{         
      200,200,
      200,230,
      200,260,
      200,290
},mPaint);

画点很简单了,一看便知,参数上可以接受一个组数,也可以接受一对数字

绘制线


自定义 view - canvas_第4张图片
Snip20180718_5.png
// 绘制一个点,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);

和画点一样,画线也是很简单的多, 一样可以接受一组或是多组参数,注意点不连续的话,画出来的线也是不连续的

绘制矩形


自定义 view - canvas_第5张图片
Snip20180720_2.png
// 第一种
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(单精度浮点型)的

绘制圆角矩形


自定义 view - canvas_第6张图片
Snip20180720_4.png
// 第一种
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 来描述圆弧,注意这个弧既可以是正圆的圆弧,也可以是椭圆的圆弧

自定义 view - canvas_第7张图片
005Xtdi2jw1f2748fjw2bj308c0dwmx8.jpg

绘制椭圆


自定义 view - canvas_第8张图片
Snip20180720_6.png
// 第一种
RectF rectF = new RectF(100,100,800,400);
canvas.drawOval(rectF,mPaint);

// 第二种
canvas.drawOval(100,100,800,400,mPaint);

有了上面圆角矩形的铺垫,到这里用一个矩形来描述椭圆大家就能理解了把,其实不光是椭圆,弧也可以用矩形来画

自定义 view - canvas_第9张图片
005Xtdi2jw1f274bq1h4rj308c0dwjrl.jpg

绘制弧


自定义 view - canvas_第10张图片
Snip20180722_7.png
自定义 view - canvas_第11张图片
1785445-e7ae80cbc886632f.png
// 第一种
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 度就在上图的位置了

绘制圆


自定义 view - canvas_第12张图片
Snip20180724_9.png
canvas.drawCircle(500,500,400,mPaint);

canvas 学习到这里,画圆就很简单了,3个参数猜也能才出来是啥了,前面2个是圆形中心点坐标,后面是半径

参考资料:


  • Canvas - 绘制图形

你可能感兴趣的:(自定义 view - canvas)