탐색으로 건너뛰기
워크플로 - 에셋

주석 작업

개요

Frame.io의 주석은 색상, 좌표 및 크기가 포함된 직렬화된 그리기 오브젝트의 JSON blob으로 표현됩니다. blob에서는 바깥쪽 경계 쌍을 제외한 모든 따옴표가 슬래시로 이스케이프 처리됩니다(예: \"key\":\"value\"). arrow, rect, line의 세 가지 기본 도형과 자유형 그리기가 있습니다. 자유형 그리기는 이 가이드의 범위를 벗어나지만 직렬화된 좌표 데이터의 동일한 기본 원칙을 따릅니다.

좌표계

모든 도형은 좌측 상단이 원점인 데카르트 좌표계에 배치되며, 각 축의 배율은 0에서 1 사이입니다.

coordinate_plane.png

기본 도형 데이터

모든 도형은 좌표와 스타일 데이터의 조합을 통해 위 평면에 배치됩니다. 각 도형은 몇 가지 공통 속성을 공유하지만, 좌표계를 다루는 방식은 조금씩 다릅니다.

거리/너비/높이에 대한 모든 속성은 주 좌표 눈금과 동일한 0~1 배율을 사용하지만, 일반적으로는 해당 도형의 원점을 기준으로 측정됩니다.

즉, 비디오가 640x480 뷰포트에 표시되는 경우 x=1은 해당 컨텍스트에서 절대적인 640px와 같습니다. 이를 통해 주석은 화면 크기, 해상도 및 컨텍스트가 변경되더라도 상대적인 위치를 유지하면서 매끄럽게 확장 또는 축소될 수 있습니다. 참고: rect의 원점은 그리기 원점과 관계없이 항상 도형의 좌측 상단 모서리입니다.

공통 속성

특성설명
toolarrow, rect, 또는 line. 어떤 도형이 생성되는지 나타냅니다.
color해당 도형의 6자리 16진수 색상 코드입니다.
size도형 선의 픽셀 크기입니다. 화살표의 경우, 선의 끝부분 너비는 프로그램적으로 결정되므로 이 값은 선의 시작 부분에만 적용됩니다.

화살표

특성설명
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
        }
    ]
}

분류

이 모든 것을 염두에 두고, 주석 좌표계에 대한 보다 명확한 이해를 돕기 위해 위 이미지의 각 요소를 배치해 보는 것이 유용합니다. 이 예시에서 각 사각형의 size 및 radius는 Frame.io UI 기본값을 따릅니다.

파란색 직사각형

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
}