Repository files navigation

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

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

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

• Manipulate the sprites element as you do with the DOM elements.
• Rendering byWebGL2 context.
• Multiple layers.
• DOM Events.
• Object Oriented Programmed Development with ES6+.
• OffscreenCanvas andWeb Worker.
• Work withd3.
• Server-side rendering.
• Vue.

SpriteJS - spritejs.com

<scriptsrc="https://unpkg.com/spritejs@3/dist/spritejs.min.js"></script><divid="container"style="width:400px;height:400px"></div><script>constimgUrl='https://s5.ssl.qhres2.com/static/ec9f373a383d7664.svg'const{Scene, Sprite}=spritejs;constcontainer=document.getElementById('container');constpaper=newScene({      container,width:400,height:400,})constsprite=newSprite(imgUrl)sprite.attr({bgcolor:'#fff',pos:[0,0],size:[400,400],borderRadius:'200'})paper.layer().appendChild(sprite)</script>

In browser:

<scriptsrc="https://unpkg.com/spritejs@3/dist/spritejs.min.js"></script>

With Node.js:

npm install spritejs --save

import*asspritejsfrom'spritejs';

SpriteJS^Next can render 3D elements through3D extension library.

<scriptsrc="https://unpkg.com/spritejs@3/dist/spritejs.es.min.js"></script><scriptsrc="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';

• Overview
• Sprites
• Path & Group
• Labels
• Button
• Transforms
• Events
• Filters
• Animations
• SVG Paths
• Offset API

Compatible withd3.js.

• Bar Graph
• Hierarchy
• Map
• Force Links

• 3D Cube
• Camera
• Cube Map
• Physically Based Rendering
• Geometry
• Geometry Model
• Model & Texture
• Groups
• Skydom
• Video
• Shadow
• Post channel
• GPGPU

A visulization library based on spritejs.

• QCharts basic
• Lines
• Smooth Lines
• Lines & Bars
• Area Chart
• Pie Chart
• Rose Chart
• Radar Chart
• Bubble Chart

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

Build with NPM

npm run build

Build Doc

npm run build-doc

npmtest

SpriteJS v2.0

Compatible for most modern browsers.

You should importbabel-polyfill for early browers(i.e. iOS 8).

Thanks goes to these wonderful people (emoji key):

betseyliu 💻📖	Shero0311 📖	有马 📖💻	文蔺 💻🐛	蔡斯杰 💻📖	Shaofei Cheng 💻📖	摇太阳 📖
公子 💻	justemit 💻📖🐛	Welefen Lee 💻	YUPENG12138 📖	xinde 🐛	ggvswild 🐛	liulinboyi 💻
Lulzx 💻	asidar 💻	alphatr 💻	W-Qing 📖

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

MIT