Добавление аннотаций к изображениям: разметка с помощью пера, стрелок и кругов

Что вы сможете сделать после изучения

✅ Прикреплять изображения к обзору планов или обзору кода
✅ Использовать инструмент пера для свободного рисования аннотаций
✅ Использовать инструмент стрелок для выделения важных областей
✅ Использовать инструмент кругов для выделения областей
✅ Настраивать цвет аннотаций и размер пера
✅ Использовать горячие клавиши для быстрого переключения инструментов и операций

Ваши текущие проблемы

Проблема 1: При обзоре макетов UI или схем процессов текстовые описания недостаточно наглядны, необходимо выделять проблемные области.

Проблема 2: Хотите добавить скриншоты с аннотациями к обзору кода, но можете только текстом указать "здесь проблема", без возможности непосредственной разметки на изображении.

Проблема 3: Получили ссылку на изображение от команды, хотите быстро добавить аннотации с отзывом, но не хотите скачивать его локально для обработки другими инструментами.

Plannotator поможет вам:

Разметка изображений непосредственно в браузере без необходимости скачивания
Три инструмента: перо, стрелки, круги — охватывают все сценарии разметки
Пять цветов и пять размеров пера для гибкой настройки аннотаций
Горячие клавиши для повышения эффективности разметки

Когда использовать этот метод

Сценарии использования:

При обзоре макетов UI, схем процессов, архитектурных схем необходимо аннотировать проблемы
При обзоре кода необходимо сделать скриншот и аннотировать проблемы в коде
Поделиться изображениями с аннотациями с членами команды
Необходимо выделить важные области на изображении или добавить стрелки для указания

🎒 Подготовка перед началом

Предварительные условия

В этом учебном пособии предполагается, что вы уже:

✅ Завершили Основы обзора планов или Основы обзора кода
✅ Знаете, как открыть страницу обзора планов или обзора кода
✅ Понимаете базовые операции с комментариями

Основная идея

Три инструмента аннотации изображений:

Инструмент	Иконка	Горячая клавиша	Назначение
Перо	🖊️	1	Свободное рисование, подходит для рукописных аннотаций и выделения произвольных форм
Стрелка	➡️	2	Выделение важных областей или указание направления, подходит для точечных аннотаций
Круг	⭕	3	Выделение областей, подходит для акцентирования внимания на элементе

Рабочий процесс:

Загрузка изображения → Выбор инструмента → Настройка цвета и размера → Рисование на изображении → Сохранение

Делайте вместе со мной

Шаг 1: Откройте страницу обзора планов или обзора кода

Зачем Функция аннотации изображений в Plannotator интегрирована в обзор планов и обзор кода.

Действия

Запустите обзор планов (вызывается Claude Code или вызов submit_plan через OpenCode)
Или выполните команду /plannotator-review для запуска обзора кода

Что вы должны увидеть:

Браузер открывает страницу обзора
В правом верхнем углу есть кнопка «Upload» или «附件»

Шаг 2: Загрузите изображение

Зачем Необходимо сначала загрузить изображение для аннотации.

Действия

Нажмите кнопку «Upload» или «附件» в правом верхнем углу страницы
Выберите изображение для разметки (поддерживаются форматы PNG, JPEG, WebP)
После загрузки изображение отобразится в списке комментариев

Что вы должны увидеть:

Миниатюра изображения появляется в области комментариев
При нажатии на миниатюру открывается редактор аннотаций

Источники изображений

Вы можете получить изображения следующими способами:

Скриншот и вставка (Ctrl+V / Cmd+V)
Выбор из локальных файлов
Перетаскивание изображения на страницу

Шаг 3: Откройте редактор аннотаций изображений

Зачем Редактор аннотаций предоставляет инструменты рисования и выбор цвета.

Действия

Нажмите на миниатюру загруженного изображения
Редактор аннотаций откроется во всплывающем окне

Что вы должны увидеть:

Изображение отображается по центру
В верхней части есть панель инструментов
Панель инструментов слева направо: выбор инструмента, размер пера, выбор цвета, отмена, очистка, сохранение

Шаг 4: Используйте инструмент пера для свободного рисования

Зачем Инструмент перо подходит для рукописных аннотаций или выделения произвольных форм.

Действия

Убедитесь, что выбран инструмент перо (иконка 🖊️, выбран по умолчанию)
Нажмите левую кнопку мыши и рисуйте на изображении
Отпустите кнопку мыши для завершения рисования

Что вы должны увидеть:

