spritejs.org

SpriteJS is a cross-platform lightweight 2D render object model.

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

Features

• Manipulate the sprites element as you do with the DOM elements.
• Perform fast drawing with smart cache.
• Multiple layers.
• Flex Layout.
• Text typesetting.
• CSS Supported.
• Web Animations Api
• Controllable event dispatching.
• Object Oriented Programmed Development with ES6+
• Server-side render. Work with node-canvas.
• Sprite-vue. Work with Vue.
• Sprite-React. Work with React.
• 微信小程序

Quick Start

SpriteJS - v2.spritejs.org

<div id="container"></div>

With Document CSS - Just set useDocumentCSS option to true, spritejs will auto load style rules from the document.

<div id="container"></div>
<style>
  sprite.myclass {
    background-color: red;
    --sprite-x: 0;
    --sprite-y: 0;
    width: 400px;
    height: 400px;
    border-radius: 200px;
  }
</style>

React JSX - react.spritejs.org

import React from 'react';
import ReactDOM from 'react-dom';
import {Scene} from 'sprite-react';

class Block extends React.Component {
  constructor(props) {
    super(props);
    this.state = {color: 'green'};
  }

  handleClick() {
    this.setState({
      color: 'blue',
    });
  }

  render() {
    return (
      
    );
  }
}


ReactDOM.render(
  
    
      
        
        
      
    
  ,
  document.getElementById('app')
);

Vue Component - vue.spritejs.org

<template>
  
    
      
    
  
</template>

Usage

In browser:

With NPM:

npm install spritejs --save

Examples

Basic

• Overview
• Sprites
• Path & Group
• Labels
• Buttons
• Transforms
• Events
• Filters
• Animations
• SVG Paths
• Offset API
• OBB Hit

With D3

Compatible with d3.js.

• Bar Graph
• Hierarchy
• Map
• Force Links

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

API Doc

• Sprite
• Label
• Path
• Group
• Layer
• Scene

Ecosystem & Extensions

Build

Build with NPM

npm run build

Build Doc

npm run build-doc

Tests

npm test

31 passed

Server-side Render

Spritejs (>= 1.15.0) can render sprites' canvas on server-side. Depend on node-canvas.

sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev librsvg2-dev libgif-dev build-essential g++

npm install canvas@next

const fs = require('fs')

const {Scene, Label} = require('spritejs')
const scene = new Scene('#test', 800, 600)

const bglayer = scene.layer('bg', {handleEvent: false})

const text = new Label('Hello Sprite!')

text.attr({
  anchor: [0.5, 0.5],
  pos: [400, 300],
  font: '46px Arial',
  color: 'blue',
  bgcolor: 'white',
  textAlign: 'center',
})

bglayer.append(text)

;(async function () {
  const canvas = await scene.snapshot()
  fs.writeFileSync('snap.png', canvas.toBuffer())
}())

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 🐛

License

MIT