快捷導(dǎo)航

JS前端以輕量fabric.js實(shí)現(xiàn)示例理解canvas

更新時(shí)間：2022年08月02日 15:56:03 作者：尤水就下

這篇文章主要為大家介紹了JS前端以輕量fabric.js實(shí)現(xiàn)示例理解canvas可視化，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

緣起

最近想系統(tǒng)看下 canvas 這個(gè)東西，所以找了一個(gè)庫(kù)看看，本來(lái)打算寫(xiě)一兩篇文章沉淀一下，發(fā)現(xiàn)東西有點(diǎn)多??，索性就拆成了系列文章，應(yīng)該有十幾章吧，目錄大概是下面這個(gè)樣子：

目前的話已經(jīng)寫(xiě)了 80% 左右的草稿，接下來(lái)會(huì)每周重新梳理一篇發(fā)出來(lái)。

canvas 這個(gè)東西其實(shí)沒(méi)太多很好的資料能夠系統(tǒng)提升，大多都是 api 的教程（可以用來(lái)入門(mén)）和某些效果的實(shí)現(xiàn)（看完直呼臥槽，隔天就忘了），會(huì)有種支離破碎的感覺(jué)??，很難互相關(guān)聯(lián)起來(lái)。

我之前想學(xué)這方面的東西也很是迷茫，不知道從哪里下手，不過(guò) fabric.js 這個(gè)庫(kù)確實(shí)能夠幫你打開(kāi) canvas 世界的大門(mén)。

如果你想往可視化這個(gè)方向靠攏，這個(gè)系列一定能夠?qū)δ阌兴鶐椭?/p>

fabric.js 初體驗(yàn)

canvas 很強(qiáng)大，能夠讓我們創(chuàng)建一些令人驚嘆的圖形和功能，不過(guò)它僅僅是用來(lái)繪制而已，如果要進(jìn)行一些交互或者改變畫(huà)布上的內(nèi)容，就是一件很麻煩的事情??。好在 fabric.js 為 canvas 提供了一個(gè)缺失的對(duì)象模型，它負(fù)責(zé)管理畫(huà)布的狀態(tài)和渲染，可以讓我們直接使用對(duì)象來(lái)操縱畫(huà)布，極大方便了開(kāi)發(fā)。如果沒(méi)用過(guò) fabric.js 的同學(xué)建議大家去官網(wǎng)看一下，體驗(yàn)一下效果，這里放張動(dòng)圖讓大家感受一下：

這個(gè)系列講的就是如何一步一步從頭實(shí)現(xiàn)上面的效果，麻雀雖小五臟俱全。雖然講的是 fabric.js 的實(shí)現(xiàn)，但其實(shí)是 canvas 的知識(shí)，學(xué)完這個(gè)系列再去看其他 canvas 庫(kù)應(yīng)該能更加得心應(yīng)手。

好的??，顯然有同學(xué)沒(méi)有去試一下 fabric.js，所以這里我們簡(jiǎn)單看一下它的使用方式：

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

只要上面少許的代碼，就能在 canvas 中畫(huà)出一個(gè)綠色矩形，并且讓它動(dòng)起來(lái)，此外還默認(rèn)支持三種變換操作（平移、旋轉(zhuǎn)、縮放），非常適用于一些編輯和交互類的場(chǎng)景。

fabric.js 的大體結(jié)構(gòu)

那 fabric.js 是個(gè)啥呢，我們引入這個(gè)庫(kù)之后可以在控制臺(tái)打印一下 fabric：

會(huì)看到 fabric（就是命名空間）下掛載這一堆東西（各種類等），我們?cè)俳貍€(gè)源碼的圖：

和控制臺(tái)打印的結(jié)果大體能匹配上，fabric.js 的源碼寫(xiě)的還是很清楚的，幾乎每個(gè)文件都是一個(gè)類，層次分明，注釋也多（不過(guò)是英文的），通過(guò)名字你也能猜測(cè)這個(gè)類是干什么的。我們則會(huì)實(shí)現(xiàn)它的核心部分并講解一些具體思想，大概是下面這個(gè)樣子：

這里給個(gè)最終實(shí)現(xiàn)版本的效果圖：

如果你沒(méi)接觸過(guò)類似的東西，肯定會(huì)有很多困惑??，比如：

