FabricJS：缩放和更改大小后将新对象置于画布中央

Question

我正在使用 FabricJS 1.7.9，当我加载画布时，它的初始大小为 216x216 像素，其中包含文本元素。当我插入宽度为 90px 的 SVG 对象时，我使用了一个函数，该函数允许我在画布中居中该对象：

function insert_svg(url) {
  fabric.loadSVGFromURL(url,function(objects, options){
    var obj = fabric.util.groupSVGElements(objects, options);
    obj.scaleToWidth(90).set({ 
      borderColor: '#eaeaea',
      cornerColor: '#eaeaea',
      cornerSize: 10,
      cornerStyle: 'circle',
      transparentCorners: false,
      lockUniScaling: true,
      id: newID,
      url_svg: url
    });

    canvas.centerObjectH(obj);
    canvas.centerObjectV(obj);

    canvas.add(obj).renderAll();
  });
}


insert_svg("https://myurl/img/objeto.svg");

示例：

如果我更改画布大小，我还会修改前一个对象的缩放比例以适应比例。例如，我要将画布尺寸更改为 320x320：

function canvas_size(setWidth,setHeight) {
   canvas.setHeight(parseInt(setHeight));
   canvas.setWidth(parseInt(setWidth));


   var sz = setWidth / 216;
   sz = parseFloat(sz);
   canvas.setZoom(sz);
   canvas.renderAll();
}

canvas_size(320,320);

结果：

当完成调整大小和缩放后，我想插入一个新的 svg 对象时，会出现问题，但它没有正确居中。我该如何解决它？

我尝试更改功能：

function insert_svg(url) {
  fabric.loadSVGFromURL(url,function(objects, options){
    var obj = fabric.util.groupSVGElements(objects, options);
    obj.scaleToWidth(90).set({ 
      borderColor: '#eaeaea',
      cornerColor: '#eaeaea',
      cornerSize: 10,
      cornerStyle: 'circle',
      transparentCorners: false,
      lockUniScaling: true,
      id: newID,
      url_svg: url
    });

     var targetWidth = 90;
     var scaleX = targetWidth / obj.width;
     var scaleY = targetWidth / obj.height;
     var scale = Math.min(scaleX, scaleY);
     obj.scale(scale);

     // Adjust
     var newWidth = parseInt(canvas.width); // new canvas width 
     var newHeight = parseInt(canvas.height); // new canvas height
     canvas.setWidth(newWidth);
     canvas.setHeight(newHeight);

     
     var centerX = canvas.width / 2;
     var centerY = canvas.height / 2;

     
     var leftOffset = (obj.width * obj.scaleX) / 2;
     var topOffset = (obj.height * obj.scaleY) / 2;
     var left = centerX - leftOffset;
     var top = centerY - topOffset;


     obj.set({ left: left, top: top });
     canvas.add(obj).renderAll();

     canvas.centerObjectH(obj);
     canvas.centerObjectV(obj);


  });
}

当我插入一个新的 SVG 对象时，我会得到这个：

我希望新的 SVG 对象像这样居中：

我该如何修复它？

我希望得到您的帮助。