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=

Текущая версия на 13:13, 12 июня 2019


Перевод: Максим Кузьмин (Cubewriter)
Перевел 3377 статей для сайта.

Контакты:

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


SVG Export[1]

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

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

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

  1. import processing.svg.*;
  2.  
  3. void setup() {
  4.   size(400, 400, SVG, "filename.svg");
  5. }
  6.  
  7. void draw() {
  8.   // рисуем тут что-нибудь интересное:
  9.   line(0, 0, width/2, height);
  10.  
  11.   // выходим из программы:
  12.   println("Finished.");  //  "Завершено."
  13.   exit();
  14. }

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

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

  1. import processing.svg.*;
  2.  
  3. void setup() {
  4.   size(400, 400);
  5.   noLoop();
  6.   beginRecord(SVG, "filename.svg");
  7. }
  8.  
  9. void draw() {
  10.   // рисуем тут что-нибудь интересное:
  11.   line(0, 0, width/2, height);
  12.  
  13.   endRecord();
  14. }

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

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

  1. import processing.svg.*;
  2.  
  3. boolean record;
  4.  
  5. void setup() {
  6.   size(400, 400);
  7. }
  8.  
  9. void draw() {
  10.   if (record) {
  11.     // обратите внимание, что #### будет заменено на номер кадра:
  12.     beginRecord(SVG, "frame-####.svg");
  13.   }
  14.  
  15.   // рисуем тут что-нибудь интересное:
  16.   background(255);
  17.   line(mouseX, mouseY, width/2, height/2);
  18.  
  19.   if (record) {
  20.     endRecord();
  21.         record = false;
  22.   }
  23. }
  24.  
  25. // используем нажатия на кнопку мыши,
  26. // чтобы не плодить тысячи файлов:
  27. void mousePressed() {
  28.   record = true;
  29. }

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

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

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

  1. import processing.svg.*;
  2.  
  3. boolean record;
  4.  
  5. void setup() {
  6.   size(500, 500, P3D);
  7. }
  8.  
  9. void draw() {
  10.   if (record) {
  11.     beginRaw(SVG, "output.svg");
  12.   }
  13.  
  14.   // здесь рисуем графику:
  15.   background(204);
  16.   translate(width/2, height/2, -200);
  17.   rotateZ(0.2);
  18.   rotateY(mouseX/500.0);
  19.   box(200);
  20.  
  21.   if (record) {
  22.     endRaw();
  23.     record = false;
  24.   }
  25. }
  26.  
  27. // нажмите «R», чтобы записать текущий кадр:
  28. void keyPressed() {
  29.   if (key == 'r') {
  30.     record = true;
  31.   }
  32. }

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

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

  1. import processing.svg.*;
  2.  
  3. PGraphics svg = createGraphics(300, 300, SVG, "output.svg");
  4. svg.beginDraw();
  5. svg.background(128, 0, 0);
  6. svg.line(50, 50, 250, 250);
  7. svg.dispose();
  8. 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().

См.также

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

  1. processing.org - SVG Export