> This page is for Plate-forme, version Hérité. > For other versions, use one of these documentation indexes: > - V4 (default): https://next.developer.frame.io/platform/v4/llms.txt > - V4 expérimental: https://next.developer.frame.io/platform/v4-experimental/llms.txt > - Hérité: https://next.developer.frame.io/platform/v2/llms.txt > For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://next.developer.frame.io/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://next.developer.frame.io/_mcp/server. # Utilisation des annotation # Aperçu Dans Frame.io, les annotation sont représentées sous la forme d'un blob JSON sérialisé d'objets de dessin, avec les couleurs, les coordonnées et les tailles. Dans le blob, tous les guillemets, à l'exception de la paire de délimitation extérieure, sont échappés avec des barres obliques (par exemple, `\"key\":\"value\"`). Il y a trois formes de base -- **arrow**, **rect** et **line** -- ainsi que le dessin à main levée, qui sort du cadre de ce Guide, mais suit les mêmes principes de base des données de coordonnées sérialisées. ## Le système de coordonnées Toutes les formes sont placées sur un système de coordonnées cartésien avec une origine en haut à gauche, et une échelle de 0 à 1 sur chaque axe. coordinate_plane.png ## Données de forme de base Toutes les formes sont placées sur le plan ci-dessus avec une combinaison de coordonnées et de données de style. Chaque forme a quelques attributs communs, puis chacune a une façon légèrement différente d'adresser le système de coordonnées. Tous les attributs pour la distance/largeur/hauteur utilisent la même échelle de 0 à 1 que la grille de coordonnées principale elle-même, mais sont généralement marqués à partir du point d'origine de la forme. En d'autres termes, si une vidéo est affichée dans un viewport de 640x480, `x=1` équivaudra à 640px absolus dans ce contexte. Cela permet aux annotation de s'adapter de manière transparente tout en conservant leur position relative lorsque l'écran de visualisation, la taille et le contexte changent. **Remarque** : l'origine d'un *rect* est toujours le coin supérieur gauche de la forme, quel que soit l'origine du dessin. ### Attributs communs | Attribut | Description | | ---------- | ---------- | | `outil` | *arrow*, *rect* ou *line*. Indique quelle forme est créée. | | `color` | Couleur hexadécimale à six chiffres pour la forme. | | `size` | Taille en pixel pour la ligne de la forme. Pour les flèches, ceci fait uniquement référence au début de la ligne, car la largeur de fin est déterminée par programmation. | ### Flèche | Attribut | Description | |:--------|:----------| | `x` | Coordonnée x de l'origine de la flèche. | | `y` | Coordonnée y de l'origine de la flèche. | | `w` | Différence de position de la flèche sur l'axe y du début à la fin, par rapport à l'origine de la flèche. | | `h` | Différence de position de la flèche sur l'axe x du début à la fin, par rapport à l'origine de la flèche. | ### Rectangle | Attribut | Description | |:--------|:----------| | `x` | Coordonnée x du coin supérieur gauche du rectangle. | | `y` | Coordonnée y du coin supérieur gauche du rectangle. | | `w` | Largeur du rectangle, par rapport à l'origine du rectangle supérieur gauche. | | `h` | Hauteur du rectangle, par rapport à l'origine du rectangle supérieur gauche. | | `ix` | L'origine x de dessin du rectangle.(Non requis). | | `iy` | L'origine y du dessin du rectangle. (Non requis). | | `Rayon` | Rayon de l'arrondi des coins du rectangle. Doit être positif. Les valeurs supérieures à 150 sont visuellement indiscernables. | ### Ligne | Attribut | Description | |:--------|:----------| | `x1` | Coordonnée x de l'origine de la ligne. | | `y1` | Coordonnée y de l'origine de la ligne. | | `x2` | Coordonnée x de l'extrémité de la ligne. Valeur absolue sur le plan de l'image. | | `y2` | Coordonnée y de l'extrémité de la ligne. Valeur absolue sur le plan de l'image. | ## Exemple simple : le plan de coordonnées plane-example.png ```serialized {"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}]} ``` ```json { "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 } ] } ``` ### Répartition blue-plane.png ```json { "tool":"line", "color":"#34A3DB", "size":3, "x1":0.004992867332382311, "y1":0.98779521318751, "x2":0.9942938659058488, "y2":0.012680297987002695 } ``` plane-example-red.png ```json { "tool":"line", "color":"#E74A3C", "size":3, "x1":0.0028530670470756064, "y1":0.012680297987002695, "x2":0.9964336661911555, "y2":0.9903312727849104 } ``` ## Exemple complexe : de nombreuses boîtes lots-of-boxes.png ```serialized {"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}]}" ``` ```json { "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 } ] } ``` ### Répartition Avec tout cela à l'esprit, il est utile de détailler chaque élément de l'image ci-dessus pour développer une vision plus claire du système de coordonnées de l'annotation.Notez que la `taille` et le `Rayon` de chacun des rectangles dans cet exemple utilisent les paramètres par défaut de l'interface utilisateur Frame.io. #### Rectangle bleu blue-box.png ```json { "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 } ``` #### Rectangle vert box-green.png ```json { "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 } ``` #### Rectangle rouge red-box.png ```json { "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 } ``` #### Rectangle orange orange-box.png ```json { "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 } ``` #### Flèche rouge red-arrow.png ```json { "tool":"arrow", "color":"#E74A3C", "size":3, "x":0.25374531835205993, "y":0.23137744486059092, "w":0.24250936329588013, "h":0 } ```