javascript - 如何在 fabricjs 中设置 svg 的宽度和高度？

Question

我目前在 fabricjs 中设置 svg 对象的宽度和高度时遇到问题。我试过这样设置

   svg.width = 100;
   svg.height = 100;

但我没有得到预期的结果。它只是裁剪 svg 而不是缩放它。那么，如何正确设置它的宽度和高度呢？

任何帮助将不胜感激。谢谢!

Answer 1

使用scaleToWidth()和 scaleToHeight()分别正确设置 SVG 对象*的*宽度和高度的方法。

:-: 工作示例:-:

var canvas = new fabric.Canvas('fabric-canvas');
fabric.loadSVGFromURL('http://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153', function(objects, options) {
   var svg = fabric.util.groupSVGElements(objects, options);
   svg.left = 50;
   svg.top = 50;
   svg.scaleToWidth(100);
   svg.scaleToHeight(100);
   canvas.add(svg);
   canvas.renderAll();
});

canvas{border:1px solid #ccc}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.13/fabric.min.js"></script>
<canvas id="fabric-canvas" width="200" height="200"></canvas>