2018-05-16—自定義控件之Paint,Canvas,Path使用

在我們之前做項目的時候,肯定是用到過很多控件的,那些都是系統(tǒng)或者別人設計出來的??吹侥切╈趴崦烙^的界面,你有沒有想過設計一款屬于自己的View控件呢?從今開始我們將學習一下如何設計自定義View。

首先自定義View分為三種類型:自定義View(繼承View),自定義ViewGroup(繼承ViewGroup)和,在原有的控件基礎進行功能拓展(繼承其他控件)。

我們先從自定義View開始看。今天我們主要說在里面一個比較重要的方法,onDraw方法:

onDraw

我們去看一下官方給他的注釋,很簡單的一句話

onDraw注釋

解釋一下,用這個畫你的畫。我們現(xiàn)在不需要了解太多,只要知道我們view長什么樣子,是靠他完成的就行了。

關于這個方法,我們要使用三個很重要的對象:Canvas,Paint,和Path,我們繪制主要就是用這三個類完成的。


一、Paint類

Paint中文是油漆的意思,其實就是畫筆的意思,我們來看一下Paint的主要方法:

paint類主要方法

我們通過上述一系列方法,更改我們畫筆的屬性,然后畫出來不一樣的效果。

有筆還得有紙,接下來我們看一下起到紙作用的類:Canvas類。


二、Canvas類

Canvas帆布的意思。他的方法就不全列舉了,我們一邊講解,一遍使用。

在此之前,先說一下Canvas的坐標:

同我們平時數(shù)學書中見到的坐標系不一樣,Canvas中的y正半軸向下。我們的畫布就從原點開始向x、y軸擴散。

畫線:

我們來說一下這幾個參數(shù),前兩個是起始點的坐標,隨后兩個是結束點的坐標,最后一個是畫筆對象,看到這幾個參數(shù)大家應該就能看懂,我們設置起始點和結束點,然后在這兩個點之間畫一條線段,然后線段的粗細顏色都由我們自己通過paint來改變。

效果1

畫一個矩形:

我們通過drawRect方法來實現(xiàn)畫矩形,他有三個構造方法,前兩個很像,只是第一個參數(shù)一個傳入RectF對象,一個傳入Rect對象,這兩個對象都是創(chuàng)建一個矩形,只是一個參數(shù)是float類型,一個是int類型,所以前兩個方法就不用多說了吧。

最后一個我們分別指定左、上、右、下四條邊和x,y軸的偏移量。

這里大家能看懂吧。

畫一個圓或橢圓:

有了上面的了解,大家應該知道這些參數(shù)的意義了吧。畫圓這里我們不說了,我們看一下橢圓。

其實橢圓也能畫成圓,這要看我們指定的矩形是長方形還是正方形。

這里不展示了。

畫?。?/b>

前幾個參數(shù)不說了,看的都吐了。我們看一下后面幾個參數(shù):

startAngle:起始角度,0是水平最右邊。

sweepAngle:順時針劃過的角度。

useCenter:起始和結束位置是否和圓心連接。

對應代碼和效果如上所示。我畫了一個半圓,起始位置為0,所以從右水平順時針劃過180度,然后規(guī)定連接圓心。

裁剪:

關于裁剪的方法實在是太多了,我們舉兩個例子就好。

這是官方給出的clipRect方法的介紹:讓當前的裁剪和我們指定的矩形相交。

關于裁剪方法的官方文檔說的話非常繞,我們這么理解:

我們從canvas上面裁下來一塊圖形,這個圖形是我們自己選擇的(Rect或者Path畫出來),然后我們畫的范圍就只是在這個裁剪的矩形之內了。

過時的方法我們不說了(這幾個過時的方法是真的惡心,就是因為最后那個參數(shù)-。+)。

我們可以看到從(0,0)點到(550,850)的一條線段只是顯示了一部分,這一部分就是我們裁剪了之后的那個部分。

繪制文字:

我們還可以在canvas上繪制文字。

他有四個構造方法,我們看一下最簡單的第二個-。+;

x:被繪制文本所在矩形的原點橫坐標

y:被繪制文本所在矩形的原點縱坐標(基線坐標)

這張圖表示的應該很清楚了吧,藍色框是文本的相關矩形,左下角的黑色點是他的原點坐標。

