自定義View(一) 繪制基礎(chǔ)

記錄下自己學(xué)習(xí)自定義View的過(guò)程似炎。共勉

首先洪燥,在我們創(chuàng)建的自定義View中 重寫(xiě)onDraw()方法蛤高。如下

@Overrideprotected void onDraw(Canvas canvas){

????super.onDraw(canvas);

}

我們知道瞎抛,自定義View需要畫(huà)筆和畫(huà)布钓株。在onDraw()方法中您单,參數(shù)canves就是我們所需要的畫(huà)布斋荞,對(duì)于畫(huà)筆,我們需要自己創(chuàng)建一下

Paint paint = new Paint();

這兩樣?xùn)|西都創(chuàng)建好了之后虐秦,就可以開(kāi)始繪制了平酿。

一、Canves.drawXXX

我們先來(lái)看一下Canves的一些常用方法

Canvas.drawColor(@ColorInt int color) 顏色填充

這是最基本的方法悦陋,例如?drawColor(Color.BLACK)?會(huì)把整個(gè)區(qū)域染成純黑色蜈彼,覆蓋掉原有內(nèi)容;

drawColor(Color.parse("#FF0000")?會(huì)把整個(gè)區(qū)域染成紅色

當(dāng)然也有其他顏色方法,如drawRGB(int r, int g, int b)?和?drawARGB(int a, int r, int g, int b)方法俺驶。

drawCircle(float centerX, float centerY, float radius, Paint paint) 畫(huà)圓

畫(huà)圓方法有四個(gè)參數(shù)幸逆。前兩個(gè)參數(shù)代表了圓的圓心坐標(biāo),radius代表半徑暮现,paint代表我們的畫(huà)筆工具还绘。

canvas.drawCircle(300,300,200, paint);

上述代碼即為畫(huà)一個(gè)圓心在(300,300)位置栖袋,半徑為200的圓形拍顷。

在這里我們需要注意,Android的坐標(biāo)系和我們?cè)跀?shù)學(xué)上學(xué)的坐標(biāo)系有區(qū)別塘幅。如下圖所示


Android坐標(biāo)系


繪制圓形

drawRect(float left, float top, float right, float bottom, Paint paint) 畫(huà)矩形

對(duì)于上面這個(gè)方法昔案,前面四個(gè)參數(shù)是矩形四條邊的坐標(biāo)尿贫。

canvas.drawRect(100, 100, 500, 500, paint);

除此之外,還有以下重載方法


我們可以創(chuàng)建Rect對(duì)象或者RectF對(duì)象爱沟,來(lái)完成此方法帅霜。

那么有人可能會(huì)問(wèn),這兩個(gè)東西有啥區(qū)別昂羯臁身冀?其實(shí),這兩個(gè)都可以描述矩形括享,只是他們的參數(shù)的單位不同搂根。

Rect參數(shù)的單位是int,而RectF參數(shù)的單位則是float铃辖。因此RectF的精度會(huì)比Rect準(zhǔn)確那么一丟丟剩愧。

drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) 畫(huà)圓角矩形

四個(gè)參數(shù)left,?top,?right,?bottom?是四條邊的坐標(biāo),rx?和?ry?是圓角的橫向半徑和縱向半徑

canvas.drawRoundRect(100, 100, 500, 300, 50, 50, paint);

就是長(zhǎng)這樣的


圓角矩形

drawPoint(float x, float y, Paint paint) 畫(huà)點(diǎn)

x?和?y?是點(diǎn)的坐標(biāo)娇斩。

canvas.drawPoint(50, 50, paint);

drawOval(float left, float top, float right, float bottom, Paint paint) 畫(huà)橢圓

四個(gè)參數(shù)left,?top,?right,?bottom?是這個(gè)橢圓的左仁卷、上、右犬第、下四個(gè)邊界點(diǎn)的坐標(biāo)锦积。

canvas.drawOval(50, 50, 700, 200, paint);

另外,它還有一個(gè)重載方法?drawOval(RectF rect, Paint paint)歉嗓,你可以直接填寫(xiě)?RectF?來(lái)繪制橢圓丰介。

drawLine(float startX, float startY, float stopX, float stopY, Paint paint) 畫(huà)線

startX,?startY,?stopX,?stopY?分別是線的起點(diǎn)和終點(diǎn)坐標(biāo)。

canvas.drawLine(200, 200, 800, 500, paint);

drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 繪制弧形或扇形

drawArc()?是使用一個(gè)橢圓來(lái)描述弧形的鉴分。left,?top,?right,?bottom?描述的是這個(gè)弧形所在的橢圓哮幢。startAngle是弧形的起始角度,就是我們上面坐標(biāo)系中的x軸正方向志珍,是0度橙垢。順時(shí)針繪制為正角度,逆時(shí)針則是負(fù)角度伦糯。sweepAngle是矩形劃過(guò)的角度钢悲。useCenter代表是否連接到圓心,他也就代表的你要繪制的圖形是扇形還是一個(gè)弧形舔株。如果連接到圓心莺琳,那么就是扇形,反之則是一個(gè)弧形载慈。

