1 Star 0 Fork 49

美猴王 / spriteJS

forked from 奇虎360 / spriteJS 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

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

  • 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 Start

<script src="https://s4.ssl.qhres.com/!f6567578/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://s4.ssl.qhres.com/!f6567578/spritejs.min.js"></script>

With NPM:

npm install spritejs --save

Examples

Basic

With D3

Compatible with d3.js.

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

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

License

MIT

空文件

简介

SpriteJS 是一款由 360 奇舞团开源的跨终端 canvas 绘图库,可以基于 canvas 快速绘制结构化 UI 、动画和交互效果,并发布到任何拥有 canvas 环境的平台上(比如浏览器、小程序和 node ) 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/chuchuwentiliao/spriteJS.git
git@gitee.com:chuchuwentiliao/spriteJS.git
chuchuwentiliao
spriteJS
spriteJS
master

搜索帮助

14c37bed 8189591 565d56ea 8189591