spritejs.com
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
<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>Usage
In browser:
<script src="https://unpkg.com/spritejs@3/dist/spritejs.min.js"></script>With Node.js:
npm install spritejs --saveimport * as spritejs from 'spritejs';3D
SpriteJSNext 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.
3D Extension
- 3D Cube
- Camera
- Cube Map
- Physically Based Rendering
- Geometry
- Geometry Model
- Model & Texture
- Groups
- Skydom
- Video
- Shadow
- Post channel
- GPGPU
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
SpritejsNext provides several kinds of basic sprite elements, which can be operated on the layer like DOM elements.
Build
Build with NPM
npm run buildBuild Doc
npm run build-docTests
npm testV2
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):
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.