Question

我对那些有类似问题的人进行了大量搜索，尽管有一些问题非常接近，但我仍然找不到问题本身的答案。

我一直在阅读并尝试使用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();
});

http://codepen.io/arthurgouveia/pen/nDJaK

除此之外，我不确定为什么一旦点击Path就会显示边界框。我可能会忘记某些事情或做错事。

如果有人会帮助我，或者只是带我走正确的路径来旋转小组而不是每个路径，那就太棒了。

提前多多感谢。

ps：如果您想看看我尝试使用Group方法，请告诉我。

Answer 1

我已尝试根据您的代码执行此操作http://codepen.io/anon/pen/hyCdD，并使用http://fabricjs.com/docs/fabric.Group.html，但不知道您的目的是否合适。如果您想访问群组中的项目，请尝试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;

});

检测组内路径上的事件

1 个答案: