SVG в p5.js: загрузка, масштаб и сохранение исходника

Чтобы загрузить SVG-изображение в p5.js 2.3.4, используйте await loadImage('emblem.svg') внутри async function setup(), затем нарисуйте возвращённое изображение с помощью image(). Раздавайте страницу и SVG по HTTP. Сохраняйте файл SVG как редактируемый мастер: этот способ загрузки рисует p5.Image на Canvas и не даёт скетчу редактируемые контуры SVG. Текущий справочник loadImage описывает загрузку на основе Promise.

Успешная загрузка отвечает лишь на первый вопрос. Проверьте, остаётся ли отверстие прозрачным, не растянуто ли изображение и подходят ли загруженные пиксельные размеры для наибольшего размера показа. В примере ниже используется один оригинальный скруглённый ромб с отверстием, который рисуется в размерах 48, 120 и 240 пикселей.

Выберите показ изображения или исходную геометрию

Это руководство закрепляет p5.js 2.3.4 и средство отрисовки P2D. Оно использует текущий асинхронный API, а не копирует стартовый preload() из урока по 1.x. createCanvas создаёт Canvas скетча и поддерживает явный выбор средства отрисовки.

В этой версии реализация загрузки изображений рисует загруженное браузерное изображение на внутреннем Canvas объекта p5.Image. Это объясняет, почему сохранения расширения .svg и увеличения отображения Canvas недостаточно для сохранения редактирования контуров внутри скетча.

Сохраните оригинальный SVG с настоящим отверстием

Сохраните этот файл как emblem.svg. В нём один контур, нет встроенного растра, объявлен размер 120 × 120 и соответствующий viewBox. Внешний скруглённый ромб и внутренний ромб — два очертания внутри этого контура. fill-rule="evenodd" оставляет середину незакрашенной; справочник MDN по fill-rule объясняет, как правило определяет заполненную область.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
  <path fill="#eb705a" fill-rule="evenodd" d="M60 8 Q66 8 72 14 L106 48 Q118 60 106 72 L72 106 Q60 118 48 106 L14 72 Q2 60 14 48 L48 14 Q54 8 60 8 Z M60 40 L80 60 L60 80 L40 60 Z"/>
</svg>

Отверстие — не белый ромб, помещённый поверх коралловой фигуры. Это различие важно при изменении фона скетча. Если существующий файл содержит элемент <image>, проверьте его по списку проверок встроенного растра, прежде чем считать всю его графику редактируемыми контурами.

Загрузите его с асинхронным setup

Сохраните эту полную страницу как example.html рядом с emblem.svg, затем раздавайте папку локальным HTTP-сервером. Например, запустите в папке python3 -m http.server 8000 и откройте в браузере http://localhost:8000/example.html.

<!doctype html>
<html lang="en"><meta charset="utf-8"><title>p5.js SVG image size check</title>
<p>Original 120 × 120 SVG; Canvas destinations 48, 120 and 240 pixels.</p>
<pre id="status">Loading original SVG…</pre>
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.4/lib/p5.js"></script>
<script>async function setup() {
  createCanvas(650, 300, P2D);
  pixelDensity(1);
  noLoop();
  background('#e7eeea');
  try {
    const art = await loadImage('emblem.svg');
    for (const [x, size] of [[20, 48], [110, 120], [280, 240]]) {
      image(art, x, 20, size, size * art.height / art.width);
    }
    const center = art.get(60, 60);
    const solid = art.get(60, 25);
    document.querySelector('#status').textContent = JSON.stringify({
      version: p5.VERSION, imageWidth: art.width, imageHeight: art.height,
      sourceCenterRGBA: center, sourceSolidRGBA: solid,
      canvasWidth: width, canvasHeight: height, pixelDensity: pixelDensity(),
      destinationSizes: [48, 120, 240]
    }, null, 2);
  } catch (error) {
    document.querySelector('#status').textContent = 'Image load failed: ' + error.message;
  }
}</script></html>

Блок состояния появляется после загрузки и сообщает версию p5, размеры загруженного изображения и два образца исходных пикселей. Центральный образец проверяет прозрачность; коралловый — непрозрачную часть кольца. Вызовы рисования используют одно загруженное изображение. Между размерами показа они не перезагружают и не изменяют SVG.

Справочник image различает исходное содержимое и целевые ширину и высоту. Здесь каждая целевая высота вычисляется из art.height / art.width, поэтому неквадратное изображение на замену тоже сохраняет пропорции. При изменении ширины показа сохраняйте оба размера в этом расчёте.

Пример задаёт pixelDensity(1), чтобы сравнение Canvas было явным. Запишите плотность вашего реального скетча; значение по умолчанию может следовать дисплею. Повышение плотности Canvas не восстанавливает контуры, уже ставшие загруженным изображением.

Что показал браузерный тест

Мы запустили исходный файл и этот стартовый код в Chrome с p5.js 2.3.4, P2D и плотностью пикселей 1. Загруженное изображение имело размер 120 × 120. Центральный образец был [0, 0, 0, 0], а внутренний коралловый — [235, 112, 90, 255]. Светлый фон скетча оставался видимым через отверстие во всех трёх целевых размерах.

Эти наблюдения описывают данный созданный файл, браузер, версию и средство отрисовки. Это не результат совместимости для каждого экспортированного SVG, фильтра, шрифта или сторонней среды исполнения.

Редактируемый исходник и показ на Canvas

Данные исходного контура оставались неизменными во всём тесте. Рисование изображения в 2× влияло на отображение, а не на атрибут d в emblem.svg. Сохраните этот мастер с проектом, чтобы позже подготовить другое изображение для передачи.

