[**在PPAPI插件中使用Skia繪圖**](http://blog.csdn.net/foruok/article/details/50526110)介紹了如何在PPAPI中使用Skia,文末說回頭要提供一個簡單的涂鴉板插件,這次我來兌現承諾了。
> foruok原創,關注微信訂閱號“程序視界”可聯系foruok。
示例很簡單,先看看效果:

# 涂鴉插件功能說明
功能列表:
- 使用鼠標左鍵繪制線條
- 撤銷、清除功能
- 支持CTRL+Z組合鍵撤銷,支持ESC清除
# 項目說明
項目與[**在PPAPI插件中使用Skia繪圖**](http://blog.csdn.net/foruok/article/details/50526110)這個文章里的差不多,只不過多了幾個文件。VS2013中的項目視圖如下:

做一點點說明吧。
### ppapi_doodle.cpp
這個文件實現了PPAPI插件的入口,它獲取瀏覽器側接口并保存在一個類型為GlobalPPBInterface(PPBInterface.h)的全局變量中,它完成與瀏覽器的交互,并且將事件派發到某個實例。
與之前相比,更干凈了,我把其它功能都移走了。
### PluginInstance.h(.cpp)
這是我抽象出來的代表插件實例的類。
PluginInstance這個類主要做了下面幾件事:
- 定義了與PPAPI交互的接口
- 抽象了鼠標和鍵盤事件,定義了可供派生類重寫的接口
- 融合了Skia,簡單分離了繪圖操作,提供給派生類自我繪制的接口
PluginInstance可以實例化,但就是畫個白色背景,其它什么事兒也不干。所以,我另外實現了DoodleInstance類來實現涂鴉功能。
### DoodleInstance.h(.cpp)
DoodleInstance繼承了PluginInstance,重寫了下列方法:
- void paint(const PP_Rect *rect);
- PP_Bool mouseEvent(const MouseEvent &evMouse);
- PP_Bool keyboardEvent(const KeyboardEvent &evKeyboard);
如果要實現其它的插件,重寫上面幾個函數也是必須的。
另外我還利用Skia里的SkPath來保存“從鼠標左鍵按下到釋放”這“一筆”畫出的所有東西,配套一個SkPaint,可以定制線條顏色、粗細、線型(沒實現哈哈),這兩者被我放在了一個ElementGroup類里,DoodleInstance的m_paths是一個集合,其中的每個元素都代表了一個“一筆畫”,paint函數里會把這些“一筆畫”給繪制出來。
### Button.h(.cpp)
觀看文前那張Gif動畫,里面有兩個按鈕,它們對應的實現就在這兩個文件里了,類名是ImageButton。具體看代碼了,比較直接。
### 從資源文件里加載圖片
我給ppapi_doodle項目添加了兩個png格式的圖片,給前面提到的按鈕用。
DLL中圖片資源如何轉化為SkBitmap,在utils.cpp中實現,[**加載DLL中的圖片資源生成Skia中的SkBitmap對象**](http://blog.csdn.net/foruok/article/details/50543762)這篇文章里說過了。
# 項目源碼
源碼還不太完善,比如有些資源沒釋放,邊界沒考慮……沒時間細整了……到這里下載吧:[**ppapi_doodle源碼**](http://download.csdn.net/detail/foruok/9411313)。
其他參考文章:
- [**CEF Windows開發環境搭建**](http://blog.csdn.net/foruok/article/details/50468642)
- [**CEF加載PPAPI插件**](http://blog.csdn.net/foruok/article/details/50485448)
- [**VS2013編譯最簡單的PPAPI插件**](http://blog.csdn.net/foruok/article/details/50485461)
- [**理解PPAPI的設計**](http://blog.csdn.net/foruok/article/details/50486788)
- [**PPAPI插件與瀏覽器的交互過程**](http://blog.csdn.net/foruok/article/details/50494061)
- [**Windows下從源碼編譯CEF**](http://blog.csdn.net/foruok/article/details/50498740)
- [**編譯PPAPI的media_stream_video示例**](http://blog.csdn.net/foruok/article/details/50498873)
- [**PPAPI插件的繪圖與輸入事件處理**](http://blog.csdn.net/foruok/article/details/50499813)
- [**在PPAPI插件中創建本地窗口**](http://blog.csdn.net/foruok/article/details/50513228)
- [**PPAPI插件與瀏覽器的通信**](http://blog.csdn.net/foruok/article/details/50513315)
- [**Windows下從源碼編譯Skia**](http://blog.csdn.net/foruok/article/details/50524726)
- [**在PPAPI插件中使用Skia繪圖**](http://blog.csdn.net/foruok/article/details/50526110)
- [**加載DLL中的圖片資源生成Skia中的SkBitmap對象**](http://blog.csdn.net/foruok/article/details/50543762)
- 前言
- CEF Windows開發環境搭建
- CEF加載PPAPI插件
- VS2013編譯最簡單的PPAPI插件
- 理解PPAPI的設計
- PPAPI插件與瀏覽器的交互過程
- Windows下從源碼編譯CEF
- 編譯PPAPI的media_stream_video示例
- PPAPI插件的繪圖與輸入事件處理
- 在PPAPI插件中創建本地窗口
- PPAPI插件與瀏覽器的通信
- Windows下從源碼編譯Skia
- 在PPAPI插件中使用Skia繪圖
- 加載DLL中的圖片資源生成Skia中的SkBitmap對象
- PPAPI+Skia實現的涂鴉板
- PPAPI中使用Chromium的3D圖形接口
- PPAPI中使用OpenGL ES繪圖