Spritejs：开源的跨平台的Canvas渲染引擎

概述

Spritejs是一个跨平台的高性能图形系统，可以在web、node、桌面应用和小程序上渲染图形。

Spritejs是新版本的spritejs。它与渲染器无关，使相同的 api 可以在多个上下文中渲染：webgl2、webgl 和 canvas2d。

像处理 DOM 元素一样在画布中操纵Spritejs。

特征

像操作 DOM 元素一样操作 sprites 元素。
通过WebGL2上下文渲染。
多层。
DOM 事件。
使用 ES6+ 进行面向对象的编程开发。
OffscreenCanvas 和Web Worker。
使用d3。
服务器端渲染。
观。

快速开始

[hidecontent type="logged" desc="隐藏内容：登录后可查看"]

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>

在spritejs.com了解更多信息

用法

在浏览器中：

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

使用 Node.js：

npm install spritejs --save

import * as spritejs from 'spritejs';

3D

SpriteJS ^Next可以通过3D 扩展库渲染 3D 元素。

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

或者来自 NPM

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

例子

基本的

与D3

与d3.js兼容。

3D扩展

Q-图表

基于 spritejs 的可视化库。

生态系统和扩展

项目	描述
精灵视图	适用于 Vue.js 的 SpriteJS。
精灵反应	使用 React 渲染 spritejs 元素。
q图	基于spritejs的可视化库
猫图视图	基于 spritejs 、qcharts 和 Vue 的可视化库。

建筑学

Spritejs NEXT提供了几种基本的sprite元素，可以像DOM元素一样在图层上操作。

建造

使用 NPM 构建

npm run build

构建文档

npm run build-doc

测试

npm test

许可证

麻省理工学院许可证

[/hidecontent]