В FabricJS, как я могу идентифицировать через набор объектов, которые перекрываются в координатах, где щелкают мыши? - PullRequest
Новая
       8

В FabricJS, как я могу идентифицировать через набор объектов, которые перекрываются в координатах, где щелкают мыши?

0 голосов
/ 07 января 2019

Мне нужно иметь возможность перебирать набор объектов, которые перекрывают друг друга в координатах, где щелкает мышь. В качестве продолжения, я бы использовал takeToFront, а затем отобразил бы хорошее меню, основанное на этом объекте, но я не уверен, как даже определить и выполнить итерацию на множестве объектов.

1 Ответ

0 голосов
/ 09 января 2019

Моя конкретная потребность состояла в том, чтобы перебирать набор перекрывающихся объектов, нажимая клавишу табуляции, чтобы установить активный объект / группу. Вот что я сделал: 

var stackArray = new Array();

canvas.on('mouse:down', function(e){
    var subobj = canvas.getObjects();
    stackArray = [];
    for (var i=0;i<subobj.length;i++) {
        if (subobj[i].id != '' && typeof(subobj[i].id) != 'undefined' && subobj[i].id != 'navpanel' && subobj[i].id != 'header') {

            if (e.target!=null && typeof(e.target.id) != 'undefined') {
                if (subobj[i].intersectsWithObject(canvas.getActiveObject()) && subobj[i].id != e.target.id) {
                    stackArray.push(subobj[i]);
                } else if (subobj[i].id == e.target.id) {
                    stackArray.push(subobj[i]);
                }
            }
        }
    }
});

...

e.preventDefault();
switch(e.keyCode){
    case 9: // tab
        if (stackArray.length > 1) {
            fillObj(canvas.getActiveObject(),'inactive');
            canvas.getActiveObject().sendToBack();

            canvas.setActiveObject(stackArray[stackArray.length-1]);
            fillObj(canvas.getActiveObject(),'active');

            stackArray.splice(0, 0, stackArray.splice(stackArray.length-1,1)[0]);
        }
        break;
}

function fillObj(obj,mode) {
    if (obj.type == 'group') {
        obj = obj.item(0);
    }

    if (mode == 'active') {
        obj.set('fill', 'red');
        obj.set('strokeWidth', 1);
        obj.set('shadow','rgba(0,0,0,0.5) 5px 5px 15px');
    } else if (mode == 'inactive') {
        obj.set('fill', '#333');
        obj.set('strokeWidth', 0);
        obj.set('shadow','');    
    }
}
...