這里我們要返回去看我們Paint中的一個方法:setTextAlign(enum);這個方法指定了我們的文本顯示在原點左側還是右側,還是居中。

我們看到他是從100,500這個點往右顯示的,所以我們如果不指定setTextAlign的話,他默認是LEFT。

我上面還有兩個方法, save和restore。我們注意到了,上面我們已經指定了畫布范圍為裁剪之后的矩形,而現(xiàn)在居然又顯示出來了。這就是save和restore方法的作用。

save方法讓我們將當前的畫布壓入一個臨時的棧中,而restore方法會讓我們將從這個棧中取出棧頂?shù)腸anvas。所以我們上得到了沒有裁剪的canvas。

以上是根據(jù)官方文檔和自己的理解綜合的一段畫,我們綜合上面的例子來看一下:

首先一開始我們就調用save方法,在此之前我們除了drawLine方法沒有進行過上面四種任意變換,所以沒什么變化。我們把這個狀態(tài)存入棧中。

然后我們就裁剪了一個矩形。在上面畫線,因為現(xiàn)在已經只是顯示當前這裁剪的矩形了,所以我們的線段只是顯示了一個部分。

然后我們調用了restore方法,我們棧中唯一存儲的狀態(tài)取出來。這時候顯示之前裁剪的效果已經消失,但是之前畫的那一條線段還在。

最后我們寫了一行字:屙屎那沙壁?。?。。。。。

現(xiàn)在Canvas常用的方法已經說完了。我們在上面使用的時候間接地提到了Path這個類,那最后我們來看一下這個Path類:


Path類

path為路徑的意思,其實這個類的效果和繪制差不多,只不過它并不是局限于上述幾種圖形,因為我們是一個一個點的移動,讓他點動成線,從而形成圖像。

就和我們走路走出來一個個腳印,然后連起來就是一個圖像了。

其實path他的方法和canvas特別像,他也可以畫上面說的那些圖像(圓,弧,橢圓,矩形,線段)。只是他每個構造方法(除了lineTo和moveTo)最后都偶一個Direction參數(shù),我們來說一下這個參數(shù)的作用:

Direction為一個枚舉類型,他有兩個量,CW表示順時針CCW表示逆時針。

因為Path是點動成線圖,所以我們是有順序的,要制定順時針還是逆時針。

最后說一下path的close方法。

我先把畫筆移動到(100,600)這個點,然后先豎后橫畫了兩條線。最后我們調用了close方法。

我們發(fā)現(xiàn)沒畫斜線啊他怎么連起來了,這就是我們close方法的作用:

這是close方法注解:關閉當前的輪廓,如果發(fā)現(xiàn)當前的點和起始點的點不在一個等高線,就添加從起始點到最后點。

說到這里大家應該明白為什么會有一條斜著的線段了。



好了,這是我們繪制過程中三個主要的類的基本用法。在這個上面坑時特別多的,筆者關于這些東西已經搗鼓了整整兩天了。但是無論多么復雜的效果和代碼,我們首先要知道他的基本效果和作用,那么在復雜的分析也不會亂啦。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 【Android 自定義View之繪圖】 基礎圖形的繪制 一、Paint與Canvas 繪圖需要兩個工具,筆和紙。...
    Rtia閱讀 12,164評論 5 34
  • 一、概述 1. 四線格與基線 小時候,我們在剛開始學習寫字母時,用的本子是四線格的,我們必須把字母按照規(guī)則寫在四線...
    addapp閱讀 8,041評論 2 17
  • 版權聲明:本文為博主原創(chuàng)文章,未經博主允許不得轉載 前言 Canvas 本意是畫布的意思,然而將它理解為繪制工具一...
    cc榮宣閱讀 41,773評論 1 47
  • 系列文章之 Android中自定義View(一)系列文章之 Android中自定義View(二)系列文章之 And...
    YoungerDev閱讀 4,628評論 3 11
  • 喜愛程度相同:琴制夜樺系列暈染刷、suqqu仿刷M、確實有兩把刷子z228 推薦度 四顆星 琴制夜樺系列暈染刷 夜...
    后媽臉的少女wyn閱讀 283評論 0 0

友情鏈接更多精彩內容