spritejs.org

SpriteJS — это многоплатформенная система высокопроизводительной графики, которая может отображать графику в вебе, на серверах Node.js, в приложениях для рабочего стола и мини-приложениях.

SpriteJS^Next — это новая версия SpriteJS. Она агнозична относительно рендера, позволяя использовать один и тот же API для рендера во множестве контекстов: WebGL2, WebGL и Canvas2D.

Управляйте спрайтами в канвасе так же, как вы управляете элементами DOM.

Возможности

• Управление спрайтами так же, как вы работаете с элементами DOM.
• Рендеринг через WebGL2 контекст.
• Несколько слоёв.
• События DOM.
• Объектно-ориентированное программирование с использованием ES6+.
• OffscreenCanvas и Web Worker.
• Работа с d3.
• Серверное рендеринг.
• Vue.## Быстрый старт

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>

Использование

В браузере:

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

Примеры

Основной

• Обзор
• Спрайты
• Путь и группа
• Метки
• Кнопка
• Преобразования
• События
• Фильтры
• Анимации
• SVG пути
• API смещения

С d3Совместимо с d3.js.

• Гистограмма
• Иерархия
• Карта
• Связи силы Гравитационной сети

Расширение 3D

• 3D Куб
• Камера
• Карта куба
• Основы базированного рендера
• Геометрия
• Модель геометрии
• Модель и текстура
• Группы
• Небесная сфера
• Видео
• Тень
• Пост-канал
• GPGPU

Q-Charts

Библиотека визуализации на основе SpriteJS.

• Основы QCharts
• Линии
• Гладкие линии
• Линии и столбики
• Картограмма областей
• Пироговая диаграмма
• Розовая диаграмма
• Диаграмма радара
• Диаграмма пузырьков

Экосистема и расширения| Проект | Описание |

| ------------------------------- | ----------------------------------- | | sprite-vue| SpriteJS для Vue.js. | | sprite-react| Отображение элементов SpriteJS с помощью React. | | q-charts | Библиотека визуализации на основе SpriteJS. | | cat-charts-vue| Библиотека визуализации на основе SpriteJS, QCharts и Vue. |## Архитектура

Spritejs^Next предоставляет несколько видов базовых элементов спрайта, которые можно использовать как элементы DOM.

Сборка

Сборка с использованием NPM

npm run build

Сборка документации

npm run build-doc

Тестирование

npm test

Версия 2

SpriteJS v2.0

Совместимость

Поддерживает большинство современных браузеров.

Вы должны импортировать babel-polyfill для старых браузеров (например, iOS Yö).

Участники

Большое спасибо этим замечательным людям (ключ эмодзи):

Исправлено: "iOS 8" на "iOS 8 Ыö".<! -- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <! -- prettier-ignore -->| | | | | | | | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | |
_betseyliu
[💻](https://github.com/spritejs/spritejs/commits? author=betseyliu "Код") [📖](https://github.com/spritejs/spritejs/commits? author=betseyliu "Документация") |
_Shero0311
[📖](https://github.com/spritejs/spritejs/commits? author=Shero0311 "Документация") |
_有马
[📖](https://github.com/spritejs/spritejs/commits? author=makeco "Документация") 💻|
_文蔺
[💻](https://github.com/spritejs/spritejs/commits? author=AngusFu "Код") 🐛 |
_蔡斯杰
[💻](https://github.com/spritejs/sprite-core/commits? author=SijieCai "Код") [📖](https://github.com/spritejs/spritejs/commits? author=SijieCai "Документация") |
_{Shaofei Cheng}
[💻](https://github.com/spritejs/sprite-core/commits? author=wintercn "Код") [📖](https://github.com/spritejs/spritejs/commits? author=wintercn "Документация") |
_摇太阳
[📖](https://github.com/spritejs/spritejs/commits? author=yaotaiyang "Документация")
| [<img src="https://avatars2.githubusercontent.com/u/424491?```markdown
_Гонцзу ] (https://github.com/lizheming)
💻 | [
_JustEmit ] ( https://github.com/justemit )
💻 | 📖 | 🐛 | [
_{Welefen Lee} ] ( https://github.com/welefen )
💻 | [
_YUPENG12138 ] ( https://github.com/YUPENG12138 )
📖 | [
_Xinde ] ( https://github.com/xinde )
🐛 | [
_Ggvswild ] ( https://github.com/ggvswild )
🐛 | [
_LiuLinBoyI ] ( https://github.com/liulinboyi )
💻 |

## Кредиты и благодарности

- [svg-path-contours](https://github.com/mattdesl/svg-path-contours) Преобразует SVG путь в дискретный список 2D контуров (полилиний).

- [extrude-polyline](https://github.com/mattdesl/extrude-polyline) Вытягивает 2D полилинию с заданной толщиной и желаемыми типами соединений/концов.

- [triangulate-contours](https://github.com/mattdesl/triangulate-contours) Триангулирует серию контуров с использованием Tess2.js.

- [OGL](https://github.com/oframe/ogl) OGL — небольшая эффективная библиотека WebGL для разработчиков, предпочитающих минимальное количество уровней абстракции и комфортно работающих с созданием своих шейдеров.

## Лицензия

[MIT](LICENSE)