BaseClip、Transform、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. 字段说明

`id`

类型：string
必填：否
用途：元素标识

`type`

类型：ClipType
必填：是

当前支持：

video
image
text
rect
circle
polygon
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`

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`

支持：

{ "scale": 1.2 }

{ "scale": [1.2, 0.8] }

6. `anchor`

支持：

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

当前真实生效：

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

8. `filters`

支持：

blur
brightness
contrast
saturate
hue
grayscale
sepia
invert

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

补充说明：

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

On this page