Spritejs

A cross platform high-performance graphics system.
Alternatives To Spritejs
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Spritejs5,2586294 months ago432December 13, 202269mitJavaScript
A cross platform high-performance graphics system.
Scenejs2,48212558 months ago108June 05, 202324mitTypeScript
🎬 Scene.js is JavaScript & CSS timeline-based animation library
Bioicons1,084
4 days ago24mitVue
A library of free open source icons for science illustrations in biology and chemistry
Vue Konva1,03129393 months ago37November 05, 202238mitTypeScript
Vue & Canvas - JavaScript library for drawing complex canvas graphics using Vue.
Vue Gl660145 days ago39August 24, 202130mitJavaScript
Vue.js components rendering 3D WebGL graphics reactively with three.js
Vue Babylonjs43311a year ago17June 02, 201933mitJavaScript
A ready-to-go 3d environment for Vue.js using Babylon.js
Web Main403
4 days ago15gpl-3.0Vue
:tada: Ultimate Emoji Generator
Nuxt Image Loader Module1412a year ago15June 07, 202013mitJavaScript
An image loader module for nuxt.js that allows you to configure image style derivatives.
Vue Dataflow Editor5634 years ago11June 10, 20193Vue
Vue 2 dataflow graph editor
Vue Pixi4315 years ago3July 31, 20194Vue
Vue.js components rendering 2D graphics reactively via pixi.js
Alternatives To Spritejs
Select To Compare


Alternative Project Comparisons
Readme

spritejs logo

spritejs.com

npm status build status Package Quality Maintainability License

Spritejs is a cross platform high-performance graphics system, which can render 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.com

<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.qhres2.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.com

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

🐛

liulinboyi

💻

Lulzx

💻

asidar

💻

alphatr

💻

W-Qing

📖

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

Popular Graphics Projects
Popular Vue Projects
Popular Graphics Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Javascript
Vue
3d
Chart
Canvas
Dom
2d
Rendering
Graphics
Webgl
Webgl2
Sprites