ナビゲーションにスキップ
ワークフロー - アセット

注釈の操作

概要

Frame.io での注釈は、描画オブジェクト（カラー、座標、およびサイズを備えています）のシリアル化 JSON blob として表されます。blob では、外部境界ペア以外のすべての引用符は、スラッシュでエスケープされます（例：\"key\":\"value\"）。

3 つの基本的なシェイプ（矢印、矩形、線）があります。また。フリーハンド描画もあります。フリーハンド描画は、このガイドの範囲外ですが、シリアル化座標データの同じ基本原則に従います。

座標系

すべてのシェイプは、左上の原点を持つデカルト座標系に配置され、各軸は 0 から 1 までのスケールがあります。

coordinate_plane.png

基本的なシェイプデータ

すべてのシェイプは、座標とスタイルデータの組み合わせで、上記の平面に配置されます。各シェイプは共通属性をいくつか持ち、それぞれ、座標系のアドレス指定の方法がわずかに異なります。

距離／幅／高さのすべての属性は、メイン座標グリッド自体と同じ 0 から 1 までのスケールを使用しますが、通常、シェイプの原点からマークされます。

つまり、ビデオが 640 x 480 ビューポートに表示されている場合、x=1 は、そのコンテキストでは絶対値 640 px に等しくなります。これにより、表示スクリーン、サイズ、およびコンテキスト変化に合わせて相対的な位置を維持しながら、注釈をシームレスに拡大・縮小できます。

メモ：矩形の原点は、描画原点に関係なく常にシェイプの左上隅になります。 **

共通属性

属性説明
tool矢印、矩形、または線。 ** ** ** 作成中のシェイプを示します。
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
}