[**在PPAPI插件中使用Skia绘图**](http://blog.csdn.net/foruok/article/details/50526110)介绍了如何在PPAPI中使用Skia,文末说回头要提供一个简单的涂鸦板插件,这次我来兑现承诺了。
> foruok原创,关注微信订阅号“程序视界”可联系foruok。
示例很简单,先看看效果:
![doodle](https://box.kancloud.cn/2016-02-22_56caac34811fe.jpg "")
# 涂鸦插件功能说明
功能列表:
- 使用鼠标左键绘制线条
- 撤销、清除功能
- 支持CTRL+Z组合键撤销,支持ESC清除
# 项目说明
项目与[**在PPAPI插件中使用Skia绘图**](http://blog.csdn.net/foruok/article/details/50526110)这个文章里的差不多,只不过多了几个文件。VS2013中的项目视图如下:
![vcproj](https://box.kancloud.cn/2016-02-22_56caac349a4c8.jpg "")
做一点点说明吧。
### 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绘图