FabricJS 캔버스의 모든 오브젝트를 활성 상태이지만 그룹으로 만들려면 어떻게합니까?

버튼을 클릭 할 때마다 캔버스의 모든 객체가 선택되어 그룹으로 묶여서 모두 함께 조작됩니다. 나는 필요한 방식으로 거의 그룹화 및 그룹 해제하는 좋은 예를 발견했다. 그러나 캔버스의 모든 오브젝트를 그룹화/그룹 해제 할 때 사용자가 원하는 오브젝트를 선택해야한다.FabricJS 캔버스의 모든 오브젝트를 활성 상태이지만 그룹으로 만들려면 어떻게합니까?

내가 수정 된 것을 발견 예 : http://jsfiddle.net/softvar/NuE78/1/이

내 수정 예 : http://jsfiddle.net/NuE78/68/ 여기

var canvas = new fabric.Canvas('paper', { 
    isDrawingMode: true 
}); 
$("#select").click(function() { 
    canvas.isDrawingMode = false; 
}); 
$("#draw").click(function() { 
    canvas.isDrawingMode = true; 
}); 
$("#group").on('click', function() { 
    var group = new fabric.Group(); 

    for(var i = 0; i < canvas.getObjects().length; i++) { 
    group.addWithUpdate(canvas.getObjects()[i]); 
    } 
    canvas.setActiveGroup(group); 
    canvas.renderAll(); 
    var activegroup = canvas.getActiveGroup(); 
    activegroup.clone(function(newgroup) { 
    canvas.discardActiveGroup(); 
    canvas.getObjects().forEach(function(object) { 
     canvas.remove(object); 
    }); 
    canvas.add(newgroup); 

    }); 
}); 

$("#ungroup").click(function() { 
    var obj = canvas.getObjects()[0]; 
    if (obj.type == "group") { 
    var items = obj._objects; 
    obj._restoreObjectsState(); 
    canvas.remove(obj); 
    for (var i = 0; i < items.length; i++) { 
     canvas.add(items[i]); 
     canvas.item(canvas.size() - 1).hasControls = true; 
    } 
    canvas.renderAll(); 
    } 
});

출처

2017-04-20 Schwarz

요 u는 이미 그것을 알아 냈는가 또는 당신은 아직도 해결책을 필요로 하는가? –

@ moáois 아직받지 못했습니다. 나는 위에 제공 한 것 이외에도 여러 가지 다른 것들을 시도했다. – Schwarz

입니다 당신이 그것을 달성 할 수있는 방법을 ...

var canvas = new fabric.Canvas('paper', { 
 
    isDrawingMode: true 
 
}); 
 
$("#draw").click(function() { 
 
    canvas.isDrawingMode = true; 
 
}); 
 
$("#group").on('click', function() { 
 
    canvas.isDrawingMode = false; 
 
    selectAllObjects(); 
 
    var activegroup = canvas.getActiveGroup(); 
 
    var objectsInGroup = activegroup.getObjects(); 
 
    activegroup.clone(function(newgroup) { 
 
     canvas.discardActiveGroup(); 
 
     objectsInGroup.forEach(function(object) { 
 
      canvas.remove(object); 
 
     }); 
 
     canvas.add(newgroup); 
 
    }); 
 
}); 
 
$("#ungroup").click(function() { 
 
    var activeObject = canvas.getActiveObject(); 
 
    if (activeObject.type == "group") { 
 
     var items = activeObject._objects; 
 
     activeObject._restoreObjectsState(); 
 
     canvas.remove(activeObject); 
 
     for (var i = 0; i < items.length; i++) { 
 
      canvas.add(items[i]); 
 
      canvas.item(canvas.size() - 1).hasControls = true; 
 
     } 
 
     canvas.renderAll(); 
 
    } 
 
}); 
 

 
function selectAllObjects() { 
 
    var objs = canvas.getObjects().map(function(o) { 
 
     return o.set('active', true); 
 
    }); 
 
    var group = new fabric.Group(objs, { 
 
     originX: 'center', 
 
     originY: 'center' 
 
    }); 
 
    canvas._activeObject = null; 
 
    canvas.setActiveGroup(group.setCoords()).renderAll(); 
 
}

body { 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 
canvas { 
 
    border:1px solid grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script> 
 
<canvas id="paper" width="635" height="198"></canvas> 
 
<button id="draw">Drawing mode</button> 
 
<button id="group">Group</button> 
 
<button id="ungroup">Ungroup</button>

출처

2017-04-20 20:00:24

FabricJS 캔버스의 모든 오브젝트를 활성 상태이지만 그룹으로 만들려면 어떻게합니까?

답변

관련 문제