Линия следует за движением мыши
После отпускания кнопки мыши нарисованная форма фиксируется на изображении

Особенности пера

Использует библиотеку perfect-freehand для плавного эффекта рукописного ввода
Поддерживает чувствительность к давлению (если ваше устройство поддерживает)
Чем толще перо, тем плавнее линия

Шаг 5: Используйте инструмент стрелок для выделения важных областей

Зачем Стрелки подходят для точечных аннотаций, чётко указывающих на расположение проблемы.

Действия

Нажмите на инструмент стрелок (иконка ➡️) или нажмите горячую клавишу 2
Нажмите на изображении для определения начала стрелки
Перетащите к целевой позиции и отпустите кнопку мыши для завершения рисования стрелки

Что вы должны увидеть:

Прямая линия от начальной точки до конечной
В конечной точке есть стрелка, указывающая на целевую позицию

Советы по рисованию стрелок

Начальная точка — это хвост стрелки, конечная точка — это голова стрелки
В процессе перетаскивания можно предварительно просмотреть направление стрелки
Подходит для сценариев "здесь проблема" или "нужно изменить это"

Шаг 6: Используйте инструмент кругов для выделения областей

Зачем Круги подходят для акцентирования внимания на элементе, чётко выделяя область.

Действия

Нажмите на инструмент круг (иконка ⭕) или нажмите горячую клавишу 3
Нажмите на изображении для определения одной стороны круга
Перетащите к противоположной стороне и отпустите кнопку мыши для завершения рисования круга

Что вы должны увидеть:

Круг, где линия от начальной точки до конечной является диаметром
Центр круга — это середина линии между двумя точками

Принцип рисования кругов

Инструмент круг рисует от края до края:

Первое нажатие: одна сторона круга
Перетаскивание: определение диаметра круга
Отпускание: завершение рисования круга

Реализация в исходном коде (utils.ts:95-124):

typescript

// Центр — это середина между начальной и конечной точками
const cx = (x1 + x2) / 2;
const cy = (y1 + y2) / 2;

// Радиус — это половина расстояния между двумя точками
const radius = Math.hypot(x2 - x1, y2 - y1) / 2;

Шаг 7: Настройте цвет аннотаций

Зачем Разные цвета могут различать разные типы аннотаций (например, красный для ошибок, зелёный для предложений).

Действия

Нажмите на цветной кружок на панели инструментов
Доступные цвета: красный, жёлтый, зелёный, синий, белый

Что вы должны увидеть:

Выбранный цветной кружок увеличивается
Все новые аннотации используют текущий цвет

Рекомендации по использованию цветов

Красный: ошибки, проблемы, содержимое для удаления
Жёлтый: предупреждения, внимание, места, требующие подтверждения
Зелёный: предложения, оптимизация, улучшения
Синий: дополнительные пояснения, примечания
Белый: подходит для изображений с тёмным фоном

Шаг 8: Настройте размер пера

Зачем Разные размеры пера подходят для разных сценариев разметки.

Действия

Нажмите кнопку - или + на панели инструментов
Или наблюдайте предварительный просмотр текущего размера пера (кружок)

Что вы должны увидеть:

Доступные размеры пера: 3, 6, 10, 16, 24
В середине панели инструментов отображается предварительный просмотр текущего размера пера

Рекомендации по размеру пера

3: точная разметка мелких элементов (например, кнопки, иконки)
6: обычная разметка (значение по умолчанию)
10: толстые линии, подходят для выделения больших областей
16: очень толстые линии, подходят для акцентирования внимания на важном
24: максимальный размер пера, подходит для выделения очень больших областей

Шаг 9: Отмена и очистка

Зачем В процессе разметки неизбежно возникают ошибки, необходимо отменить или начать заново.

Действия

Отмена последнего действия: нажмите на иконку отмены (↩️) или нажмите Cmd+Z / Ctrl+Z
Очистка всех аннотаций: нажмите на иконку очистки (❌)

Что вы должны увидеть:

Отмена: последняя нарисованная аннотация исчезает
Очистка: все аннотации удаляются, восстанавливается исходное изображение

Предупреждение об очистке

Действие очистки невозможно отменить, используйте его осторожно. Рекомендуется сначала использовать отмену для постепенного возврата.

Шаг 10: Сохраните аннотации

Зачем После сохранения аннотаций изображение объединяется с комментариями и может быть просмотрено в обзоре.

Действия

Нажмите на иконку сохранения (✅) справа на панели инструментов
Или нажмите клавишу Esc или Enter
Или нажмите на область вне всплывающего окна

