Перейти к содержанию

Форматы экспорта

AnimaGeo записывает конструкцию в нескольких форматах. Есть два пути:

  • Статический вектор — конструкция строится один раз и сериализуется методом export*: SVG, PDF, EPS, TikZ.
  • Рендер — рендерер Manim создаёт растровый файл или видео: PNG, GIF, MP4, WebM, MOV. Для анимации используйте ключевые кадры, иначе будет создан один кадр.

Особенности TikZ описаны в разделе Экспорт TikZ. Здесь рассматриваются PDF/EPS и контейнеры анимации.

PDF / EPS — вектор

Оба формата используют тот же конвейер Cairo, что и exportSVG, поэтому выглядят одинаково. Отличается только поверхность Cairo.

scene.loadGGB("scene.ggb", style="style.json", export={"size": {"width": 800, "height": 600}})
scene.exportPDF("figure.pdf")            # векторный одностраничный PDF
scene.exportEPS("figure.eps")            # векторный EPS (Encapsulated PostScript)
scene.exportPDF("figure.pdf", dpi=150)   # меньший физический лист, выше плотность
  • dpi — по умолчанию 96, как в TikZ-экспортере — задаёт физический размер страницы. SVG измеряется в пикселях, а PDF/EPS — в пунктах PostScript (1/72 дюйма), поэтому пиксель отображается в 72/dpi pt. Холст 640×480 px при 96 dpi превращается в 480×360 pt (примерно 6,67×5 дюймов). Изображение в любом случае остаётся векторным; в LaTeX его можно масштабировать командой \includegraphics[width=\linewidth]{figure.pdf}.
  • Штриховые линии остаются редактируемыми. Штриховая линия записывается одним контуром с шаблоном штриха — stroke-dasharray в SVG, штрих Cairo в PDF и EPS, — а не рядом отдельных отрезков. Период задаётся в пикселях стиля (stroke_dash_period_px или rendering.dash_period_px, по умолчанию 10; stroke_dash_ratio — доля штриха в периоде).
  • Текст преобразован в контуры и не выделяется: подписи рисуются кривыми Безье, как и в SVG. Для печати это подходит, но поиск по тексту невозможен.
  • EPS не поддерживает прозрачность. Полупрозрачные заливки и обводки Cairo растрирует, из-за чего файл растёт, а края становятся мягче; в журнале появляется предупреждение. Чтобы сохранить прозрачность, используйте PDF или SVG.

CLI

python -m animageo scene.ggb -o figure.pdf            # формат определяется по .pdf
python -m animageo scene.ggb -o figure.eps --dpi 150
python -m animageo scene.ggb --format pdf -o out.pdf

Анимация: MP4 / GIF / WebM / MOV

Контейнер выбирается через configure_render до рендера. Файловый writer Manim читает настройку при создании сцены, поэтому задавать её внутри construct() уже поздно.

from animageo import configure_render

configure_render(format="gif", fps=20)   # либо "mp4" (по умолчанию), "webm", "mov", "png"

class MyScene(AnimaGeoScene):
    def construct(self):
        self.loadGGB("scene.ggb", style="style.json", export={"size": {"width": 800, "height": 600}})
        self.play_keyframes(keyframes_json)
Контейнер Прозрачность Особенности
mp4 нет универсальный видеоформат по умолчанию
gif 1 бит открывается почти везде, но палитра из 256 цветов даёт полосы на градиентах
webm alpha компактное современное видео для веба
mov alpha видео с поддержкой alpha-канала
png alpha один кадр — последний

Для градиентов и сглаженных заливок на прозрачном фоне выбирайте webm или mov, а не gif.

Цвета GIF близки к MP4-рендеру: AnimaGeo исправляет GIF-writer Manim с помощью install_gif_palette_fix, который автоматически устанавливается AnimaGeoScene, и сохраняет адаптивную палитру сцены. Обычный Manim 0.19–0.21 объявляет поток GIF как rgb8 — фиксированную сетку RGB 3-3-2. Из-за этого вычисленная palettegen палитра отбрасывается, а цвета искажаются жёлтыми и зелёными артефактами.

Рендер через CLI

# один кадр без анимации → PNG
python -m animageo scene.ggb -o frame.png

# анимация из JSON с ключевыми кадрами → GIF / WebM / MP4
python -m animageo scene.ggb -o anim.gif  --keyframes keys.json --fps 15
python -m animageo scene.ggb -o anim.webm --keyframes keys.json --transparent
python -m animageo scene.ggb --format mp4 -o anim.mp4 --keyframes keys.json
  • --keyframes file.json — последовательность ключевых кадров, см. Анимация по ключевым кадрам. Без неё рендерится один кадр.
  • --fps, --transparent передаются в Manim.
  • --quality {l,m,h,p,k} — пресет Manim, который задаёт разрешение и FPS рендера: l=854×480@15, m=1280×720@30, h=1920×1080@60, p=2560×1440@60, k=3840×2160@60.
  • Разрешением пути рендера управляет конфигурация Manim — по умолчанию 1920×1080, меняется через --quality, — а не --export-size. --export-size задаёт кадрирование и соотношение сторон камеры; в статическом векторном пути он напрямую определяет размер холста.

JSON ключевых кадров имеет тот же формат, что и аргумент scene.play_keyframes(...). Для текущего формата со стилями, видимостью, камерой и событиями укажите "version": 2:

{"version": 2, "keyframes": [
  {"t": 0,   "values": {"A": [-4, -1]}},
  {"t": 1.5, "values": {"A": [-2, 2]}, "easing": "smooth"}
]}

