代码之家 › 专栏 › 技术社区 › supersan

如何使用Fabricjs显示完整的SVG?

fabricjs html5-canvas svg javascript

supersan · 技术社区 · 7 年前

FabricJs的第一次用户和我正试图使用FabricJs加载这些SVG文件,如他们的示例所示

var canvas = new fabric.Canvas('c');

var img = fabric.Image.fromURL('http://instathumbs.com.s3.amazonaws.com/assets/items/Image/Graphics/blueprint.svg?1', function(item) {
  canvas.add(item);
  canvas.renderAll();
}, {crossOrigin: "anonymous"});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.1/fabric.js"></script>

<div>
  Original Image:
  <img src="http://instathumbs.com.s3.amazonaws.com/assets/items/Image/Graphics/blueprint.svg" width="150" height="150" />
</div>

<div style="background: red">
  Canvas:
  <canvas id="c" width="500" height="500"></canvas>
</div>

如果运行代码段,您将看到仅加载图像的顶部,而不是整个SVG。我试着用另一种方法来做这件事,在那里我创建了一个 new Image() 然后使用 new Fabric.Image(img.. 有相同的结果?

我的问题是如何在大小调整器中显示整个图像? 这是FabricJS中的错误还是我做错了什么。

我用了几十种不同的SVG进行了尝试,一直都是这样。

1 回复 | 直到 7 年前

Durga 7 年前

var canvas = new fabric.Canvas('c');
var site_url =  'https://instathumbs.com.s3.amazonaws.com/assets/items/Image/Graphics/blueprint.svg?1';
fabric.loadSVGFromURL(site_url, function(objects, options) {
    
    var obj = fabric.util.groupSVGElements(objects, options);
    obj.set({
     left:50,top:50,scaleX:4,scaleY:4
    })
    canvas.add(obj).renderAll();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.1/fabric.js"></script>

<div>
  Original Image:
  <img src="http://instathumbs.com.s3.amazonaws.com/assets/items/Image/Graphics/blueprint.svg" width="150" height="150" />
</div>

<div style="background: red">
  Canvas:
  <canvas id="c" width="500" height="500"></canvas>
</div>

你需要使用 loadSVGFromURL