Processing:Библиотеки/SVG Export: различия между версиями

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
Нет описания правки
 
Нет описания правки
Строка 3: Строка 3:
{{Перевод от Сubewriter}}
{{Перевод от Сubewriter}}
{{Myagkij-редактор}}
{{Myagkij-редактор}}
{{Черновик}}


=SVG Export<ref>[https://processing.org/reference/libraries/svg/index.html processing.org - SVG Export]</ref>=
=SVG Export<ref>[https://processing.org/reference/libraries/svg/index.html processing.org - SVG Export]</ref>=


Библиотека SVG дает возможность сохранять SVG-файлы прямо из Processing. Это файлы с векторной графикой, которую можно масштабировать до любого размера, благодаря чему они хорошо подходят для изображений с высоким разрешением. Библиотека SVG умеет «сплющивать» 3D-данные в векторную 2D-графику, но для экспорта 3D-данных используйте библиотеку DXF. Исходный код библиотеки можно скачать на [https://github.com/processing/processing/tree/master/java/libraries/svg GitHub-репозитории Processing]. О найденных багах сообщайте [https://github.com/processing/processing/issues сюда].
[[Библиотека SVG]] дает возможность сохранять [[SVG-файл]]ы прямо из [[Processing]]. Это файлы с векторной графикой, которую можно масштабировать до любого размера, благодаря чему они хорошо подходят для изображений с высоким разрешением. [[Библиотека SVG]] умеет ''«сплющивать»'' 3D-данные в векторную 2D-графику, но для экспорта 3D-данных используйте [[библиотеку DXF]]. Исходный код библиотеки можно скачать на [https://github.com/processing/processing/tree/master/java/libraries/svg GitHub-репозитории Processing]. О найденных багах сообщайте [https://github.com/processing/processing/issues сюда].


== Экспорт SVG-файла (без использования дисплейного окна) ==
== Экспорт SVG-файла (без использования дисплейного окна) ==


Этот скетч-пример рисует в SVG-файл один кадр, а затем завершается. Обратите внимание, что дисплейное окно в процессе не откроется – это полезно при создании больших SVG-изображений, которые гораздо больше размера экрана.
Этот скетч-пример рисует в [[SVG-файл]] один кадр, а затем завершается. Обратите внимание, что дисплейное окно в процессе не откроется – это полезно при создании больших [[SVG-изображений]], которые гораздо больше размера экрана.


<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
Строка 33: Строка 31:
== Экспорт SVG-файла (с использованием дисплейного окна) ==
== Экспорт SVG-файла (с использованием дисплейного окна) ==


Чтобы нарисовать что-то на экране, одновременно с этим сохраняя SVG-файл, используйте функции beginRecord() и endRecord(). В отличие от визуализатора PDF, визуализатор SVG сохраняет только последний кадр из серии кадров. Это медленнее, но позволяет видеть, что именно происходит на экране во время сохранения файла.
Чтобы нарисовать что-то на экране, одновременно с этим сохраняя [[SVG-файл]], используйте функции [[Processing:Справочник языка Processing/beginRecord()|beginRecord()]] и [[Processing:Справочник языка Processing/endRecord()|endRecord()]]. В отличие от визуализатора [[PDF]], визуализатор [[SVG]] сохраняет только последний кадр из серии кадров. Это медленнее, но позволяет видеть, что именно происходит на экране во время сохранения файла.


<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
Строка 54: Строка 52:
== Сохранение одного кадра из анимации (с использованием дисплейного окна) ==
== Сохранение одного кадра из анимации (с использованием дисплейного окна) ==


Эта библиотека также позволяет сохранять один кадр из скетча с двигающимися элементами. Создаем булеву переменную для включения/выключения процесса записи SVG-файла.
Эта библиотека также позволяет сохранять один кадр из скетча с двигающимися элементами. Создаем булеву переменную для включения/выключения процесса записи [[SVG-файл]]а.


<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
Строка 90: Строка 88:
== Сохранение SVG-файлов из 3D-графики (с использованием дисплейного окна) ==
== Сохранение SVG-файлов из 3D-графики (с использованием дисплейного окна) ==


Чтобы создать векторы из 3D-данных, воспользуйтесь функциями beginRaw() и endRaw(). Они считывают данные фигур прямо перед тем, как они будут нарисованы на экране. В этот момент вся сцена – это не более, чем просто длинный список линий и треугольников. Это значит, что фигура, сделанная при помощи метода sphere(), будет состоять из сотен треугольников, а не из одного объекта.
Чтобы создать векторы из 3D-данных, воспользуйтесь функциями [[Processing:Справочник языка Processing/beginRaw()|beginRaw()]] и [[Processing:Справочник языка Processing/endRaw()|endRaw()]]. Они считывают данные фигур прямо перед тем, как они будут нарисованы на экране. В этот момент вся сцена – это не более, чем просто длинный список линий и треугольников. Это значит, что фигура, сделанная при помощи метода [[Processing:Справочник языка Processing/sphere()|sphere()]], будет состоять из сотен треугольников, а не из одного объекта.
Вместе с функциями beginRaw() и endRaw() можно использовать и 2D-, и в 3D-визуализатор. К примеру, использование beginRaw() вместе с библиотекой SVG запишет графику в виде «сплющенных» (т.е. превращенных в 2D-графику) треугольников и линий.
 
Вместе с функциями [[Processing:Справочник языка Processing/beginRaw()|beginRaw()]] и [[Processing:Справочник языка Processing/endRaw()|endRaw()]] можно использовать и 2D-, и в 3D-визуализатор. К примеру, использование [[Processing:Справочник языка Processing/beginRaw()|beginRaw()]] вместе с библиотекой [[SVG]] запишет графику в виде ''«сплющенных»'' (т.е. превращенных в 2D-графику) треугольников и линий.


<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
Строка 130: Строка 129:
== Использование createGraphics() для создания SVG-файла ==
== Использование createGraphics() для создания SVG-файла ==


Чтобы сохранить SVG-файл при помощи функции createGraphics() – не используя блоки setup() и draw() – на объекте PGraphics необходимо вызвать функцию dispose(). Это то же самое, что и exit(), но без выхода из программы.
Чтобы сохранить [[SVG-файл]] при помощи функции [[Processing:Справочник языка Processing/createGraphics()|createGraphics()]] – не используя блоки [[Processing:Справочник языка Processing/setup()|setup()]] и [[Processing:Справочник языка Processing/draw()|draw()]] – на объекте [[Processing:Справочник языка Processing/PGraphics|PGraphics]] необходимо вызвать функцию dispose(). Это то же самое, что и [[Processing:Справочник языка Processing/exit()|exit()]], но без выхода из программы.


<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
Строка 148: Строка 147:
* Использование hint(ENABLE_DEPTH_SORT) может улучшить визуальное качество 3D-графики, сохраняемой в 2D-файлы.
* Использование hint(ENABLE_DEPTH_SORT) может улучшить визуальное качество 3D-графики, сохраняемой в 2D-файлы.
* Многие функции (особенно для работы с пикселями) использовать с визуализатором SVG бессмысленно. Например, loadPixels(), updatePixels(), get(), set(), mask(), filter(), copy(), blend(), save() и image().
* Многие функции (особенно для работы с пикселями) использовать с визуализатором SVG бессмысленно. Например, loadPixels(), updatePixels(), get(), set(), mask(), filter(), copy(), blend(), save() и image().
* Опять же, функция exit() очень важна при использовании SVG вместе с size().
* Опять же, функция [[Processing:Справочник языка Processing/exit()|exit()]] очень важна при использовании [[SVG]] вместе с [[Processing:Справочник языка Processing/size()|size()]].


=См.также=
=См.также=
Строка 157: Строка 156:
{{SEO
{{SEO
|Заголовок статьи=Processing: SVG Export / Онлайн справочник - wikihandbk.com
|Заголовок статьи=Processing: SVG Export / Онлайн справочник - wikihandbk.com
|Ключевые слова=processing,SVG Export  
|Ключевые слова=processing,SVG Export,библиотека SVG, svg библиотека, svg библиотека processing, processing svg
|Описание статьи=
|Описание статьи=
|Изображение статьи для Open Graph=
|Изображение статьи для Open Graph=

Версия от 14:13, 12 июня 2019


Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.


SVG Export[1]

Библиотека SVG дает возможность сохранять SVG-файлы прямо из Processing. Это файлы с векторной графикой, которую можно масштабировать до любого размера, благодаря чему они хорошо подходят для изображений с высоким разрешением. Библиотека SVG умеет «сплющивать» 3D-данные в векторную 2D-графику, но для экспорта 3D-данных используйте библиотеку DXF. Исходный код библиотеки можно скачать на GitHub-репозитории Processing. О найденных багах сообщайте сюда.

Экспорт SVG-файла (без использования дисплейного окна)

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

import processing.svg.*;

void setup() {
  size(400, 400, SVG, "filename.svg");
}

void draw() {
  // рисуем тут что-нибудь интересное:
  line(0, 0, width/2, height);

  // выходим из программы:
  println("Finished.");  //  "Завершено."
  exit();
}

Экспорт SVG-файла (с использованием дисплейного окна)

Чтобы нарисовать что-то на экране, одновременно с этим сохраняя SVG-файл, используйте функции beginRecord() и endRecord(). В отличие от визуализатора PDF, визуализатор SVG сохраняет только последний кадр из серии кадров. Это медленнее, но позволяет видеть, что именно происходит на экране во время сохранения файла.

import processing.svg.*;

void setup() {
  size(400, 400);
  noLoop();
  beginRecord(SVG, "filename.svg");
}

void draw() {
  // рисуем тут что-нибудь интересное:
  line(0, 0, width/2, height);

  endRecord();
}

Сохранение одного кадра из анимации (с использованием дисплейного окна)

Эта библиотека также позволяет сохранять один кадр из скетча с двигающимися элементами. Создаем булеву переменную для включения/выключения процесса записи SVG-файла.

import processing.svg.*;

boolean record;

void setup() {
  size(400, 400);
}

void draw() {
  if (record) {
    // обратите внимание, что #### будет заменено на номер кадра:
    beginRecord(SVG, "frame-####.svg");
  }

  // рисуем тут что-нибудь интересное:
  background(255);
  line(mouseX, mouseY, width/2, height/2);

  if (record) {
    endRecord();
	record = false;
  }
}

// используем нажатия на кнопку мыши,
// чтобы не плодить тысячи файлов:
void mousePressed() {
  record = true;
}

Сохранение SVG-файлов из 3D-графики (с использованием дисплейного окна)

Чтобы создать векторы из 3D-данных, воспользуйтесь функциями beginRaw() и endRaw(). Они считывают данные фигур прямо перед тем, как они будут нарисованы на экране. В этот момент вся сцена – это не более, чем просто длинный список линий и треугольников. Это значит, что фигура, сделанная при помощи метода sphere(), будет состоять из сотен треугольников, а не из одного объекта.

Вместе с функциями beginRaw() и endRaw() можно использовать и 2D-, и в 3D-визуализатор. К примеру, использование beginRaw() вместе с библиотекой SVG запишет графику в виде «сплющенных» (т.е. превращенных в 2D-графику) треугольников и линий.

import processing.svg.*;

boolean record;

void setup() {
  size(500, 500, P3D);
}

void draw() {
  if (record) {
    beginRaw(SVG, "output.svg");
  }

  // здесь рисуем графику:
  background(204);
  translate(width/2, height/2, -200);
  rotateZ(0.2);
  rotateY(mouseX/500.0);
  box(200);

  if (record) {
    endRaw();
    record = false;
  }
}

// нажмите «R», чтобы записать текущий кадр:
void keyPressed() {
  if (key == 'r') {
    record = true;
  }
}

Использование createGraphics() для создания SVG-файла

Чтобы сохранить SVG-файл при помощи функции createGraphics() – не используя блоки setup() и draw() – на объекте PGraphics необходимо вызвать функцию dispose(). Это то же самое, что и exit(), но без выхода из программы.

import processing.svg.*;

PGraphics svg = createGraphics(300, 300, SVG, "output.svg");
svg.beginDraw();
svg.background(128, 0, 0);
svg.line(50, 50, 250, 250);
svg.dispose();
svg.endDraw();

Дополнительные примечания к использованию визуализатора SVG

  • Если вам нужны 3D-данные, вместо SVG воспользуйтесь библиотекой DXF.
  • Использование hint(ENABLE_DEPTH_SORT) может улучшить визуальное качество 3D-графики, сохраняемой в 2D-файлы.
  • Многие функции (особенно для работы с пикселями) использовать с визуализатором SVG бессмысленно. Например, loadPixels(), updatePixels(), get(), set(), mask(), filter(), copy(), blend(), save() и image().
  • Опять же, функция exit() очень важна при использовании SVG вместе с size().

См.также

Внешние ссылки