BaseClip, Transform et Style

1. BaseClip

interface BaseClip {
  id?: string;
  type: ClipType;
  start: number;
  duration: number;
  transform?: Transform;
  zIndex?: number;
  opacity?: number;
  style?: Style;
  animations?: Animation[];
  keyframes?: Keyframe[];
  transition?: Transition;
}

2. Référence des champs

id

• Type : string
• Requis : non
• Rôle : identifiant de l'élément

type

• Type : ClipType
• Requis : oui

Actuellement pris en charge :

• video
• image
• text
• rect
• circle
• polygon
• audio
• subtitle
• layout
• template

start

• Type : number
• Unité : secondes
• Requis : oui
• Rôle : heure de début du clip

duration

• Type : number
• Unité : secondes
• Requis : oui
• Rôle : durée du clip

transform

• Type : Transform
• Requis : non

zIndex

• Type : number
• Requis : non
• Valeur par défaut : 0

opacity

• Type : number
• Requis : non
• Valeur par défaut : 1
• Rôle : raccourci d'opacité pour les éléments visibles
• Règle de compatibilité : style.opacity a priorité sur opacity au niveau supérieur

style

• Type : Style
• Requis : non

animations

• Type : Animation[]
• Requis : non

keyframes

• Type : Keyframe[]
• Requis : non

transition

• Type : Transition
• Requis : non

Notes :

• transition s'applique aux éléments visibles
• audio n'exécute pas de transitions visuelles

3. Transform

interface Transform {
  x?: number | string;
  y?: number | string;
  width?: number | string;
  height?: number | string;
  scale?: number | [number, number];
  rotation?: number;
  skew?: [number, number];
  anchor?: Anchor;
}

Actuellement effectif à l'exécution :

• x
• y
• width
• height
• scale
• rotation
• skew
• anchor

4. Règles sur les coordonnées en pourcentage

Ce n'est pas un système DOM avec origine en haut à gauche. Il utilise un modèle de coordonnées centré.

Exemples :

• x: "50%" signifie centre horizontal
• y: "50%" signifie centre vertical
• x: "0%" signifie tout à gauche
• x: "100%" signifie tout à droite
• y: "0%" signifie en haut
• y: "100%" signifie en bas

5. scale

Formes prises en charge :

{ "scale": 1.2 }

{ "scale": [1.2, 0.8] }

6. anchor

Valeurs prises en charge :

• center
• top-left
• top
• top-right
• left
• right
• bottom-left
• bottom
• bottom-right

7. Style

interface Style {
  opacity?: number;
  objectFit?: "fill" | "cover" | "contain";
  fill?: string | Gradient;
  stroke?: string;
  strokeWidth?: number;
  fontFamily?: string;
  fontSize?: number;
  fontWeight?: number | string;
  fontStyle?: "normal" | "italic";
  lineHeight?: number;
  letterSpacing?: number;
  textAlign?: "left" | "center" | "right";
  textWrap?: boolean;
  shadowColor?: string;
  shadowBlur?: number;
  shadowOffset?: [number, number];
  borderRadius?: number | [number, number, number, number];
  filters?: Filter[];
}

Actuellement effectif à l'exécution :

• opacity
• objectFit
• fill
• stroke
• strokeWidth
• fontFamily
• fontSize
• fontWeight
• fontStyle
• lineHeight
• letterSpacing
• textAlign
• textWrap
• shadowColor
• shadowBlur
• shadowOffset
• borderRadius
• filters

8. filters

Pris en charge :

• blur
• brightness
• contrast
• saturate
• hue
• grayscale
• sepia
• invert

9. Remarques partagées sur les styles

• style.objectFit est actuellement pertinent pour image et video
• Les valeurs autorisées sont fill, cover et contain
• Les autres types de clip ne doivent pas traiter objectFit comme un champ effectif