[Открытый исходный код] SpriteJS — простая кросс-терминальная среда рисования холста.

внешний интерфейс Информация внешний фреймворк Открытый исходный код ECharts WebGL Canvas d3.js

SpriteJSЭто кросс-терминальная среда рисования холста с открытым исходным кодом 360 Qi Dance Company, которая может быстро рисовать структурированный пользовательский интерфейс, анимацию и интерактивные эффекты на основе холста и публиковать их на любой платформе со средой холста (например, браузеры, апплет и узел) .

  • Официальный сайт: http://spritejs.org
  • Адрес на гитхабе: https://github.com/spritejs/spritejs
  • ДЕМО пример: http://spritejs.org/demo/

Зачем разрабатывать SpriteJS

Мы знаем, что API холста может гибко отрисовывать на холст различную векторную графику, но сам API холста относительно низкоуровневый, например, если мы хотим нарисовать красный прямоугольник со скругленными углами в центре холста, то с помощью команды собственный API холста, нам нужно это:

const canvas = document.getElementById('paper')
const context = canvas.getContext('2d')

const [x, y, w, h, r] = [200, 200, 200, 200, 50]

context.fillStyle = 'red'
context.beginPath()
context.moveTo(x + r, y)
context.arcTo(x + w, y, x + w, y + h, r)
context.arcTo(x + w, y + h, x, y + h, r)
context.arcTo(x, y + h, x, y, r)
context.arcTo(x, y, x + w, y, r)
context.closePath()
context.fill()

Для достижения того же эффекта использование SpriteJS написано так:

const scene = new spritejs.Scene('#container')
const layer = scene.layer()

const s = new spritejs.Sprite({
  anchor: 0.5,
  bgcolor: 'red',
  pos: [300, 300],
  size: [200, 200],
  borderRadius: 50,
})

layer.append(s)

Спрайты создают DOM-подобную объектную модель для графики, поэтому мы можем создавать элементы спрайтов точно так же, как элементы DOM, и добавлять их к слоям для визуализации элементов на холсте. SpriteJS имеет следующие особенности:

  • Объектная модель документа на основе холста
  • Четыре основных типа спрайтов: Sprite, Path, Label, Group
  • Поддерживает базовые и расширенные свойства спрайтов, а модель и свойства блока спрайтов полностью соответствуют CSS3.
  • Простой и мощный Transition, Animation API
  • Поддержка изображений спрайтов и предварительной загрузки ресурсов
  • Расширяемый механизм событий
  • Высокопроизводительная политика кэша
  • правильноD3,Matter-js,ProtonДружественный с другими сторонними библиотеками
  • кроссплатформенный, поддержкарендеринг на стороне сервера,Апплет WeChat

Основное введение

SpriteJS можно использовать через NPM или путем прямой загрузки версии CDN.

npm install spritejs —save

<script src="//lib.baomitu.com/spritejs/2.0.0-alpha.28/spritejs.min.js"></script>

Примечание. Node-canvas необходимо установить на стороне сервера.

Ниже приведен простой пример использования, вы также можете посетить напрямуюJSBinПроверьте эффект.

const {Scene, Sprite} = spritejs

const scene = new Scene('#demo-quickStart', {viewport: [770, 200], resolution: [3080, 800]})

const layer = scene.layer()

const robot = new Sprite('https://p5.ssl.qhimg.com/t01c33383c0e168c3c4.png')

robot.attr({
  anchor: [0, 0.5],
  pos: [0, 0],
})

robot.animate([
  {pos: [0, 0]},
  {pos: [0, 300]},
  {pos: [2700, 300]},
  {pos: [2700, 0]},
], {
  duration: 5000,
  iterations: Infinity,
  direction: 'alternate',
})

layer.append(robot)

Документация

Узнать большеSpriteJSили хотите датьSpriteJSВнесите код, вы можете следить за нашимиРепозиторий GitHub, ваша драгоценная звезда - наша самая большая поддержка и поддержка. если правильноSpriteJSЕсли у вас есть какие-либо вопросы или вам нужна дополнительная информация, вы можете присоединитьсяSpriteJSОфициальная группа QQ:

Категории