記錄下自己學(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ū)別塘幅。如下圖所示
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);
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à)一條直線
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)有痕跡屁使,反之則有痕跡。還是看圖
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à)的范抓。