webkit 控件的绘制

webkit 控件的绘制

 webkit UI部分的绘制分为三块，首先是点线以及image的绘制 然后是空间的绘制，最后是窗口的绘制。

1. 点线以及image的绘制

   webkit 点线以及image的绘制比较简单，webkitcore 抽象出一个GraphicsContext对象，该对象主要就是定义很多点线绘制的接口，然后平台给出具体的实现,image的绘制也类似，只是在GraphicsContext委托给一个Image对象，Image也有一些抽象的接口，不同平台给出不同的实现，相同的实现在基类中已经给出,Font的实现和Image都是以这种方式实现，这样，在移植性方面就比较简单,结构也比较清晰。一下给出GraphicsContext的源码

 

+ expand source view plain copy to clipboard print ?

 

2. 控件的绘制

我们在网页上看到的按钮，下拉框等控件在webkit中都是靠自己绘制出来的，而并不是用的系统控件，与控件有绘制有关的类叫做RenderThem，其是Page中的一个成员变量,里面封装了很多控件的类型，风格等，当然，实际的绘制还是委托给GraphicsContext进行.对于普通按钮的绘制也是通过电线的绘制而成的，比较简单，当然这里按钮不再接收事件，是由webview接收事件。这里详细分析一下select控件的实现。

首先select控件分为几个部分，在没有弹出菜单的时候，其实就是跟普通按钮的绘制一样，只是多画一个三角箭头,比较简单，当有弹出菜单的时候，情况比较复杂一些，在chrome中有一个接口： PassRefPtr<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的对象，该对象就是用于封装滚动条的各种风格。