本文是學(xué)習(xí)公眾號(hào) hencoder 中的自定義View部分的學(xué)習(xí)筆記。

1-1 onDraw()和Paint詳解

具體參考http://hencoder.com/ui-1-1/ 寫的非常詳細(xì)

練習(xí)：畫弧形，扇形，心形，直方圖，餅圖

1-1-1.弧形 扇形 使用 canvas.drawArc()

drawArc() 是使用一個(gè)橢圓來(lái)描述弧形的。left, top, right, bottom 描述的是這個(gè)弧形所在的橢圓；startAngle 是弧形的起始角度（x 軸的正向，即正右的方向，是 0 度的位置；順時(shí)針為正角度，逆時(shí)針為負(fù)角度），sweepAngle 是弧形劃過(guò)的角度；useCenter 表示是否連接到圓心，如果不連接到圓心，就是弧形，如果連接到圓心，就是扇形。

Paint paint = new Paint();paint.setStyle(Paint.Style.FILL); // 填充模式 // canvas.drawOval(200, 100, 800, 500,paint);canvas.drawArc(200, 100, 800, 500, -110, 100, true, paint); // 繪制扇形canvas.drawArc(200, 100, 800, 500, 20, 140, false, paint); // 繪制弧形paint.setStyle(Paint.Style.STROKE); // 畫線模式canvas.drawArc(200, 100, 800, 500, 180, 60, false, paint); // 繪制不封口的弧形

1-1-2 心形

使用drawPath(Path path, Paint paint)
Path類中的各種方法Hencoder已經(jīng)寫的非常清楚

Paint paint = new Paint();paint.setAntiAlias(true);paint.setColor(Color.RED);paint.setStrokeWidth(10);paint.setStyle(Paint.Style.STROKE);Path path = new Path();//畫圓弧，圓弧的最左側(cè)距離y軸距離200 最上距離x軸距離200，//最下距離x軸400 最右距離y軸400// 開始弧度-225 弧形掃過(guò)的角度225path.addArc(200, 200, 400, 400, -225, 225);//畫圓弧，圓弧的最左側(cè)距離y軸距離400 最上距離x軸距離200，//最下距離x軸400 最右距離y軸600 //開始弧度-180 弧形掃過(guò)的角度225 保留移動(dòng)痕跡path.arcTo(400, 200, 600, 400, -180, 225, false);path.lineTo(400, 542);//從當(dāng)前位置畫線到（400,542）path.close();//閉合圖形canvas.drawPath(path,paint); 圖片.png

該圖是對(duì)這句代碼的解釋，剩下的幾句代碼的解釋注釋中都已寫的很清楚。

//畫圓弧，圓弧的最左側(cè)距離y軸距離200 最上距離x軸距離200，// 最下距離x軸400 最右距離y軸400 開始弧度-225 弧形掃過(guò)的角度225path.addArc(200, 200, 400, 400, -225, 225);

1-1-3 畫直方圖

確定好坐標(biāo)后，畫坐標(biāo)系，文字，矩形，如下圖所示

圖片.png Paint paint = new Paint();//繪制坐標(biāo)系paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(2);paint.setColor(Color.WHITE);Path path = new Path();path.moveTo(150,100);//移動(dòng)起點(diǎn)到(150,100)path.lineTo(150,500);//從(150,100)開始畫線，畫到(150,150)處path.lineTo(900,500);canvas.drawPath(path,paint);//繪制文字paint.setTextSize(22);paint.setStyle(Paint.Style.FILL);paint.setStrokeWidth(1);canvas.drawText("Froyo",200,520,paint);canvas.drawText("GB",315,520,paint);canvas.drawText("ICS",415,520,paint);canvas.drawText("JB",515,520,paint);canvas.drawText("KitKat",605,520,paint);canvas.drawText("L",725,520,paint);canvas.drawText("M",825,520,paint);//繪制長(zhǎng)方形paint.setColor(getResources().getColor(R.color.green_light));paint.setStyle(Paint.Style.FILL);canvas.drawRect(190,495,270,500,paint);canvas.drawRect(290,485,370,500,paint);canvas.drawRect(390,485,470,500,paint);canvas.drawRect(490,350,570,500,paint);canvas.drawRect(590,250,670,500,paint);canvas.drawRect(690,180,770,500,paint);canvas.drawRect(790,370,870,500,paint);

1-1-4 繪制餅圖

1.繪制扇形
分析如下圖所示

餅圖分析.png

此處使用的是canvas的drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 其中各參數(shù)的作用：left, top, right, bottom 描述的是這個(gè)弧形所在的橢圓；startAngle 是弧形的起始角度（x 軸的正向，即正右的方向，是 0 度的位置；順時(shí)針為正角度，逆時(shí)針為負(fù)角度），sweepAngle 是弧形劃過(guò)的角度；useCenter 表示是否連接到圓心，如果不連接到圓心，就是弧形，如果連接到圓心，就是扇形。