怎么判斷物體被點(diǎn)選和框選
變換操作怎么搞
動(dòng)畫(huà)怎么弄
怎么分組
如何擴(kuò)展
要啥數(shù)學(xué)知識(shí)
... 那就讓我們帶著問(wèn)題一起學(xué)習(xí)吧??。

canvas 能干嘛？

鑒于有些同學(xué) canvas 接觸的比較少，所以這里就簡(jiǎn)單總結(jié)和回顧下 canvas 的一些基礎(chǔ)知識(shí)。事實(shí)上 canvas 的 api 并不多，就像 html 中的標(biāo)簽，常用的就那么幾個(gè)，但你沒(méi)碰過(guò)就會(huì)總覺(jué)得它很多又不好學(xué)，其實(shí)我們只要知道它能做什么就行??：

它能畫(huà)圓弧、矩形、圖片、文本、線段、貝塞爾曲線、svg
畫(huà)的時(shí)候可以設(shè)置各種屬性，主要有線寬、填充色、描邊色沒(méi)了，你只要記住這兩點(diǎn)就行，剩下的全靠想象，比如：
你要畫(huà)一個(gè)圓就用圓弧來(lái)畫(huà)
你要畫(huà)一個(gè)點(diǎn)就用一個(gè)很小的圓來(lái)畫(huà)
你要畫(huà)一個(gè)多邊形，那就用多條線段相連
你要畫(huà)一個(gè)很長(zhǎng)的曲線，那就用多段貝塞爾曲線相連，或者用多段很小很小的線段以直代曲
你要畫(huà)個(gè)圖表，那就得一筆一筆慢慢畫(huà)，比如雷達(dá)圖就是一堆圓圈和一個(gè)多邊形組成
當(dāng)然最好配合上圖片，這樣能讓 canvas 看起來(lái)更加多姿多彩
... 另外你還要知道 canvas 雖然是個(gè)標(biāo)簽，但它其實(shí)就是一幅畫(huà)，畫(huà)完的東西是不可改的，只能覆蓋或者重新畫(huà)；也無(wú)狀態(tài)，canvas 并不知道你畫(huà)的是啥，也不知道你鼠標(biāo)點(diǎn)的是哪個(gè)物體，要是想稍微修改下畫(huà)布上面物體的大小或者讓物體動(dòng)起來(lái)，那一定是要清除（整個(gè)或局部）畫(huà)布再重新繪制的。然后再說(shuō)幾個(gè)注意事項(xiàng)：
畫(huà)新的幾何圖形和線條之前最好都要調(diào)用一下 beginPath，不然前后兩個(gè)圖形可能會(huì)相互影響，這是個(gè)好習(xí)慣。
save() 和 restore() 一定要配對(duì)使用，這也是個(gè)好習(xí)慣。
善于運(yùn)用 transform 的三種變換，以后的章節(jié)會(huì)講解到。

這里簡(jiǎn)單擴(kuò)充下 save 和 restore 這個(gè)知識(shí)點(diǎn)，因?yàn)橐婚_(kāi)始我們可能會(huì)對(duì)這個(gè) api 的用法比較迷茫。一般來(lái)說(shuō) canvas 上面的東西是一個(gè)一個(gè)繪制的，每個(gè)東西有自己的狀態(tài)，以 lineWidth（線寬）和 strokeStyle（描邊色）為例子：

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

效果大概是下面這個(gè)樣子：

你可以把 save 和 restore 當(dāng)做一對(duì)花括號(hào)??，所以它們得成對(duì)出現(xiàn)，每個(gè)括號(hào)里面是一種新的繪制狀態(tài)，括號(hào)外面又是另一種狀態(tài)。

它的本質(zhì)是棧的結(jié)構(gòu)（就是只能尾部添加或刪除的數(shù)組），save 的時(shí)候會(huì)把當(dāng)前的一堆狀態(tài)屬性保存起來(lái)（就是一個(gè)大對(duì)象），restore 的時(shí)候就是將棧頂?shù)谋４娴臓顟B(tài)拿出來(lái)置為當(dāng)前的狀態(tài)，看看下面這張圖應(yīng)該能比較好的理解????：

我自己覺(jué)得 canvas 的庫(kù)大體都是數(shù)據(jù)驅(qū)動(dòng)視圖的一種很好體現(xiàn)，我們只負(fù)責(zé)單純的修改數(shù)據(jù)（物體的各種屬性狀態(tài)值），canvas 只負(fù)責(zé)單純的繪制，兩者各司其職，互不干擾，也有點(diǎn)單向數(shù)據(jù)流的味道。