FabricJS获取选中对象类型与尺寸时选中事件无响应问题

我正在尝试获取fabric.js画布中选中对象的尺寸和类型，以下是最小复现代码：

复现代码 #

JavaScript逻辑 #

var canvas = new fabric.Canvas("c");

canvas.on("object:selected", onObjectSelected);

$("#addTxt").on("click", function(e) {
  text = new fabric.Text("Insert Text here", {
    left: 100,
    top: 100
  });
  canvas.add(text);
});

function onObjectSelected(o) {
  //activeObject = canvas.getActiveObject()
  activeObject = o.target;
  console.log(activeObject);
  console.log("test");

  if (activeObject.isType("text")) {
    //display text logic
  } else if (activeObject.isType("image")) {
    //display image
  } else if (activeObject.isType("xyz")) {
    //display shape logic
  }
}

样式代码 #

#c {
  background-color: rgb(255, 255, 255);
  margin: 10px;
  border: 1px solid gray;
}

HTML结构 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.0/font/bootstrap-icons.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="https://unpkg.com/fabric@5.2.1/dist/fabric.min.js"></script>

<button type="button" id="addTxt" class="btn btn-primary">Add Text</button>

<canvas id="c" width="400" height="400"></canvas>

异常现象 #

使用鼠标选中画布上的对象时，控制台没有任何响应输出。

核心问题是事件名使用错误。你引入的是fabric.js 5.2.1版本，旧版的object:selected事件在高版本中已经被完全废弃移除，绑定这个事件不会有任何效果，选中对象时自然不会触发回调。
另外代码里判断形状类型写的isType("xyz")是无效占位，fabric内置基础图形的类型值分别为rect（矩形）、circle（圆形）、triangle（三角形）、path（路径）等，需要根据实际图形类型判断。

• 替换为新版支持的选中事件：selection:created（首次选中对象时触发）、selection:updated（已选中状态下切换选中其他对象时触发），两个事件绑定同一个处理函数即可覆盖所有单选/多选切换场景。
• 新版选中事件的回调参数中，选中对象存放在o.selected数组中，单选时取数组第一个元素即可；如果要获取对象真实显示尺寸，不要直接读width/height属性，调用getScaledWidth()和getScaledHeight()方法可以拿到包含缩放比例的实际渲染尺寸。

修正后的JS代码如下：

var canvas = new fabric.Canvas("c");

// 绑定正确的选中事件
canvas.on("selection:created selection:updated", onObjectSelected);

$("#addTxt").on("click", function(e) {
  // 补全变量声明，避免污染全局作用域
  let text = new fabric.Text("Insert Text here", {
    left: 100,
    top: 100
  });
  canvas.add(text);
});

function onObjectSelected(o) {
  // 单选场景取第一个选中对象，多选场景可遍历o.selected数组
  const activeObject = o.selected[0];
  console.log(activeObject);
  // 获取真实显示尺寸
  const realWidth = activeObject.getScaledWidth();
  const realHeight = activeObject.getScaledHeight();
  console.log("选中对象尺寸：", realWidth, realHeight);

  if (activeObject.isType("text")) {
    // 文本对象处理逻辑
  } else if (activeObject.isType("image")) {
    // 图片对象处理逻辑
  } else if (activeObject.isType("rect") || activeObject.isType("circle") || activeObject.isType("triangle")) {
    // 基础形状处理逻辑，可按需补充类型判断
  }
}

替换代码后即可正常触发选中回调，在控制台拿到选中对象的完整信息。

内容的提问来源于stack exchange，提问作者Carol.Kar