在 canvas 中使用织物 js 进行多项选择的过滤器选择

Question

我正在做一个有桌子和椅子的项目。 每当我 select canvas 上的多个对象时，我希望表格从选择中过滤出来

我所做的是在 select:created 我过滤了选择并删除了事件侦听器我尝试再次添加它。 但它只是无限循环

也出于一些奇怪的原因，当我尝试旋转选择时它不会旋转

我还包括一个按钮，用于选择 canvas 内的所有对象

提前致谢！

这是事件列表

canvas.on({
        "selection:created": e => { createSelection(e) },
        "selection:cleared": e => { canvas.getObjects().filter(o=>{if(o.type=="table") o.selectable = true }) },
        "selection:updated": e => { updateSelection(e) }
    });

这是 function

function removeTableFromSelection(selection){
  let chairs = selection.getObjects().filter(function(o) {
    if (o.type != 'table' && o.type != 'line') {
      return true
    }
    o.selectable = false;
    maintainCenter(o)
    return false
  });
  return chairs
}
function createSelection(e){
    canvas.off("selection:created")
    console.trace('1')
    let selection = e.target;
    if (typeof selection.type !== 'undefined') {
        if( selection.type != "table")
        {
            if(selection.type == "chair"){
                if (typeof selection.extraProperty !== 'undefined') {
                    console.trace(selection.extraProperty);
                }
            }else{
                canvas.discardActiveObject()
                canvas.getObjects().filter(o => {
                    if (o.type == 'activeSelection' || o.type == 'ac') { canvas.remove(o);}
                    if (o.type == 'table') { o.selectable =false;}
                });
                var sel = new fabric.ActiveSelection(removeTableFromSelection(selection), {type:'ac'})
                    sel.setControlsVisibility({
                        tl: false,
                        mr: false,
                        ml: false,
                        mt: false,
                        mb: false,
                        bl: false,
                        br: false
                    })
                    canvas.remove(sel);
                canvas.setActiveObject(sel);
                canvas.renderAll();
            }
        }else{
            maintainCenter(e)
        }
    }
}
function updateSelection(e){
    console.trace('2')
    let selection = e.target;
    if (typeof selection.type !== 'undefined') {
        if( selection.type != "table")
        {
            if(selection.type == "chair"){
                if (typeof selection.extraProperty !== 'undefined') {
                    console.trace(selection.extraProperty);
                }
            }else{
                canvas.discardActiveObject();
                var sel = new fabric.ActiveSelection(removeTableFromSelection(selection), {type:'ac',centeredRotation: true})
                    sel.setControlsVisibility({
                        tl: false,
                        mr: false,
                        ml: false,
                        mt: false,
                        mb: false,
                        bl: false,
                        br: false
                    })
                    canvas.remove(sel);
                canvas.setActiveObject(sel);
                canvas.renderAll();
            }
        }else{
            maintainCenter(e)
        }
    }

}

这是小提琴

Answer 1

修复了它 将 function 事件绑定从 selection:created 更改为 mouse:up 并且它按预期工作

这是更新的小提琴

canvas.on({
        "selection:created": e => { createSelection(e) },
        "selection:cleared": e => { canvas.getObjects().filter(o=>{if(o.type=="table") o.selectable = true }) },
        "selection:updated": e => { updateSelection(e) }
    });

至

  canvas.on({
        "mouse:up": e => { createSelection(e) },
        "selection:cleared": e => { canvas.getObjects().filter(o=>{if(o.type=="table") o.selectable = true }) },
        "selection:updated": e => { updateSelection(e) }
    });