自定义View之HenCoder学习笔记
本文是學(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)寫的非常清楚
該圖是對(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)。
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();上面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) 平移
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();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)題。
- 上一篇: Android 人脸实名验证demo——
- 下一篇: 如何制作pem公钥证书和私钥证书