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

Achilles 發布于2019-08-22 18:08 / 2244人閱讀

摘要：是一款由奇舞團開源的跨終端繪圖框架，可以基于快速繪制結構化動畫和交互效果，并發布到任何擁有環境的平臺上比如瀏覽器小程序和。有如下特點基于繪制的文檔對象模型四種基本精靈類型支持基礎和高級的精靈屬性，精靈盒模型屬性與具有高度一致性。

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

官方網站：http://spritejs.org

Github地址：https://github.com/spritejs/s...

DEMO示例：http://spritejs.org/demo/

為什么要開發 SpriteJS

我們知道，canvas API可以很靈活地繪制各種矢量圖形到畫布上，但是 canvas API 本身比較低級，比如我們要在畫布中央繪制一個帶有圓角的紅色矩形，使用 canvas 原生的 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)

Sprite 為圖形創建類似于 DOM 的對象模型，因此我們可以像創建 DOM 元素一樣，創建 Sprite 元素，并將它們 append 到 layer 上，從而將元素呈現到畫布上。SpriteJS 有如下特點：

基于 canvas 繪制的文檔對象模型

四種基本精靈類型：Sprite、Path、Label、Group

支持基礎和高級的精靈屬性，精靈盒模型、屬性與 CSS3 具有高度一致性。

簡便而強大的 Transition、Animation API

支持雪碧圖和資源預加載

可擴展的事件機制

高性能的緩存策略

對 D3、Matter-js、Proton和其他第三方庫友好

跨平臺，支持服務端渲染、微信小程序

基本使用介紹

通過 NPM 或者直接加載 CDN 版本即可使用 SpriteJS

npm install spritejs —save

注：在服務端使用需要安裝 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)

文檔

齊全的使用文檔：中文 | EN

各種各樣的例子

詳細的 API 文檔

原博文 SpriteJS -- Canvas動畫從未如此簡單

要深入了解 SpriteJS 或者希望給 SpriteJS 貢獻代碼，可以關注我們的 GitHub倉庫，大家的寶貴 star 是對我們最大的鼓勵和支持。如果對 SpriteJS 有疑問，或者需要了解進一步細節，可以加入 SpriteJS 官方QQ群：

云服務器 GPU云服務器服務器控制終端框架簡單爬蟲框架簡單 php框架云終端服務器開源

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95547.html

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

摘要：是一款由奇舞團開源的跨終端繪圖框架，可以基于快速繪制結構化動畫和交互效果，并發布到任何擁有環境的平臺上比如瀏覽器小程序和。有如下特點基于繪制的文檔對象模型四種基本精靈類型支持基礎和高級的精靈屬性，精靈盒模型屬性與具有高度一致性。 SpriteJS 是一款由360奇舞團開源的跨終端 canvas 繪圖框架，可以基于 canvas 快速繪制結構化 UI、動畫和交互效果，并發布到任何擁有ca...

hover_lew 2019-08-30 15:53 評論0 收藏0
GitHub 值得收藏的前端項目[每月更新...]

摘要：也是一款優秀的響應式框架站點所使用的一套框架為微信服務量身設計的一套框架一組很小的，響應式的組件，你可以在網頁的項目上到處使用一個可定制的文件，使瀏覽器呈現的所有元素，更一致和符合現代標準。 GitHub 值得收藏的前端項目整理與收集的一些比較優秀github項目，方便自己閱讀，順便分享出來，大家一起學習，本篇文章會持續更新，版權歸原作者所有。歡迎github star與fork 預...

maxmin 2019-08-29 16:07 評論0 收藏0
2016年前端開發學習計劃

摘要：年，軟件開發界發生了很多變化。六數據存儲是一個關系型數據庫管理系統，由瑞典公司開發，目前屬于旗下公司。最流行的關系型數據庫管理系統，在應用方面是最好的，關系數據庫管理系統應用軟件之一。七是最新的修訂版本，年月由萬維網聯盟完成標準制定。 2015年，軟件開發界發生了很多變化。有很多流行的新語言發布了，也有很多重要的框架和工具發布了新版本。下面有一個我們覺得最重要的簡短清單，同時也有我們覺...

asoren 2019-08-19 18:37 評論0 收藏0
2016年前端開發學習計劃

摘要：年，軟件開發界發生了很多變化。六數據存儲是一個關系型數據庫管理系統，由瑞典公司開發，目前屬于旗下公司。最流行的關系型數據庫管理系統，在應用方面是最好的，關系數據庫管理系統應用軟件之一。七是最新的修訂版本，年月由萬維網聯盟完成標準制定。 2015年，軟件開發界發生了很多變化。有很多流行的新語言發布了，也有很多重要的框架和工具發布了新版本。下面有一個我們覺得最重要的簡短清單，同時也有我們覺...

Null 2019-06-26 17:04 評論0 收藏0