我从 fabric.js 中学到了什么

最新推荐文章于 2024-11-22 19:01:46 发布

原创

最新推荐文章于 2024-11-22 19:01:46 发布 · 518 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #javascript

本文介绍了在阅读 fabric.js 源码过程中的收获，重点探讨了 canvas 缓存机制，包括其提高性能的原因和适用场景。此外，详细解析了 fabric.js 中判断点在图形内的算法，以及处理 Retina 屏幕模糊问题的方法。通过实例代码展示了 fabric.js 如何创建画布、使用缓存以及分离渲染层和交互层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

熟悉 canvas 的朋友想必都使用或者听说过 Fabric.js，Fabric 算是一个元老级的 canvas 库了，从第一个版本发布到现在，已经有 8 年时间了。我近一年时间也在项目中使用，作为用户简单说说感受：

方便，只有想不到，没有做不到
源码写的真好，代码规范，注释清晰
社区真匮乏，国内资源尤其少
看文档不如看源码

优缺点都很鲜明，但总的来说，如果你要做一个在线编辑类的项目，比如在线 PPT，在线制图等应用，fabric 绝对是个很好的选择。

那么这一系列文章要写什么？这里不会主要介绍如何使用 fabric，主要写的内容是把在阅读源码过程中，把涉及到原理相关的知识总结出来，比如相关图形学知识、canvas 相关、fabric 中的设计思想等的相关知识。所以，如果你现在还对 fabric 不是很了解，建议先去官网找几个 demo 试一下。

下面我们进入这次的正题，这篇文章主要介绍 fabric.canvas 涉及到的部分内容。

从创建画布开始

fabric 创建画布很简单：

const canvas = new fabric.Canvas("domId", options);

在这样一行代码背后，fabric 主要做了下面这几件事情：

创建缓存 canvas
构建两层 canvas 元素：lower-canvas 和 upper-canvas
绑定事件
处理 retina 屏
…

下面我把相关内容一一阐述。

canvas 缓存

介绍 canvas 缓存，fabric 中的缓存也是类似的道理，简单来说，就是使用一个离屏 canvas 来做预渲染，在真实画布上用 drawImage 代替直接绘制图形。

我们先来看个例子，大家可以把 FPS meter 打开，切换按钮可以看到，不使用缓存和使用缓存 FPS 值差距还是挺大的，我电脑在使用缓存的时候基本在 60fps，不使用会降到 15fps 左右。大家可以打开控制台或者在这里查看代码。
下面列出主要的代码片段：

class Ball {
   
   
  constructor(x, y, vx, vy, useCache = true) {
   
   
    // ...
    if (useCache) {
   
   
      this.useCache = useCache;
      this.cacheCanvas = document.createElement("canvas");
      // 离屏 canvas 宽高取要渲染图形的宽高，不可以取真实 canvas 的宽高，否则会渲染大量无用区域
      this.cacheCanvas.width = 2 * (this.r + BORDER_WIDTH);
      this.cacheCanvas.height = 2 * (this.r + BORDER_WIDTH);
      this.cacheCtx = this.cacheCanvas.getContext("2d");
      this.cache();
    }
  }

  paint() {
   
   
    // 使用缓存直接使用创建的离屏canvas，否则直接绘制图形
    if (<