Исправляйте наблюдаемый симптом

Изображение не появляется

Проверьте, доступен ли URL SVG с раздаваемой страницы и завершился ли loadImage() до запуска image(). try/catch стартового примера помещает ошибку загрузки в блок состояния. Как отмечает документация loadImage, удалённое изображение может не загрузиться и из-за ограничений безопасности браузера. Начните с контролируемого файла того же источника, чтобы отделить проблему загрузки от проблемы графики.

Откройте сам SVG в браузере. Если он выглядит неправильно и там, сначала исправьте исходник. Переименованный PNG не становится документом SVG, а SVG-оболочка вокруг растра не создаёт отсутствующие контуры.

Изображение выглядит растянутым

Сравните целевые пропорции с art.width / art.height. Например, рисование квадратного изображения в целевую область 240 × 120 намеренно делает его вдвое шире относительно высоты. Если растяжение не нужно, используйте расчёт пропорций из стартового примера. Если у самого исходника слишком много пустого пространства, проверьте монтажную область и viewBox, прежде чем компенсировать это увеличением показа.

Увеличенные края выглядят мягкими

Проверьте размеры загруженного изображения, а не только размер Canvas. В нашем тесте изображение 120 × 120 рисовалось в целевую область 240 × 240. Изменение этих целевых аргументов не обрабатывает кривые SVG заново посредством новой загрузки изображения.

Подготовьте SVG для передачи с явными размерами под нужное применение, загрузите заново и проверьте полученные art.width и art.height, прежде чем принимать результат. Сохраните систему координат и исходные контуры. Затем сравните наименьший и наибольший размеры на экране: больше загруженных пикселей не сделает маленькое отверстие читаемым при слишком маленьком конечном показе.

Если скетчу нужны геометрические операции вместо рисования изображения, планируйте это отдельно. Руководство по Canvas Path2D описывает работу с данными контуров, а руководство по SVG в PixiJS сравнивает геометрический и текстурный способы этого движка. Их API не взаимозаменяемы с loadImage() в p5.

Середина белая, а не прозрачная

Проверьте оригинальный SVG на закрашенный фон или белую внутреннюю фигуру. В этом исходнике контур evenodd оставляет отверстие, а загруженный альфа-канал центра был равен нулю. Повторите проверку со своим файлом на контрастном фоне скетча; белая страница предпросмотра может скрыть различие.

Держите экспорт Canvas отдельно от мастера SVG

Стандартный справочник saveCanvas перечисляет вывод изображений PNG, WebP и JPG. Сохранение нарисованного Canvas через этот API не восстанавливает исходные контуры SVG. Храните emblem.svg отдельно, если позднее понадобятся правки очертаний или файл на основе контуров для передачи. Снимок гладко выглядящего Canvas не устанавливает процесс экспорта редактируемого SVG.

PerfectVector подходит на предыдущем этапе, когда иллюстрация существует лишь как плоский PNG или JPG, а вам нужны исходные контуры для редактирования. Преобразуйте изображение в SVG, проверьте очертания и негативное пространство в SVG-редакторе, затем повторите реальные проверки загрузки и размеров p5. Существующий чистый SVG используйте напрямую. Трассировка не меняет API изображений p5 и не превращает его Canvas-вывод в документ контуров SVG. Более широкое руководство по векторизации объясняет этот этап подготовки исходника.

Сохраните мастер, запишите версию p5 и загруженные размеры и принимайте ресурс, только когда отверстие и края работают в размерах, используемых скетчем.

Частые вопросы

Может ли p5.js загрузить SVG через loadImage? Да. Этот пример p5.js 2.3.4 P2D загружает оригинальный SVG через await loadImage внутри асинхронного setup. Проверяйте вид и загруженные размеры собственного файла, не считая одну успешную загрузку полной совместимостью с SVG.

Остаётся ли загруженное SVG-изображение p5 редактируемым как контуры? Этот способ загрузки возвращает p5.Image и рисует его на Canvas. Храните оригинальный SVG отдельно для редактирования исходных контуров. Показ изображения на Canvas не предоставляет редактируемый SVG DOM для загруженной графики.

Почему мой SVG в p5 размыт при увеличении? Сравните размеры загруженного изображения с целевыми. Наше загруженное изображение 120 × 120 выглядело мягче при 240 × 240. Подготовьте исходник для передачи подходящего размера, загрузите заново и проверьте реальный результат.

Экспортирует ли saveCanvas оригинальный SVG? Стандартный API saveCanvas описывает вывод PNG, WebP и JPG. Сохраняйте оригинальный мастер SVG или проверяйте отдельный процесс отрисовки и экспорта SVG для результата на основе контуров.

Источники

1. p5.js loadImage — Описывает загрузку изображений на основе Promise и ограничения браузера.
2. Выпуск p5.js 2.3.4 — Указывает закреплённую версию и официальный сценарий CDN.
3. p5.js createCanvas — Описывает создание Canvas и выбор средства отрисовки.
4. Исходный код загрузки изображений p5.js 2.3.4 — Показывает отрисовку загруженного изображения во внутренний Canvas p5.Image.
5. MDN fill-rule — Объясняет, как evenodd определяет заполненную область составного контура.
6. p5.js image — Определяет размещение изображения и целевые размеры.
7. p5.js pixelDensity — Описывает плотность пикселей скетча и её зависимое от дисплея значение по умолчанию.
8. p5.js saveCanvas — Перечисляет стандартные форматы экспорта изображений Canvas.