简介

sprite.js 是跨平台的2D绘图对象模型库，它能够支持web、node、桌面应用和微信小程序的图形绘制和实现各种动画效果。

特性

• 像操作DOM对象一样操作画布上的图形元素
• 通过智能缓存大大提升渲染性能
• 支持多图层处理图形、文本、图像渲染
• 支持DOM事件代理、自定义事件派发
• 使用ES6+语法和面向对象编程
• 结构化对象树，对d3引擎友好，能够无缝使用
• 支持布局和文字排版
• 支持直接使用文档中的CSS
• 支持服务端渲染
• 支持微信小程序
• 支持Vue
• 支持React

安装和使用

如果你使用NPM进行包管理，可以直接使用npm命令安装

npm install spritejs

由于spritejs是跨平台的，如果在node环境中跑，需要自行安装依赖库node-canvas

npm install canvas@next

如果你在浏览器中直接使用，可以使用CDN版本

<script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>

如果你要在node服务端使用spritejs渲染，你需要安装node-canvas

可能需要先安装一下依赖：

sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++

然后安装node-canvas 2.x：

npm install canvas@next

如果你在小程序中使用，你可以直接下载打包好的小程序版本，或者从项目源码编译。

架构

spritejs提供四类基础精灵元素、图层管理和负责协调多个图层的场景（Scene），类此外提供一些简单的辅助工具。

基本用法

JSBin

localStorage.setItem('language', 'zh-CN');
const {Scene, Sprite} = spritejs;
const scene = new Scene('#demo-quickStart', {
  viewport: ['auto', 'auto'],
  resolution: [3080, 800],
});
const layer = scene.layer();
const robot = new Sprite('https://p5.ssl.qhimg.com/t01c33383c0e168c3c4.png');
robot.attr({
  anchor: [0, 0.5],
  pos: [0, 0],
});
robot.animate([
  {pos: [0, 0]},
  {pos: [0, 300]},
  {pos: [2700, 300]},
  {pos: [2700, 0]},
], {
  duration: 5000,
  iterations: Infinity,
  direction: 'alternate',
});
layer.append(robot);