用了 Fabric.js 後突然想到了...

語言: CN / TW / HK

時間 2022-09-13 10:42:41 InfoQ

主題: Canvas 騰訊雲

交代背景

我們公司有一個線上導播臺的產品，是利用騰訊雲音視訊提供的介面自行封裝的一個線上推流工具。

用過騰訊雲這個產品的小夥伴肯定都知道，再 TRTC 的產品中，提供了一個雲端混流的功能，騰訊雲提供了幾種混流模板，除了幾種固定模板，還提供了一種自定義模板的方式。再自定義模板裡，使用者可以自行編輯推流視窗的佈局風格。

在之前，我們使用這個自定義模板的時候，都是自己再開發環境人力來試，通過繁瑣的除錯，配置好相關引數後，然後把配置資訊做固化儲存，最後線上系統直接呼叫。

這樣做的痛點就是每次如果想用新的佈局，就得一點點的耐心調參，非常苦逼。

直到昨天，我終於忍不了了。。。

必須要做一個視覺化的操作介面來解放雙手！

邂逅 Fabric.js

由於有幾次苦逼調參的經歷，所以我的腦海裡對整個過程其實是有畫面感的。

大體思路就是需要有一個背景畫布，然後再畫布上可以新增任意色塊來代表混流畫面，同時色塊可以任意縮放和移動。設定完成後，可以將配置好的畫面序列化成 json 結構的配置文字，當然在讀取的時候也可以方便的反序列化。

簡單總結一下，具體的需求就是一下 4 點

支援設定背景
支援自由新增圖形
支援自由縮放和平移
支援序列化和反序列化

這時候，就該主角兒登場啦！（邂逅過程，略！）

以上幾點需求，遇上 Farbic.js，純純就是小 case。

老規矩，先上官方文件:point_right:：http://fabricjs.com/,

再來看一下我這邊的應用場景，我這邊主要用到的是上述幾個需求，直接看程式碼吧

載入圖片

function loadImage(url) {  new fabric.Image.fromURL(url, function (oImg) {    imgBack = oImg;    imgBack.url = url;    imgBack.lockMovementX = true    imgBack.lockMovementY = true    // 禁止水平縮放    imgBack.lockScalingX = true    // 禁止垂直縮放    imgBack.lockScalingY = true    imgBack.scaleX = 0.5;    imgBack.scaleY = 0.5;    canvas.add(imgBack);  })}

複製程式碼

建立圖形

這裡只用到了矩形，同時疊加了文字顯示，以組合形式新增

function makeRect() {  let num = $("#number").val();  if (num > 9) {    TT.error("最多建立9個畫面")    return;  }  clearRect();
  for (let i = 0; i < num; i++) {
    var rect = new fabric.Rect({      left: 100 * i,      top: 100 * i,      fill: colors[i],      width: 100,      height: 100    });    var text = new fabric.Text((i + 1).toString(), {      left: 100 * i + 50,      top: 100 * i + 50,      fontSize: 30,      originX: 'center',      originY: 'center',      fill: 'white'    });    var group = new fabric.Group([rect, text], {      left: 100 * i,      top: 100 * i,      width: 100,      height: 100    });    rectArr.push(group);    // 將矩形新增到canvas裡    canvas.add(group);  }}

複製程式碼

上述兩個步驟完成後，就可以看到預覽圖了

儲存/讀取配置（序列化和反序列化）

Fabric 提供了序列化和反序列化的介面，可以非常方便的把自己構造的最終圖形儲存起來，同時讀取也十分方便

根據實際場景，可以使用“canvas.toJSON()”方法把內容生成結構化的資料儲存，也可以直接通過”JSON.stringfiy(canvas)“把資料結構轉換成字串儲存。

同樣，讀取的時候直接“canvas.loadFromJSON(data)”就可以了。

推流效果

當可以視覺化的編輯推流模板之後，就可以看一下最終的推流效果了，這裡我放個小視訊看一眼吧

如此，便完成了我全部的需求。

結束了？不！

以上幾段程式碼根本不值一提，貼出來只是給還沒用過 Fabric 的小夥伴簡單參考，實際的案例還是要到官方的文件去看，那裡可不止我這點東西，你還會看到，Fabric 還支援，漸變，裁剪，各種事件的監聽，動畫，分組等等。總之就是你能想到的在圖形軟體裡能做的事情，用 Fabric 幾乎都可以很輕易的完成。

那寫到這裡，我還想說，大家再用這種線上會議的元件時，應該都會看到類似“互動白板”之類的產品。之前我還說，這個白板真是不賴，開發起來肯定不容易，倒不是說“互動”的部分有多難，而是真的像“白板”一樣可以隨意揮灑，圖文混排，手工書寫等等，這個部分應該更加困難。

用完 Fabric，我感覺這個部分好像也可以很順利的解決了，因為白板提供的所有自由定義的東西，用 Fabric 幾乎都可以完成。

雖然都知道原理是基於 canvas 元件的，但正如它的官方教程所說:point_down:

如今，Canvas 使我們能夠在網路上建立一些絕對令人驚歎的圖形。但它提供的 API 低階令人失望。如果我們只是想在畫布上繪製一些基本形狀而忘記它們，那是一回事。但是，一旦需要進行任何型別的互動、隨時更改圖片或繪製更復雜的形狀，情況就會發生巨大變化。

Fabric 旨在解決這個問題。

其實“互動白板”這個產品的主要的邏輯點在“互動”的部分，這一趴應該是業務邏輯複雜，但技術難度不高，而我本以為技術難度高的“白板”部分，在有了 Fabric 之後，也把門檻降低了許多

到這裡，就可以大膽設想一下，結合即使通訊技術，是不是可以 DIY 一個自己的“互動白板”出來！

有機會一定要試試。今天就到這啦！

最後，祝大家中秋節快樂啊！！

「其他文章」