Vue3集成fabricPublisherTools时_registerSnaps未定义的问题排查

问题背景 #

我正在开发一个已引入fabricjs库的Vue3应用，尝试添加外部库fabricPublisherTools，但调用方法_registerSnaps时发现其为undefined。

官方可运行示例代码 #

官方提供的可运行示例：

<script type="module">
  import {fabricAddSnapper,fabricAddSmartGuides} from 'https://cdn.jsdelivr.net/gh/mtrudw/fabricPublisherTools/dist/fabricPublisherTools.min.js';
  
  fabricAddSnapper();
  fabricAddSmartGuides();
  var canvas = new fabric.Canvas('c4');
  var rect = new fabric.Rect({left: 100,top:100,width:150,height:100,fill:'blue'});
  var rect2 = new fabric.Rect({left: 500,top:500,width:150,height:100,fill:'green'});
  var rect3 = new fabric.Rect({left: 400,top:200,width:150,height:100,fill:'yellow'});
  canvas._registerSnaps(canvas._getSmartGuides.bind(canvas));
  rect.doesSnap();
  rect2.doesSnap();
  rect3.doesSnap();
  canvas.add(rect,rect2,rect3);
</script>

我的Vue3实现代码 #

<script setup>
  import { onMounted } from "vue"
  import { fabric } from 'fabric';
  import {fabricAddSmartGuides,fabricAddSnapper,fabricAddUndoRedo} from 'https://cdn.jsdelivr.net/gh/mtrudw/fabricPublisherTools/dist/fabricPublisherTools.min.js';
  
  let canvas;
    
  const setupEditor = () => {
  
    fabricAddSnapper();
    fabricAddSmartGuides();

    canvas = new fabric.Canvas('canvas');
    canvas.setHeight(500);
    canvas.setWidth(500);
    canvas.backgroundColor = "#f00";
    canvas.setDimensions({width: 500, height: 500});
  
    var rect = new fabric.Rect({left: 100,top:100,width:150,height:100,fill:'blue'});
    var rect2 = new fabric.Rect({left: 500,top:500,width:150,height:100,fill:'green'});
    var rect3 = new fabric.Rect({left: 400,top:200,width:150,height:100,fill:'yellow'});
  
    canvas._registerSnaps(canvas._getSmartGuides.bind(canvas));
    rect.doesSnap();
    rect2.doesSnap();
    rect3.doesSnap();
    canvas.add(rect,rect2,rect3);
  
    canvas.renderAll();
  
  }
  
  onMounted(() => {
    setupEditor()
  })
</script>

错误信息 #

运行时出现如下错误：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'bind')

错误指向代码行：

canvas._registerSnaps(canvas._getSmartGuides.bind(canvas));

控制台显示_registerSnaps为undefined，说明库未成功添加该方法，不确定是否是导入方式有误，请教具体哪里出错了？

解决方案 #

问题核心是fabric实例的作用域不匹配：

• 官方示例中fabric是全局CDN引入，fabricPublisherTools直接修改全局fabric的原型，所以新创建的canvas实例能继承新增方法。
• 你的Vue3代码通过ES模块导入fabric，但fabricPublisherTools可能仍在修改全局fabric对象，而非你导入的模块实例。

解决步骤： #

1. 优先尝试传参绑定fabric实例
   如果工具库支持传入fabric实例作为参数，直接将导入的fabric传入工具函数：

   // 修改工具函数调用，传入本地导入的fabric
   fabricAddSnapper(fabric);
   fabricAddSmartGuides(fabric);
   

2. 将导入的fabric挂载到全局
   若工具库仅支持全局fabric，则把本地导入的fabric挂载到window，让工具库能修改它：

   import { fabric } from 'fabric';
   // 将本地fabric挂载到全局
   window.fabric = fabric;
   // 再导入工具库
   import {fabricAddSmartGuides,fabricAddSnapper} from 'https://cdn.jsdelivr.net/gh/mtrudw/fabricPublisherTools/dist/fabricPublisherTools.min.js';
   
   // 正常调用工具函数
   fabricAddSnapper();
   fabricAddSmartGuides();
   

   这样工具库修改的就是你使用的fabric实例原型，后续创建的canvas会包含_registerSnaps等新增方法。

3. 检查版本兼容性
   确认fabric和fabricPublisherTools的版本匹配，避免因API差异导致方法无法成功添加。

内容的提问来源于stack exchange，提问作者Riccoh