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

交代背景

我们公司有一个在线导播台的产品，是利用腾讯云音视频提供的接口自行封装的一个在线推流工具。

用过腾讯云这个产品的小伙伴肯定都知道，再 TRTC 的产品中，提供了一个云端混流的功能，腾讯云提供了几种混流模板，除了几种固定模板，还提供了一种自定义模板的方式。再自定义模板里，用户可以自行编辑推流窗口的布局风格。

在之前，我们使用这个自定义模板的时候，都是自己再开发环境人力来试，通过繁琐的调试，配置好相关参数后，然后把配置信息做固化存储，最后线上系统直接调用。

这样做的痛点就是每次如果想用新的布局，就得一点点的耐心调参，非常苦逼。

直到昨天，我终于忍不了了。。。

必须要做一个可视化的操作界面来解放双手！

邂逅 Fabric.js

由于有几次苦逼调参的经历，所以我的脑海里对整个过程其实是有画面感的。

大体思路就是需要有一个背景画布，然后再画布上可以添加任意色块来代表混流画面，同时色块可以任意缩放和移动。设置完成后，可以将配置好的画面序列化成 json 结构的配置文字，当然在读取的时候也可以方便的反序列化。

简单总结一下，具体的需求就是一下 4 点

• 支持设定背景

• 支持自由添加图形

• 支持自由缩放和平移

• 支持序列化和反序列化

这时候，就该主角儿登场啦！（邂逅过程，略！）

以上几点需求，遇上 Farbic.js，纯纯就是小 case。

老规矩，先上官方文档👉：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)”就可以了。

推流效果

当可以可视化的编辑推流模板之后，就可以看一下最终的推流效果了，这里我放个小视频看一眼吧

WEB

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

结束了？不！

以上几段代码根本不值一提，贴出来只是给还没用过 Fabric 的小伙伴简单参考，实际的案例还是要到官方的文档去看，那里可不止我这点东西，你还会看到，Fabric 还支持，渐变，裁剪，各种事件的监听，动画，分组等等。总之就是你能想到的在图形软件里能做的事情，用 Fabric 几乎都可以很轻易的完成。

那写到这里，我还想说，大家再用这种线上会议的组件时，应该都会看到类似“互动白板”之类的产品。之前我还说，这个白板真是不赖，开发起来肯定不容易，倒不是说“互动”的部分有多难，而是真的像“白板”一样可以随意挥洒，图文混排，手工书写等等，这个部分应该更加困难。

用完 Fabric，我感觉这个部分好像也可以很顺利的解决了，因为白板提供的所有自由定义的东西，用 Fabric 几乎都可以完成。

虽然都知道原理是基于 canvas 组件的，但正如它的官方教程所说👇

如今，Canvas 使我们能够在网络上创建一些绝对令人惊叹的图形。但它提供的 API 低级令人失望。如果我们只是想在画布上绘制一些基本形状而忘记它们，那是一回事。但是，一旦需要进行任何类型的交互、随时更改图片或绘制更复杂的形状，情况就会发生巨大变化。

Fabric 旨在解决这个问题。

其实“互动白板”这个产品的主要的逻辑点在“互动”的部分，这一趴应该是业务逻辑复杂，但技术难度不高，而我本以为技术难度高的“白板”部分，在有了 Fabric 之后，也把门槛降低了许多

到这里，就可以大胆设想一下，结合即使通信技术，是不是可以 DIY 一个自己的“互动白板”出来！

有机会一定要试试。今天就到这啦！

最后，祝大家中秋节快乐啊！！

PS.本文已于2022.9.9发布于InfoQ写作社区（原地址：用了Fabric.js后突然想到了..._实时音视频_为自己带盐_InfoQ写作社区），于2022.12.5由作者本人转载至CSDN社区