在 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) }
    });