[開源] SpriteJS -- 一款簡單的跨終端 canvas 繪圖框架

時間 2019-11-15

標籤開源 spritejs 一款簡單終端 canvas 繪圖框架简体版

原文原文鏈接

SpriteJS 是一款由360奇舞團開源的跨終端 canvas 繪圖框架，能夠基於 canvas 快速繪製結構化 UI、動畫和交互效果，併發布到任何擁有canvas環境的平臺上（好比瀏覽器、小程序和node）。javascript

官方網站：http://spritejs.org
Github地址：https://github.com/spritejs/spritejs
DEMO示例：http://spritejs.org/demo/

爲何要開發 SpriteJS

咱們知道，canvas API能夠很靈活地繪製各類矢量圖形到畫布上，可是 canvas API 自己比較低級，好比咱們要在畫布中央繪製一個帶有圓角的紅色矩形，使用 canvas 原生的 API，須要這樣：html

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 是這樣寫：java

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)
複製代碼

Sprite 爲圖形建立相似於 DOM 的對象模型，所以咱們能夠像建立 DOM 元素同樣，建立 Sprite 元素，並將它們 append 到 layer 上，從而將元素呈現到畫布上。SpriteJS 有以下特色：node

基於 canvas 繪製的文檔對象模型
四種基本精靈類型：Sprite、Path、Label、Group
支持基礎和高級的精靈屬性，精靈盒模型、屬性與 CSS3 具備高度一致性。
簡便而強大的 Transition、Animation API
支持雪碧圖和資源預加載
可擴展的事件機制
高性能的緩存策略
對 D3、Matter-js、Proton和其餘第三方庫友好
跨平臺，支持服務端渲染、微信小程序

基本使用介紹

經過 NPM 或者直接加載 CDN 版本便可使用 SpriteJSgit

npm install spritejs —save
複製代碼

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

注：在服務端使用須要安裝 node-canvasgithub

下面是簡單的用法示例，你們也能夠直接訪問 JSBin 查看效果。shell

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)
複製代碼