likes
comments
collection
share

如何用控制台学习修改Fabric.js源码

作者站长头像
站长
· 阅读数 21

1.引子

故事要从我学习 Fabric.js 官网开始。

官网教程有这么一段代码：

var canvas = new fabric.Canvas('c');
canvas.add(rect);
rect.set({ left: 20, top: 50 });
canvas.renderAll();

代码很好理解，创建一个图形然后修改位置。

但是问题来了，当我想在官方文档查找 set 方法的具体用法时，我死活找不到 set 方法的出处。（有找到出处的朋友可以评论下告诉我在哪）

如何用控制台学习修改Fabric.js源码

之后发现不止是set、get方法，官方的文档对于我这种习惯了vue、mdn文档的选手写的实在是一言难尽，很多东西都找不到。

那么除了文档还有什么办法能够快速熟悉、学习Fabric.js呢？

控制台能解决一切！！！

2. 通过控制台学习Fabric.js

2.1 解决开头提到的问题

先解决开头提到的问题，set 方法到底在哪。

答案很简单：在源码中。

如何用控制台学习修改Fabric.js源码 当然这是废话，问题是怎么定位源码：用控制台。

此处举一个简单的栗子：

先去官网下载js到本地 官网下载链接

<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="../fabic.min.js"></script>
    <canvas id="canvas" width="500" height="500" style="border: 1px solid black;"></canvas>
    <script>
      // 创建一个fabric实例
      const canvas = new fabric.Canvas("canvas");
      // 创建一个矩形对象
      const rect = new fabric.Rect({
        left: 50,
        top: 50,
        width: 50,
        height: 50,
        fill: "red"
      });
      // 添加矩形和三角形到画布
      canvas.add(rect);
    </script>
  </body>
</html>

运行代码得到一个小方块：

如何用控制台学习修改Fabric.js源码

F12打开控制台，输入Fabric.Rect 查看对象属性

如何用控制台学习修改Fabric.js源码

可以看到 Fabric.Rect 对象是没有 set 和 get 方法的。

说明这俩方法都是继承自别的类。

点开父类 Object 发现 Object 有 set 和 get 方法，说明都是从 Object 父类继承过来的。

如何用控制台学习修改Fabric.js源码

如何用控制台学习修改Fabric.js源码

如何用控制台学习修改Fabric.js源码

set 和 get 方法都很简单，能够一眼看懂的那种。

从源码可知其实就是对 this 进行简单的赋值读取操作，所以我们可以试试直接用等号实现同样效果。

      // 这俩个效果是一样的
      // rect.set('width', 100) 
      rect.width = 100;
      canvas.renderAll();

大功告成，问题解决。

2.2 知识延展

对于查看 Fabric.js 对象的其他属性也能用控制台查看（官方文档实在写的太烂了）。

比如这些属性很明显是可以直接修改的，有很多也能通过字面意思知道是什么作用。

如何用控制台学习修改Fabric.js源码

我们可以先定位想要的属性，然后有不懂的再去查看文档，问chat-gpt或者查看源码（比如set方法）。

2.3 修改源码

我们在上面已经得到了 set，get 方法的源码，所以接下来就可以直接对其进行修改。

修改的方法有两种：

  1. 直接修改 下载后的 fabic.min.js 文件。（不推荐，自己做项目改造推荐）
  2. 通过覆盖原来类的方法修改。

此处我以方法2举例，方法1的原理一样。

现将上面得到的 set 源码复制出来：

    set: function (t, e) {
      return "object" == typeof t ? this._setObject(t) : this._set(t, e), this;
    },

我们要做的就是将源码完全复制，然后添加自己的东西，比如我加一个console.log(t, e)。

加完后只需要赋值覆盖即可。

  fabric.Object.prototype.set = function (t, e) {
    console.log('我新加的，哈哈哈', t, e);
    return "object" == typeof t ? this._setObject(t) : this._set(t, e), this;
  }

完整代码：

      // 创建一个fabric实例
      const canvas = new fabric.Canvas("canvas");
      // 创建一个矩形对象
      const rect = new fabric.Rect({
        left: 50,
        top: 50,
        width: 50,
        height: 50,
        fill: "red"
      });
      // 添加矩形和三角形到画布
      fabric.Object.prototype.set = function (t, e) {
        console.log('我新加的，哈哈哈', t, e);
        return "object" == typeof t ? this._setObject(t) : this._set(t, e), this;
      }
      rect.set('color', 'yellow')
      canvas.add(rect);

运行结果：

如何用控制台学习修改Fabric.js源码

修改成功！！！

此方法对于其他一些开源js库同样适用，希望对您有用。

转载自:https://juejin.cn/post/7387226606412660745
评论
请登录