JavaScript — Fabricjs: обновить SVG на холсте

Question

JavaScript — Fabricjs: обновить SVG на холсте

Я использую 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();
});
}

Мне нужно что-то подобное Пожалуйста помоги.

1

angularjs canvas fabricjs javascript php

Решение

По вопросам рекламы [email protected]

Accepted Answer

У вас уже есть переменная 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>

0

Другие решения

Других решений пока нет …

Источник