Naturally Processed Meals

    spritejs
    TypeScript icon, indicating that this package has built-in type declarations

    3.8.1 • Public • Published

    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

    Install

    npm i spritejs

    Homepage

    spritejs.com

    DownloadsWeekly Downloads

    830

    Version

    3.8.1

    License

    MIT

    Unpacked Size

    9.46 MB

    Total Files

    135

    Last publish

    Collaborators

    • akira_cn
    • bezos
    • spritejs