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

作者：为自己带盐

• 2022 年 9 月 09 日河北
• 本文字数：2060 字 阅读完需：约 7 分钟

交代背景

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

用过腾讯云这个产品的小伙伴肯定都知道，再 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)”就可以了。

推流效果

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

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

结束了？不！

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

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

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

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

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

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

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

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

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