> This page is for Платформа, version Предыдущая версия. > For other versions, use one of these documentation indexes: > - V4 (default): https://next.developer.frame.io/platform/v4/llms.txt > - Версия 4 экспериментальная: https://next.developer.frame.io/platform/v4-experimental/llms.txt > - Предыдущая версия: https://next.developer.frame.io/platform/v2/llms.txt > For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://next.developer.frame.io/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://next.developer.frame.io/_mcp/server. # Работа с комментариями # Обзор Комментарии в Frame.io представлены как сериализованный JSON-блок объектов рисования с полной информацией о цветах, координатах и размерах. В блоке все кавычки, кроме внешней ограничивающей пары, экранируются с помощью косых черт (например, `\"key\":\"value\"`). Существует три основные фигуры — **стрелка**, **прямоугольник** и **линия** — а также рисование от руки, которое выходит за рамки данного руководства, но следует тем же базовым принципам сериализованных данных координат. ## Система координат Все фигуры размещаются в декартовой системе координат с началом в левом верхнем углу и масштабом от 0 до 1 по каждой оси. coordinate_plane.png ## Базовые данные фигур Все фигуры размещаются на указанной выше плоскости с использованием комбинации координат и данных стиля. У каждой фигуры есть некоторые распространенные атрибуты, а также у каждой есть немного отличающийся способ обращения к системе координат. Все атрибуты для расстояния/ширины/высоты используют тот же масштаб от 0 до 1, что и основная координатная сетка, но обычно отмечаются от точки происхождения фигуры. Другими словами, если видео отображается в области просмотра 640x480, `x=1` будет равно абсолютным 640 пикселей в этом контексте. Это позволяет комментариям масштабироваться без проблем, сохраняя при этом их относительное положение при изменении экрана просмотра, размера и контекста. **Примечание**. Начало координат *rect* всегда находится в верхнем левом углу фигуры, независимо от начала рисования. ### Распространенные атрибуты | Атрибут | Описание | | ---------- | ---------- | | `инструмент` | *arrow*, *rect*, или *line*. Указывает, какая фигура создается. | | `цвет` | Шестизначный hex-код цвета фигуры. | | `размер` | Размер в пикселях для линии фигуры. Для стрелок это относится только к началу линии, поскольку конечная ширина определяется программно. | ### Стрелка | Атрибут | Описание | |:--------|:----------| | `x` | Координата x начала стрелки. | | `y` | Координата y начала стрелки. | | `w` | Разность положения стрелки по оси y от начала до конца относительно начала стрелки. | | `h` | Разность положения стрелки по оси x от начала до конца относительно начала стрелки. | ### Прямоугольник | Атрибут | Описание | |:--------|:----------| | `x` | Координата x верхнего левого угла прямоугольника. | | `y` | Координата y верхнего левого угла прямоугольника. | | `w` | Ширина прямоугольника относительно начала координат в его верхнем левом углу. | | `h` | Высота прямоугольника относительно начала координат в его верхнем левом углу. | | `ix` | Начало координат по оси x для рисования прямоугольника. (Необязательно). | | `iy` | Начало координат по оси y для рисования прямоугольника. (Необязательно). | | `radius` | Радиус закругления углов прямоугольника. Должно быть положительным. Значения выше 150 визуально неразличимы. | ### Линия | Атрибут | Описание | |:--------|:----------| | `x1` | Координата x точки начала линии. | | `y1` | Координата y точки начала линии. | | `x2` | Координата x конечной точки линии. Абсолютное значение на плоскости изображения. | | `y2` | Координата y конечной точки линии. Абсолютное значение на плоскости изображения. | ## Простой пример: координатная плоскость plane-example.png ```serialized {"annotation": "[{\"tool\":\"line\",\"color\":\"#E74A3C\",\"size\":3,\"x1\":0.0028530670470756064,\"y1\":0.012680297987002695,\"x2\":0.9964336661911555,\"y2\":0.9903312727849104},{\"tool\":\"line\",\"color\":\"#34A3DB\",\"size\":3,\"x1\":0.004992867332382311,\"y1\":0.98779521318751,\"x2\":0.9942938659058488,\"y2\":0.012680297987002695}]} ``` ```json { "annotation": [ { "tool": "line", "color": "#E74A3C", "size": 3, "x1": 0.0028530670470756064, "y1": 0.012680297987002695, "x2": 0.9964336661911555, "y2": 0.9903312727849104 }, { "tool": "line", "color": "#34A3DB", "size": 3, "x1": 0.004992867332382311, "y1": 0.98779521318751, "x2": 0.9942938659058488, "y2": 0.012680297987002695 } ] } ``` ### Разбивка blue-plane.png ```json { "tool":"line", "color":"#34A3DB", "size":3, "x1":0.004992867332382311, "y1":0.98779521318751, "x2":0.9942938659058488, "y2":0.012680297987002695 } ``` plane-example-red.png ```json { "tool":"line", "color":"#E74A3C", "size":3, "x1":0.0028530670470756064, "y1":0.012680297987002695, "x2":0.9964336661911555, "y2":0.9903312727849104 } ``` ## Сложный пример: множество прямоугольников lots-of-boxes.png ```serialized {"annotation": "[{\"tool\":\"rect\",\"color\":\"#34A3DB\",\"size\":3,\"x\":0.008426966292134831,\"y\":0.02663337494798169,\"w\":0.0702247191011236,\"h\":0.10986267166042447,\"ix\":0.008426966292134831,\"iy\":0.02663337494798169,\"radius\":8},{\"tool\":\"rect\",\"color\":\"#1ABCA1\",\"size\":3,\"x\":0.8932584269662921,\"y\":0.0449438202247191,\"w\":0.08895131086142327,\"h\":0.35122763212650854,\"ix\":0.8932584269662921,\"iy\":0.0449438202247191,\"radius\":8},{\"tool\":\"rect\",\"color\":\"#E67422\",\"size\":3,\"x\":0.023408239700374533,\"y\":0.7873491468997087,\"w\":0.1254681647940075,\"h\":0.2047440699126093,\"ix\":0.023408239700374533,\"iy\":0.7873491468997087,\"radius\":8},{\"tool\":\"rect\",\"color\":\"#E74A3C\",\"size\":3,\"x\":0.6919475655430711,\"y\":0.5409904286308781,\"w\":0.29868913857677903,\"h\":0.4427798585101955,\"ix\":0.6919475655430711,\"iy\":0.5409904286308781,\"radius\":8},{\"tool\":\"arrow\",\"color\":\"#E74A3C\",\"size\":3,\"x\":0.25374531835205993,\"y\":0.23137744486059092,\"w\":0.24250936329588013,\"h\":0}]}" ``` ```json { "annotation": [ { "tool": "rect", "color": "#34A3DB", "size": 3, "x": 0.008426966292134831, "y": 0.02663337494798169, "w": 0.0702247191011236, "h": 0.10986267166042447, "ix": 0.008426966292134831, "iy": 0.02663337494798169, "radius": 8 }, { "tool": "rect", "color": "#1ABCA1", "size": 3, "x": 0.8932584269662921, "y": 0.0449438202247191, "w": 0.08895131086142327, "h": 0.35122763212650854, "ix": 0.8932584269662921, "iy": 0.0449438202247191, "radius": 8 }, { "tool": "rect", "color": "#E67422", "size": 3, "x": 0.023408239700374533, "y": 0.7873491468997087, "w": 0.1254681647940075, "h": 0.2047440699126093, "ix": 0.023408239700374533, "iy": 0.7873491468997087, "radius": 8 }, { "tool": "rect", "color": "#E74A3C", "size": 3, "x": 0.6919475655430711, "y": 0.5409904286308781, "w": 0.29868913857677903, "h": 0.4427798585101955, "ix": 0.6919475655430711, "iy": 0.5409904286308781, "radius": 8 }, { "tool": "arrow", "color": "#E74A3C", "size": 3, "x": 0.25374531835205993, "y": 0.23137744486059092, "w": 0.24250936329588013, "h": 0 } ] } ``` ### Разбивка Учитывая все это, полезно разместить каждый элемент на приведенном выше изображении, чтобы получить более четкое представление о системе координат комментариев. Обратите внимание, что `размер` и `радиус` для каждого из прямоугольников в этом примере используют значения по умолчанию из интерфейса Frame.io. #### Синий прямоугольник blue-box.png ```json { "tool":"rect", "color":"#34A3DB", "size":3, "x":0.008426966292134831, "y":0.02663337494798169, "w":0.0702247191011236, "h":0.10986267166042447, "ix":0.008426966292134831, "iy":0.02663337494798169, "radius":8 } ``` #### Зеленый прямоугольник box-green.png ```json { "tool":"rect", "color":"#1ABCA1", "size":3, "x":0.8932584269662921, "y":0.0449438202247191, "w":0.08895131086142327, "h":0.35122763212650854, "ix":0.8932584269662921, "iy":0.0449438202247191, "radius":8 } ``` #### Красный прямоугольник red-box.png ```json { "tool":"rect", "color":"#E74A3C", "size":3, "x":0.6919475655430711, "y":0.5409904286308781, "w":0.29868913857677903, "h":0.4427798585101955, "ix":0.6919475655430711, "iy":0.5409904286308781, "radius":8 } ``` #### Оранжевый прямоугольник orange-box.png ```json { "tool":"rect", "color":"#E67422", "size":3, "x":0.023408239700374533, "y":0.7873491468997087, "w":0.1254681647940075, "h":0.2047440699126093, "ix":0.023408239700374533, "iy":0.7873491468997087, "radius":8 } ``` #### Красная стрелка red-arrow.png ```json { "tool":"arrow", "color":"#E74A3C", "size":3, "x":0.25374531835205993, "y":0.23137744486059092, "w":0.24250936329588013, "h":0 } ```