Что вы должны увидеть:

Всплывающее окно закрывается
Миниатюра изображения обновляется до версии с аннотациями
Изображение прикреплено к текущему комментарию

Механизм сохранения

Если не нарисовано никаких аннотаций, сохраняется исходное изображение
Если есть аннотации, исходное изображение и аннотации объединяются в новое изображение
Объединённое изображение сохраняется в формате PNG с сохранением высокого качества

Контрольная точка ✅

Проверьте свои результаты обучения:

[ ] Можете успешно загрузить изображение на страницу обзора
[ ] Можете использовать три инструмента (перо, стрелки, круги) для рисования аннотаций
[ ] Можете настраивать цвет аннотаций и размер пера
[ ] Можете использовать горячие клавиши (1/2/3, Cmd+Z, Esc) для быстрых операций
[ ] Можете отменять ошибочные аннотации
[ ] Можете сохранять изображение с аннотациями

Предупреждения о подводных камнях

Проблема 1: Направление стрелки обратное

Симптом: Стрелка указывает в неправильном направлении.

Причина: Инструмент стрелки рисует от начальной точки (хвост) до конечной точки (голова).

Решение:

Перерисуйте, убедившись, что начальная точка — это хвост стрелки, а конечная — голова
Если уже нарисовано, отмените и перерисуйте

Проблема 2: Неправильное положение круга

Симптом: Круг не выделяет целевую область.

Причина: Инструмент круг рисует от края до края, центр — это середина между двумя точками.

Решение:

Первое нажатие на краю целевой области
Перетащите к противоположной стороне, убедившись, что целевая область внутри круга
При настройке можно отменить и перерисовать

Проблема 3: Перо слишком толстое или слишком тонкое

Симптом: Эффект разметки неудовлетворительный.

Причина: Размер пера не подходит для текущего сценария.

Решение:

Используйте кнопки - или + на панели инструментов для настройки размера пера
Для мелких элементов используйте 3-6, для больших областей — 10-24

Проблема 4: Цвет плохо виден

Симптом: На тёмном фоне используется чёрное перо, аннотации плохо видны.

Причина: Неправильный выбор цвета.

Решение:

Для тёмного фона используйте белый или жёлтый
Для светлого фона используйте красный, зелёный или синий

Справочник по горячим клавишам

Горячая клавиша	Функция
`1`	Переключиться на инструмент пера
`2`	Переключиться на инструмент стрелок
`3`	Переключиться на инструмент круга
`Cmd+Z` / `Ctrl+Z`	Отменить последнее действие
`Esc` / `Enter`	Сохранить аннотации

Итоги урока

В этом уроке вы узнали:

Загрузка изображений: через кнопку загрузки или вставку на страницу обзора
Три инструмента разметки:
- Перо (1): свободное рисование, подходит для рукописных аннотаций
- Стрелка (2): точечные аннотации, подходит для указания на важное
- Круг (3): выделение областей, подходит для акцентирования внимания
Настройка стиля аннотаций: 5 цветов, 5 размеров пера
Отмена и очистка: исправление ошибочных аннотаций
Сохранение аннотаций: объединение аннотаций с изображением

Предпросмотр следующего урока

В следующем уроке мы изучим Основы обзора кода.
Вы узнаете:
Как использовать команду /plannotator-review для обзора git diff diff
Переключение между представлениями side-by-side и unified
Выбор диапазона кода по номерам строк
Добавление комментариев уровня строки (comment/suggestion/concern)
Переключение между разными типами diff
Отправка отзыва AI Agent

Приложение: справочник по исходному коду

Нажмите, чтобы раскрыть расположение исходного кода

Время обновления: 2026-01-24

Функция	Путь к файлу	Строки
Определение типов инструментов	`packages/ui/components/ImageAnnotator/types.ts`	1-40
Функции рендеринга	`packages/ui/components/ImageAnnotator/utils.ts`	1-148
Основной компонент	`packages/ui/components/ImageAnnotator/index.tsx`	1-233
Компонент панели инструментов	`packages/ui/components/ImageAnnotator/Toolbar.tsx`	1-219
Интерсейс Annotation	`packages/ui/types.ts`	11-33

Ключевые типы:

Tool (тип инструмента):

typescript

export type Tool = 'pen' | 'arrow' | 'circle';

Point (точка координат):

typescript

export interface Point {
  x: number;
  y: number;
  pressure?: number;
}

Stroke (штрих):

