spritejs.com

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

Spritejs^Next 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

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





<script>
    const imgUrl = 'https://s5.ssl.qhres2.com/static/ec9f373a383d7664.svg'
    const {Scene, Sprite} = spritejs;
    const container = document.getElementById('container');
    const paper = new Scene({
      container,
      width: 400,
      height: 400,
    })

    const sprite = new Sprite(imgUrl)
    sprite.attr({
      bgcolor: '#fff',
      pos: [0, 0],
      size: [400, 400],
      borderRadius: '200'
    })

    paper.layer().appendChild(sprite)
</script>

Learn more at spritejs.com

Usage

In browser:

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

With Node.js:

npm install spritejs --save

import * as spritejs from 'spritejs';

3D

SpriteJS^Next can render 3D elements through 3D extension library.

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

Or from NPM

import {Scene} from 'spritejs';
import {Cube, shaders} from 'sprite-extend-3d';

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

Ecosystem & Extensions

Architecture

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

Build

Build with NPM

npm run build

Build Doc

npm run build-doc

Tests

npm test

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)

💻 📖 | [

_Shero0311](https://github.com/Shero0311)

📖 | [

_有马](https://github.com/makeco)

📖 💻| [

_文蔺](https://github.com/AngusFu)

💻 🐛 | [

_蔡斯杰](https://github.com/SijieCai)

💻 📖 | [

_{Shaofei Cheng}](https://github.com/wintercn)

💻 📖 | [

_摇太阳](https://github.com/yaotaiyang)

📖
| [

_公子](https://github.com/lizheming)

💻 | [

_justemit](https://github.com/justemit)

💻 📖 🐛 | [

_{Welefen Lee}](https://github.com/welefen)

💻 | [

_YUPENG12138](https://github.com/YUPENG12138)

📖| [

_xinde](https://github.com/xinde)

🐛| [

_ggvswild](https://github.com/ggvswild)

🐛| [

_liulinboyi](https://github.com/liulinboyi)

💻| | [

_Lulzx](https://github.com/Lulzx)

💻 | [

_asidar](https://github.com/asidar)

💻 | [

_alphatr](https://github.com/alphatr)

💻 | [

_W-Qing](https://github.com/W-Qing)

📖 |

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