# BaseClip、Transform、Style

这份文档描述所有元素共用的基础字段。

## 1. `BaseClip`

```ts
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. 字段说明

### `id`
- 类型：`string`
- 必填：否
- 用途：元素标识

### `type`
- 类型：`ClipType`
- 必填：是

当前支持：
- `video`
- `image`
- `text`
- `rect`
- `circle`
- `polygon`
- `code`
- `svg`
- `icon`
- `line`
- `path`
- `three`
- `audio`
- `subtitle`
- `layout`
- `template`

### `start`
- 类型：`number`
- 单位：秒
- 必填：是
- 用途：元素开始时间

### `duration`
- 类型：`number`
- 单位：秒
- 必填：是
- 用途：元素持续时间

### `transform`
- 类型：`Transform`
- 必填：否

### `zIndex`
- 类型：`number`
- 必填：否
- 默认值：`0`

### `opacity`
- 类型：`number`
- 必填：否
- 默认值：`1`
- 用途：所有可见元素的透明度快捷字段
- 兼容规则：`style.opacity` 优先级高于 `opacity`

### `style`
- 类型：`Style`
- 必填：否

### `animations`
- 类型：`Animation[]`
- 必填：否

### `keyframes`
- 类型：`Keyframe[]`
- 必填：否

### `transition`
- 类型：`Transition`
- 必填：否

说明：
- `transition` 对可见元素有效
- `audio` 不执行视觉转场

## 3. `Transform`

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

当前真实生效：
- `x`
- `y`
- `width`
- `height`
- `scale`
- `rotation`
- `skew`
- `anchor`

## 4. 百分比坐标规则

这里不是左上角原点，而是中心坐标系。

例子：
- `x: "50%"` 表示水平中心
- `y: "50%"` 表示垂直中心
- `x: "0%"` 表示最左
- `x: "100%"` 表示最右
- `y: "0%"` 表示最上
- `y: "100%"` 表示最下

## 5. `scale`

支持：

```json
{ "scale": 1.2 }
```

```json
{ "scale": [1.2, 0.8] }
```

## 6. `anchor`

支持：
- `center`
- `top-left`
- `top`
- `top-right`
- `left`
- `right`
- `bottom-left`
- `bottom`
- `bottom-right`

## 7. `Style`

```ts
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[];
  cache?: boolean;
  cachePadding?: number | [number, number, number, number];
  composite?: boolean;
  compositeOperation?: GlobalCompositeOperation;
}
```

当前真实生效：
- `opacity`
- `objectFit`
- `fill`
- `stroke`
- `strokeWidth`
- `fontFamily`
- `fontSize`
- `fontWeight`
- `fontStyle`
- `lineHeight`
- `letterSpacing`
- `textAlign`
- `textWrap`
- `shadowColor`
- `shadowBlur`
- `shadowOffset`
- `borderRadius`
- `filters`
- `cache`
- `cachePadding`
- `composite`
- `compositeOperation`

## 8. `filters`

支持：
- `blur`
- `brightness`
- `contrast`
- `saturate`
- `hue`
- `grayscale`
- `sepia`
- `invert`

## 9. 当前未接入的通用样式字段

补充说明：
- `style.objectFit` 当前对 `image` / `video` 生效
- 可选值有 `fill`、`cover`、`contain`
- 其他元素不要把它当成有效字段