Nightly Perpetrated Mischief

npm

Need private packages and team management tools?Check out npm Orgs. »

spritejs

2.29.7 • Public • Published

spritejs logo

spritejs.org

npm status build status dependency status Package Quality Code Climate Test Coverage License

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

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

Features

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

With D3

Compatible with d3.js.

Q-Charts

A visulization library based on spritejs.

With Proton

Proton is a lightweight and powerful javascript particle engine.

With Matter-js

Matter.js is a JavaScript 2D rigid body physics engine.

API Doc

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

install

npm i spritejs

Downloadsweekly downloads

222

version

2.29.7

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability