webkit SDL+Cairo port 移植分享

webkit SDL port 移植分享         最近在研究WebKit如何在嵌入式上跑起來，以往的WebKit代碼有很多版本，比如win、gtk、efl、Android、qt等。之前也在官網上下載下傳過WebkitGTK版本的，感覺光是依賴GTK的東西就一大堆庫，感覺這玩意兒有點龐大，是以沒想弄，至于efl和qt我又不熟，最後看見網上有說可以基于SDL port進行移植，于是我就報着試一下的心态去搞一下。最先準備就在WebkitGTK版本上改動，但是搞了一個月，沒搞出來，WebkitGTK代碼裡面隻有GTK的Port，所有參考隻有看GTK版本的，讓我很是難熬。直到看了Android4.2源碼裡的Webkit代碼，才發現裡面有好多Port，想想先從這個搞起吧。 由于Android4.2的Webkit代碼是2011年的代碼，是以 gcc和g++都要使用比較舊的版本（這裡我使用的是4.4.x版本的） 首先，我們進入webkit/source目錄下，這裡有個CMakeLists.txt，這個Makefile檔案就是首檔案，它還包含了JavaScriptCore、WebCore、WebKit等Makefile，具體設定如下：

SET(JAVASCRIPTCORE_DIR "${CMAKE_SOURCE_DIR}/JavaScriptCore")
SET(WEBCORE_DIR "${CMAKE_SOURCE_DIR}/WebCore")
SET(WEBKIT_DIR "${CMAKE_SOURCE_DIR}/WebKit")
SET(TOOLS_DIR "${CMAKE_SOURCE_DIR}/../Tools")
           

這些都是後續會去編譯的目錄，每個目錄下也會有一個CMakeLists.txt檔案

既然我們要移植SDL Port，就要增加這個Port（ 注：以前是沒有SDL這個字元串的，需要手動添加）：

SET(ALL_PORTS Efl WinCE <span style="color:#ff0000;">SDL</span>)
SET(<span style="color:#ff0000;">PORT </span>"NOPORT" CACHE STRING "choose which WebKit port to build (one of ${ALL_PORTS})")
           

設定好Port後，看下一行，這些都是編譯依賴的工具包，在Ubuntu上隻需apt-get就可以了（ 注：不是Webkit運作依賴庫，隻是編譯依賴庫）

FIND_PACKAGE(BISON REQUIRED)
FIND_PACKAGE(FLEX REQUIRED)
FIND_PACKAGE(Gperf REQUIRED)
FIND_PACKAGE(Perl REQUIRED)
FIND_PACKAGE(PythonInterp REQUIRED)
           

當你看到這一行的時候，你會發現這裡有個${PORT}，這個就是上面紅色标記的那個值得變量。

INCLUDE(OptionsCommon)
INCLUDE(Options${PORT})
           

這兩個Options.cmake檔案在webkit/Source/cmake檔案夾下，你會看見這個檔案夾下面有OptionsCommon.cmake，也有OptionsEfl.cmake、OptionsWinCE.cmake、OptionsWindows.cmake。這裡我先建立了一個OptionsSDL.cmake，然後參考OptionsEfl.cmake，把efl改成sdl，然後下面這張圖就是我們Webkit編譯以及運作時所依賴的庫了，首先我們不需要EFL，是以改成SDL，至于freetype，由于我使用的是Cairo來畫圖，而Cairo在linux平台使用的Font實作是基于freetype，是以需要這玩意兒。關于下載下傳，webkit有兩個port，一個soup，一個是curl，由于本人對curl比較熟，是以決定還是用curl比較好。具體設定大家如何研究一下這檔案夾。

添加了SDL，就需要再添加一個FindSDL.cmake，如下：

# - Try to find SDL
# Once done, this will define
#
#  SDL_FOUND - system has SDL
#  SDL_INCLUDE_DIRS - the SDL include directories
#  SDL_LIBRARIES - link these to use SDL

include(LibFindMacros)

# Use pkg-config to get hints about paths
libfind_pkg_check_modules(SDL_PKGCONF sdl)

# Include dir
find_path(SDL_INCLUDE_DIR
  NAMES SDL.h
  PATHS ${SDL_PKGCONF_INCLUDE_DIRS}
)

# Finally the library itself
find_library(SDL_LIBRARY
  NAMES SDL
  PATHS ${SDL_PKGCONF_LIBRARY_DIRS}
)

# Set the include dir variables and the libraries and let libfind_process do the rest.
# NOTE: Singular variables for this library, plural for libraries this this lib depends on.
set(SDL_PROCESS_INCLUDES SDL_INCLUDE_DIR)
set(SDL_PROCESS_LIBS SDL_LIBRARY)
libfind_process(SDL)
           

上面包含的這些依賴庫，你需要在網上去下載下傳這些源代碼，編譯！這裡我就不一一講了。

配置大概結束了，下面就可以在webkit根目錄下建立一個WebkitBuild，執行cmake -DPORT=SDL -DCMAKE_BUILD_TYPE=release ../Source 執行的時候你會看見很多類似這樣的提示 CMakelistsSDL.txt not found，然後會有具體目錄，這些雖然不報錯，但是非常關鍵，不可忽略（ 注：其他錯誤大家可以網上查閱，一般都有），這些都是javascriptCore、WebCore、WebKit、javascriptCore\wtf四個目錄的port需要添加的東西的CMakeLists,txt了。

我們需要做的就是到上述目錄中添加CMakelistsSDL.txt，所有都參考當下目錄的CMakelistsEfl.txt，因為CMakelistsEfl.txt也是用的Cairo，是以關于這裡的port可以不用考慮了，具體步驟就是複制過來，把elf相關的全部改成sdl就可以了，把elf目錄複制一份成sdl目錄，把檔案名都改成sdl檔案名，由于port裡面的内容除了繪圖相關的代碼比較多，一般都是NotImplement，是以拷貝過來如果編譯失敗，找到這個函數，能改則改，不能改就先NotImplement就可以了。反正port的代碼可以爽死你，哈哈，各種錯誤，各種修改，你懂的，大家可以嘗試一下，反正我是搞了一個月才修修補補終于編譯過了，不過幸運的是關于繪圖改動很少，因為efl也是用的Cairo。上面的port實作相當複雜，除了參考efl，也可以參考Android的代碼。關于WebKit目錄可以參考wince，因為比較簡單，哈哈。 等webkit編譯好後，差不多就可以寫個SDL畫視窗的例子，将SDL的surface和Cairo的Cairo_surface綁定一起就ok了!至于移植到不同的平台，隻需要交叉編譯各個依賴庫以及WebKit庫就OK了！ 想要源碼的朋友可以發郵箱，不過可以自己嘗試一下，這樣比較好！