{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Математик среди биологов: заметки с тегом векторная графика",
    "_rss_description": "Я немного умею складывать, но от вычитания у меня всегда кружится голова",
    "_rss_language": "ru",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": "",
    "_itunes_explicit": "",
    "home_page_url": "https:\/\/antonlyakh.ru\/blog\/tags\/vektornaya-grafika\/",
    "feed_url": "https:\/\/antonlyakh.ru\/blog\/tags\/vektornaya-grafika\/json\/",
    "icon": false,
    "author": {
        "name": "Антон Лях",
        "url": "https:\/\/antonlyakh.ru\/blog\/",
        "avatar": false
    },
    "items": [
        {
            "id": "533",
            "url": "https:\/\/antonlyakh.ru\/blog\/all\/tri-v-vektornye-modeli-vizualiztator-veb-stranica\/",
            "title": "Три вэ: векторные модели — визуализатор — веб-страница",
            "content_html": "<p>У меня накопилось несколько баз данных с векторными изображениями, Это векторные контуры створок диатомовых водорослей, крючков паразитических червей моногеней и векторные траектории движения динофлагеллят <i>Oxyrrhis marina.<\/i><\/p>\n<p>Базы лежат, пыляться и нет никакой нормальной возможности просмотреть их содержимое в онлайне. Отсюда и родилась идея о создании (универсального) веб-приложения для просмотра векторного содержимого баз.<\/p>\n<p>Назвал это проект «Три вэ».<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/tri-v---nachalo-dark.png\" width=\"800\" height=\"80\" alt=\"\" \/>\n<\/div>\n<p>Быстро сформулировал задачу и требования к ней.<\/p>\n<p><b>Дано:<\/b> несколько баз данных, содержащих векторные модели форм микроорганизмов, их частей и траекторий движения.<\/p>\n<p><b>Необходимо:<\/b> создать веб-приложения для онлайн просмотра векторных моделей.<\/p>\n<p><b>Требования:<\/b> базовое приложение имеет унифицированный интерфейс, который позволяет подключать любую из баз данных и предоставляет средства для просмотра моделей.<\/p>\n<p>Получилось очень куцо.<\/p>\n<p>Потом прогнал текст через нейросеть с просьбой добавить деталей.<\/p>\n<p class=\"loud\">Оказалось, что за простыми формулировками скрывается несколько неотвеченных вопросов и функций, которые я подразумеваю, но не актуализирую в явном виде.<\/p>\n<p><span id=\"ai-answer\">Ниже — ответ нейросети.<\/span><\/p>\n<hr \/>\n<p>Чтобы сделать требования более четкими и полными, предлагаю структурировать их по следующим категориям:<\/p>\n<p><b>1. Общие требования<\/b><\/p>\n<ul>\n<li><b>Цель приложения:<\/b> Разработать веб-приложение для онлайн-просмотра векторных моделей микроорганизмов, хранящихся в нескольких базах данных.<\/li>\n<li><b>Целевая аудитория:<\/b> Ученые, исследователи в области микробиологии, студенты (или уточнить).<\/li>\n<li><b>Ключевые функции:<\/b>\n<ul>\n  <li>Подключение к различным базам данных с векторными моделями.<\/li>\n  <li>Просмотр моделей с минимальным набором функций (например, визуализация, масштабирование, вращение).<\/li>\n  <li>Возможность расширения функциональности (например, добавление аннотаций, фильтров, экспорта).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><b>2. Функциональные требования<\/b><\/p>\n<ul>\n<li><b>Подключение к базам данных:<\/b>\n<ul>\n  <li>Поддержка различных типов баз данных (например, SQL, NoSQL, файлы).<\/li>\n  <li>Унифицированный API или адаптер для подключения новых баз данных без изменения кода приложения.<\/li>\n  <li>Поддержка безопасного подключения (аутентификация, шифрование данных).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><b>Просмотр моделей:<\/b>\n<ul>\n  <li>Визуализация векторных моделей в 2D\/3D (указать форматы, например, STL, OBJ, или другие).<\/li>\n  <li>Интерактивные функции: вращение, масштабирование, панорамирование.<\/li>\n  <li>Отображение метаданных моделей (например, название микроорганизма, источник, описание).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><b>Расширяемость:<\/b>\n<ul>\n  <li>Модульная архитектура, позволяющая добавлять новые функции (например, плагины для анализа моделей).<\/li>\n  <li>Поддержка новых форматов данных через конфигурационные файлы или API.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><b>Дополнительные функции (если применимо):<\/b>\n<ul>\n  <li>Фильтрация\/поиск моделей по параметрам (например, тип микроорганизма, дата создания).<\/li>\n  <li>Экспорт моделей или их визуализаций (например, в PNG, PDF).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><b>3. Нефункциональные требования<\/b><\/p>\n<ul>\n<li><b>Производительность:<\/b>\n<ul>\n  <li>Поддержка загрузки моделей объемом до [указать объем, например, 100 МБ] за разумное время (например, < 5 секунд).<\/li>\n  <li>Оптимизация для работы с большими наборами данных.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><b>Совместимость:<\/b>\n<ul>\n  <li>Поддержка современных браузеров (например, Chrome, Firefox, Safari, Edge).<\/li>\n  <li>Адаптивный дизайн для работы на десктопах и мобильных устройствах (или уточнить).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><b>Безопасность:<\/b>\n<ul>\n  <li>Защита данных при передаче (например, HTTPS).<\/li>\n  <li>Контроль доступа к базам данных (например, через OAuth или токены).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><b>Масштабируемость:<\/b>\n<ul>\n  <li>Возможность обработки подключения новых баз данных без значительных изменений в архитектуре.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><b>Доступность:<\/b>\n<ul>\n  <li>Поддержка стандартов доступности (например, WCAG 2.1).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><b>4. Технические требования<\/b><\/p>\n<ul>\n<li><b>Технологический стек <\/b>(рекомендации, если не указан):\n<ul>\n  <li>Фронтенд: JavaScript\/TypeScript с использованием библиотек для 3D-визуализации (например, Three.js, Babylon.js).<\/li>\n  <li>Бэкенд: Node.js, Python (FastAPI\/Flask) или другой фреймворк для работы с базами данных.<\/li>\n  <li>Базы данных: Поддержка SQL (PostgreSQL, MySQL) и\/или NoSQL (MongoDB).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><b>Форматы данных:<\/b><\/p>\n<ul>\n<li>Указать поддерживаемые форматы векторных моделей (например, STL, OBJ, или специализированные биоинформатические форматы).<\/li>\n<\/ul>\n<ul>\n<li><b>API:<\/b>\n<ul>\n  <li>REST или GraphQL для взаимодействия с базами данных.<\/li>\n  <li>Документация API (например, с использованием Swagger\/OpenAPI).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><b>5. Ограничения и предположения<\/b><\/p>\n<ul>\n<li><b>Ограничения:<\/b>\n<ul>\n  <li>Сроки разработки (например, 3 месяца).<\/li>\n  <li>Бюджет (если есть).<\/li>\n  <li>Ограничения по поддерживаемым устройствам\/браузерам.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><b>Предположения:<\/b>\n<ul>\n  <li>Базы данных имеют стандартные API или доступ через SQL-запросы.<\/li>\n  <li>Пользователи имеют базовые навыки работы с веб-приложениями.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<hr \/>\n<p>Есть над чем подумать.<\/p>\n",
            "date_published": "2025-09-24T22:18:11+03:00",
            "date_modified": "2025-09-25T20:38:12+03:00",
            "image": "https:\/\/antonlyakh.ru\/blog\/pictures\/tri-v---nachalo.png",
            "_date_published_rfc2822": "Wed, 24 Sep 2025 22:18:11 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "533",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/tri-v---nachalo.png",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/tri-v---nachalo-levo.png",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/tri-v---nachalo-dark.png"
                ]
            }
        },
        {
            "id": "472",
            "url": "https:\/\/antonlyakh.ru\/blog\/all\/dvoynaya-duga-v-svg-puti\/",
            "title": "Двойная дуга в СВГ пути",
            "content_html": "<p>Это короткая техническая заметка о декодировании <abbr>СВГ<\/abbr> тега <var>path<\/var>.<\/p>\n<p>Я — ретроград и у меня есть Дельфи-библиотека для загрузки СВГ графики. Она хорошо работала до тех пор, пока в теге <var>path<\/var> не встретился такой набор команд:<\/p>\n<blockquote>\n<p>... <tt>a25.35,25.35,0,0,0-.32,8.58,32.42,32.42,0,0,0,1.53,6.3<\/tt> ...<\/p>\n<\/blockquote>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Tutorial\/Paths#arcs\">По спецификации<\/a> <var>a<\/var> — рисует дугу и содержит семь параметров (семь чисел). А здесь их четырнадцать.<\/p>\n<p>Немного подумав, понял, что вторая семерка чисел определяет следующую дугу. То есть без сокращений будет так:<\/p>\n<blockquote>\n<p>... <tt>a25.35,25.35,0,0,0-.32,8.58 a32.42,32.42,0,0,0,1.53,6.3<\/tt> ...<\/p>\n<\/blockquote>\n<p>Учту это правило в библиотеке.<\/p>\n",
            "date_published": "2023-08-05T16:42:57+03:00",
            "date_modified": "2023-08-05T16:42:27+03:00",
            "_date_published_rfc2822": "Sat, 05 Aug 2023 16:42:57 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "472",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "356",
            "url": "https:\/\/antonlyakh.ru\/blog\/all\/kontury-ikonok-chikina\/",
            "title": "Контуры иконок Чикина",
            "content_html": "<p><a href=\"http:\/\/sergeychikin.ru\/365\/\">Сергей Чикин<\/a> каждый день рисует одну иконку. Еще он делится своими секретами, ведет курс и работает в Бюро, но я сейчас не об этом.<\/p>\n<p>Когда смотришь на иконки Чикина, кажется, что контур — это отдельная линия. Если изменить ее толщину, контур потолстеет или похудеет.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/original-chikin-icons.png\" width=\"800\" height=\"200\" alt=\"\" \/>\n<\/div>\n<p>На самом деле контур возникает за счет наложения фигур. Даже снежинка и спираль — это многоугольники без контура.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/modified-chikin-icons.png\" width=\"800\" height=\"200\" alt=\"\" \/>\n<\/div>\n<p>Для меня это прям открытием стало.<\/p>\n",
            "date_published": "2020-03-20T22:19:08+03:00",
            "date_modified": "2020-03-20T22:19:39+03:00",
            "image": "https:\/\/antonlyakh.ru\/blog\/pictures\/original-chikin-icons.png",
            "_date_published_rfc2822": "Fri, 20 Mar 2020 22:19:08 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "356",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/original-chikin-icons.png",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/modified-chikin-icons.png"
                ]
            }
        },
        {
            "id": "147",
            "url": "https:\/\/antonlyakh.ru\/blog\/all\/postroit-ellips-po-pyati-tochkam-plagin-dlya-inkskeypa\/",
            "title": "Как построить эллипс по пяти точкам. Плагин для Инкскейпа",
            "content_html": "<p><a href=\"http:\/\/antonlyakh.ru\/blog\/all\/pancir-diatomovyh-vodorosley-eto-korobochka\/\">Диатомовые водоросли<\/a> иногда ложатся полубоком на предметный столик электронного микроскопа.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/T.-prosckinae-outer-and-inner-valve-side.png\" width=\"800\" height=\"365\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><i>Thalassiosira proschkinae<\/i> — крошечная диатомовая из Азовского моря. СЭМ. Наружняя и внутреняя поверхность створки; правая створка деформирована. Фото Е.Д. Бедошвили, А.М. Лях<\/div>\n<\/div>\n<p>Такой полуанфас бывает удобен. Он помогает понять геометрию и морфологию кремниевого панциря. Но в данном случае мне надо вернуть створке первоначальную круглую форму, так как сейчас, из-за поворота, она стала эллиптической. Для этого надо найти главные оси эллипса, чтобы понять, как он повернут.<\/p>\n<p>Из аналитической геометрии известно, что любые пять точек плоскости однозначно задают коническое сечение, если никакие три их них не лежат на одной прямой. На Мат.-стакэксченже описан  <a href=\"https:\/\/math.stackexchange.com\/a\/1217797\/57054\">алгоритм построения эллипса по пяти точкам<\/a>.<\/p>\n<p>Все данные есть. И я уже было собрался писать программу, но нашел <b><a href=\"http:\/\/pernsteiner.org\/inkscape\/ellipse_5pts\/\">плагин для Инкскейпа<\/a><\/b>.<\/p>\n<p>После установки, он доступен в разделе Extensions &rarr; Generate from Path &rarr; Ellipse by 5 Points.<\/p>\n<p>Плагин преобразует ломаную из пяти точек в эллипс. Если эллипс не получается, плагин ничего не строит. Плагин правильно решает задачу, но эллипс иногда не проходит по границе створки.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/5-points-polyline-2-ellipse.png\" width=\"800\" height=\"365\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Плагин преобразует пятивершинную ломаную линию в эллипс<\/div>\n<\/div>\n<p>Допускаю, что при подготовке к микроскопированию створка диатомовых деформируется. Поэтому эллипс не совпадает.<\/p>\n<p>А есть ли такой плагин для Иллюстратора?<\/p>\n",
            "date_published": "2017-06-28T19:00:07+03:00",
            "date_modified": "2022-03-02T15:09:28+03:00",
            "image": "https:\/\/antonlyakh.ru\/blog\/pictures\/T.-prosckinae-outer-and-inner-valve-side.png",
            "_date_published_rfc2822": "Wed, 28 Jun 2017 19:00:07 +0300",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/antonlyakh.ru\/blog\/all\/postroit-ellips-po-pyati-tochkam-plagin-dlya-inkskeypa\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/T.-prosckinae-outer-and-inner-valve-side.png",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/5-points-polyline-2-ellipse.png"
                ]
            }
        },
        {
            "id": "42",
            "url": "https:\/\/antonlyakh.ru\/blog\/all\/scheme-of-myctophidae-photophores\/",
            "title": "Схема расположения фотофор на теле светящихся анчоусов (миктофид)",
            "content_html": "<p><span style=\"display: inline-block; font-weight: bold; padding: 6px; background-color: #7fC\"><b><a href=\"http:\/\/antonlyakh.ru\/download\/?myctophoto\">Скачать схему расположения фотофор миктофид<\/a> (АИ, 160 КБ)<\/b><\/span><\/p>\n<p>Светящиеся анчоусы относятся к семейству Myctophidae. Их  еще называют миктофовыми рыбами или <i>миктофидами<\/i>.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/Solvin-Zankl.jpg\" width=\"500\" height=\"335\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Светящаяся миктофида. &copy; <a href=\"http:\/\/solvinzankl.photoshelter.com\/image\/I0000dgQ2prpFW.s\">Солвин Занкл<\/a><\/div>\n<\/div>\n<p>Миктофиды глубоководные рыбы. Они встречаются от поверхности до глубины более 2 км. Рыбы мелкие: от 2 до 25 см длиной, но большинство экземпляров не превышают 15 см. Однако в глубинах океана их так много, что их считают потенциальным объектом промысла. Мясо миктофид вполне съедобно.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/worms-mictophydae.png\" width=\"500\" height=\"260\" alt=\"\" \/>\n<div class=\"e2-text-caption\">После формалина миктофиды похожи на консервированный шпрот, по этой причине из обозвали анчоусами. <a href=\"http:\/\/www.marinespecies.org\/photogallery.php?pic=40656\">Фото Вормса<\/a><\/div>\n<\/div>\n<p>Примечательная особенность миктофид — разбросанные по телу многочисленные светящиеся органы — <i>фотофоры<\/i>. Это крошечные фонарики. Они светятся за счет химических реакций биолюминесценции и испускают синий, зеленый или желтый свет. Фотофоры помогают миктофидам подсвечивать окружающее пространство и находить вкусных планктонных рачков, узнавать друг друга, общаться и <a href=\"https:\/\/www.google.com\/search?q=противотеневой+эффект\">маскироваться<\/a>.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/family_myctophidae_by_annarchist.jpg\" width=\"456\" height=\"248\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Подглазничные фотофоры освещают пространство перед рылом рыбы, примерно как на <a href=\"http:\/\/annarchist.deviantart.com\/art\/Family-Myctophidae-42949909\">рисунке АннаРхиста<\/a><\/div>\n<\/div>\n<p>Расположение фотофор уникально у каждого вида. Поэтому ихтиологи используют фотофоры для идентификации миктофид.<\/p>\n<p>Так как фотофор много, исследователи обозначили каждую фотофору и нарисовали схемы-подсказки. Я нашел шесть таких схем.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/USSR-myctophidae-photophores-scheme.gif\" width=\"800\" height=\"786\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Определители по фауне СССР. Том 84. Рыбы Японского моря и сопредельных областей Охотского и Желтого морей. Часть 2. Ascipenseriformes-Polynemiformes<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/FAO-Myctophydae.gif\" width=\"800\" height=\"414\" alt=\"\" \/>\n<div class=\"e2-text-caption\">FAO fishes identification sheets for fishery purposes. <a href=\"ftp:\/\/ftp.fao.org\/docrep\/fao\/009\/ad468e\/ad468eIO.pdf\">Myctophidae<\/a> (ПДФ, 0,5 МБ)<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/unknown.gif\" width=\"800\" height=\"325\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Подарок знакомого ихтиолога<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/tolweb-Myctophidae.gif\" width=\"800\" height=\"305\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><a href=\"tolweb.org\/Myctophidae\">Миктофида с Древа жизни<\/a><\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/Hygophum-hygomii-wikipedia.gif\" width=\"800\" height=\"395\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Hygophum_hygomii_Photophores.jpg\"><i>Hygophum hygomii<\/i> из Википедии<\/a><\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/Myctophidae-in-Tatsuta-et-al-(2014).gif\" width=\"800\" height=\"423\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Рисунок из <a href=\"http:\/\/eprints.lib.hokudai.ac.jp\/dspace\/handle\/2115\/55459\">статьи Татсуты с соавторами, 2014<\/a><\/div>\n<\/div>\n<p>Ни одна мне не подошла и я нарисовал свою.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/myctophydae-photophores-signed.png\" width=\"800\" height=\"350\" alt=\"\" \/>\n<\/div>\n<p><b><a href=\"http:\/\/antonlyakh.ru\/download\/?myctophoto\">Скачать схему расположения фотофор миктофид<\/a> (АИ, 160 КБ)<\/b><\/p>\n<p>Схема сделана в Иллюстраторе. В основе <a href=\"http:\/\/www.fishwisepro.com\/Pictures\/details.aspx?SId=57497&PictureId=1\">изображение самки <i>Benthosema pterotum<\/i><\/a>. Тело, плавники, жаберные крышки, боковая линия и челюсти рыбы — отдельные контуры. Значит на основе рисунка вы сможете изобразить строение любой костной рыбы. Расположение фотофор абстрактно, основано на вышеприведенных изображениях.<\/p>\n<p><b>Я разрешаю использовать схему для любых целей. Разрешаю вносить правки и приветствую правки, улучшающие восприятие схемы. Я буду рад, если кто-то сделает схему лучше и поделится работой в комментариях.<\/b><\/p>\n<p>Готовую схему я сделаю интерактивной и использую в определителе миктофид Мирового океана.<\/p>\n<h3>Дополнительное чтение<\/h3>\n<p>«<a href=\"http:\/\/www.vokrugsveta.ru\/vs\/article\/311\/\">Подводная феерия<\/a>». Ирина Травина рассказала о морской биолюминесценции<\/p>\n",
            "date_published": "2016-03-14T19:57:03+03:00",
            "date_modified": "2016-03-14T19:50:47+03:00",
            "image": "https:\/\/antonlyakh.ru\/blog\/pictures\/Solvin-Zankl.jpg",
            "_date_published_rfc2822": "Mon, 14 Mar 2016 19:57:03 +0300",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/antonlyakh.ru\/blog\/all\/scheme-of-myctophidae-photophores\/",
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/Solvin-Zankl.jpg",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/worms-mictophydae.png",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/family_myctophidae_by_annarchist.jpg",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/USSR-myctophidae-photophores-scheme.gif",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/FAO-Myctophydae.gif",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/unknown.gif",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/tolweb-Myctophidae.gif",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/Hygophum-hygomii-wikipedia.gif",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/Myctophidae-in-Tatsuta-et-al-(2014).gif",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/myctophydae-photophores-signed.png"
                ]
            }
        },
        {
            "id": "12",
            "url": "https:\/\/antonlyakh.ru\/blog\/all\/koordinaty-krivyh-iz-svg-fayla\/",
            "title": "Координаты кривых из СВГ файла",
            "content_html": "<p><span style=\"display: inline-block; font-weight: bold; padding: 6px; background-color: #7fC\"><a href=\"http:\/\/antonlyakh.ru\/download\/?svg2txt\">Скачать конвертер<\/a><\/span><\/p>\n<p>Для работы мне необходимы контуры микроорганизмов, которые я использую для сравнения форм. Я получаю контуры из фотографий, очерчивая объект в векторном редакторе. Программа сохраняет результат в СВГ файле, а мне нужны живые координаты точек. Чтобы получить координаты, я анализирую СВГ файл.<\/p>\n<p>СВГ файл состоит из тегов. Я разберу только один — <abbr>path<\/abbr>, — остальные мне не нужны. Он хранит описание криволинейных и замкнутых траекторий. Траектория — это и есть тот самый контур микроорганизма.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/trajectory.jpg\" width=\"600\" height=\"505\" alt=\"\" \/>\n<\/div>\n<h2>Учим синтаксис тега <abbr>path<\/abbr><\/h2>\n<p>Описание траектории вложено в тег <abbr>svg<\/abbr>. Примерно так:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">Заголовок подтверждающий, что это СВГ\r\n&lt;svg&gt;\r\n  &lt;path ... \/&gt;\r\n&lt;\/svg&gt;<\/code><\/pre><p>Тег <abbr>path<\/abbr> содержит один атрибут <abbr>d<\/abbr> с алгоритмом рисования траектории.<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">&lt;path d=&quot;алгоритм рисования&quot; \/&gt;<\/code><\/pre><p>Алгоритм состоит из <i>букв-команд<\/i> и <i>цифр-координат,<\/i> которые разделенны <i>пробелом, запятой<\/i> или <i>знаком минус.<\/i> Траекторию рисует перо, буквы-команды управляют, цифры-координаты показывают куда или как сместить перо, а разделители отделяют одно от другого.<\/p>\n<h3>Разделители разделяют<\/h3>\n<p>Пробел — это стандартный разделитель. Его можно ставить везде между командами и координатами. Спецификация СВГ разрешает не писать пробел, когда из контекста понятно, что здесь две разные сущности. Это сокращает объем СВГ-файла.<\/p>\n<p>Запомним:<\/p>\n<ul>\n<li>пробел не нужен между командой и числом;<\/li>\n<li>пробел не нужен после запятой;<\/li>\n<li>пробел не нужен перед знаком минус.<\/li>\n<\/ul>\n<p>Запятая тоже разделяет два числа, но вместо нее можно написать пробел. Что именно написать — дело вкуса.<\/p>\n<p>Следующие три записи эквивалентны, но последняя компактнее.<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">&lt;path d=&quot;M 15 17 L 18 -23 Z&quot; \/&gt;\r\n&lt;path d=&quot;M 15, 17 L 18, -23 Z&quot; \/&gt;\r\n&lt;path d=&quot;M15,17L18-23Z&quot; \/&gt;<\/code><\/pre><p>Теперь о цифрах.<\/p>\n<h3>Цифры хранят координаты<\/h3>\n<p>СВГ предназначен для хранения двумерной графики. Поэтому цифры задают координаты точек на плоскости. Для каждой точки используется два числа — первое для <i>x<\/i>, второе для <i>y<\/i>.<\/p>\n<p>Координаты бывают абсолютными и относительными. Абсолютные координаты отсчитываются от нуля, относительные — от конечной точки предыдущей команды. Относительные — это шаг, на который надо сдвинуть перо относительно последней позиции.<\/p>\n<p>Тип координат определяет регистр буквы-команды: большая буква обозначает абсолютную позицию, маленькая — относительную.<\/p>\n<blockquote>\n<blockquote>\n<p>Заглавная буква-команда — для абсолютных координат, прописная — для относительных<\/p>\n<\/blockquote>\n<\/blockquote>\n<p>Точка является десятичным разделителем вещественных чисел. Запись <abbr>12,75<\/abbr> — это два числа: 12 и 75, тогда как <abbr>12.75<\/abbr> — это одно вещественное число.<\/p>\n<blockquote>\n<blockquote>\n<p>Точка — десятичный разделитель, запятая отделяет два числа.<\/p>\n<\/blockquote>\n<\/blockquote>\n<p>Цифры еще описывают дополнительные параметры команды <b>A<\/b>, которая рисует дуги.<\/p>\n<h3>Буквы управляют пером<\/h3>\n<p>Буквы — это команды, которые управляют пером. За каждой командой следуют пары координат, которые показывают, куда сместить перо или как закруглить линию. Тег <abbr>path<\/abbr> использует следующие команды:<\/p>\n<ul>\n<li><b>M<\/b> — начать новую траекторию: переместить перо в заданную точку без рисования.<\/li>\n<li><b>Z<\/b> — замкнуть траекторию: переместить перо в начальную точку и нарисовать линию.<\/li>\n<li><b>С<\/b>, <b>S<\/b> — нарисовать кубическую кривую Безье.<\/li>\n<li><b>Q<\/b>, <b>T<\/b> — нарисовать квадратную кривую Безье.<\/li>\n<li><b>L<\/b>, <b>Н<\/b> и <b>V<\/b> — нарисовать произвольную, вертикальную или горизонтальную прямую.<\/li>\n<li><b>A<\/b> — нарисовать дугу окружности или эллипса.<\/li>\n<\/ul>\n<p>Команду <b>A<\/b> я пропущу, но рассмотрю остальные.<\/p>\n<h5><i>M x y<\/i><\/h5>\n<p><b>М<\/b> или <b>m<\/b> начинает новую траекторию. Команда перемещает перо в заданную точку и ничего не рисует. Большое <b>М<\/b> — первая обязательная команда тега <abbr>path<\/abbr>.<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">&lt;path d=&quot;M20 50...&quot; \/&gt;<\/code><\/pre><h5><i><b>Z<\/b><\/i><\/h5>\n<p><b>Z<\/b> или <b>z<\/b> замыкает траекторию — проводит прямую линию от последней позиции пера к первой точке траектории. Регистр буквы не важен. Обычно это последняя команда тега. Если нет, тогда после <b>z<\/b> опять стоит большое <b>M<\/b>, которое начинает новую траекторию. Если <b>z<\/b> не написано, траектория незамкнута.<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">&lt;path d=&quot;M20 50 L 10 10, 140 10, 110 50z&quot; \/&gt;<\/code><\/pre><div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/open-path.gif\" width=\"384\" height=\"132\" alt=\"\" \/>\n<\/div>\n<pre class=\"e2-text-code\"><code class=\"\">&lt;path d=&quot;M20 50 L 10 10, 140 10, 110 50z&quot; \/&gt;<\/code><\/pre><div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/closed-path.gif\" width=\"374\" height=\"132\" alt=\"\" \/>\n<\/div>\n<pre class=\"e2-text-code\"><code class=\"\">&lt;path d=&quot;M20 50 L 10 10, 140 10z M110 50, 80 60, 95 90z&quot; \/&gt;<\/code><\/pre><div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/two-closed-path.gif\" width=\"374\" height=\"234\" alt=\"\" \/>\n<\/div>\n<h5><i><b>L<\/b> x y<\/i><\/h5>\n<p><b>L<\/b> или <b>l<\/b> рисует прямую линию от последней позиции пера до заданной точки. Несколько следующих друг за другом команд описывают ломаную. В такой записи, для краткости, все <b>L<\/b>, кроме первой, не пишут. Если <b>L<\/b> стоит после <b>M<\/b>, ее тоже не пишут. Вот так:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">&lt;path d=&quot;M 70,12 L 24,30 L 60,70 L 120,50&quot; \/&gt;\r\n&lt;path d=&quot;M 70,12 L 24,30 60,70 120,50&quot; \/&gt;\r\n&lt;path d=&quot;M 70,12 24,30 60,70 120,50&quot; \/&gt;<\/code><\/pre><div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/polyline.gif\" width=\"266\" height=\"172\" alt=\"\" \/>\n<\/div>\n<h5><i><b>H<\/b> x<\/i><\/h5>\n<p><b>H<\/b> или <b>h<\/b> рисует горизонтальную линию от последней позиции пера до указанной точки. Координата <i>у<\/i> не меняется.<\/p>\n<h5><i><b>V<\/b> x<\/i><\/h5>\n<p><b>V<\/b> или <b>v<\/b> рисует вертикальную линию от последней позиции пера до указанной точки. Координата <i>x<\/i> не меняется.<\/p>\n<h5><i><b>C<\/b> cx<sub>1<\/sub> cy<sub>1<\/sub> cx<sub>2<\/sub> cy<sub>2<\/sub> x<sub>2<\/sub> y<sub>2<\/sub><\/i><\/h5>\n<p><b>С<\/b> или <b>с<\/b> строит кубическую кривую Безье. Она состоит из четырех точек: первая и последняя задают начало и конец кривой, две промежуточные управляют формой. Так как первая точка совпадает с текущим положением пера, то после команды <b>C<\/b> указывают только три точки: две управляющие вершины (<i>cx<sub>1<\/sub> cy<sub>1<\/sub><\/i>), (<i>cx<sub>2<\/sub> cy<sub>2<\/sub><\/i>) и последнюю точку кривой (<i>x<sub>2<\/sub> y<sub>2<\/sub><\/i>).<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">&lt;path d=&quot;M40 50 C 60 10, 90 90, 110 50&quot; \/&gt;<\/code><\/pre><div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/bezier.gif\" width=\"314\" height=\"118\" alt=\"\" \/>\n<\/div>\n<p><i>Поликривая Безье<\/i> — это несколько соприкасающихся кривых Безье, где конец одной кривой становится началом следующей. Последовательные команды <b>C<\/b> описывают поликривую. Для экономии байтов все команды, кроме первой <b>C<\/b>, не пишут.<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">&lt;path d=&quot;M30 100C50 50,70 20,100 100,110 130,45 150,65 100&quot; \/&gt;<\/code><\/pre><div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/bezier-polyline.gif\" width=\"270\" height=\"302\" alt=\"\" \/>\n<\/div>\n<p>Обычно в месте соприкосновения кривых Безье гладкость поликривой нарушается. Чтобы поликривая оставалась гладкой, используют команду <b>S<\/b>.<\/p>\n<h5><i><b>S<\/b> cx<sub>2<\/sub> cy<sub>2<\/sub> x<sub>2<\/sub> y<sub>2<\/sub><\/i><\/h5>\n<p><b>S<\/b> или <b>s<\/b> строит гладкую кубическую кривую Безье так, что ее первая управляющая вершина является зеркальным отражением второй управляющей вершины предыдущей кривой Безье. Отражение относительно начальной точки данной кривой.<\/p>\n<h5><i><b>Q<\/b> cx<sub>1<\/sub> cy<sub>1<\/sub> x<sub>2<\/sub> y<sub>2<\/sub><\/i><\/h5>\n<p><b>Q<\/b> или <b>q<\/b> строит квадратную кривую Безье. Синтаксис команды аналогичен <b>C<\/b>, только здесь используется одна управляющая вершина.<\/p>\n<p>Несколько команд <b>Q<\/b> описывают квадратную поликривую Безье. Для краткости все команды, кроме первой <b>Q<\/b>, не пишут. Чтобы квадратная поликривая получилась гладкой, используют команду <b>T<\/b>.<\/p>\n<h5><i><b>T<\/b> x<sub>2<\/sub> y<sub>2<\/sub><\/i><\/h5>\n<p><b>T<\/b> или <b>t<\/b> строит гладкую квадратную кривую Безье так, что ее единственная управляющая вершина является зеркальным отражением управляющей вершины предыдущей кривой Безье.<\/p>\n<p>Со структурой файла разобрались.<\/p>\n<p><a name=\"svg-converter\"><\/a><\/p>\n<h3>Пишем конвертер СВГ в текст<\/h3>\n<p>Конвертер готов. Это экзешник. Инсталировать не нужно. Сохраните на диск и запустите.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/antonlyakh.ru\/blog\/pictures\/svg-converter.gif\" width=\"645\" height=\"446\" alt=\"\" \/>\n<\/div>\n<p><span style=\"display: inline-block; font-weight: bold; padding: 6px; background-color: #7fC\"><a href=\"http:\/\/antonlyakh.ru\/download\/?svg2txt\">Скачать конвертер<\/a><\/span><\/p>\n<p>Для описания любого контура достаточно трех команд: <abbr>M<\/abbr>, <abbr>C<\/abbr> и <abbr>Z<\/abbr>. Конвертер понимает еще и четвертую: <abbr>L<\/abbr>, остальные — нет.<\/p>\n<p>Конвертер выбирает из СВГ-файла теги <abbr>path<\/abbr>, вычисляет координаты точек траектории и сохраняет их в текстовом файле.<\/p>\n<p>Конвертер не проверяет валидность СВГ-файла. Ему все равно, какая информация находится вокруг тега <abbr>path<\/abbr>. На вход конвертера можно подать любой мусор с корректными данными только в теге <abbr>path<\/abbr>.<\/p>\n<p>Конвертер поддерживает пропорциональное и произвольное масштабирование координат: перед сохранением он спрашивает размер области, в которую надо вписать траекторию.<\/p>\n<p>Конвертер позволяет задать позицию начала координат: в одном из углов, на середине стороны или в центре прямоугольника, ограничивающего контур.<\/p>\n<p>Конвертер сохраняет в текстовом файле пары чисел — двумерные координаты точек контура. Десятичный разделитель — точка. Числа разделены пробелом.<\/p>\n<p><abbr>12.3 15.6 78.4 24.1 15 123<\/abbr><\/p>\n<h3>Детали<\/h3>\n<p>Конвертер написан на Дельфи 7.<\/p>\n<p>Пары чисел вырезаю из СВГ-файла с помощью регулярного выражения. Понимает числа разделенные пробелом, запятой или минусом.<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">\/(-?\\d+(\\.\\d+)?)[,|\\s]?(-?\\d+(\\.\\d+)?)\\s?\/<\/code><\/pre><p>Для построения кубической кривой Безье применяю <a href=\"https:\/\/rsdn.ru\/article\/multimedia\/Bezier.xml\">адаптивное разбиение<\/a>.<\/p>\n<p>Полученные данные анализирую методами геометрической морфометрии. Но это уже другая история.<\/p>\n<p>С Новым годом!<\/p>\n",
            "date_published": "2015-12-30T19:29:28+03:00",
            "date_modified": "2016-03-14T19:42:28+03:00",
            "image": "https:\/\/antonlyakh.ru\/blog\/pictures\/trajectory.jpg",
            "_date_published_rfc2822": "Wed, 30 Dec 2015 19:29:28 +0300",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/antonlyakh.ru\/blog\/all\/koordinaty-krivyh-iz-svg-fayla\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/trajectory.jpg",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/open-path.gif",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/closed-path.gif",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/two-closed-path.gif",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/polyline.gif",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/bezier.gif",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/bezier-polyline.gif",
                    "https:\/\/antonlyakh.ru\/blog\/pictures\/svg-converter.gif"
                ]
            }
        }
    ],
    "_e2_version": 3559,
    "_e2_ua_string": "E2 (v3559; Aegea)"
}