在 Fabric.js 中區分單個 select 和多選事件

Question

我在 Fabric.js 中有以下事件處理邏輯。 我試圖區分單個 object 的選擇和多個對象的選擇（多選）。 我怎樣才能做到這一點？

代碼：

canvas.on({
    'selection:created': handleSelection,
    'selection:updated': handleSelection,
    'selection:cleared': handleSelection,
});

function handleSelection(obj) {
    if (obj.isMultiSelect()) {  // <- ATTENTION. How do I implement this?
        // Do something.
    } else if (obj.isSingleSelect()) {  // <- ATTENTION. How do I implement this?
        // Do another thing.
    }
}

我已經使用if (obj.updated && obj.deselected.length == 0)實現了if (obj.isMultiSelect()) ) ，但它看起來像一個 hack。 有沒有更好的辦法？

Answer 1

用 getActiveObjects() 方法解決

 var canvas = new fabric.Canvas("canvas"); function addCheckbox(left,top, width,height){ var imgClass = new fabric.Image.fromURL('https://image.flaticon.com/icons/svg/33/33281.svg', function(img){ img.width = width; img.height = height; img.left = left; img.top = top; img.on('mousedown', function(e) { if(e.target.opacity <= 0.5){ e.target.opacity = 1; }else{ e.target.opacity = 0.4; } canvas.renderAll(); }); canvas.add(img); canvas.renderAll(); }) } addCheckbox(0,0,100,100) addCheckbox(100,100,100,100) function isMultipleSelected(){ if(canvas.getActiveObjects().length>1){ return true; } return false; } function isSingleSelected(){ if(canvas.getActiveObjects().length== 1){ return true } return false } canvas.on({ 'selection:created': handleSelection, 'selection:updated': handleSelection, 'selection:cleared': handleSelection, }); function handleSelection(obj) { if (isMultipleSelected()) { // <- ATTENTION. How do I implement this? // Do something. console.log("Yes Multiple selected") } else if(isSingleSelected()) { // <- ATTENTION. How do I implement this? // Do another thing. console.log("Yes Single selected") }else { console.log("Nothing selected") } }

 body { background-color:silver; } canvas { border:1px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"> </script> <button onClick="isMultipleSelected()"> Check Selection </button> <canvas id="canvas" width=300 height=300></canvas><br>