注意要計(jì)算好角度Paint paint = new Paint();Path path = new Path();//紅色區(qū)域paint.setColor(getResources().getColor(R.color.red_light));canvas.drawArc(200,150,558,500,-180,125,true,paint);//圓心（385,325） 直徑350//黃色區(qū)域paint.setColor(getResources().getColor(R.color.yellow_light));//left, top, right, bottom 描述的是這個(gè)弧形所在的橢圓；startAngle 是弧形的起始角度//sweepAngle 是弧形劃過(guò)的角度；useCenter 表示是否連接到圓心canvas.drawArc(210,157,568,507,-55,55,true,paint);//紫色區(qū)域paint.setColor(getResources().getColor(R.color.purple_light));canvas.drawArc(210,157,568,507,3,8,true,paint);//灰色區(qū)域paint.setColor(getResources().getColor(R.color.grey_light));canvas.drawArc(210,157,568,507,13,7,true,paint);//青色區(qū)域paint.setColor(getResources().getColor(R.color.cyan_light));canvas.drawArc(210,157,568,507,22,55,true,paint);//藍(lán)色區(qū)域paint.setColor(getResources().getColor(R.color.blue_light));canvas.drawArc(210,157,568,507,79,98,true,paint);

2.繪制白色的指示線
白色指示線的終點(diǎn)在每個(gè)弧形中點(diǎn)的位置，計(jì)算出每個(gè)白線中點(diǎn)。

//畫線paint.setColor(Color.WHITE);paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(1);path.moveTo(170,180);path.lineTo(240,180);path.lineTo(250,200);canvas.drawPath(path,paint);//第二條線 （385,325）圓心path.moveTo(680,250);path.lineTo(580,250);path.lineTo(550,270);canvas.drawPath(path,paint);//第三條線path.moveTo(680,370);path.lineTo(640,370);path.lineTo(620,350);path.lineTo(565,350);canvas.drawPath(path,paint);//第四條線path.moveTo(680,400);path.lineTo(640,400);path.lineTo(620,380);path.lineTo(563,380);canvas.drawPath(path,paint);//第五條線path.moveTo(600,470);path.lineTo(550,470);path.lineTo(520,450);canvas.drawPath(path,paint);//第六條線path.moveTo(170,470);path.lineTo(240,470);path.lineTo(250,450);canvas.drawPath(path,paint);//繪制文字paint.setStyle(Paint.Style.FILL);paint.setTextSize(20);canvas.drawText("Lollipop",90,185,paint);canvas.drawText("Marshmallow",690,255,paint);canvas.drawText("Gingerbread",690,375,paint);canvas.drawText("Ice Cream Sandwich",690,405,paint);canvas.drawText("Jelly Bean",610,475,paint);canvas.drawText("KitKat",100,475,paint);

1-2 Paint 詳解

具體參考：http://hencoder.com/ui-1-2/ 寫的十分詳細(xì)

1-3 drawText() 文字的繪制

具體參考：http://hencoder.com/ui-1-3/ 也是寫的十分詳細(xì)

1-4 Canvas 對(duì)繪制的輔助 clipXXX() 和 Matrix

具體參考： http://hencoder.com/ui-1-4/ 知識(shí)點(diǎn)寫的十分詳細(xì)

1-4-1 clipXXX()方法 裁切方法

1） clipRect() 在矩形范圍內(nèi)裁切

//加上save和restore 恢復(fù)到裁切之前的狀態(tài) 不然后面都會(huì)裁切掉canvas.save();canvas.clipRect(left,top, left+300,top+200);canvas.drawBitmap(bitmap, left, top, paint);canvas.restore();

clipPath() 根據(jù)Path形狀裁切

// 第一種： 1.畫出path 圓path1.addCircle(point1.x + 200,point1.y + 200,150, Path.Direction.CW);//2.根據(jù)path裁切canvas.save();canvas.clipPath(path1);canvas.drawBitmap(bitmap, point1.x, point1.y, paint);canvas.restore();//第二種：/*** FillType 有四個(gè)值：* 1.EVEN_ODD： Specifies that "inside" is computed by an odd number of edge crossings.* 2.INVERSE_EVEN_ODD：Same as EVEN_ODD, but draws outside of the path, rather than inside.* 3.WINDING：Specifies that "inside" is computed by a non-zero sum of signed edge crossings.* 4.INVERSE_WINDING：Same as WINDING, but draws outside of the path, rather than inside.*/path2.setFillType(Path.FillType.INVERSE_WINDING);path2.addCircle(point2.x+ 200,point2.y + 200,150, Path.Direction.CCW);canvas.save();canvas.clipPath(path2);canvas.drawBitmap(bitmap, point2.x, point2.y, paint);canvas.restore();

上面Path的FillType，詳細(xì)解釋可見：
http://android.jobbole.com/83427/

1-4-2 幾何變換

幾何變換的使用大概分為三類：
1. 使用 Canvas 來(lái)做常見的二維變換；
2.使用 Matrix 來(lái)做常見和不常見的二維變換；
3.使用 Camera 來(lái)做三維變換。

1） 使用 Canvas 來(lái)做常見的二維變換：
注意：1.canvas的幾何變換可以疊加使用，但是疊加時(shí)，要倒著寫，需要先實(shí)現(xiàn)的效果寫在后面
2.在做幾何變換之前，需要使用save保存狀態(tài)，做之后使用restore恢復(fù)狀態(tài)
1.1 Canvas.translate(float dx, float dy) 平移

canvas.save();//向右移動(dòng)200canvas.translate(200,0);canvas.drawBitmap(bitmap, point1.x, point1.y, paint);canvas.restore();canvas.save();//向左移動(dòng)100canvas.translate(-100,0);canvas.drawBitmap(bitmap, point2.x, point2.y, paint);canvas.restore();

1.2 旋轉(zhuǎn)Canvas.rotate(float degrees, float px, float py)

canvas.save();//如果想要兩個(gè)效果疊加使用 需要倒著寫，比如說(shuō)想要先旋轉(zhuǎn)再移動(dòng) 需要把移動(dòng)寫在旋轉(zhuǎn)之前canvas.rotate(45,point1.x + bitmapWidth/2,point1.y+ bitmapHeight/2);canvas.translate(200,100);//先移動(dòng) 再繪制 先旋轉(zhuǎn) 再繪制canvas.drawBitmap(bitmap, point1.x, point1.y, paint);canvas.restore();

1.3 縮放 Canvas.scale(float sx, float sy, float px, float py)

canvas.save();//參數(shù)里的 sx sy 是橫向和縱向的放縮倍數(shù)； px py 是放縮的軸心。canvas.scale(1.3f,1.3f,point1.x + bitmapWidth/2 ,point1.y + bitmapHeight/2);canvas.drawBitmap(bitmap, point1.x, point1.y, paint);canvas.restore();

1.4 skew(float sx, float sy) 錯(cuò)切

//參數(shù)里的 sx 和 sy 是 x 方向和 y 方向的錯(cuò)切系數(shù)。canvas.save();canvas.skew(0, 0.5f);canvas.drawBitmap(bitmap, point1.x, point1.y, paint);canvas.restore();

使用 Matrix 來(lái)做變換
2.1 使用 Matrix 來(lái)做常見變換
Matrix 做常見變換的方式:
1.創(chuàng)建 Matrix 對(duì)象；
2.調(diào)用 Matrix 的 pre/postTranslate/Rotate/Scale/Skew() 方法來(lái)設(shè)置幾何變換，Matrix做幾何變換時(shí)，可以自己設(shè)定順序，pre是插入在某個(gè)效果之前，post是在某個(gè)效果之后。；
3.使用 Canvas.setMatrix(matrix) 或 Canvas.concat(matrix) 來(lái)把幾何變換應(yīng)用到 Canvas。

1）平移

canvas.save();matrix.reset();matrix.postTranslate(-100, -100);canvas.concat(matrix);canvas.drawBitmap(bitmap, point1.x, point1.y, paint);canvas.restore();canvas.save();matrix.reset();matrix.postTranslate(200, 0);canvas.concat(matrix);canvas.drawBitmap(bitmap, point2.x, point2.y, paint);canvas.restore();

縮放

把 Matrix 應(yīng)用到 Canvas 有兩個(gè)方法： Canvas.setMatrix(matrix) 和 Canvas.concat(matrix)。
1.Canvas.setMatrix(matrix)：用 Matrix 直接替換 Canvas 當(dāng)前的變換矩陣，即拋棄 Canvas 當(dāng)前的變換，改用 Matrix 的變換（注：根據(jù)下面評(píng)論里以及我在微信公眾號(hào)中收到的反饋，不同的系統(tǒng)中 setMatrix(matrix) 的行為可能不一致，所以還是盡量用 concat(matrix) 吧）；
2.Canvas.concat(matrix)：用 Canvas 當(dāng)前的變換矩陣和 Matrix 相乘，即基于 Canvas 當(dāng)前的變換，疊加上 Matrix 中的變換。

總結(jié)

以上是生活随笔為你收集整理的自定义View之HenCoder学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。