canvas.drawArc(100, 100, 700, 500, -135, 135, true, paint); ? ?//繪制扇形

paint.setStyle(Paint.Style.STROKE);

canvas.drawArc(100, 100, 700, 500, 90, 135, false, paint); ? ? ? //繪制弧形


繪制扇形

drawBitmap(Bitmap bitmap, float left, float top, Paint paint) 畫(huà) Bitmap





以上就是Canves繪制基本圖形的一些方法惭等。接下來(lái)我們了解一下Paint畫(huà)筆的方法。

二办铡、Paint

paint.setColor(int color)

這個(gè)方法是給畫(huà)筆設(shè)置顏色辞做,比如你想畫(huà)一個(gè)帶顏色的圓琳要,你需要這么做

paint.setColor(Color.RED); // 設(shè)置為紅色

canvas.drawCircle(300, 300, 200, paint);

這樣你畫(huà)出來(lái)的圓就是一個(gè)紅色的了。

?paint.setStyle(Paint.Style style)

這個(gè)方法是設(shè)置畫(huà)筆的style秤茅。這個(gè)Style是個(gè)枚舉稚补,里面包含F(xiàn)ILL,STROKE,FILL_AND_STROKE三種類型。

STROKE代表畫(huà)線框喳,你看個(gè)圖就懂了课幕。

paint.setStyle(Paint.Style.STROKE);

canvas.drawCircle(300, 300, 200, paint);


stroke

paint.setStrokeWidth(float width)

如果你設(shè)置style為STROKE?和?FILL_AND_STROKE,則可以使用此方法五垮。意思為設(shè)置線的寬度乍惊。

paint.setAntiAlias()

此方法意為開(kāi)啟抗鋸齒。當(dāng)然放仗,你也可以使用這種方式來(lái)開(kāi)啟抗鋸齒润绎。在初始化畫(huà)筆的時(shí)候使用。

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

了解了canves基本圖形的畫(huà)法和paint的一些常用方法诞挨,我們來(lái)了解一下drawPath()方法

三莉撇、canves.drawPath()

addCircle(float x, float y, float radius, Direction dir) 添加圓

x,y,radius是圓的基本參數(shù),最后一個(gè)參數(shù)dir代表畫(huà)圓的路徑的方向惶傻。

方向分為兩種棍郎,一種是CW,即順時(shí)針达罗,另外一種是CCW坝撑,逆時(shí)針静秆。平時(shí)我們畫(huà)圓粮揉,使用哪種都可以。但是涉及到圖形相交的時(shí)候抚笔,我們需要考慮下使用哪種方向扶认。

path.addCircle(300, 300, 200, Path.Direction.CW);

canvas.drawPath(path, paint);

你會(huì)發(fā)現(xiàn),這樣畫(huà)出的效果和我們剛才使用canves,drawCircle()方法繪制出的效果是一樣的殊橙。所以說(shuō)如果只是想畫(huà)一個(gè)圓辐宾,使用drawCircle()方法更方便。

其他一些方法膨蛮,比如addRect()叠纹,addOval(),addOval()效果都一樣的敞葛。

lineTo(float x, float y)?

rLineTo(float x, float y) 畫(huà)直線

這是一個(gè)畫(huà)直線的方法誉察,x,y是目標(biāo)位置的坐標(biāo)惹谐。初始坐標(biāo)為(0持偏,0)

lineTo(x,y)的參數(shù)是絕對(duì)坐標(biāo)驼卖,rLineto則是相對(duì)坐標(biāo),就是相對(duì)于上次移動(dòng)之后的那個(gè)點(diǎn)的坐標(biāo)鸿秆∽眯螅看下圖就明白了。卿叽、

path.lineTo(300, 300); // 由當(dāng)前位置 (0, 0) 向 (300, 300) 畫(huà)一條直線

path.lineTo(300, 0); // 由當(dāng)前位置 (300, 300) 向正右方 300 像素的位置畫(huà)一條直線


lineTo
rLineTo

moveTo(float x, float y) ?移動(dòng)到目標(biāo)位置

path.moveTo(200,100); ? ? ? //? 將坐標(biāo)位置移動(dòng)到(200桥胞,100)

arcTo(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo) 畫(huà)弧形

