Группа с редактируемыми объектами?

Question

Есть ли способ иметь редактируемые объекты в fabric.Group, чтобы можно было перемещать один из объектов?

Answer 1

Примечание: Я не тестировал этот код самостоятельно.

Возможно, что-то вроде этой работы, по крайней мере, мы можем немного определить дочерние объекты.

var $canvas = {}; 
$canvas.activePaths = []; 

function onMouseDown = function (options) { 

    var mousePos = canvas.getPointer(options.e); 
    mousePos.x = parseInt(mousePos.x); 
    mousePos.y = parseInt(mousePos.y); 

    var width = canvas.getWidth(); 
    var height = canvas.getHeight(); 

    var pixels = canvas.getContext().getImageData(0, 0, width, height); 
    var pixel = (mousePos.x + mousePos.y * pixels.width) * 4; 

    var activePathsColor = new fabric['Color']('rgb(' + pixels.data[pixel] + ',' + pixels.data[pixel + 1] + ',' + pixels.data[pixel + 2] + ')'); 
    var colorHex = '#' + activePathsColor.toHex().toLowerCase(); 

    var activeObject = canvas.getActiveObject(); 
    var activePath = []; 

    if(activeObject.type == 'group') { 

      for (var i = 0; i < activeObject.getObjects().length; i++) { 
      var path = activeObject.getObjects()[i]; 
      if (path.getFill().toLowerCase() == colorHex) { 
       $canvas.activePaths.push(path); 
      } 
     } 

    } 

} 

function warpActiveObject() { 
    for(var i = 0; i < $canvas.activePaths.length; i++) { 
     canvas.add(
      new fabric.Rect({ 
       left: $canvas.getActiveObj().left + ($canvas.activePaths[i].left), 
       top: $canvas.getActiveObj().top + ($canvas.activePaths[i].top), 
       fill: '', 
       width: $canvas.activePaths[0].width, 
       height: $canvas.activePaths[0].height, 
       stroke: 'white', 
       opacity: 0.5 
      }) 
    ); 
    } 
}