65
GitHub - spritejs/spritejs: A cross-platform lightweight 2D render object model.
source link: https://github.com/spritejs/spritejs
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
spritejs.org
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.
- Web Animations Api
- 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/!1fede0f2/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
Usage
In browser:
<script src="https://s3.ssl.qhres.com/!1fede0f2/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.
Guide (中文)
API Doc
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK