Fabricjs：在画布上更新SVG

Question

我正在使用fabricjs 1.6.4，我想用新的更新现有的svg。 我正在使用以下代码添加新的SVG：

fabric.loadSVGFromURL(url, function (objects, options) {
          var image = fabric.util.groupSVGElements(objects, options);
          image.name = 'sticker';
          canvas.add(image);
          image.scaleToHeight(100);
          image.center();
          image['selectable'] = false;
          image['evented'] = false;
          image.setCoords();
          canvas.renderAll();
        });
      }

如何用新的替换现有的SVG。 我已经在映像中完成了与此相关的操作，但是无法在SVG中复制。 这是图像的代码：

$scope.fillImage = function(src) {
    fabric.Image.fromURL(src, function(img) {
        var object = canvas.getActiveObject();
        object._element.src = src;
        canvas.renderAll();
    });
}

我需要这样的东西。 请帮忙。

Answer 1

您已经有了可变image只是使其成为全局image ，可以在添加之前将其删除...
这是一个例子：

 var image; var canvas = new fabric.Canvas('canvas'); var url = "http://swagger-net-test.azurewebsites.net/api/SvgImage?" function callback(objects, options) { if (image) canvas.remove(image); image = fabric.util.groupSVGElements(objects, options); image.name = 'sticker'; canvas.add(image); image.scaleToHeight(60); image.center(); image.setCoords(); canvas.renderAll(); } fabric.loadSVGFromURL(url + "color=red", callback) setTimeout( function() { fabric.loadSVGFromURL(url + "color=blue", callback) }, 3000 ); 

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