AndroidCanvas画布解析

见贤思齐

1.简介 在开发中，我们经常需要自定义View去实现各种各样的效果，在这个过程中经常需要用到Canvas画布去绘制各种各样的图形和图案，因此，熟练地掌握Canvas的各种使用方法，就显得尤为重要。本文将简要介绍Canvas的各种用法，加深大家的理解。2.绘制各种图形 Canvas提供了很多绘制方法，基于这些方法，我们可以绘制出各种各样的图形，下面我们就开始介绍这些绘制方法。2.1 drawARGB此方法可以用ARGB颜色绘制一个颜色背景，方法如下：//a：颜色的alpha部分，取值0--255//r：颜色的red部分，取值0--255//g：颜色的green部分，取值0--255//b：颜色的blue部分，取值0--255publicvoiddrawARGB(inta,intr,intg,intb)现在使用此方法绘制一个纯色背景，示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);canvas.drawARGB(255,150,100,100);}2.2 drawArc先介绍其中的一个方法，方法如下：//left：左边到父布局左边的距离//top：顶边到父布局顶边的距离//right：右边到父布局左边的距离//bottom：底边到父布局顶边的距离//startAngle：弧开始的角度//sweepAngle：顺时针方向扫描的角度//useCenter：是否使用中心//paint：绘制弧的画笔，这个值不能为nullpublicvoiddrawArc(floatleft,floattop,floatright,floatbottom,floatstartAngle,floatsweepAngle,booleanuseCenter,@NonNullPaintpaint)此方法用来绘制弧形，如果起始角度是负值或大于等于360，起始角度取360的模。如果扫描角度大于等于360，椭圆形将会被完全地绘制，如果扫描角度是负值，扫描角度取360的模。弧的绘制是顺时针方向，0度对应着钟表的3点钟方向。useCenter为true时的示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);canvas.drawArc(50,50,300,300,0,300,true,paint);}useCenter为false时的示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);canvas.drawArc(50,50,300,300,0,300,false,paint);}drawArc的另一个重载方法如下：//oval：用来定义弧形的形状和大小的椭圆的边界，这个值不能为null//startAngle：弧开始的角度//sweepAngle：顺时针方向扫描的角度//useCenter：是否使用中心//paint：绘制弧的画笔，这个值不能为nullpublicvoiddrawArc(@NonNullRectFoval,floatstartAngle,floatsweepAngle,booleanuseCenter,@NonNullPaintpaint)此方法useCenter为true时的示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);RectFrectF=newRectF(50,50,300,300);canvas.drawArc(rectF,0,200,true,paint);}此方法useCenter为false时的示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);RectFrectF=newRectF(50,50,300,300);canvas.drawArc(rectF,0,200,false,paint);}2.3 drawBitmap这个方法是用来绘制位图的，这个方法有很多重载，先看其中的一个方法：//bitmap：要绘制的位图//matrix：用来变换位图的矩阵//paint：绘制位图的画笔，可能为nullpublicvoiddrawBitmap(@NonNullBitmapbitmap,@NonNullMatrixmatrix,@NullablePaintpaint)此方法绘制位图的示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);Bitmapbitmap=BitmapFactory.decodeResource(getResources(),R.mipmap.test);Matrixmatrix=newMatrix();canvas.drawBitmap(bitmap,matrix,paint);}看一个drawBitmap的重载方法如下：//bitmap：要绘制的位图//src：要绘制的位图的子集，即绘制的是全部或者部分位图，可能为null//dst：位图将要通过缩放和转换去适应的矩形//paint：绘制位图的画笔，可能为nullpublicvoiddrawBitmap(@NonNullBitmapbitmap,@NullableRectsrc,@NonNullRectdst,@NullablePaintpaint)此方法用来绘制位图，通过自动缩放和转换去适应目标矩形，示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);Bitmapbitmap=BitmapFactory.decodeResource(getResources(),R.mipmap.test);RectsrcRect=newRect(0,0,300,300);RectdstRect=newRect(0,0,600,600);canvas.drawBitmap(bitmap,srcRect,dstRect,paint);}再来看另外一个重载方法如下：//bitmap：要绘制的位图//src：要绘制的位图的子集，即绘制的是全部或者部分位图，可能为null//dst：位图将要通过缩放和转换去适应的矩形//paint：绘制位图的画笔，可能为nullpublicvoiddrawBitmap(@NonNullBitmapbitmap,@NullableRectsrc,@NonNullRectFdst,@NullablePaintpaint)此方法也是用来绘制通过自动缩放和转换去适应目标矩形的位图，示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);Bitmapbitmap=BitmapFactory.decodeResource(getResources(),R.mipmap.test);RectsrcRect=newRect(0,0,300,300);RectFdstRectF=newRectF(0,0,600,600);canvas.drawBitmap(bitmap,srcRect,dstRectF,paint);}再来看绘制位图的一个方法如下：//bitmap：要绘制的位图//left：位图左边的位置//top：位图顶边的位置//paint：绘制位图的画笔，可能为nullpublicvoiddrawBitmap(@NonNullBitmapbitmap,floatleft,floattop,@NullablePaintpaint)这个方法绘制左上角在(x,y)的位图，如果位图和画布拥有不同的密度，将会自动缩放位图，以和画布相同的密度绘制，示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);Bitmapbitmap=BitmapFactory.decodeResource(getResources(),R.mipmap.test);canvas.drawBitmap(bitmap,50,100,paint);}2.4 drawCircle此方法使用画笔paint绘制圆，如果半径小于等于0将不会绘制任何东西，基于画笔的样式，圆将会被填充或者绘制的是轮廓，方法如下：//cx：圆心的x坐标//cy：圆心的y坐标//radius：圆的半径//paint：绘制圆的画笔publicvoiddrawCircle(floatcx,floatcy,floatradius,@NonNullPaintpaint)此方法的示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);canvas.drawCircle(200,200,150,paint);}2.5 drawColor此方法使用颜色填充整个画布canvas的位图，方法如下：//color：绘制在画布上的颜色publicvoiddrawColor(@ColorIntintcolor)示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);canvas.drawColor(Color.GREEN);}再来看一个重载方法如下：//color：绘制在画布上的颜色//mode：应用到颜色上的porter-duff模式publicvoiddrawColor(@ColorIntintcolor,@NonNullPorterDuff.Modemode)此方法使用颜色和porter-duff模式填充整个画布canvas的位图，示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);canvas.drawColor(Color.GREEN,PorterDuff.Mode.DARKEN);}2.6 drawLine此方法使用画笔paint和开始及终止的x,y坐标绘制线段，由于线总是轮廓式的，画笔paint的样式将会被忽略，方法如下：//startX：线段起始点的x坐标//startY：线段起始点的y坐标//stopX：线段结束点的x坐标//stopY：线段结束点的y坐标//paint：绘制线段的画笔publicvoiddrawLine(floatstartX,floatstartY,floatstopX,floatstopY,@NonNullPaintpaint)示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);canvas.drawLine(50,50,300,300,paint);}2.7 drawLines此方法绘制一系列线段，每条线需要pts数组中4个连续的值。因此，绘制一条线，数组必须至少包括4个值。逻辑上和绘制下面的数组一样，先使用pts[0]、pts[1]、pts[2]、pts[3]绘制线，接着使用[4]、pts[5]、pts[6]、pts[7]绘制线，以此类推。方法如下：//pts：要绘制的点的数组，如[x0,y0,x1,y1,x2,y2...]//offset：绘制前在数组中要跳过的值的个数//count：在跳过偏移量后，要处理的数组中值的个数//paint：绘制的画笔publicvoiddrawLines(@Size(multiple=4)@NonNullfloat[]pts,intoffset,intcount,@NonNullPaintpaint)此方法的示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);float[]pts={50,10,100,200,300,200,200,400};canvas.drawLines(pts,0,8,paint);}再来看另一个重载方法如下：//pts：要绘制的点的数组，如[x0,y0,x1,y1,x2,y2...]//paint：绘制的画笔publicvoiddrawLines(@Size(multiple=4)@NonNullfloat[]pts,@NonNullPaintpaint)示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);float[]pts={50,10,100,200,300,200,200,400};canvas.drawLines(pts,paint);}2.8 drawOval此方法使用画笔paint绘制椭圆，椭圆被填充或是轮廓由画笔paint的样式决定，方法如下：//left：左边到父布局左边的距离//top：顶边到父布局顶边的距离//right：右边到父布局左边的距离//bottom：底边到父布局顶边的距离//paint：绘制的画笔publicvoiddrawOval(floatleft,floattop,floatright,floatbottom,@NonNullPaintpaint)示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);canvas.drawOval(50,50,600,300,paint);}再来看一个重载方法：//oval：椭圆的矩形边界，这个值不能为null//paint：绘制的画笔,不能为nullpublicvoiddrawOval(@NonNullRectFoval,@NonNullPaintpaint)示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);RectFrectF=newRectF(50,50,600,300);canvas.drawOval(rectF,paint);}2.9 drawPaint此方法使用画笔paint填充整个画布的位图，方法如下：//paint：在画布上绘制的画笔publicvoiddrawPaint(@NonNullPaintpaint)2.10 drawPath此方法使用画笔paint绘制路径，路径被填充或是轮廓由画笔paint的样式决定，方法如下：//path：被绘制的路径//paint：绘制路径的画笔publicvoiddrawPath(@NonNullPathpath,@NonNullPaintpaint)示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas)athpath=newPath();path.moveTo(50,50);path.lineTo(200,100);path.lineTo(200,400);path.lineTo(150,500);canvas.drawPath(path,paint);}2.11 drawPoint此方法用来绘制一个点，方法如下：//x：点的x坐标//y：点的y坐标//paint：绘制点的画笔publicvoiddrawPoint(floatx,floaty,@NonNullPaintpaint)示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);canvas.drawPoint(100,100,paint);}2.12 drawPoints此方法绘制一系列点，每个点位于被pts[]确定的坐标的中心，点的直径由画笔的笔画宽度确定，点的形状由画笔的Cap类型确定，点的形状是正方形的，除非当Cap类型是Round的时候，点的形状是圆形的，方法如下：//pts：要绘制的点的数组[x0,y0,x1,y1,x2,y2...]//offset：绘制前跳过的值的个数//count：跳过偏移量之后要处理的值的个数//paint：绘制点的画笔publicvoiddrawPoints(@Size(multiple=2)float[]pts,intoffset,intcount,@NonNullPaintpaint)示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);float[]pts={50,50,100,200,300,200,200,400};canvas.drawPoints(pts,0,8,paint);}再来看另外一个重载方法如下：//pts：要绘制的点的数组[x0,y0,x1,y1,x2,y2...]//paint：绘制点的画笔publicvoiddrawPoints(@Size(multiple=2)@NonNullfloat[]pts,@NonNullPaintpaint)示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);float[]pts={50,50,100,200,300,200,200,400};canvas.drawPoints(pts,paint);}2.13 drawRGB此方法使用RGB颜色填充整个画布的位图，方法如下：//r：颜色的red部分，取值0--255//g：颜色的green部分，取值0--255//b：颜色的blue部分，取值0--255publicvoiddrawRGB(intr,intg,intb)示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);canvas.drawRGB(200,100,100);}2.14 drawRect此方法使用画笔绘制矩形，矩形被填充或者显示轮廓由画笔的样式确定，方法如下：//left：矩形的左边//top：矩形的顶边//right：矩形的右边//bottom：矩形的底边//paint：绘制矩形的画笔publicvoiddrawRect(floatleft,floattop,floatright,floatbottom,@NonNullPaintpaint)示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);canvas.drawRect(50,100,500,300,paint);}看一个重载方法如下：//r：要绘制的矩形//paint：绘制矩形的画笔publicvoiddrawRect(@NonNullRectr,@NonNullPaintpaint)示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);Rectrect=newRect(50,100,500,300);canvas.drawRect(rect,paint);}再来看另外一个重载方法如下：//rect：要绘制的矩形//paint：绘制矩形的画笔publicvoiddrawRect(@NonNullRectFrect,@NonNullPaintpaint)此方法的示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);RectFrectF=newRectF(50,100,500,300);canvas.drawRect(rectF,paint);}2.15 drawRoundRect此方法使用画笔绘制圆角矩形，矩形被填充或者显示轮廓由画笔的样式确定，方法如下：//rect：圆角矩形的矩形边界//rx：圆角的x半径//ry：圆角的y半径//paint：绘制圆角矩形的画笔publicvoiddrawRoundRect(@NonNullRectFrect,floatrx,floatry,@NonNullPaintpaint)示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);RectFrectF=newRectF(50,100,500,300);canvas.drawRoundRect(rectF,20,20,paint);}2.16 drawText此方法用来绘制文本，原点在（x,y），原点和画笔paint中的对齐设置有关，方法如下：//text：被绘制的文本//x：文本的原点的x坐标//y：文本基线的y坐标//paint：绘制文本的画笔，可以进行颜色、大小、样式等设置publicvoiddrawText(@NonNullStringtext,floatx,floaty,@NonNullPaintpaint)示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);Stringtext="AndroidCanvas";canvas.drawText(text,200,300,paint);}再看一个重载方法如下：//text：被绘制的文本//start：要绘制的文本中第一个字符的索引//end：（end-1）是要绘制的文本中最后一个字符的索引//x：文本的原点的x坐标//y：文本基线的y坐标//paint：绘制文本的画笔，可以进行颜色、大小、样式等设置publicvoiddrawText(@NonNullStringtext,intstart,intend,floatx,floaty,@NonNullPaintpaint)示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);Stringtext="AndroidCanvas";canvas.drawText(text,3,11,200,300,paint);}2.17 drawTextOnPath此方法使用画笔paint沿着路径绘制文本，画笔的对齐方式决定从何处沿着路径开始文本的绘制，方法如下：//text：被绘制的文本//path：文本应该遵循的路径//hOffset：沿着路径文本开始位置偏移的距离//hOffset：文本在路径之上或之下的偏移的距离，可以为正值或负值//paint：绘制文本的画笔，可以进行颜色、大小、样式等设置publicvoiddrawTextOnPath(@NonNullStringtext,@NonNullPathpath,floathOffset,floatvOffset,@NonNullPaintpaint)示例如下：@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);Stringtext="AndroidCanvas"athpath=newPath();path.moveTo(50,50);path.lineTo(200,100);path.lineTo(400,400);canvas.drawTextOnPath(text,path,0,0,paint);}3.总结 在自定义View的时候，将会经常用到Canvas，因此熟练地掌握和运用这些绘制方法就显得比较重要。使用Canvas可以绘制点、线、矩形、圆、椭圆、文本、路径、位图等各种各样的图形图案，本文详细地介绍了Canvas的各种方法，并给出了示例代码，灵活运用这些方法进行组合，就能绘制出各种各样的图案和效果。