Десериализация SVG на холст с помощью FabricJS

В приведенном выше заголовке есть триважных слова, давайте разберем их по одному:

1. Десериализация. Когда мы извлекаем структуру данных из последовательности байтов, этот процесс называется десериализацией. Другими словами, формат более низкого уровня преобразуется в удобочитаемый объект.
2. SVG — это язык, основанный на XML, который описывает 2D-векторы в Интернете. Он означает Масштабируемая векторная графика и используется для создания интерактивных документов, динамических изменений и некоторых действительно крутых анимаций.
3. Холст. Холст HTML5 позволяет нам рисовать, добавлять, анимировать, масштабировать или манипулировать объектами.

Читайте: Сериализация

Предложение: Как создать Canvas с помощью FabricJS

Цель: загрузка файла SVG в Canvas с помощью FabricJS.

Мы можем загрузить файл SVG на холст, используя два метода. Они есть:-

1. fabric.loadSVGFromURL — нам нужно передать URL файла SVG или дизайн, который мы хотим использовать в качестве первого аргумента.
2. fabric.loadSVGFromString — загружает файл svg из строкового представления.

Оба они являются статическими методами, которые вызываются для объекта ткани, а не для экземпляра холста.

Я использовал этот сайт для загрузки бесплатных файлов svg.

Как загрузить SVG из строки

Шаг 1. Загрузите файл вырезки SVG и разархивируйте его.

Шаг 2. Скопируйте файл .svg в папку, в которой находится файл index.html.

Шаг 3. Как только вы откроете файл .svg в VS Code, вы увидите содержимое SVG, начинающееся с контейнера элементов ‹svg›.

Шаг 4. Скопируйте все это и вставьте в свой файл index.html следующим образом:

Шаг 5. В теге ‹style› файла svg задайте display: none.

Шаг 6. Получите элемент svg с помощью getElementByTagName и сериализуйте его в строку с помощью метода serializeToString().

• По сути, мы преобразовываем элемент svg HTML в формат String, поскольку fabric.loadSVGFromString принимает только строковое представление.

Шаг 7. Создайте экземпляр холста и используйте метод loadSVGFromString() для отображения файла svg на холсте. Этот метод принимает функцию во втором параметре. Поэтому мы можем изменить свойства svg, такие как масштабирование, вращение, изменение его верхнего или левого значения и т. д.

• Вот файл JS для лучшего понимания:

      var svgElement = document.body.getElementsByTagName("svg")[0];

      // The XMLSerializer interface provides serializeToString() method
      var serializer = new XMLSerializer();

      // Serializing the svg element and return that as a String
      var svgString = serializer.serializeToString(svgElement);

      // Creating the Canvas instance
      var canvas = new fabric.Canvas("canvas", {
        backgroundColor: "#fe5a1d",
        isDrawingMode: false,
        freeDrawingCursor: "default",
      });

      // Loading the SVG using loadSVGFromString() method
      var path = fabric.loadSVGFromString(
        svgString,
        function (objects, options) {
          var obj = fabric.util.groupSVGElements(objects, options);
          obj.set({ left: 20, top: 20, scaleX: 0.5, scaleY: 0.5 });
          obj.setCoords();

          // Adding it to the canvas
          canvas.add(obj);
          canvas.renderAll();
        }
      );

Как загрузить SVG из URL

Шаг 1. Создайте папку, в которой вы хотите хранить файлы FabricJS. Я назвал свой как Fabric-Demo.

Шаг 2: Откройте терминал с помощью (Ctrl+~) и введите следующую команду:

npm create vite@latest

Мы настраиваем наш локальный сервер с помощью Vite, чтобы не сталкиваться с проблемами CORS при работе с URL-адресом svg.

Шаг 3: добавьте FabricJS с помощью этой команды в терминале:

npm i fabric

Шаг 4. Удалите весь шаблонный код из файлов main.js, index.html и style.css файлы.

import { fabric } from "fabric";

import { fabric } from "fabric";

// Creating the Canvas instance
var canvas = new fabric.Canvas("canvas", {
  backgroundColor: "#f0fff0",
  isDrawingMode: false,
  freeDrawingCursor: "crosshair",
});

fabric.loadSVGFromURL(
  "assets/Christmas-Time .svg",
  function (objects, options) {
    var christmasSVG = fabric.util.groupSVGElements(objects, options);
    christmasSVG.set({ left: 40, top: 5, scaleX: 0.7, scaleY: 0.7 });
    canvas.add(christmasSVG);
    canvas.calcOffset();
    canvas.renderAll();
  }
);