Сценарий преобразования SVG - JSON

Преобразование изображения SVG в объект JavaScript для отображения или анимации в Canvas.

В предыдущей статье мы видели, как конвертировать изображение SVG в файл JavaScript для включения в веб-страницу, чтобы показать - гораздо быстрее - изображение в Canvas.

Этот новый скрипт преобразует SVG-файл в JSON-файл, который можно загрузить с помощью Ajax, WebSocket и т. Д. Необходимо установить сценарий выполнения.

node svgtojson.js image.svg

Эта команда преобразует SVG в JavaScript и создает файл image.json.

Вот код для загрузки файла в страницу и отображения в Canvas...

Отображение SVG:

<object id="carsvg" width="400" height="100" data="car-json.svg"></object>

Отображение в Canvas с анимацией:

<canvas id="jsoncar" width="500" height="100"></canvas>
var car;
var x = 50;
var drawInter;

function redraw(ctx) {
  ctx.clearRect(0, 0, 500, 100);
  SVGtoCanvas(car, ctx, x++, 20);
  if(x > 300) clearInterval(drawInter);
}

function setJSON(content) {
  car = JSON.parse(content)
	
  var ctx = canvasInit("jsoncar")
  SVGtoCanvas(car, ctx, 50, 20);
	
  drawInter = setInterval(function() { redraw(ctx) }, 10);
}

AARead("car.json", setJSON, null);

Файл JSON загружается в одной инструкции с минималистичным фреймворком Ajax Anaa (на этом сайте).

Содержимое присваивается атрибуту responseText Ajax и передается в качестве аргумента функции setJSON.
Функция JSON.parse преобразует это текстовое содержимое в объект JavaScript. Затем создается небольшая анимация, которая использует SVGtoCanvas для отображения объекта в Canvas.

Показ

СВГ
КАНВАС

Загрузить сценарий и демонстрацию

Архив содержит: