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

<script src="https://unpkg.com/spritejs@2/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@2/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>

Usage

In browser:

<script src="https://unpkg.com/spritejs@2/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

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

| Project | Description | | ------------------------------- | ----------------------------------- | | sprite-vue| SpriteJS for Vue.js. | | sprite-react| Rendering spritejs elements with React. | | sprite-wxapp| SpriteJS for weixin mini-program. | | sprite-extend-echarts| Rendering echarts with spritejs. | | sprite-extend-proton| Particle renderer for proton-js. | | sprite-extend-matter| Matter.js renderer for spritejs. | | q-charts | A visulization library based on spritejs | | cat-charts-vue| A visulization library based on spritejs , qcharts and Vue. |

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

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