spritejs.org

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.org

<script src="https://unpkg.com/spritejs@3/dist/spritejs.min.js"></script>
<div id="container" style="width:400px;height:400px"></div>
<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.org

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

Project	Description
sprite-vue	SpriteJS for Vue.js.
sprite-react	Rendering spritejs elements with React.
q-charts	A visulization library based on spritejs
cat-charts-vue	A visulization library based on spritejs , qcharts and Vue.

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 💻 📖	Shero0311 📖	有马 📖 💻	文蔺 💻 🐛	蔡斯杰 💻 📖	Shaofei Cheng 💻 📖	摇太阳 📖
公子 💻	justemit 💻 📖 🐛	Welefen Lee 💻	YUPENG12138 📖	xinde 🐛	ggvswild 🐛	liulinboyi 💻
Lulzx 💻	asidar 💻	alphatr 💻	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