切记 一档要设置 group 的subTargetCheck 属性为true

代码如下

<template><div class="page"><canvas id="canvas" width="400" height="400"></canvas></div></template><script>
import * as THREE from "three";
import CubeComponent from "./test.vue";export default {components: {CubeComponent},mounted() {this.init();},data() {return {current: 1};},methods: {init() {// 创建一个Canvas对象var canvas = new fabric.Canvas("canvas");// 创建两个Fabric对象var rect = new fabric.Rect({width: 100,height: 100,fill: "red",left: 50,top: 50});var circle = new fabric.Circle({radius: 50,fill: "blue",left: 150,top: 150});// 将这两个对象添加到一个Group对象中var group = new fabric.Group();group.subTargetCheck = true// 将Group对象添加到Canvas中canvas.add(group);// 将元素添加到 Group 中group.addWithUpdate(rect);group.addWithUpdate(circle);// 遍历 Group 中的所有元素，并绑定事件group.forEachObject(function(obj) {console.log(obj);obj.on("mousedown", function() {console.log("点击了 Group 中的元素",obj);});});}}
};
</script>
<style lang="scss" scoped>
.page {width: 100%;height: 100%;
}
</style>