SpriteJS

A cross platform high-performance graphics system.

CanvasAnimation
spritejs/spritejsspritejs.comspritejs

README

spritejs logo

spritejs.com

npm status build status Package Quality Maintainability License

Spritejs is a cross platform high-performance graphics system, which can render graphics on web, node, desktop applications and mini-programs.

SpritejsNext is the new version of spritejs. It is renderer agnostic enabling the same api to render in multiple contexts: webgl2, webgl, and canvas2d.

Manipulate the sprites in canvas as you do with the DOM elements.

Features


- Manipulate the sprites element as you do with the DOM elements.
- Rendering by WebGL2 context.
- Multiple layers.
- DOM Events.
- Object Oriented Programmed Development with ES6+.
- OffscreenCanvas and Web Worker.
- Work with d3.
- Server-side rendering.
- Vue.

Quick Start


SpriteJS - spritejs.com

  1. ``` html
  2. <script src="https://unpkg.com/spritejs@3/dist/spritejs.min.js"></script>
  3. <div id="container" style="width:400px;height:400px"></div>
  4. <script>
  5.     const imgUrl = 'https://s5.ssl.qhres2.com/static/ec9f373a383d7664.svg'
  6.     const {Scene, Sprite} = spritejs;
  7.     const container = document.getElementById('container');
  8.     const paper = new Scene({
  9.       container,
  10.       width: 400,
  11.       height: 400,
  12.     })
  14.     const sprite = new Sprite(imgUrl)
  15.     sprite.attr({
  16.       bgcolor: '#fff',
  17.       pos: [0, 0],
  18.       size: [400, 400],
  19.       borderRadius: '200'
  20.     })
  22.     paper.layer().appendChild(sprite)
  23. </script>
  24. ```

Learn more at spritejs.com

Usage


In browser:

  1. ``` html
  2. <script src="https://unpkg.com/spritejs@3/dist/spritejs.min.js"></script>
  3. ```

With Node.js:

  1. ``` sh
  2. npm install spritejs --save
  3. ```

  1. ``` js
  2. import * as spritejs from 'spritejs';
  3. ```

3D


SpriteJSNext can render 3D elements through [3D extension library](https://github.com/spritejs/sprite-extend-3d).

  1. ``` html
  2. <script src="https://unpkg.com/spritejs@3/dist/spritejs.es.min.js"></script>
  3. <script src="https://unpkg.com/sprite-extend-3d/dist/sprite-extend-3d.js"></script>
  4. ```

Or from NPM

  1. ``` js
  2. import {Scene} from 'spritejs';
  3. import {Cube, shaders} from 'sprite-extend-3d';
  4. ```

Examples


Basic


- Overview
- Sprites
- Path & Group
- Labels
- Button
- Transforms
- Events
- Filters
- Animations
- SVG Paths
- Offset API

With D3


Compatible with d3.js.

- Bar Graph
- Hierarchy
- Map
- Force Links

3D Extension


- 3D Cube
- Camera
- Cube Map
- Physically Based Rendering
- Geometry
- Geometry Model
- Model & Texture
- Groups
- Skydom
- Video
- Shadow
- Post channel
- GPGPU

Q-Charts


A visulization library based on spritejs.

- QCharts basic
- Lines
- Smooth Lines
- Lines & Bars
- Area Chart
- Pie Chart
- Rose Chart
- Radar Chart
- Bubble Chart

<!-- ### With Proton

Proton is a lightweight and powerful javascript particle engine.

- Big Fire
- Background Particles
- Custom Behavior

With Matter-js


Matter.js) is a JavaScript 2D rigid body physics engine.

- Mixed shapes

-->

Ecosystem & Extensions


