Рабочие процессы — ресурсы

Работа с комментариями

Обзор

Комментарии в 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 
{"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}]}
{
    "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 
{
   "tool":"line",
   "color":"#34A3DB",
   "size":3,
   "x1":0.004992867332382311,
   "y1":0.98779521318751,
   "x2":0.9942938659058488,
   "y2":0.012680297987002695
}
plane-example-red.png 
{
   "tool":"line",
   "color":"#E74A3C",
   "size":3,
   "x1":0.0028530670470756064,
   "y1":0.012680297987002695,
   "x2":0.9964336661911555,
   "y2":0.9903312727849104
}

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

lots-of-boxes.png 
{"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}]}"
{
    "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 
{
   "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 
{
   "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 
{
   "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 
{
   "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 
{
   "tool":"arrow",
   "color":"#E74A3C",
   "size":3,
   "x":0.25374531835205993,
   "y":0.23137744486059092,
   "w":0.24250936329588013,
   "h":0
}