BaseClip, Transform e 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. Referência de campos

`id`

Tipo: string
Obrigatório: não
Finalidade: identificador do elemento

`type`

Tipo: ClipType
Obrigatório: sim

Atualmente suportado:

video
image
text
rect
circle
polygon
audio
subtitle
layout
template

`start`

Tipo: number
Unidade: segundos
Obrigatório: sim
Finalidade: tempo de início do clip

`duration`

Tipo: number
Unidade: segundos
Obrigatório: sim
Finalidade: duração do clip

`transform`

Tipo: Transform
Obrigatório: não

`zIndex`

Tipo: number
Obrigatório: não
Padrão: 0

`opacity`

Tipo: number
Obrigatório: não
Padrão: 1
Finalidade: atalho de opacidade para elementos visíveis
Regra de compatibilidade: style.opacity tem prioridade maior que opacity no nível superior

`style`

Tipo: Style
Obrigatório: não

`animations`

Tipo: Animation[]
Obrigatório: não

`keyframes`

Tipo: Keyframe[]
Obrigatório: não

`transition`

Tipo: Transition
Obrigatório: não

Notas:

transition se aplica a elementos visíveis
audio não executa transições visuais

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;
}

Atualmente efetivo em runtime:

x
y
width
height
scale
rotation
skew
anchor

4. Regras de coordenadas percentuais

Este não é um sistema estilo DOM com origem no canto superior esquerdo. Ele usa um modelo de coordenadas centralizado.

Exemplos:

x: "50%" significa centro horizontal
y: "50%" significa centro vertical
x: "0%" significa totalmente à esquerda
x: "100%" significa totalmente à direita
y: "0%" significa topo
y: "100%" significa base

5. `scale`

Formas suportadas:

{ "scale": 1.2 }

{ "scale": [1.2, 0.8] }

6. `anchor`

Valores suportados:

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[];
}

Atualmente efetivo em runtime:

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

8. `filters`

Suportados:

blur
brightness
contrast
saturate
hue
grayscale
sepia
invert

9. Observações compartilhadas de estilo

style.objectFit atualmente é relevante para image e video
Os valores permitidos são fill, cover e contain
Outros tipos de clip não devem tratar objectFit como um campo efetivo

On this page