這個(gè)方法和 drawArc()?比起來(lái),少了一個(gè)參數(shù)?useCenter附帽,說(shuō)明這個(gè)方法只畫(huà)弧形埠戳,不畫(huà)扇形;而多了一個(gè)參數(shù)?forceMoveTo的意思是 繪制是要「抬一下筆移動(dòng)過(guò)去」蕉扮,還是「直接拖著筆過(guò)去」整胃,區(qū)別在于是否留下移動(dòng)的痕跡。froceMoveTo為true代表強(qiáng)制移動(dòng)過(guò)去喳钟,也就是沒(méi)有痕跡屁使,反之則有痕跡。還是看圖


forceMoveTo 為true


?forceMoveTo?為false

addArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle)

這個(gè)方法也是畫(huà)弧形的方法奔则。 只不過(guò)這個(gè)方法沒(méi)有forceMoveTo蛮寂,在內(nèi)部設(shè)置了forceMoveTo = true。是arcTo的簡(jiǎn)化版。

close() 封閉當(dāng)前子圖形

它的作用是把當(dāng)前的子圖形封閉逾雄,即由當(dāng)前位置向當(dāng)前子圖形的起點(diǎn)繪制一條直線糖声。因此,close()?和?lineTo(起點(diǎn)坐標(biāo))?是完全等價(jià)的范抓。









最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市食铐,隨后出現(xiàn)的幾起案子匕垫,更是在濱河造成了極大的恐慌,老刑警劉巖虐呻,帶你破解...
    沈念sama閱讀 221,273評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件象泵,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡斟叼,警方通過(guò)查閱死者的電腦和手機(jī)偶惠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)朗涩,“玉大人忽孽,你說(shuō)我怎么就攤上這事。” “怎么了扒腕?”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,709評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵绢淀,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我瘾腰,道長(zhǎng)皆的,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,520評(píng)論 1 296
  • 正文 為了忘掉前任蹋盆,我火速辦了婚禮费薄,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘栖雾。我一直安慰自己楞抡,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,515評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布析藕。 她就那樣靜靜地躺著召廷,像睡著了一般。 火紅的嫁衣襯著肌膚如雪账胧。 梳的紋絲不亂的頭發(fā)上竞慢,一...
    開(kāi)封第一講書(shū)人閱讀 52,158評(píng)論 1 308
  • 那天,我揣著相機(jī)與錄音治泥,去河邊找鬼筹煮。 笑死,一個(gè)胖子當(dāng)著我的面吹牛居夹,可吹牛的內(nèi)容都是我干的败潦。 我是一名探鬼主播,決...
    沈念sama閱讀 40,755評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼准脂,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼劫扒!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起意狠,我...
    開(kāi)封第一講書(shū)人閱讀 39,660評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤粟关,失蹤者是張志新(化名)和其女友劉穎疮胖,沒(méi)想到半個(gè)月后环戈,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,203評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡澎灸,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,287評(píng)論 3 340
  • 正文 我和宋清朗相戀三年院塞,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片性昭。...
    茶點(diǎn)故事閱讀 40,427評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡拦止,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情汹族,我是刑警寧澤萧求,帶...
    沈念sama閱讀 36,122評(píng)論 5 349
  • 正文 年R本政府宣布,位于F島的核電站顶瞒,受9級(jí)特大地震影響夸政,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜榴徐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,801評(píng)論 3 333
  • 文/蒙蒙 一守问、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧坑资,春花似錦耗帕、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,272評(píng)論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至攒巍,卻和暖如春探越,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背窑业。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,393評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工钦幔, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人常柄。 一個(gè)月前我還...
    沈念sama閱讀 48,808評(píng)論 3 376
  • 正文 我出身青樓鲤氢,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親西潘。 傳聞我的和親對(duì)象是個(gè)殘疾皇子卷玉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,440評(píng)論 2 359

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

  • HenCoder 原文 關(guān)鍵點(diǎn) 自定義繪制方法的重寫(xiě),其中最常用的是onDraw 繪制的關(guān)鍵是Canvas的使用C...
    李小神不偷懶閱讀 514評(píng)論 4 1
  • 自定義繪制概述 方法:重寫(xiě)繪制方法(最常用:onDraw()) 繪制的關(guān)鍵:CanvasCanvas的繪制類方法:...
    NewSalton閱讀 456評(píng)論 0 0
  • 系列文章之 Android中自定義View(一)系列文章之 Android中自定義View(二)系列文章之 And...
    YoungerDev閱讀 4,405評(píng)論 3 11
  • 文/傾慕如歌 人面桃花相映紅喷市,片片芳菲落離殤相种。 鍥子 他是花神之后,她是宮中公主品姓。一次邂逅寝并,不知是亂了誰(shuí)的心扉,誤...
    summer涼末閱讀 432評(píng)論 2 4
  • 很多家長(zhǎng)為了節(jié)省時(shí)間腹备,或者為了在孩子面前表示自己懂得很多衬潦,往往喜歡就孩子提出的問(wèn)題馬上而直接地給出答案(或者是家長(zhǎng)...
    第6通道閱讀 255評(píng)論 0 0