Обзор

Комментарии в Frame.io представлены как сериализованный JSON-блок объектов рисования с полной информацией о цветах, координатах и размерах. В блоке все кавычки, кроме внешней ограничивающей пары, экранируются с помощью косых черт (например, \"key\":\"value\"). Существует три основные фигуры — стрелка, прямоугольник и линия — а также рисование от руки, которое выходит за рамки данного руководства, но следует тем же базовым принципам сериализованных данных координат.

Система координат

Все фигуры размещаются в декартовой системе координат с началом в левом верхнем углу и масштабом от 0 до 1 по каждой оси.

Базовые данные фигур

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

Все атрибуты для расстояния/ширины/высоты используют тот же масштаб от 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 конечной точки линии. Абсолютное значение на плоскости изображения.

Простой пример: координатная плоскость

{"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}]}

1 {
2     "annotation": [
3         {
4             "tool": "line",
5             "color": "#E74A3C",
6             "size": 3,
7             "x1": 0.0028530670470756064,
8             "y1": 0.012680297987002695,
9             "x2": 0.9964336661911555,
10             "y2": 0.9903312727849104
11         },
12         {
13             "tool": "line",
14             "color": "#34A3DB",
15             "size": 3,
16             "x1": 0.004992867332382311,
17             "y1": 0.98779521318751,
18             "x2": 0.9942938659058488,
19             "y2": 0.012680297987002695
20         }
21     ]
22 }

Разбивка

1 {
2    "tool":"line",
3    "color":"#34A3DB",
4    "size":3,
5    "x1":0.004992867332382311,
6    "y1":0.98779521318751,
7    "x2":0.9942938659058488,
8    "y2":0.012680297987002695
9 }

1 {
2    "tool":"line",
3    "color":"#E74A3C",
4    "size":3,
5    "x1":0.0028530670470756064,
6    "y1":0.012680297987002695,
7    "x2":0.9964336661911555,
8    "y2":0.9903312727849104
9 }

Сложный пример: множество прямоугольников

{"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}]}"

1 {
2     "annotation": [
3         {
4             "tool": "rect",
5             "color": "#34A3DB",
6             "size": 3,
7             "x": 0.008426966292134831,
8             "y": 0.02663337494798169,
9             "w": 0.0702247191011236,
10             "h": 0.10986267166042447,
11             "ix": 0.008426966292134831,
12             "iy": 0.02663337494798169,
13             "radius": 8
14         },
15         {
16             "tool": "rect",
17             "color": "#1ABCA1",
18             "size": 3,
19             "x": 0.8932584269662921,
20             "y": 0.0449438202247191,
21             "w": 0.08895131086142327,
22             "h": 0.35122763212650854,
23             "ix": 0.8932584269662921,
24             "iy": 0.0449438202247191,
25             "radius": 8
26         },
27         {
28             "tool": "rect",
29             "color": "#E67422",
30             "size": 3,
31             "x": 0.023408239700374533,
32             "y": 0.7873491468997087,
33             "w": 0.1254681647940075,
34             "h": 0.2047440699126093,
35             "ix": 0.023408239700374533,
36             "iy": 0.7873491468997087,
37             "radius": 8
38         },
39         {
40             "tool": "rect",
41             "color": "#E74A3C",
42             "size": 3,
43             "x": 0.6919475655430711,
44             "y": 0.5409904286308781,
45             "w": 0.29868913857677903,
46             "h": 0.4427798585101955,
47             "ix": 0.6919475655430711,
48             "iy": 0.5409904286308781,
49             "radius": 8
50         },
51         {
52             "tool": "arrow",
53             "color": "#E74A3C",
54             "size": 3,
55             "x": 0.25374531835205993,
56             "y": 0.23137744486059092,
57             "w": 0.24250936329588013,
58             "h": 0
59         }
60     ]
61 }

Разбивка

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

Синий прямоугольник

1 {
2    "tool":"rect",
3    "color":"#34A3DB",
4    "size":3,
5    "x":0.008426966292134831,
6    "y":0.02663337494798169,
7    "w":0.0702247191011236,
8    "h":0.10986267166042447,
9    "ix":0.008426966292134831,
10    "iy":0.02663337494798169,
11    "radius":8
12 }

Зеленый прямоугольник

1 {
2    "tool":"rect",
3    "color":"#1ABCA1",
4    "size":3,
5    "x":0.8932584269662921,
6    "y":0.0449438202247191,
7    "w":0.08895131086142327,
8    "h":0.35122763212650854,
9    "ix":0.8932584269662921,
10    "iy":0.0449438202247191,
11    "radius":8
12 }

Красный прямоугольник

1 {
2    "tool":"rect",
3    "color":"#E74A3C",
4    "size":3,
5    "x":0.6919475655430711,
6    "y":0.5409904286308781,
7    "w":0.29868913857677903,
8    "h":0.4427798585101955,
9    "ix":0.6919475655430711,
10    "iy":0.5409904286308781,
11    "radius":8
12 }

Оранжевый прямоугольник

1 {
2    "tool":"rect",
3    "color":"#E67422",
4    "size":3,
5    "x":0.023408239700374533,
6    "y":0.7873491468997087,
7    "w":0.1254681647940075,
8    "h":0.2047440699126093,
9    "ix":0.023408239700374533,
10    "iy":0.7873491468997087,
11    "radius":8
12 }

Красная стрелка

1 {
2    "tool":"arrow",
3    "color":"#E74A3C",
4    "size":3,
5    "x":0.25374531835205993,
6    "y":0.23137744486059092,
7    "w":0.24250936329588013,
8    "h":0
9 }