typescript

export interface Stroke {
  id: string;
  tool: Tool;
  points: Point[];
  color: string;
  size: number;
}

AnnotatorState (состояние аннотатора):

typescript

export interface AnnotatorState {
  tool: Tool;
  color: string;
  strokeSize: number;
  strokes: Stroke[];
  currentStroke: Stroke | null;
}

COLORS (массив цветов):

typescript

export const COLORS = [
  '#ef4444', // red
  '#eab308', // yellow
  '#22c55e', // green
  '#3b82f6', // blue
  '#ffffff', // white
] as const;

STROKE_SIZES (размеры штриха):

typescript

const STROKE_SIZES = [3, 6, 10, 16, 24];

Ключевые функции:

renderPenStroke() (рендеринг штриха пера):

Использует библиотеку perfect-freehand для плавного эффекта рукописного ввода
Поддерживает чувствительность к давлению (поле pressure)

renderArrow() (рендеринг стрелки):

Рисует прямую линию от начальной точки до конечной
Рисует голову стрелки в конечной точке

renderCircle() (рендеринг круга):

Вычисляет середину между двумя точками как центр круга
Вычисляет половину расстояния между двумя точками как радиус

renderStroke() (рендеринг по типу инструмента):

Вызывает соответствующую функцию рендеринга на основе поля tool
Поддерживает масштабирование (параметр scale)

Annotation.imagePaths (поле прикрепленных изображений):

typescript

export interface Annotation {
  // ...
  imagePaths?: string[]; // Прикрепленные изображения (локальные пути или URL)
}

Обработка горячих клавиш (index.tsx:33-59):

typescript

// 1/2/3 для переключения инструментов
if (e.key === '1') setState(s => ({ ...s, tool: 'pen' }));
if (e.key === '2') setState(s => ({ ...s, tool: 'arrow' }));
if (e.key === '3') setState(s => ({ ...s, tool: 'circle' }));

// Cmd+Z для отмены
if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
  e.preventDefault();
  handleUndo();
}

Добавление аннотаций к изображениям: разметка с помощью пера, стрелок и кругов ​

Что вы сможете сделать после изучения ​

Ваши текущие проблемы ​

Когда использовать этот метод ​

🎒 Подготовка перед началом ​

Основная идея ​

Делайте вместе со мной ​

Шаг 1: Откройте страницу обзора планов или обзора кода ​

Шаг 2: Загрузите изображение ​

Шаг 3: Откройте редактор аннотаций изображений ​

Шаг 4: Используйте инструмент пера для свободного рисования ​

Шаг 5: Используйте инструмент стрелок для выделения важных областей ​

Шаг 6: Используйте инструмент кругов для выделения областей ​

Шаг 7: Настройте цвет аннотаций ​

Шаг 8: Настройте размер пера ​

Шаг 9: Отмена и очистка ​

Шаг 10: Сохраните аннотации ​

Контрольная точка ✅ ​

Предупреждения о подводных камнях ​

Проблема 1: Направление стрелки обратное ​

Проблема 2: Неправильное положение круга ​

Проблема 3: Перо слишком толстое или слишком тонкое ​

Проблема 4: Цвет плохо виден ​

Справочник по горячим клавишам ​

Итоги урока ​

Предпросмотр следующего урока ​

Приложение: справочник по исходному коду ​

Добавление аннотаций к изображениям: разметка с помощью пера, стрелок и кругов

Что вы сможете сделать после изучения

Ваши текущие проблемы

Когда использовать этот метод

🎒 Подготовка перед началом

Основная идея

Делайте вместе со мной

Шаг 1: Откройте страницу обзора планов или обзора кода

Шаг 2: Загрузите изображение

Шаг 3: Откройте редактор аннотаций изображений

Шаг 4: Используйте инструмент пера для свободного рисования

Шаг 5: Используйте инструмент стрелок для выделения важных областей

Шаг 6: Используйте инструмент кругов для выделения областей

Шаг 7: Настройте цвет аннотаций

Шаг 8: Настройте размер пера

Шаг 9: Отмена и очистка

Шаг 10: Сохраните аннотации

Контрольная точка ✅

Предупреждения о подводных камнях

Проблема 1: Направление стрелки обратное

Проблема 2: Неправильное положение круга

Проблема 3: Перо слишком толстое или слишком тонкое

Проблема 4: Цвет плохо виден

Справочник по горячим клавишам

Итоги урока

Предпросмотр следующего урока

Приложение: справочник по исходному коду