与可编辑对象分组？答案

【问题标题】：Group with editable Objects?与可编辑对象分组？
【发布时间】：2012-06-26 04:47:55
【问题描述】：

有没有办法让fabric.Group 中有可编辑的对象，以便可以移动其中一个对象？

【问题讨论】：

您应该能够从组中取消组合对象。然后您就可以独立修改它了。
@kangax 好吧，那行得通。也许让我描述一下我的目标：一个“可编辑的多边形对象”……所以你可以修改组（多边形）的单点，但是如果你点击它的中心，你可以修改孔组。目前，我基于 fabric.Group 构建了一个新对象，但我没有找到从子对象获取“点击”事件的方法……
我明白了...不幸的是，还没有办法点击子对象。
好的，非常感谢！顺便说一句：fabrics.js 真的很棒。很棒的代码！也许它可以通过对象事件和子对象变得接近完美。来自actionscript 3世界的一些精灵和movieClips，你知道吗？ :-) 保持真棒！
@kangax 是在 Fabric 的最新版本（当前为 1.2.10）中实现的此功能 - 即现在是否可以单击组内的子对象并在不取消分组的情况下独立编辑它们？

【解决方案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 
            })
    );
    }
}

【讨论】：

你能分享一下同一个例子的小提琴吗？