Flujos de trabajo - Activos

Trabajar con anotaciones

Información general

Las anotaciones en Frame.io se representan como un blob JSON serializado de objetos de dibujo, completo con colores, coordenadas y tamaños. En el blob, todas las comillas excepto el par delimitador externo se escapan con barras diagonales (por ejemplo \"key\":\"value\"). Hay tres formas básicas: arrow, rect y line, así como el dibujo a mano alzada, que está fuera del ámbito de esta guía, pero sigue los mismos principios básicos de datos de coordenadas serializadas.

El sistema de coordenadas

Todas las formas se colocan en un sistema de coordenadas cartesianas con un origen superior izquierdo y una escala de 0 a 1 en cada eje.

<img alt=“coordinate_plane.png” src=“file:docs/pages/v2/images/3ebc4c8-coordinate_plane.png”>

Datos de formas básicas

Todas las formas se colocan en el plano anterior con una combinación de coordenadas y datos de estilo. Cada forma tiene algunos atributos comunes y luego cada una tiene una manera ligeramente diferente de abordar el sistema de coordenadas.

Todos los atributos para distancia/anchura/altura usan la misma escala de 0 a 1 que la cuadrícula de coordenadas principal, pero generalmente se marcan desde el punto de origen de la forma.

En otras palabras, si un vídeo se está mostrando en una ventana de visualización de 640 x 480, x=1 equivaldrá a 640 px absolutos en ese contexto. Esto permite que las anotaciones se escalen sin problemas mientras mantienen su posición relativa cuando cambian la pantalla de visualización, el tamaño y el contexto. Nota: El origen de un rect es siempre la esquina superior izquierda de la forma, independientemente del origen del dibujo.

Atributos comunes

AtributoDescripción
toolarrow, rect o line. Indica qué forma se está creando.
colorColor hexadecimal de seis dígitos para la forma.
sizeTamaño del píxel para la línea de la forma. Para las flechas, esto se refiere solo al inicio de la línea, ya que la anchura del extremo final se determina programáticamente.

Arrow

AtributoDescripción
xCoordenada x del origen de la flecha.
yCoordenada y del origen de la flecha.
wDiferencia en la posición del eje y de la flecha desde el inicio al final, relativa al origen de la flecha.
hDiferencia en la posición del eje x de la flecha desde el inicio al final, relativa al origen de la flecha.

Rect

AtributoDescripción
xCoordenada x de la esquina superior izquierda del rectángulo.
yCoordenada y de la esquina superior izquierda del rectángulo.
wAnchura del rectángulo, relativa al origen del rectángulo superior izquierdo.
hAltura del rectángulo, relativa al origen del rectángulo superior izquierdo.
ixEl origen x de dibujo del rectángulo. (No es obligatorio).
iyEl origen y de dibujo del rectángulo. (No es obligatorio).
radiusRadio del redondeado de las esquinas del rectángulo. Debe ser positivo. Los valores superiores a 150 son visualmente indistinguibles.

Line

AtributoDescripción
x1Coordenada x del origen de la línea.
y1Coordenada y del origen de la línea.
x2Coordenada x del extremo de la línea. Valor absoluto en el plano de la imagen.
y2Coordenada y del extremo de la línea. Valor absoluto en el plano de la imagen.

Ejemplo simple: El plano de coordenadas

<img alt=“plane-example.png” src=“file:docs/pages/v2/images/70fcb27-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}]}
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}

Desglose

<img alt=“blue-plane.png” src=“file:docs/pages/v2/images/7cb29dd-plane_ex_blue.png”>

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}

<img alt=“plane-example-red.png” src=“file:docs/pages/v2/images/192a62c-plane_ex_red.png”>

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}

Ejemplo complejo: Muchas cajas

<img alt=“lots-of-boxes.png” src=“file:docs/pages/v2/images/2d48957-annotation_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}]}"
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}

Desglose

Con todo eso en mente, es útil disponer cada elemento en la imagen anterior para desarrollar una imagen más clara del sistema de coordenadas de anotación. Tenga en cuenta que el size y el radius para cada uno de los rectángulos en este ejemplo están siguiendo los valores predeterminados de la IU de Frame.io.

Rectángulo azul

<img alt=“blue-box.png” src=“file:docs/pages/v2/images/825bd31-box_blue.png”>

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}

Rectángulo verde

<img alt=“box-green.png” src=“file:docs/pages/v2/images/d031284-box_green.png”>

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}

Rectángulo rojo

<img alt=“red-box.png” src=“file:docs/pages/v2/images/4d40db2-box_red.png”>

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}

Rectángulo naranja

<img alt=“orange-box.png” src=“file:docs/pages/v2/images/2690187-box_orange.png”>

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}

Flecha roja

<img alt=“red-arrow.png” src=“file:docs/pages/v2/images/9ac2bb6-arrow_red.png”>

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}