Fabric.js создает образ из-за ошибки SVG-элемента - PullRequest
Новая
       23

Fabric.js создает образ из-за ошибки SVG-элемента

0 голосов
/ 12 ноября 2018

Fabric docs предполагают, что возможно создать изображение из SVG-элемента, используя fabric.Image.fromElement(element, optionsopt, callback) → {fabric.Image}

. Кажется, я сталкиваюсь с TypeError: t.getAttribute is not a function при попытке его протестировать.

Есть идеи, что я могу делать не так?Возможно, этот метод не делает то, что я думаю?

Пример кода: 

fetch('https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/tiger.svg')
  .then((response) => response.text())
  .then((svg) => {
    fabric.Image.fromElement(svg, (image) => {
      console.log('image: ', image);
    });
  })
  .catch(function(error) {
    console.log(error);
  });

В ручке: https://codepen.io/sheepgobeep/pen/GwNOeE

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

FromElement не является публичным методом.Это не ясно, и я исправлю документы.

FromElement вызывается из анализатора svg, но вы можете использовать его только для всего SVG, и затем вы можете отказаться от того, что вам не нужно.

В случае с tiger.svg вы получаете набор форм и линий, которые не имеют смысла, если не обрабатывать их в группе.

Вы можете использовать 

fabric.loadSVGFromString: function(string, callback, reviver, options)

и внутри обратного вызова: 

callback(objects, options) {
  var group =  fabric.groupSVGElements(objects, options);
}

Или вы можете использовать fromImage, как предложено в другом ответе.Разница в том, что изображение похоже на jpeg, который может масштабироваться лучше при увеличении, в то время как группа медленнее рендерится, но дает вам доступ к каждой части SVG (что может быть бесполезно, если вам не нужно ничего менять)

0 голосов
/ 13 ноября 2018

Хотя это не очевидно из документации fabric.js, если вы хотите создать изображение из SVG URL , вам на самом деле следует использовать fabric.Image.fromURL().Попробуйте это: 

const canvas = new fabric.Canvas("c")

const callback = (image) => {
  canvas.add(image).renderAll()
}

fabric.Image.fromURL('https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/tiger.svg', callback, {
  width: 900,
  height: 900,
  scaleX: 0.2,
  scaleY: 0.2
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<canvas id='c' width="500" height="400"></canvas>

Также обратите внимание, что вы используете старую версию библиотеки (1.7.22), когда смотрите на обновленную версию документации (v2 +)

...