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

Fabricjs:在画布上更新SVG

fabricjs canvas angularjs php javascript

Ashish · 技术社区 · 7 年前

我使用的是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();
    });
}

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

1 回复 | 直到 7 年前

Helder Sepulveda 7 年前

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>

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

4 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

4 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

4 年前

jieunbi · 按日期排序数组(最新优先)

4 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

4 年前

Stradosphere · 如何防止ng bind html添加结束标记?

8 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

8 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

8 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

8 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

8 年前