bravf / spritejs

A cross-platform lightweight 2D render object model.

spritejs

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

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

Fetures

• Manipulate the sprites element as you do with the DOM elements.
• Perform fast drawing with smart cache.
• Multiple layers.
• Controllable event dispatching.
• Object Oriented Programmed Development with ES6+
• Server-side render. Work with node-canvas.
• 微信小程序

Quick Look

<script src="https://s3.ssl.qhres.com/!1caf0b28/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', 400, 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

Fetures

• Provide attr() methods to set sprite styles.
• Provide web animations api to perform animations.
• Provide filters.
• Provide high-level mouse & touch events
• Optimized rendering performance.

Usage

In browser:

<script src="https://s3.ssl.qhres.com/!1caf0b28/spritejs.min.js"></script>

Quick Start

Examples

• Overview
• Sprites
• Textures
• Labels
• Buttons
• Transforms
• Events
• Filters
• Animations
• SVG Paths
• Offset API
• OBB Hit

D3 Examples

Compatible with d3.js.

• D3.js Example 1
• D3.js Example 2
• D3.js Example 3

API Doc (中文）

• Architecture
• paper & layers
• Sprite
• Events
• Performance

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

License

MIT