Javascript 检测组内路径上的事件

我对有类似问题的人进行了广泛的搜索，尽管有几个人非常接近，但我仍然找不到问题本身的答案

我一直在阅读和尝试fabric.js文档中的不同内容，但没有成功

我要做的是创建6条路径，将它们插入一个数组，然后用这个数组创建一个组

问题是，我希望这6条路径根据单击的路径旋转一定程度的角度，并且我成功地对每一条路径进行了旋转。 但是我猜如果我能够一次旋转整个组，性能会更好，所以我尝试根据单击组内的路径旋转组，但没有成功

以下是单独旋转的代码：

var spaceCanvas = new fabric.Canvas('spaces-canvas'),
    color = [
        '#01a4a4',
        '#7462ae',
        '#980064',
        '#d70051',
        '#e54028',
        '#e2b313'
    ],
    multiplier = 0,
    spaces = [];

for (var i = 0; i < 6; i++) {

    var space = new fabric.Path(
        'M 0 0' +
        ' l 0 -309' +
        ' l 0 309' +
        ' l 309 -178' +
        ' l -309 -178 Z'
    );

    space.multiplier = multiplier++;
    space.active = i === 1;

    space.set({
        angle: -60 + (i * 60),
        left: 309,
        top: 309,
        fill: color[i],
        opacity: 0.5,
        perPixelTargetFind: true,
        selectable: false
    });

    spaces.push(space);

    spaceCanvas.add(space);

}

spaceCanvas.on('mouse:down', function(options) {

    if (options.target.type !== 'path' || options.target.active === true) {
        return;
    }

    for (var i = 0; i < spaces.length; i++) {
        spaces[i].active = false;
        spaces[i].animate(
            'angle',
            ((spaces[i].multiplier - options.target.multiplier) - 1) * 60,
            {
                onChange: spaceCanvas.renderAll.bind(spaceCanvas)
            }
        );
    }

    options.target.active = true;

    spaceCanvas.renderAll();
});

var spaceCanvas=new fabric.Canvas（'spaces-Canvas'），
颜色=[
“#01a4a4”，
"7462ae",，
'#980064',
"d70051",，
"e54028",，
“#e2b313”
],
乘数=0，
空格=[]；
对于（变量i=0；i<6；i++）{
var space=new fabric.Path(
“我0”+
“L0-309”+
“L0309”+
“l 309-178”+
“l-309-178 Z”
);
space.multiplier=multiplier++；
space.active=i==1；
space.set({
角度：-60+（i*60），
左：309，
top:309，
填充：颜色[i]，
不透明度：0.5，
perPixelTargetFind：对，
可选：false
});
空格。推（空格）；
spaceCanvas.add（空格）；
}
spaceCanvas.on（'mouse:down'，函数（选项）{
if（options.target.type！='path'| | options.target.active===true）{
返回；
}
for（var i=0；i

除此之外，我不确定为什么单击路径后会显示边界框。我可能忘记了什么或者做错了什么

如果有人愿意帮助我，或者只是引导我走上正确的道路来轮换团队，而不是每一条道路，那将是非常棒的

先谢谢你

注：请告诉我您是否想看看我用小组方法做了什么。

我根据您的代码尝试过这样做，我使用了，不知道是否适合您的目的。如果要访问组中的项目，请尝试

wheel.item（0）…

var spaceCanvas = new fabric.Canvas('spaces-canvas'),
    color = [
        '#01a4a4',
        '#7462ae',
        '#980064',
        '#d70051',
        '#e54028',
        '#e2b313'
    ],
    multiplier = 0,
    spaces = [];

for (var i = 0; i < 6; i++) {

    var space = new fabric.Path(
        'M 0 0' +
        ' l 0 -309' +
        ' l 0 309' +
        ' l 309 -178' +
        ' l -309 -178 Z'
    );

    space.multiplier = multiplier++;
    space.active = i === 1;

    space.set({
        angle: -60 + (i * 60),
        left: 309,
        top: 309,
        fill: color[i],
        opacity: 0.5,
        perPixelTargetFind: true,
        selectable: false,
        hasControls: false,
        hasBorders: false
    });

    spaces.push(space);


}

var wheel = new fabric.Group (spaces, {      
    left : 300,
    top: 200,
    originX: "center",
    originY: "center",
});

wheel.hasControls = false;
wheel.hasBorders = false;

spaceCanvas.add(wheel);
spaceCanvas.renderAll();

spaceCanvas.on('mouse:down', function(options) {

    if (options.target.type !== 'path' || options.target.active === true) 
    {
        //return;
    }

    wheel.animate(
      'angle', 
      wheel.angle + 60, 
      {
        onChange: spaceCanvas.renderAll.bind(spaceCanvas)
    });

    return;

});

var spaceCanvas=new fabric.Canvas（'spaces-Canvas'），
颜色=[
“#01a4a4”，
"7462ae",，
'#980064',
"d70051",，
"e54028",，
“#e2b313”
],
乘数=0，
空格=[]；
对于（变量i=0；i<6；i++）{
var space=new fabric.Path(
“我0”+
“L0-309”+
“L0309”+
“l 309-178”+
“l-309-178 Z”
);
space.multiplier=multiplier++；
space.active=i==1；
space.set({
角度：-60+（i*60），
左：309，
top:309，
填充：颜色[i]，
不透明度：0.5，
perPixelTargetFind：对，
可选：false，
哈斯：错，
hasBorders:错误
});
空格。推（空格）；
}
var wheel=newfabric.Group（空格，{
左:300,，
前200名，
原文：“中心”，
原创：“中心”，
});
wheel.hasControls=假；
wheel.hasBorders=false；
spaceCanvas.add（轮子）；
spaceCanvas.renderAll（）；
spaceCanvas.on（'mouse:down'，函数（选项）{
if（options.target.type！='path'| | options.target.active===true）
{
//返回；
}
轮子。动画(
"角度",，
车轮转角+60，
{
onChange:spaceCanvas.renderAll.bind（spaceCanvas）
});
返回；
});

FYI，通过在路径上设置hasControls:false、hasBorders:false，我了解了如何禁用边界框。仍然不知道如何旋转组，而不是单独旋转每条路径。刚用IE8在虚拟机上测试过，它会导致延迟，使旋转路径相互交叉。你能展示一下你用组方法尝试过什么吗？