自定義繪制牽扯到 以下幾點(diǎn)內(nèi)容:
1.canvas.drawXXX 繪制出不同的內(nèi)容? 例如 drawText繪制文字伸辟,它的參數(shù)包括繪制內(nèi)容,繪制的起點(diǎn)x坐標(biāo)梅惯,繪制的起點(diǎn)Y坐標(biāo)宪拥,畫筆,new Paint();paint可以指定繪制的顏色? 風(fēng)格空心實(shí)心? 線條寬度 等一些共有元素
drawXXX()系列方法和Paint的基礎(chǔ)掌握了铣减,就能夠應(yīng)付簡單的繪制需求她君。它們主要包括:
Canvas類下的所有draw-打頭的方法,例如drawCircle()drawBitmap()葫哗。
Paint類的幾個(gè)最常用的方法缔刹。具體是:
Paint.setStyle(Style style)設(shè)置繪制模式
Paint.setColor(int color)設(shè)置顏色
Paint.setStrokeWidth(float width)設(shè)置線條寬度
Paint.setTextSize(float textSize)設(shè)置文字大小
Paint.setAntiAlias(boolean aa)設(shè)置抗鋸齒開關(guān)
Canvas.drawColor(@ColorInt int color) 顏色填充
這是最基本的drawXXX()方法:在整個(gè)繪制區(qū)域統(tǒng)一涂上指定的顏色球涛。
drawCircle(float centerX, float centerY, float radius, Paint paint) 畫圓
前兩個(gè)參數(shù)centerXcenterY是圓心的坐標(biāo),第三個(gè)參數(shù)radius是圓的半徑校镐,單位都是像素亿扁,它們共同構(gòu)成了這個(gè)圓的基本信息(即用這幾個(gè)信息可以構(gòu)建出一個(gè)確定的圓);第四個(gè)參數(shù)paint我在視頻里面已經(jīng)說過了鸟廓,它提供基本信息之外的所有風(fēng)格信息从祝,例如顏色、線條粗細(xì)引谜、陰影等哄褒。
drawRect(float left, float top, float right, float bottom, Paint paint) 畫矩形
left,top,right,bottom是矩形四條邊的坐標(biāo)。
drawPoint(float x, float y, Paint paint) 畫點(diǎn)
x和y是點(diǎn)的坐標(biāo)煌张。點(diǎn)的大小可以通過paint.setStrokeWidth(width)來設(shè)置呐赡;點(diǎn)的形狀可以通過paint.setStrokeCap(cap)來設(shè)置:ROUND畫出來是圓形的點(diǎn),SQUARE或BUTT畫出來是方形的點(diǎn)骏融。(點(diǎn)還有形狀链嘀?是的,反正 Google 是這么說的档玻,你要問問 Google 去怀泊,我也很懵逼。)
注:Paint.setStrokeCap(cap)可以設(shè)置點(diǎn)的形狀误趴,但這個(gè)方法并不是專門用來設(shè)置點(diǎn)的形狀的霹琼,而是一個(gè)設(shè)置線條端點(diǎn)形狀的方法。端點(diǎn)有圓頭 (ROUND)凉当、平頭 (BUTT) 和方頭 (SQUARE) 三種枣申,具體會(huì)在下一節(jié)里面講。
drawPoints(float[] pts, int offset, int count, Paint paint) / drawPoints(float[] pts, Paint paint) 畫點(diǎn)(批量)
同樣是畫點(diǎn)看杭,它和drawPoint()的區(qū)別是可以畫多個(gè)點(diǎn)忠藤。pts這個(gè)數(shù)組是點(diǎn)的坐標(biāo),每兩個(gè)成一對(duì)楼雹;offset表示跳過數(shù)組的前幾個(gè)數(shù)再開始記坐標(biāo)模孩;count表示一共要繪制幾個(gè)點(diǎn)。說這么多你可能越讀越暈贮缅,你還是自己試試吧榨咐,這是個(gè)看著復(fù)雜用著簡單的方法。
drawOval(float left, float top, float right, float bottom, Paint paint) 畫橢圓
只能繪制橫著的或者豎著的橢圓谴供,不能繪制斜的(斜的倒是也可以块茁,但不是直接使用drawOval(),而是配合幾何變換憔鬼,后面會(huì)講到)龟劲。left,top,right,bottom是這個(gè)橢圓的左胃夏、上、右昌跌、下四個(gè)邊界點(diǎn)的坐標(biāo)仰禀。
drawLine(float startX, float startY, float stopX, float stopY, Paint paint) 畫線
startX,startY,stopX,stopY分別是線的起點(diǎn)和終點(diǎn)坐標(biāo)。
drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) 畫圓角矩形
left,top,right,bottom是四條邊的坐標(biāo)蚕愤,rx和ry是圓角的橫向半徑和縱向半徑答恶。
另外,它還有一個(gè)重載方法drawRoundRect(RectF rect, float rx, float ry, Paint paint)萍诱,讓你可以直接填寫RectF來繪制圓角矩形悬嗓。
drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 繪制弧形或扇形
drawArc()是使用一個(gè)橢圓來描述弧形的。left,top,right,bottom描述的是這個(gè)弧形所在的橢圓裕坊;startAngle是弧形的起始角度(x 軸的正向包竹,即正右的方向,是 0 度的位置籍凝;順時(shí)針為正角度周瞎,逆時(shí)針為負(fù)角度),sweepAngle是弧形劃過的角度饵蒂;useCenter表示是否連接到圓心声诸,如果不連接到圓心,就是弧形退盯,如果連接到圓心彼乌,就是扇形。
范圍裁切有兩個(gè)方法:clipRect()和clipPath()渊迁。裁切方法之后的繪制代碼慰照,都會(huì)被限制在裁切范圍內(nèi)。
幾何變換的使用大概分為三類:
使用Canvas來做常見的二維變換宫纬;
使用Matrix來做常見和不常見的二維變換焚挠;
使用Camera來做三維變換。
2.1 使用 Canvas 來做常見的二維變換:
2.1.1 Canvas.translate(float dx, float dy) 平移
參數(shù)里的dx和dy表示橫向和縱向的位移漓骚。
2.1.2 Canvas.rotate(float degrees, float px, float py) 旋轉(zhuǎn)
參數(shù)里的degrees是旋轉(zhuǎn)角度,單位是度(也就是一周有 360° 的那個(gè)單位)榛泛,方向是順時(shí)針為正向蝌蹂;px和py是軸心的位置。
2.1.3 Canvas.scale(float sx, float sy, float px, float py) 放縮
參數(shù)里的sxsy是橫向和縱向的放縮倍數(shù)曹锨;pxpy是放縮的軸心孤个。
2.1.4 skew(float sx, float sy) 錯(cuò)切
參數(shù)里的sx和sy是 x 方向和 y 方向的錯(cuò)切系數(shù)。
2.2.1 使用 Matrix 來做常見變換
Matrix做常見變換的方式:
創(chuàng)建Matrix對(duì)象沛简;
調(diào)用Matrix的pre/postTranslate/Rotate/Scale/Skew()方法來設(shè)置幾何變換齐鲤;
使用Canvas.setMatrix(matrix)或Canvas.concat(matrix)來把幾何變換應(yīng)用到Canvas斥废。
Canvas.setMatrix(matrix):用Matrix直接替換Canvas當(dāng)前的變換矩陣,即拋棄Canvas當(dāng)前的變換给郊,改用Matrix的變換(注:根據(jù)下面評(píng)論里以及我在微信公眾號(hào)中收到的反饋牡肉,不同的系統(tǒng)中setMatrix(matrix)的行為可能不一致,所以還是盡量用concat(matrix)吧)淆九;
Canvas.concat(matrix):用Canvas當(dāng)前的變換矩陣和Matrix相乘统锤,即基于Canvas當(dāng)前的變換,疊加上Matrix中的變換炭庙。
繪制流程圖
在重寫的方法有多個(gè)選擇時(shí)焕蹄,優(yōu)先選擇onDraw()逾雄。