54 Unstar Star 190 Fork 36

奇虎360 / spriteJS

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

spritejs logo

spritejs.org

npm status build status dependency status Package Quality Maintainability License

Spritejs is a cross platform high-performance graphics system, which can rendering graphics on web, node, desktop applications and mini-programs.

SpritejsNext is the new version of spritejs. It is renderer agnostic enabling the same api to render in multiple contexts: webgl2, webgl, and canvas2d.

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

Features

  • Manipulate the sprites element as you do with the DOM elements.
  • Rendering by WebGL2 context.
  • Multiple layers.
  • DOM Events.
  • Object Oriented Programmed Development with ES6+.
  • OffscreenCanvas and Web Worker.
  • Work with d3.
  • Server-side rendering.
  • Vue.

Quick Start

SpriteJS - spritejs.org

<script src="https://unpkg.com/spritejs@3/dist/spritejs.min.js"></script>
<div id="container" style="width:400px;height:400px"></div>
<script>
    const imgUrl = 'https://s5.ssl.qhres.com/static/ec9f373a383d7664.svg'
    const {Scene, Sprite} = spritejs;
    const container = document.getElementById('container');
    const paper = new Scene({
      container,
      width: 400,
      height: 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://unpkg.com/spritejs@3/dist/spritejs.min.js"></script>

With Node.js:

npm install spritejs --save
import * as spritejs from 'spritejs';

3D

SpriteJSNext can render 3D elements through 3D extension library.

<script src="https://unpkg.com/spritejs@3/dist/spritejs.es.min.js"></script>
<script src="https://unpkg.com/sprite-extend-3d/dist/sprite-extend-3d.js"></script>

Or from NPM

import {Scene} from 'spritejs';
import {Cube, shaders} from 'sprite-extend-3d';

Examples

Basic

With D3

Compatible with d3.js.

3D Extension

Q-Charts

A visulization library based on spritejs.

Ecosystem & Extensions

Project Description
sprite-vue SpriteJS for Vue.js.
sprite-react Rendering spritejs elements with React.
q-charts A visulization library based on spritejs
cat-charts-vue A visulization library based on spritejs , qcharts and Vue.

Architecture

SpritejsNext provides several kinds of basic sprite elements, which can be operated on the layer like DOM elements.

架构图

Build

Build with NPM

npm run build

Build Doc

npm run build-doc

Tests

npm test

V2

SpriteJS v2.0

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

🐛

Credits and Acknowledgements

  • svg-path-contours Approximates an SVG path into a discrete list of 2D contours (polylines).

  • extrude-polyline Extrudes a 2D polyline with a given line thickness and the desired join/cap types.

  • triangulate-contours Triangulates a series of contours using Tess2.js.

  • OGL OGL is a small, effective WebGL library aimed at developers who like minimal layers of abstraction, and are comfortable creating their own shaders.

License

MIT

Comments ( 6 )

Sign in for post a comment

About

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

Releases

No release

Gitee Metrics

Contributors

All

Activities

load more
can not load any more
JavaScript
1
https://gitee.com/qihoo360/spriteJS.git
git@gitee.com:qihoo360/spriteJS.git
qihoo360
spriteJS
spriteJS
master

Search