개요

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

좌표계

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

기본 도형 데이터

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

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

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

공통 속성

특성	설명
`tool`	arrow, 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 좌표. 이미지 평면의 절대값.

간단한 예시: 좌표 평면

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

분류

{
   "tool":"line",
   "color":"#34A3DB",
   "size":3,
   "x1":0.004992867332382311,
   "y1":0.98779521318751,
   "x2":0.9942938659058488,
   "y2":0.012680297987002695
}

{
   "tool":"line",
   "color":"#E74A3C",
   "size":3,
   "x1":0.0028530670470756064,
   "y1":0.012680297987002695,
   "x2":0.9964336661911555,
   "y2":0.9903312727849104
}

복잡한 예시: 다수의 직사각형

{"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 기본값을 따릅니다.

파란색 직사각형

{
   "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":"#E74A3C",
   "size":3,
   "x":0.6919475655430711,
   "y":0.5409904286308781,
   "w":0.29868913857677903,
   "h":0.4427798585101955,
   "ix":0.6919475655430711,
   "iy":0.5409904286308781,
   "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":"arrow",
   "color":"#E74A3C",
   "size":3,
   "x":0.25374531835205993,
   "y":0.23137744486059092,
   "w":0.24250936329588013,
   "h":0
}