**Project****Description**
------------------------------------------------------------------
[sprite-vue](https://github.com/spritejs/sprite-vue)|
[sprite-react](https://github.com/spritejs/sprite-react)|
[q-charts](https://github.com/spritejs/q-charts)A
[cat-charts-vue](https://github.com/spritejs/cat-charts-vue)|

Architecture


SpritejsNext provides several kinds of basic sprite elements, which can be operated on the layer like DOM elements.

架构图

Build


Build with NPM

  1. ``` sh
  2. npm run build
  3. ```

Build Doc

  1. ``` sh
  2. npm run build-doc
  3. ```

Tests


  1. ``` sh
  2. npm test
  3. ```

V2


SpriteJS v2.0

Compatibility


Compatible for most modern browsers.

You should import babel-polyfill for early browers(i.e. iOS 8).

Contributors


Thanks goes to these wonderful people (emoji key):

| | | | | | | |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [
betseyliu](https://github.com/betseyliu)
[💻](https://github.com/spritejs/spritejs/commits?author=betseyliu "Code") [📖](https://github.com/spritejs/spritejs/commits?author=betseyliu "Documentation") | [
Shero0311](https://github.com/Shero0311)
[📖](https://github.com/spritejs/spritejs/commits?author=Shero0311 "Documentation") | [
有马](https://github.com/makeco)
[📖](https://github.com/spritejs/spritejs/commits?author=makeco "Documentation") [💻](https://github.com/spritejs/spritejs/commit/e2ef39bafd81ee09494f5ebbaf0f8319dbd85122 "Code")| [
文蔺](https://github.com/AngusFu)
[💻](https://github.com/spritejs/spritejs/commits?author=AngusFu "Code") [🐛](https://github.com/spritejs/spritejs/issues/30 "Bug reports") | [
蔡斯杰](https://github.com/SijieCai)
[💻](https://github.com/spritejs/sprite-core/commits?author=SijieCai "Code") [📖](https://github.com/spritejs/spritejs/commits?author=SijieCai "Documentation") | [
Shaofei Cheng](https://github.com/wintercn)
[💻](https://github.com/spritejs/sprite-core/commits?author=wintercn "Code") [📖](https://github.com/spritejs/spritejs/commits?author=wintercn "Documentation") | [
摇太阳](https://github.com/yaotaiyang)
[📖](https://github.com/spritejs/spritejs/commits?author=yaotaiyang "Documentation") | [
公子](https://github.com/lizheming)
[💻](https://github.com/spritejs/sprite-core/commits?author=lizheming "Code") | [
justemit](https://github.com/justemit)
[💻](https://github.com/spritejs/sprite-extend-shapes/commits?author=justemit "Code") [📖](https://github.com/spritejs/sprite-extend-shapes/commits?author=justemit "Documentation") [🐛](https://github.com/spritejs/sprite-core/issues/34 "Bug reports") | [
Welefen Lee](https://github.com/welefen)
[💻](https://github.com/spritejs/sprite-flex-layout "Code") | [
YUPENG12138](https://github.com/YUPENG12138)
[📖](https://github.com/spritejs/spritejs/issues/52 "Documentation")| [
xinde](https://github.com/xinde)
[🐛](https://github.com/spritejs/spritejs/issues/59 "Bug reports")| [
ggvswild](https://github.com/ggvswild)
[🐛](https://github.com/spritejs/spritejs/issues/70 "Bug reports")| [
liulinboyi](https://github.com/liulinboyi)
[💻](https://github.com/spritejs/spritejs/commits?author=liulinboyi "Code")|| [
Lulzx](https://github.com/Lulzx)
[💻](https://github.com/spritejs/sprite-core/commits?author=Lulzx "Code") | [
asidar](https://github.com/asidar)
[💻](https://github.com/spritejs/sprite-extend-shapes/commits?author=asidar "Code") | [
alphatr](https://github.com/alphatr)
[💻](https://github.com/spritejs/sprite-extend-shapes/commits?author=alphatr "Code") | [
W-Qing](https://github.com/W-Qing)
[📖](https://github.com/spritejs/spritejs/commits?author=W-Qing "Documentation") |

Credits and Acknowledgements


- svg-path-contours Approximates an SVG path into a discrete list of 2D contours (polylines).

- extrude-polyline Extrudes a 2D polyline with a given line thickness and the desired join/cap types.

- triangulate-contours Triangulates a series of contours using Tess2.js.

- OGL OGL is a small, effective WebGL library aimed at developers who like minimal layers of abstraction, and are comfortable creating their own shaders.

License


MIT