Fabricjs：在画布上更新 SVG

Posted 2023-03-25

【中文标题】Fabricjs：在画布上更新 SVG

【英文标题】：Fabricjs: Update SVG on the canvas

【发布时间】：2019-01-20 22:23:35

【问题描述】：

我使用的是 fabricjs 1.6.4，我想用新的 svg 更新现有的 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。我在图像中做了一些与此相关的事情，但我无法在 SVG 中复制。图片代码如下：

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

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

【问题讨论】：

获取现有 svg 对象的索引，然后使用 insertAt(object,index) 替换为相同的索引。

【参考方案1】：

您已经拥有变量 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"  ></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.min.js"></script>

【讨论】：

所以，您正在删除旧图像并添加新图像

@Ashish 正确，你还有别的想法吗？

我也有同样的想法，但如果可能的话，我一直在寻找更好的解决方案......我对图像做了同样的事情，但没有删除之前的图像，但我无法用SVG。如果你愿意，我也可以粘贴该图像代码

我已经编辑了我的问题。在图像中，我刚刚用新属性替换了 element.src 属性，它工作正常。我一直在寻找这样的东西。