微信号:frontshow

介绍:InfoQ大前端技术社群:囊括前端、移动、Node全栈一线技术,紧跟业界发展步伐。

SpriteJS:重新定义Canvas API

2018-06-29 18:22 徐川
作者|徐川
6 月 20 日,360 奇舞团开源了跨终端 Canvas 绘图库 SpriteJS。21 日,奇舞团负责人月影在 GMTC2018 大会上对 SpriteJS 做了全面的介绍分享,演讲后,我和奇舞团负责人月影以及两名奇舞团的小伙伴一起聊了聊,了解了 SpriteJS 背后的一些故事。
重新定义 Canvas API

2017 年下半年,奇舞团接到任务要给 360 安全团队做数据可视化,在做项目的过程中,他们发现现有的针对 2D 绘图的 Canvas 库在使用上并不方便,于是,2018 年初,月影带领团队开始了一个新项目,这就是 SpriteJS。

SpriteJS 的出现,基于这样一个简单的问题:如果你要在 Canvas 上实现一个简单的动画,现有的开源项目并不能很好的满足。

要使用 Canvas 做数据可视化渲染,有几种选择,一是直接使用原生的 Canvas API,但是因为 Canvas 原生接口比较底层,使用上不是很方便,直接用的开发效率不是很高。二是可以选择一些游戏引擎,比如 Cocos2d-JS,游戏引擎为游戏中复杂的视觉效果而生,你能用它实现绝大多数效果,但是太重,文件尺寸太大,而且也有使用门槛,如果你仅仅想制作一个简单的互动动画,那么用这个相当于牛刀杀鸡。三是 EaselJS、Pixi、KonvaJS 这类图形库,它们不是体量太大,就是 API 太复杂,不符合他们的需求。另外,这些图形库大部分或多或少依赖于 DOM API,因此在跨平台移植上的表现不是很好。

SpriteJS 通过将 Canvas 的 API 封装成类似 DOM 模型的 API,并支持事件分发,支持 Web Animation API,让前端开发者能轻松上手。另外,SpriteJS 内置了缓存策略,避免无用的图像重绘,有些时候性能甚至比直接使用原生 Canvas API 更高。

如果你看过 SpriteJS 的文档,你会发现它的使用方式和前端其它 API 十分类似,如以下代码可以绘制带有圆角的红色矩形。

const scene = new spritejs.Scene('#container'),
      layer = scene.layer()
const s = new spritejs.Sprite({
  anchor: 0.5,
  bgcolor: 'red',
  pos: [300, 300],
  size: [200, 200],
  borderRadius: 50,
})
layer.append(s)

月影表示,SpriteJS 的 API 是支持 Web 标准,并以遵循 Web 习惯为前提而定义的,这让前端实现动画的门槛大大降低。

SpriteJS 的目标不仅是制作简单的动画,它有更大的野心,就是成为各种 Canvas 图形库的底层。

一名奇舞团的小伙伴告诉我,最近她在研究 WebGL,发现 ThreeJS 非常方便,而且几乎成为了 Web3D API 的事实标准,SpriteJS 的目标则是成为 Canvas 中的 ThreeJS。

为了达到这个目标,SpriteJS 一方面通过彻底的组件化,抽离出 Sprite-core 来实现跨平台,对多个平台的 Canvas 环境都做了兼容。另一方面适配了多个图形库和物理引擎,包括 D3、Proton、Matter.JS、curvejs 等。

为什么 Canvas 这么重要

近年来 Canvas 相关的开源项目层出不穷,国内不少大公司也都在这个方面有投入,为什么 Canvas 这么火呢?

在前端里,2D 图像和动画有 Canvas 和 DOM SVG、Web Animation 等方案,但一旦涉及到复杂的场景或者要追求性能,Canvas 是唯一的选择。而且,Canvas 还有一个重大的优势,就是它的适用场景甚至比浏览器还要广。

这意味着你可以在浏览器之外使用 Canvas 来做各种事情。并且由于 Canvas 直接使用 GPU 进行绘制,性能很强,Flipboard 数年前曾使用 Canvas 来在 App 上渲染网页和转场动画,并达到了 120fps 的水平。

目前 Canvas 一般的使用场景是 2D 交互图像动画、数据可视化、HTML5 游戏,而近年来,这几方面的需求都有了长足的进展。

一个是数据可视化,随着大数据的发展,使用图表对数据进行直观的展示成了非常普遍的需求。数据大屏更成为各种活动的宠儿以及企业 IT 服务的标配。

另一个是小游戏,HTML5 游戏在 PC 时代就已出现,但一直没有火起来,但去年微信发布小游戏之后,跳一跳火了,也让人开始关注这个市场。从目前的限制来看,小游戏会是比目前的手游、页游等更轻量级的存在,而这一形态的游戏并没有适合的开发工具,传统的游戏引擎相对来说太重。

月影说,SpriteJS 目前的目标也正是可视化和小游戏领域。在可视化方面,SpriteJS 正在适配 D3 方面做更多的工作,包括定制一些 D3 扩展库,如为图表添加坐标轴等。至于小游戏,月影说 SpriteJS 在考虑做一个可视化开发动画和游戏的在线工具。

因此,对于 SpriteJS 的发展规划,可以说奇舞团也是经过了一番深思熟虑,基于 SpriteJS 的数据可视化也是奇舞团今年的重要任务之一。

目前 SpriteJS 已经在 Github 开源并开放官网,你可以在上面阅读文档和源码:

  相关链接

官网:

http://spritejs.org/#/

Github:

https://github.com/spritejs/spritejs

你也可以在 GTMC 官网下载月影的演讲 PPT:

https://gmtc.geekbang.org/schedule

月影也正在为 SpriteJS 写一系列的介绍文章,欢迎关注:

https://www.zhihu.com/people/yue-ying-2-61/posts

前端之巅

「前端之巅」是 InfoQ 旗下关注大前端技术的垂直社群。紧跟时代潮流,共享一线技术,欢迎关注。


前端之巅

InfoQ大前端技术社群


 
前端之巅 更多文章 深入了解JavaScript引擎精华 Facebook开源了移动应用调试平台Sonar 引擎V8推出“并发标记”,可节省60%-70%的GC时间 我从React身上得到的那些经验教训 推荐11个实用的JavaScript库
猜您喜欢 质性研究及Atlas.ti技巧与应用 关于深度学习未来发展方向的六项预测 MDCC 2015移动开发者大会 八大技术专场首批议题剧透 2016 SFDC 杭州开发者大会,一场属于开发者的技术盛宴 为什么是万能验证码