BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

SpriteJS:重新定义Canvas API

| 作者 徐川 关注 11 他的粉丝 发布于 2018年7月4日. 估计阅读时间: 7 分钟 | ArchSummit北京2018 共同探讨机器学习、信息安全、微服务治理的关键点

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的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT