如何在Fabric.js中將與另一個對象相同的位置和縮放比例應用於一個對象？

Question

我有一個從SVG標簽加載的Fabric組。 SVG內容更改時，我想相應地更改Fabric組。 可悲的是，如果我只是從Fabric組中刪除所有內容並向后推SVG內容，它將重置組的位置，縮放和轉換。

我在那里有什么選擇？

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script> <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script> <button id="change">Change barcode</button> <div id="divBarcode"> <svg id="svgBarcode"></svg> </div> <canvas id="fabric" width="500px" height="500px" style="border: 1px solid #000;"> <script> let canvas = new fabric.Canvas("fabric"); let barcode = undefined; // Creates a barcode JsBarcode("#svgBarcode", "Example 1234", { background: null, format: "CODE128" }); // Removes the font style because fabric has parse errors $("#svgBarcode text").attr("style", ""); // Adds the barcode in fabric fabric.loadSVGFromString($("#divBarcode").html(), (objects, options) => { barcode = new fabric.util.groupSVGElements(objects, options); canvas.add(barcode); canvas.requestRenderAll(); }); $("#change").click(e => { // We generate a new svg barcode JsBarcode("#svgBarcode", "New one", { background: null, format: "CODE128" }); $("#svgBarcode text").attr("style", ""); // Now here is the tricky part, I need to change it in fabric too fabric.loadSVGFromString($("#divBarcode").html(), (objects, options) => { barcode.getObjects().forEach(obj => barcode.remove(obj)); objects.forEach(obj => barcode.addWithUpdate(obj)); canvas.requestRenderAll(); // But it resets the position and scaling }); }); </script> 

Answer 1

您需要這樣的想法嗎？

 let canvas = new fabric.Canvas("fabric"); let barcode = undefined; // Creates a barcode JsBarcode("#svgBarcode", "Example 1234", { background: null, format: "CODE128" }); // Removes the font style because fabric has parse errors $("#svgBarcode text").attr("style", ""); // Adds the barcode in fabric fabric.loadSVGFromString($("#divBarcode").html(), (objects, options) => { barcode = new fabric.util.groupSVGElements(objects, options); canvas.add(barcode); canvas.requestRenderAll(); }); $("#change").click(e => { // We generate a new svg barcode JsBarcode("#svgBarcode", "New one", { background: null, format: "CODE128" }); $("#svgBarcode text").attr("style", ""); var originalTransfomation = { left:canvas.getObjects()[0].left, top:canvas.getObjects()[0].top, width:canvas.getObjects()[0].width, height:canvas.getObjects()[0].height, skewY:canvas.getObjects()[0].skewY, skewX:canvas.getObjects()[0].skewX, scaleX:canvas.getObjects()[0].scaleX, scaleY:canvas.getObjects()[0].scaleY, angle:canvas.getObjects()[0].angle } // Now here is the tricky part, I need to change it in fabric too fabric.loadSVGFromString($("#divBarcode").html(), (objects, options) => { barcode.getObjects().forEach(obj => barcode.remove(obj)); objects.forEach(obj => barcode.addWithUpdate(obj)); barcode.left = originalTransfomation.left; barcode.top = originalTransfomation.top; barcode.width = originalTransfomation.width; barcode.height = originalTransfomation.height; barcode.scaleY = originalTransfomation.scaleY; barcode.scaleX = originalTransfomation.scaleX; barcode.angle = originalTransfomation.angle; barcode.skewX= originalTransfomation.skewX; barcode.skewY= originalTransfomation.skewY; barcode.setCoords(); canvas.requestRenderAll(); // But it resets the position and scaling }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script> <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script> <button id="change">Change barcode</button> <div id="divBarcode"> <svg id="svgBarcode"></svg> </div> <canvas id="fabric" width="500px" height="500px" style="border: 1px solid #000;">