JS前端以輕量fabric.js實現示例理解canvas

Posted on by

緣起

最近想系統看下 canvas 這個東西，所以找瞭一個庫看看，本來打算寫一兩篇文章沉淀一下，發現東西有點多😦，索性就拆成瞭系列文章，應該有十幾章吧，目錄大概是下面這個樣子：

目前的話已經寫瞭 80% 左右的草稿，接下來會每周重新梳理一篇發出來。

canvas 這個東西其實沒太多很好的資料能夠系統提升，大多都是 api 的教程（可以用來入門）和某些效果的實現（看完直呼臥槽，隔天就忘瞭），會有種支離破碎的感覺🤨，很難互相關聯起來。

我之前想學這方面的東西也很是迷茫，不知道從哪裡下手，不過 fabric.js 這個庫確實能夠幫你打開 canvas 世界的大門。

如果你想往可視化這個方向靠攏，這個系列一定能夠對你有所幫助。

fabric.js 初體驗

canvas 很強大，能夠讓我們創建一些令人驚嘆的圖形和功能，不過它僅僅是用來繪制而已，如果要進行一些交互或者改變畫佈上的內容，就是一件很麻煩的事情😬。好在 fabric.js 為 canvas 提供瞭一個缺失的對象模型，它負責管理畫佈的狀態和渲染，可以讓我們直接使用對象來操縱畫佈，極大方便瞭開發。如果沒用過 fabric.js 的同學建議大傢去官網看一下，體驗一下效果，這裡放張動圖讓大傢感受一下：

這個系列講的就是如何一步一步從頭實現上面的效果，麻雀雖小五臟俱全。雖然講的是 fabric.js 的實現，但其實是 canvas 的知識，學完這個系列再去看其他 canvas 庫應該能更加得心應手。

好的😬，顯然有同學沒有去試一下 fabric.js，所以這裡我們簡單看一下它的使用方式：

// 第一步：初始化畫佈
const canvas = new fabric.Canvas('canvas');
// 第二步：創建物體
const rect = new fabric.Rect({
    top: 200,
    left: 100,
    width: 100,
    height: 100,
    fill: 'green',
});
// 第三步：向畫佈中添加物體，調用 add 才會繪制到畫佈中
canvas.add(rect);
// 第四步：讓物體動起來
rect.animate(
    { top: 50, left: 400, angle: 45 },
    { duration: 1000, onChange: canvas.renderAll.bind(canvas) }
);

隻要上面少許的代碼，就能在 canvas 中畫出一個綠色矩形，並且讓它動起來，此外還默認支持三種變換操作（平移、旋轉、縮放），非常適用於一些編輯和交互類的場景。

fabric.js 的大體結構

那 fabric.js 是個啥呢，我們引入這個庫之後可以在控制臺打印一下 fabric：

會看到 fabric（就是命名空間）下掛載這一堆東西（各種類等），我們再截個源碼的圖：

和控制臺打印的結果大體能匹配上，fabric.js 的源碼寫的還是很清楚的，幾乎每個文件都是一個類，層次分明，註釋也多（不過是英文的），通過名字你也能猜測這個類是幹什麼的。我們則會實現它的核心部分並講解一些具體思想，大概是下面這個樣子：

這裡給個最終實現版本的效果圖：

如果你沒接觸過類似的東西，肯定會有很多困惑😴，比如：

  • 怎麼判斷物體被點選和框選
  • 變換操作怎麼搞
  • 動畫怎麼弄
  • 怎麼分組
  • 如何擴展
  • 要啥數學知識
  • … 那就讓我們帶著問題一起學習吧🚗。

canvas 能幹嘛？

