PPAPI+Skia实现的涂鸦板

在PPAPI插件中使用Skia绘图介绍了如何在PPAPI中使用Skia，文末说回头要提供一个简单的涂鸦板插件，这次我来兑现承诺了。

foruok原创，关注微信订阅号“程序视界”可联系foruok。

示例很简单，先看看效果：

涂鸦插件功能说明

功能列表：

• 使用鼠标左键绘制线条
• 撤销、清除功能
• 支持CTRL+Z组合键撤销，支持ESC清除

项目说明

项目与在PPAPI插件中使用Skia绘图这个文章里的差不多，只不过多了几个文件。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对象这篇文章里说过了。

项目源码

源码还不太完善，比如有些资源没释放，边界没考虑……没时间细整了……到这里下载吧：ppapi_doodle源码。

其他参考文章：

• CEF Windows开发环境搭建
• CEF加载PPAPI插件
• VS2013编译最简单的PPAPI插件
• 理解PPAPI的设计
• PPAPI插件与浏览器的交互过程
• Windows下从源码编译CEF
• 编译PPAPI的media_stream_video示例
• PPAPI插件的绘图与输入事件处理
• 在PPAPI插件中创建本地窗口
• PPAPI插件与浏览器的通信
• Windows下从源码编译Skia
• 在PPAPI插件中使用Skia绘图
• 加载DLL中的图片资源生成Skia中的SkBitmap对象