自定義繪制流程

自定義繪制牽扯到 以下幾點(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中的變換炭庙。

繪制流程圖


在ViewGroup的子類中重寫除dispatchDraw()以外的繪制方法時(shí)饲窿,可能需要調(diào)用setWillNotDraw(false);

在重寫的方法有多個(gè)選擇時(shí)焕蹄,優(yōu)先選擇onDraw()逾雄。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市腻脏,隨后出現(xiàn)的幾起案子鸦泳,更是在濱河造成了極大的恐慌,老刑警劉巖迹卢,帶你破解...
    沈念sama閱讀 211,194評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件辽故,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡腐碱,警方通過查閱死者的電腦和手機(jī)誊垢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來症见,“玉大人喂走,你說我怎么就攤上這事∧弊鳎” “怎么了芋肠?”我有些...
    開封第一講書人閱讀 156,780評(píng)論 0 346
  • 文/不壞的土叔 我叫張陵,是天一觀的道長遵蚜。 經(jīng)常有香客問我帖池,道長,這世上最難降的妖魔是什么吭净? 我笑而不...
    開封第一講書人閱讀 56,388評(píng)論 1 283
  • 正文 為了忘掉前任睡汹,我火速辦了婚禮,結(jié)果婚禮上寂殉,老公的妹妹穿的比我還像新娘囚巴。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評(píng)論 5 384
  • 文/花漫 我一把揭開白布彤叉。 她就那樣靜靜地躺著庶柿,像睡著了一般。 火紅的嫁衣襯著肌膚如雪秽浇。 梳的紋絲不亂的頭發(fā)上浮庐,一...
    開封第一講書人閱讀 49,764評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音兼呵,去河邊找鬼兔辅。 笑死,一個(gè)胖子當(dāng)著我的面吹牛击喂,可吹牛的內(nèi)容都是我干的维苔。 我是一名探鬼主播,決...
    沈念sama閱讀 38,907評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼懂昂,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼介时!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起凌彬,我...
    開封第一講書人閱讀 37,679評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤沸柔,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后铲敛,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體褐澎,經(jīng)...
    沈念sama閱讀 44,122評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評(píng)論 2 325
  • 正文 我和宋清朗相戀三年伐蒋,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了工三。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,605評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡先鱼,死狀恐怖俭正,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情焙畔,我是刑警寧澤掸读,帶...
    沈念sama閱讀 34,270評(píng)論 4 329
  • 正文 年R本政府宣布,位于F島的核電站宏多,受9級(jí)特大地震影響儿惫,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜伸但,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評(píng)論 3 312
  • 文/蒙蒙 一姥闪、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧砌烁,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至管呵,卻和暖如春梳毙,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背捐下。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評(píng)論 1 265
  • 我被黑心中介騙來泰國打工账锹, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人坷襟。 一個(gè)月前我還...
    沈念sama閱讀 46,297評(píng)論 2 360
  • 正文 我出身青樓奸柬,卻偏偏與公主長得像,于是被迫代替她去往敵國和親婴程。 傳聞我的和親對(duì)象是個(gè)殘疾皇子廓奕,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容