Документ описывает функциональные возможности веб-приложения для добавления интерактивных элементов на изображения: загрузку, булавки, векторные фигуры и подсказки, сохранение в localStorage, интерфейс и ожидаемые ограничения.

Полный текст разделов приведён ниже; для навигации используйте оглавление.

Программное обеспечение (ПО), предоставленное для экспертной проверки, представляет собой веб-приложение, которое позволяет пользователям добавлять интерактивные элементы (булавки, векторные фигуры, подсказки) на изображения. Это ПО ориентировано на удобство использования, не требующее знаний в программировании, и предоставляет простые инструменты для создания интерактивных изображений.

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

2.1. Загрузка изображений

ПО позволяет пользователю загружать изображения для работы. Эти изображения могут быть любого поддерживаемого формата, например, .jpg, .png, .gif.

• функция: загрузка изображений через стандартный элемент <img> или через API;

• особенности: изображение автоматически подстраивается по размеру контейнера для лучшего отображения на экране пользователя.

2.2. Добавление интерактивных элементов

ПО предоставляет возможность добавлять на изображение несколько типов интерактивных элементов, которые могут быть изменены и взаимодействовать с пользователем. К основным типам элементов относятся:

1. Булавки:

○ описание: позволяют пользователю размещать точку на изображении, которая может быть помечена текстом (например, подсказкой);

○ действие: булавка появляется при клике на изображение в определённой точке. Текст подсказки можно редактировать;

○ функции:

— клик по изображению в любой точке добавляет булавку с текстом подсказки;

— местоположение булавки можно изменять, перетаскивая её;

— текст можно редактировать;

— сохранение состояния булавки в localStorage.

2. Векторные фигуры:

○ описание: пользователь может рисовать на изображении простые фигуры, такие как прямоугольники, круги и линии;

○ действие: для рисования фигуры необходимо выбрать тип фигуры в интерфейсе и разместить её на изображении с помощью перетаскивания или указания точек;

○ функции:

— рисование фигур с возможностью изменения их размеров и положения;

— поддержка редактирования размеров и координат фигуры;

— изменение цвета, толщины линий и других свойств фигуры.

3. Подсказки:

○ описание: механизм добавления всплывающих подсказок, которые могут отображаться при наведении на элементы (булавки или фигуры);

○ действие: подсказки привязываются к объектам (булавкам или фигурам) и отображаются при взаимодействии с ними;

○ функции:

— возможность редактирования текста подсказки;

— указание временной задержки для отображения подсказки.

2.3. Редактирование элементов

ПО предоставляет пользователю функционал для редактирования добавленных интерактивных элементов, таких как:

• перемещение: все элементы (булавки, фигуры) можно перемещать по изображению;

• изменение размера: для векторных фигур доступна возможность изменения их размера с помощью перетаскивания углов;

• удаление: элементы можно удалять с изображения с помощью кнопки удаления.

2.4. Сохранение состояния

ПО позволяет сохранять добавленные элементы и их состояния (позиции, размеры, текст подсказок и т. д.) локально через localStorage. Это обеспечивает:

• автоматическое восстановление состояния после перезагрузки страницы;

• сохранение всех добавленных элементов, пока пользователь не решит их удалить или сбросить.

2.5. Поддержка многократных добавлений элементов

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

2.6. Кроссбраузерность

ПО оптимизировано для работы в современных браузерах, таких как:

• Google Chrome

• Mozilla Firefox

• Microsoft Edge

• Safari

Работа в старых версиях браузеров может быть ограничена.

1. Интерфейс:

○ ПО предоставляет простой и интуитивно понятный интерфейс с возможностью добавления элементов через прямые действия пользователя (клики и перетаскивания).

○ Для добавления элементов пользователю не требуется написания кода.

2. Процесс работы:

○ загрузка изображения;

○ выбор типа интерактивного элемента;

○ добавление элемента на изображение;

○ редактирование или удаление элементов;

○ сохранение состояния (локально).

3. Хранение данных:

○ использование localStorage для хранения состояния добавленных элементов (например, булавок, подсказок и фигур);

○ хранение данных на сервере возможно, но требует доработки и настройки серверной части (например, API для синхронизации данных).

1. Панель инструментов:

○ в левой части экрана расположена панель инструментов, где пользователи могут выбрать тип элемента (булавка, фигура, подсказка);

○ панель также может содержать кнопки для удаления элементов, сброса состояния и сохранения.

2. Перетаскивание и изменение элементов:

○ после добавления элемента на изображение его можно перетаскивать, изменять его размер или редактировать текст.

3. Контекстное меню:

○ в контекстном меню (по правому клику на элемент) могут быть доступны дополнительные опции для редактирования или удаления.

• поддержка внешних API: в будущем возможно расширение ПО для работы с сервером (например, для хранения данных на сервере, создания пользовательских аккаунтов и синхронизации данных);

• поддержка различных форматов изображений: в версии 1.0 поддерживаются основные форматы изображений, однако можно добавить поддержку других типов файлов (например, векторных форматов или анимаций).

1. Операционная система:

○ ПО поддерживает работу на всех популярных операционных системах (Windows, macOS, Linux).

2. Браузер:

○ необходим современный браузер, поддерживающий HTML5, CSS3 и JavaScript (Google Chrome, Mozilla Firefox, Safari, Microsoft Edge).

3. Производительность:

○ ПО рассчитано на работу с изображениями стандартных размеров (до 10–20 МБ). Для работы с большими изображениями требуется больше памяти.

1. Размер изображения:

○ при загрузке изображений больших размеров (более 10–20 МБ) может возникнуть замедление работы программы;

○ для оптимальной работы рекомендуется использовать изображения с разрешением до 4000×4000 пикселей.

Данное ПО предоставляет мощные, но простые в использовании инструменты для добавления интерактивных элементов на изображения. Пользователи могут легко добавлять и редактировать булавки, фигуры и подсказки, а также сохранять и восстанавливать состояние сессии через localStorage. Интуитивно понятный интерфейс позволяет работать без необходимости программирования, а кроссбраузерность делает ПО доступным для широкого круга пользователей.