@spritejs/next
v0.2.5
Published
The next generation of spritejs.
Downloads
6
Readme
简介
SpriteJS 是跨平台的高性能图形系统,它能够支持web、node、桌面应用和小程序的图形绘制和实现各种动画效果。
SpriteJS Next 是SpriteJS的新版本,在浏览器端支持 webgl2 渲染,并可向后兼容降级为 webgl 和 canvas2d。
特性
- 像操作DOM对象一样操作画布上的图形元素
- WebGL2渲染
- 多图层处理图形、文本、图像渲染
- DOM事件代理、自定义事件派发
- 使用ES6+语法和面向对象编程
- OffscreenCanvas和Web Worker多线程渲染
- 结构化对象树,对d3引擎友好,能够无缝使用
- 服务端渲染
- Vue
更多特性,访问 next.spritejs.org
安装和使用
如果你使用NPM进行包管理,可以直接使用npm命令安装
npm install @spritejs/next
由于spritejs是跨平台的,如果在node环境中跑,需要自行安装依赖库node-canvas
npm install canvas@next
如果你在浏览器中直接使用,可以使用CDN版本
<script src="https://unpkg.com/@spritejs/next/dist/spritejs.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 Next 提供若干类基础精灵元素,可以像操作DOM元素一样在图层上操作它们。
与旧版本主要差异
增强
丰富了精灵类型
- 在原有的 Sprite、Path、Label、Group基础上增加了Polyline、Ellipse、Arc、Ring、Regular、Triangle、Rect等矢量图形类元素。
- 将元素分为块元素(Block)和矢量路径元素(Path)两个大类,有着不同的盒模型和渲染方式。
支持WebGL渲染
- 因为默认使用WebGL2渲染,大大提升性能。
支持多线程
- 可以使用LayerWorker多线程模式,让不同的Layer运行在不同的线程。
改变策略
- 简化了Scene的适配方式
- 将原有的resolution和viewport配置简化为width和height,相当于原有的resolution,viewport默认根据容器自动适配。
- 适配模式简化为
static, scale, stickyWidth, stickyHeight, stickyTop, stickyBottom, stickyLeft, stickyRight
八种。
弱化
弱化了Label类
- 去掉了对多行文字和文字排版的支持。
暂时不支持布局
- 暂不支持原有的flex布局,在后续版本中考虑让块元素支持flex布局。
不支持CSS
- 去掉了CSS支持。
基本用法
const {Scene, Sprite} = spritejs;
const container = document.querySelector('#stage');
const scene = new Scene({container, width: 3080, height: 800, mode: 'stickyTop'});
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);