Javascript 使用可编辑对象分组？

是否有一种方法可以在

结构.组中包含可编辑对象，以便可以移动其中一个对象？
注意：我没有单独测试此代码

像这样的东西可能是一个解决办法，至少我们可以稍微检测到子对象

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

var$canvas={}；
$canvas.activepath=[]；
函数onMouseDown=函数（选项）{
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，宽度，高度）；
var pixel=（mousePos.x+mousePos.y*像素.宽度）*4；
var activePathsColor=newfabric['Color']（'rgb（'+像素.数据[pixel]+'，'+像素.数据[pixel+1]+'，'+像素.数据[pixel+2]+'）；
var colorHex='#'+activePathsColor.toHex（）.toLowerCase（）；
var activeObject=canvas.getActiveObject（）；
var-activePath=[]；
如果（activeObject.type=='group'）{
对于（var i=0；i
您应该能够将对象从组中解组。然后您就可以独立地修改它了。@kangax好吧，这样就行了。也许让我描述一下我的目标：一个“可编辑多边形对象”…因此您可以修改组（多边形）的单个点，但如果您在其中心单击，则可以修改孔组。目前，我基于fabric.Group构建了一个新对象，但我没有找到从子对象获取“单击”事件的方法…我明白了。。。不幸的是，还没有办法点击子对象。好的，非常感谢！顺便说一下：fabrics.js真是太棒了。伟大的代码！也许它可以在对象事件和子对象上变得近乎完美。一点来自动作脚本3世界的精灵和电影嘴唇，你知道吗？：-）保持出色@kangax此功能是否在fabric的最新版本（当前为1.2.10）中实现？即，现在是否可以单击组内的子对象并独立编辑它们，而无需解组？对于同一示例，您是否可以共享小提琴？