鑒於有些同學 canvas 接觸的比較少，所以這裡就簡單總結和回顧下 canvas 的一些基礎知識。事實上 canvas 的 api 並不多，就像 html 中的標簽，常用的就那麼幾個，但你沒碰過就會總覺得它很多又不好學，其實我們隻要知道它能做什麼就行🤔：

  • 它能畫圓弧、矩形、圖片、文本、線段、貝塞爾曲線、svg
  • 畫的時候可以設置各種屬性，主要有線寬、填充色、描邊色 沒瞭，你隻要記住這兩點就行，剩下的全靠想象，比如：
  • 你要畫一個圓就用圓弧來畫
  • 你要畫一個點就用一個很小的圓來畫
  • 你要畫一個多邊形，那就用多條線段相連
  • 你要畫一個很長的曲線，那就用多段貝塞爾曲線相連，或者用多段很小很小的線段以直代曲
  • 你要畫個圖表，那就得一筆一筆慢慢畫，比如雷達圖就是一堆圓圈和一個多邊形組成
  • 當然最好配合上圖片，這樣能讓 canvas 看起來更加多姿多彩
  • … 另外你還要知道 canvas 雖然是個標簽，但它其實就是一幅畫，畫完的東西是不可改的，隻能覆蓋或者重新畫；也無狀態，canvas 並不知道你畫的是啥，也不知道你鼠標點的是哪個物體，要是想稍微修改下畫佈上面物體的大小或者讓物體動起來，那一定是要清除（整個或局部）畫佈再重新繪制的。 然後再說幾個註意事項：
  • 畫新的幾何圖形和線條之前最好都要調用一下 beginPath，不然前後兩個圖形可能會相互影響，這是個好習慣。
  • save() 和 restore() 一定要配對使用，這也是個好習慣。
  • 善於運用 transform 的三種變換，以後的章節會講解到。

這裡簡單擴充下 save 和 restore 這個知識點，因為一開始我們可能會對這個 api 的用法比較迷茫。一般來說 canvas 上面的東西是一個一個繪制的，每個東西有自己的狀態，以 lineWidth（線寬） 和 strokeStyle（描邊色） 為例子：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// ... 這裡如果有繪制東西，用的是默認值
ctx.save(); // ---------①開始----------↓
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.strokeRect(0, 0, 20, 20);
  ctx.save(); // ----------②開始---------↓
  ctx.lineWidth = 2;
  ctx.strokeStyle = 'green';
  ctx.strokeRect(20, 20, 20, 20);
    ctx.save(); // ----------③開始----------↓
    ctx.lineWidth = 3;
    ctx.strokeStyle = 'blue';
    ctx.strokeRect(40, 40, 20, 20);
    // ... 這裡如果有繪制東西，用的是③的狀態
    ctx.restore(); // ---------③結束----------↑
    // ... 這裡如果有繪制東西，用的是②的狀態
  ctx.restore(); // ----------②結束---------↑
// ... 這裡如果有繪制東西，用的是①的狀態
ctx.restore(); // ----------①開始---------↑
// ... 這裡如果有繪制東西，用的是默認值

效果大概是下面這個樣子：

你可以把 save 和 restore 當做一對花括號🤯，所以它們得成對出現，每個括號裡面是一種新的繪制狀態，括號外面又是另一種狀態。

它的本質是棧的結構（就是隻能尾部添加或刪除的數組），save 的時候會把當前的一堆狀態屬性保存起來（就是一個大對象），restore 的時候就是將棧頂的保存的狀態拿出來置為當前的狀態，看看下面這張圖應該能比較好的理解👇🏻：

我自己覺得 canvas 的庫大體都是數據驅動視圖的一種很好體現，我們隻負責單純的修改數據（物體的各種屬性狀態值），canvas 隻負責單純的繪制，兩者各司其職，互不幹擾，也有點單向數據流的味道。

小結

這個章節主要簡單介紹瞭下 fabric.js 和 canvas，這是這個系列的第一篇文章，其它文章也在路上瞭，暫時先把簡版 fabric.js 的代碼鏈接放出來吧，不過目前還在整理中

以上就是JS前端以輕量fabric.js實現示例理解canvas的詳細內容，更多關於JS前端輕量fabric.js canvas的資料請關註WalkonNet其它相關文章！

推薦閱讀：