Интерактивный JSXGraph — HTML

Все остальные форматы сериализуют отрендеренный кадр, а JSXGraph создаёт живую, перетаскиваемую конструкцию. Пользователь двигает свободные точки, глайдеры и ползунки, а зависимая геометрия пересчитывается в браузере.

scene.loadGGB("scene.ggb", style="style.json", export={"size": {"width": 800, "height": 600}})
scene.exportJSXGraph("board.html")              # автономная страница, по умолчанию
scene.exportJSXGraph("board.js", output="js")   # фрагмент для встраивания
scene.exportJSXGraph("board.json", output="json")

python -m animageo scene.ggb -o board.html      # формат определяется по .html
python -m animageo scene.ggb --format jsxgraph -o board.html
  • Лучший результат дают сцены, импортированные из GGB: свободные точки становятся перетаскиваемыми, точки на кривой — глайдерами, числа — ползунками. Созданные в DSL точки Point(x, y) выводятся как фиксированные: они не определяются как свободные входы.
  • Пересчитываются при перетаскивании: точки, глайдеры, ползунки, середина отрезка, отрезок, прямая и параллельная, луч, вектор, окружность — в том числе с радиусом от ползунка или расстояния, — полуокружность, многоугольник со сторонами, перпендикуляр, серединный перпендикуляр, биссектриса, угол, эллипс/гипербола/парабола/коника, отражение, пересечение, а также поворот и перенос точек, отрезков, прямых, окружностей, векторов и многоугольников. Декоративные элементы тоже остаются живыми: наконечники векторов учитывают размер стрелки GGB, а засечки равных отрезков строятся от вычисляемых точек и следуют за перетаскиванием.
  • Рисуются статически как дискретизированные кривые: функции, неявные кривые, коники по выражению, дуги, секторы, геометрические места точек и касательная из точки. Отчёт о покрытии перечисляет живые и статические элементы — в INFO пишется N live, M static …; отбрасываются только действительно пустые результаты.
  • Режимы: output="html" — автономная страница по умолчанию, "js" — фрагмент, "spec" — декларативный JSON animageo-board/v1, "json" — устаревшая спецификация с JS-инструкциями, "moodle" — блок <jsxgraph> для плагина Moodle filter_jsxgraph.
  • Подписи рендерятся как LaTeX через MathJax; JSXGraph и MathJax загружаются из CDN.
  • Оформление доски повторяет сцену: цвет фона, показ осей и сетки — включая отдельную видимость осей, — а также их цвета импортируются из вида GeoGebra. Переопределить их можно через JSXGraphOptions:
from animageo.exporters.jsxgraph import JSXGraphOptions
opt = JSXGraphOptions(output="html", axis=False, grid=True, background="#fff")
scene.exportJSXGraph("board.html", options=opt)

axis и grid по умолчанию равны None и повторяют сцену. Если сцена не задаёт значение, действуют настройки GeoGebra: оси включены, сетка выключена. Передайте True/False для принудительного выбора. background по умолчанию берётся из сцены; можно передать CSS-цвет или пустую строку "", чтобы был виден фон страницы. - Стили элементов — цвет обводки и заливки, толщина, прозрачность, штрих, размер и форма точки, цвет подписи, радиус дуги угла и явное смещение подписи — читаются тем же resolver'ом, что использует SVG/PNG-рендерер. Поэтому импорт GGB, overlay стиля и явная запись в elem.style одинаково попадают в JSXGraph. Штрих заменяется ближайшим штрихом JSXGraph по длине в пикселях.

Декларативная спецификация и независимый от фреймворка runtime

Чтобы встроить доску как управляемый компонент в любой веб-проект — с любым фреймворком или без него, — экспортируйте декларативную спецификацию, а не HTML:

scene.exportJSXGraph("board.json", output="spec")   # animageo-board/v1

python -m animageo scene.ggb -o board.json --format jsxgraph   # .json → spec

Спецификация — структурированные данные без eval по схеме animageo/exporters/jsxgraph/board.schema.json: топологически упорядоченный список elements с семантическим kind AnimaGeo, инструкцией рендерера и структурированными parents, а также схема интерактивных входов inputs. Строк JavaScript в ней нет, поэтому потребителю не нужно выполнять код, чтобы создать доску.

Каталог web/ превращает спецификацию в живую перетаскиваемую доску с ясным API сигналов и действий, выраженным в терминах конструкции — имён элементов и типов AnimaGeo:

  • @animageo/runtime — createBoard(spec, container, opts) -> BoardHandle; сигналы ready / change / commit / viewchange / error; действия getState / setState / setValue / reset / … JSXGraph внедряется как peer dependency; глобальных переменных нет, несколько экземпляров безопасны.
  • <animageo-board> — Web Component без привязки к фреймворку: сигналы приходят как CustomEvent, действия доступны как методы элемента.
  • web/adapters/ — тонкие шаблоны для React, Vue, Svelte и vanilla JS.

Подробности находятся в web/README.md.

Как выбрать формат

Задача Формат
LaTeX \includegraphics, журналы, печать PDF, либо EPS для процессов, где нужен именно EPS
Веб, Inkscape, редактирование SVG
Нативная фигура LaTeX с редактируемыми настоящими LaTeX-подписями TikZ
Интерактивный веб-виджет с точками и ползунками JSXGraph (.html)
Универсальная анимация для чатов, слайдов и README GIF
Компактное веб-видео или прозрачное видео WebM / MOV
Видео с максимальной совместимостью MP4
Быстрое растровое превью, вставка в Office/Docs PNG