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

<script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
<div id="container"></div>
<script>
    const imgUrl = 'https://s5.ssl.qhres.com/static/ec9f373a383d7664.svg'
    const {Scene, Sprite} = spritejs;
    const paper = new Scene('#container', { viewport: [400, 400] })

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

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

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

<script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
<div id="container"></div>
<style>
  sprite.myclass {
    background-color: red;
    --sprite-x: 0;
    --sprite-y: 0;
    width: 400px;
    height: 400px;
    border-radius: 200px;
  }
</style>
<script>
    const imgUrl = 'https://s5.ssl.qhres.com/static/ec9f373a383d7664.svg'
    const {Scene, Sprite} = spritejs;
    const paper = new Scene('#container', {
      viewport: [400, 400],
      useDocumentCSS: true,
    })

    const sprite = new Sprite(imgUrl)
    sprite.className = 'myclass';

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

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 (
      <sprite pos={[100, 100]} bgcolor={this.state.color} size={[50, 50]} onClick={this.handleClick.bind(this)}></sprite>
    );
  }
}


ReactDOM.render(
  <Scene>
    <layer id="fglayer" handleEvent={true}>
      <group>
        <sprite pos={[200, 100]} size={[50, 50]} bgcolor="red" onClick={function () { this.attr('bgcolor', 'blue') } }></sprite>
        <Block/>
      </group>
    </layer>
  </Scene>,
  document.getElementById('app')
);

Vue Component - vue.spritejs.org

<template>
  <scene id="container" :viewport="[300, 300]">
    <layer>
      <sprite
        :textures="imgUrl"
        bgcolor="#fff"
        :pos="[0,0]"
        :size="[400, 400]"
        borderRadius="200"
      />
    </layer>
  </scene>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: 'https://s5.ssl.qhres.com/static/ec9f373a383d7664.svg'
    }
  }
}
</script>

Learn more at spritejs.org

---

Usage

In browser:

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

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

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

Build

Build with NPM

npm run build

Build Doc

npm run build-doc

Tests

npm test

31 passed

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
All files	97.7	86.73	95.24	97.8
src	97.28	86.13	92.31	97.39
index.js	100	50	100	100	24
layer.js	96.04	83.33	100	95.92	28,42,53,55
resource.js	97.73	80	85.71	97.56	28
scene.js	97.98	89.7	90.91	98.31	219,222,267,300
sprite.js	94.12	76.19	100	93.75	28,55
src/platform	100	91.43	100	100
index.js	100	91.43	100	100	68,82,139

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())
}())

Contributors

Thanks goes to these wonderful people (emoji key):

betseyliu 💻 📖	Shero0311 📖	有马 📖 💻	文蔺 💻 🐛	蔡斯杰 💻 📖	Shaofei Cheng 💻 📖	摇太阳 📖

公子 💻	justemit 💻 📖 🐛	Welefen Lee 💻	YUPENG12138 📖	xinde 🐛	ggvswild 🐛

License

MIT