fabricJS - 選擇多個對象克隆對象到另一個畫布出錯

Question

我有兩個畫布層，彼此堆疊。名爲top的頂層和名爲bottom的底層。在top層上，我添加了一些對象，它們是transparent，並且只顯示它們的手柄。 bottom層應爲clone來自top的對象，更改一些屬性並繪製它們。

只要我只在top圖層上移動單個對象，這就可以工作。當我選擇一個對象的group並開始移動整個組時，有些事情會中斷。在top圖層上一切正常，但bottom圖層上的對象被繪製到畫布的左上角。只有當我再次拖動單個對象時纔會更正此問題。

我希望有人能來看看，可能有一個想法什麼錯:)

---

jsFiddle

var top = new fabric.Canvas("top", {renderOnAddRemove:false}); 
var bottom = new fabric.Canvas("bottom", {renderOnAddRemove:false}); 

var update = function() { 
    bottom.clear().add.apply(bottom, top.getObjects().map(function (o) { 
    return o.clone().set({ 
     selectable: false, 
     hasBorders: false, 
     hasControls: false, 
     fill: "rgba(255,0,0,.5)", 
     globalCompositeOperation: "xor" 
    }); 
    })).renderAll(); 
}; 

top.on({ 
    "object:modified": update 
}); 

Answer 1

組在面料是棘手，因爲所有的變換（「頂」 ，'左'，'scaleX'，'scaleY'）是相對於父組的位置而言的，這些位置都是相對於組中心的。所以當你想提取頂層畫布位置時，你需要做一些工作來從組中進行變換並將其應用到對象。在織物內部，這發生在你分組和取消組合的情況下。

在這個例子中，我讓所有對象都具有與作爲中心的組的默認原點相同的X和Y原點。這使矩陣計算相匹配。如果要保留形狀的默認頂部/左側原點，則需要執行額外的數學運算來計算正確的位置。

var topCanvas = new fabric.Canvas("top", {renderOnAddRemove:false}); 
 
var bottomCanvas = new fabric.Canvas("bottom", {renderOnAddRemove:false}); 
 

 
fabric.Object.prototype.originX = 'center'; 
 
fabric.Object.prototype.originY = 'center'; 
 

 
var update = function() { 
 
    bottomCanvas.clear().add.apply(bottomCanvas, topCanvas.getObjects().map(function (o) { 
 
    var clone = o.clone(); 
 
    clone.set({ 
 
     selectable: false, 
 
     hasBorders: false, 
 
     hasControls: false, 
 
     fill: "rgba(255,0,0,.5)", 
 
     globalCompositeOperation: "xor", 
 
    }); 
 

 
    if (o.group) { 
 
     var matrix = o.calcTransformMatrix(); 
 
     var transforms = fabric.util.qrDecompose(matrix); 
 
     clone.set({ 
 
     angle: transforms.angle, 
 
     skewX: transforms.skewX, 
 
     skewY: transforms.skewY, 
 
     scaleX: transforms.scaleX, 
 
     scaleY: transforms.scaleY, 
 
     top: transforms.translateY, 
 
     left: transforms.translateX, 
 
     }); 
 
    } 
 
    return clone; 
 
    })).renderAll(); 
 
}; 
 

 
topCanvas.on({ 
 
    "object:modified": update 
 
}); 
 

 
topCanvas 
 
    .add(new fabric.Rect({ 
 
    top: 50, 
 
    left: 50, 
 
    width: 100, 
 
    height: 100, 
 
    fill: "transparent" 
 
    })) 
 
    .add(new fabric.Rect({ 
 
    top: 100, 
 
    left: 100, 
 
    width: 100, 
 
    height: 100, 
 
    fill: "transparent" 
 
    })) 
 
    .add(new fabric.Rect({ 
 
    top: 150, 
 
    left: 150, 
 
    width: 100, 
 
    height: 100, 
 
    fill: "transparent" 
 
    })) 
 
    .renderAll(); 
 

 
update();

#cont { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 300px; 
 
    border: 1px solid; 
 
} 
 

 
canvas, .canvas-container { 
 
    position: absolute!important; 
 
    left: 0!important; 
 
    top: 0!important; 
 
    width: 100%!important; 
 
    height: 100%!important; 
 
}

<div id="cont"> 
 
    <canvas id="bottom" width="400" height="300"></canvas> 
 
    <canvas id="top" width="400" height="300"></canvas> 
 
</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script>