webkit 控制項的繪製

webkit 點線以及image的繪製比較簡單，webkitcore 抽象出乙個graphicscontext物件，該物件主要就是定義很多點線繪製的介面，然後平台給出具體的實現,image的繪製也類似，只是在graphicscontext委託給乙個image物件，image也有一些抽象的介面，不同平台給出不同的實現，相同的實現在基類中已經給出,font的實現和image都是以這種方式實現，這樣，在移植性方面就比較簡單,結構也比較清晰。一下給出graphicscontext的原始碼

+ expand source

view plain

copy to clipboard

print?

我們在網頁上看到的按鈕，下拉框等控制項在webkit中都是靠自己繪製出來的，而並不是用的系統控制項，與控制項有繪製有關的類叫做renderthem，其是page中的乙個成員變數,裡面封裝了很多控制項的型別，風格等，當然，實際的繪製還是委託給graphicscontext進行.對於普通按鈕的繪製也是通過電線的繪製而成的，比較簡單，當然這裡按鈕不再接收事件，是由webview接收事件。這裡詳細分析一下select控制項的實現。

首先select控制項分為幾個部分，在沒有彈出選單的時候，其實就是跟普通按鈕的繪製一樣，只是多畫乙個三角箭頭,比較簡單，當有彈出選單的時候，情況比較複雜一些，在chrome中有乙個介面： passrefptrcreatepopupmenu(popupmenuclient*) const;該介面就是建立乙個彈出選單的物件。當事件傳上來，處理了事件的分發之後，由selectelement處理預設行為，預設行為既是然出乙個選單，下面看乙個類圖。

以上就是與彈出選單相關的給個物件，render開頭的是由render引擎生成的物件，selectelement表示dom節點，popupmenuwin表示window上的乙個實現，具體是建立乙個視窗，注意當彈出選單彈出之後，事件的接收不再有底層的view來接收，而是彈出選單來接收事件，當彈出選單需要滾動條的時候，會建立乙個滾動條，然後把自己作為滾動條的客戶，注意render物件表示的是彈出選單的客戶，當我們拖動滾動條的時候，會有乙個render和滾動條同步更新的過程。

3. 視窗的繪製

視窗的繪製分為三部分，乙個是webview，這是最大的乙個視窗，不與html標籤對應，二是frameview的繪製三是帶滾動條的普通標籤的繪製，在顯示上表現為乙個視窗,下面我們分別討論

3.1 webview

webview是乙個port部分非常重要的乙個類，不同平台有不同的實現，是乙個頁面的容器，所以底層事件的接收，都是經過該webview傳上來（select彈出選單例外）, webkit中，webcore是通過chrom介面的介面來操作view及將core中的狀態表現在view上面, 當然在window平台就是實現為一windows的個視窗

3.1 framview

前面在談frame的時候已經談到了frameview，從mvc的角度來看，frame屬於m，frameview就是v部分，比如乙個空白頁面就是顯示乙個空的framview，上面並沒有攜帶任何的render資料。下面是frameview的乙個簡單類圖

3.2 普通標籤帶有overflow屬性，會表現為乙個視窗

其實在webkit中，對於這種情況，並不是建立成乙個標準的windows視窗,在render這邊，如果發現乙個元素有overflow屬性，會生成乙個renderlayer的資料結構（見上面的類圖），由該renderlayer建立乙個滾動條，所以renderlayer是滾動條的乙個客戶.當使用者拖動滾動條的時候，滾動條會和其客戶有乙個互動，其互動的介面都定義在scrollbarclient中。最後通過renderlayer的paint介面，將滾動條paint出來。scrollbar中包含乙個scrollbarthem的物件，該物件就是用於封裝滾動條的各種風格。

webkit 控制項的繪製

gui控制項繪製列表選單

android 繪製控制項圓角邊框

MFC控制項的自定義繪製

webkit 控制項的繪製

gui控制項繪製列表選單

android 繪製控制項圓角邊框

MFC控制項的自定義繪製

相關推薦