PPAPI+Skia实现的涂鸦板

Posted zhchoutai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了PPAPI+Skia实现的涂鸦板相关的知识,希望对你有一定的参考价值。

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

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

演示样例非常easy,先看看效果:

技术分享图片

涂鸦插件功能说明

功能列表:

  • 使用鼠标左键绘制线条
  • 撤销、清除功能
  • 支持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动画,里面有两个button,它们相应的实现就在这两个文件中了,类名是ImageButton。详细看代码了,比較直接。

从资源文件中载入图片

我给ppapi_doodle项目加入了两个png格式的图片,给前面提到的button用。

DLL中图片资源怎样转化为SkBitmap,在utils.cpp中实现,载入DLL中的图片资源生成Skia中的SkBitmap对象这篇文章里说过了。

项目源代码

源代码还不太完好。比方有些资源没释放。边界没考虑……没时间细整了……到这里下载吧:ppapi_doodle源代码


其他參考文章:

以上是关于PPAPI+Skia实现的涂鸦板的主要内容,如果未能解决你的问题,请参考以下文章

实现简单的手写涂鸦板(demo源码)

涂鸦板是啥?

Webcanvas——在线涂鸦网

Android关于创建涂鸦板过程中出现的小问题

Android关于创建涂鸦板过程中出现的小问题

Android应用开发实例篇-----简易涂鸦板