webkit UI部分的繪製分爲三塊，首先是點線以及p_w_picpath的繪製 然後是空間的繪製，最後是窗口的繪製。
1. 點線以及p_w_picpath的繪製
webkit 點線以及p_w_picpath的繪製比較簡單，webkitcore 抽象出一個GraphicsContext對象，該對象主要就是定義很多點線繪製的接口，然後平臺給出具體的實現,p_w_picpath的繪製也類似，只是在 GraphicsContext委託給一個Image對象，Image也有一些抽象的接口，不同平臺給出不同的實現，相同的實現在基類中已經給 出,Font的實現和Image都是以這種方式實現，這樣，在移植性方面就比較簡單,結構也比較清晰。一下給出GraphicsContext的源碼
2. 控件的繪製
我們在網頁上看到的按鈕，下拉框等控件在webkit中都是靠自己繪製出來的，而並不是用的 系統控件，與控件有繪製有關的類叫做RenderThem，其是Page中的一個成員變量,裏面封裝了很多控件的類型，風格等，當然，實際的繪製還是委託 給GraphicsContext進行.對於普通按鈕的繪製也是通過電線的繪製而成的，比較簡單，當然這裏按鈕不再接收事件，是由webview接收事 件。這裏詳細分析一下select控件的實現。
首先select控件分爲幾個部分，在沒有彈出菜單的時候，其實就是跟普通按鈕的繪製一樣， 只是多畫一個三角箭頭,比較簡單，當有彈出菜單的時候，情況比較複雜一些，在chrome中有一個接口： Pa***efPtr<PopupMenu> createPopupMenu(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的對象，該對象就是用於封裝滾動條的各種風格。
轉自：http://blog.csdn.net/shunzi__1984/article/details/6246142