Class OffscreenSprite

包装 IClip 给素材扩展坐标、层级、透明度等信息，用于 Combinator 在后台合成视频

跟 VisibleSprite 非常相似，应用场景不同

Example

const spr = new OffscreenSprite(
  new MP4Clip((await fetch('<mp4 url>')).body),
);
spr.opacity = 0.5 // 半透明
spr.rect.x = 100 // x 坐标偏移 100 像素
spr.time.offset = 10e6 // 视频第 10s 开始绘制该视频素材

See

视频合成

Hierarchy

BaseSprite
- OffscreenSprite

Index

Constructors

constructor

new OffscreenSprite(clip): OffscreenSprite
Parameters
- clip: IClip
Returns OffscreenSprite
Overrides BaseSprite.constructor
- Defined in av-cliper/src/sprite/offscreen-sprite.ts:29

Properties

`Private` #animatKeyFrame

#animatKeyFrame: null | TAnimationKeyFrame = null

`Private` #animatOpts

#animatOpts: null | Required<IAnimationOpts> = null

`Private` #clip

#clip: IClip

`Private` #destroyed

#destroyed: boolean = false

`Private` #evtTool

#evtTool: EventTool<{
propsChange: ((value) => void);
}> = ...

Type declaration

propsChange: ((value) => void)
- - (value): void
  - Parameters
    - value: Partial<{
      rect: Partial<Rect>;
      zIndex: number;
      }>
    Returns void

`Private` #lastVf

#lastVf: null | ImageBitmap | VideoFrame = null

`Private` #time

#time: {
    duration: number;
    offset: number;
    playbackRate: number;
} = ...

控制素材在的时间偏移、时长、播放速率，常用于剪辑场景时间轴（轨道）模块 duration 不能大于引用 IClip 的时长，单位微秒

playbackRate 控制当前素材的播放速率，1 表示正常播放；注意

设置 playbackRate 时需要主动修正 duration
音频使用最简单的插值算法来改变速率，所以改变速率后音调会产生变化，自定义算法请使用 MP4Clip.tickInterceptor 配合实现

Type declaration

duration: number
offset: number
playbackRate: number

`Private` #zIndex

#zIndex: number = 0

flip

flip: null | "horizontal" | "vertical" = null

水平或垂直方向翻转素材

on

on: (<Type>(type, listener) => (() => void)) = ...

监听属性变更事件

Type declaration

- <Type>(type, listener): (() => void)
- Type Parameters
  - Type extends "propsChange"
  Parameters
  - type: Type
  - listener: {
    propsChange: ((value) => void);
    }[Type]
  Returns (() => void)
  - - (): void
    - Returns void

Example

sprite.on('propsChange', (changedProps) => {})

opacity

opacity: number = 1

不透明度

ready

ready: Promise<void> = ...

See

IClip.ready

rect

rect: Rect = ...

控制素材在视频中的空间属性（坐标、旋转、缩放）

Accessors

time

get time(): {
    duration: number;
    offset: number;
    playbackRate: number;
}
Returns {
    duration: number;
    offset: number;
    playbackRate: number;
}
- duration: number
- offset: number
- playbackRate: number
Inherited from BaseSprite.time
- Defined in av-cliper/src/sprite/base-sprite.ts:45
set time(v): void
Parameters
- v: {
      duration: number;
      offset: number;
      playbackRate?: number;
  }
  - duration: number
  - offset: number
  - Optional playbackRate?: number
Returns void
Inherited from BaseSprite.time
- Defined in av-cliper/src/sprite/base-sprite.ts:48

zIndex

get zIndex(): number
Returns number
Inherited from BaseSprite.zIndex
- Defined in av-cliper/src/sprite/base-sprite.ts:65
set zIndex(v): void
控制素材间的层级关系，zIndex 值较小的素材会被遮挡
Parameters
- v: number
Returns void
Inherited from BaseSprite.zIndex
- Defined in av-cliper/src/sprite/base-sprite.ts:72

Methods

`Protected` _render

_render(ctx): void
Parameters
- ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
Returns void
Inherited from BaseSprite._render
- Defined in av-cliper/src/sprite/base-sprite.ts:103

animate

animate(time): void
如果当前 sprite 已被设置动画，将 sprite 的动画属性设定到指定时间的状态
Parameters
- time: number
Returns void
Inherited from BaseSprite.animate
- Defined in av-cliper/src/sprite/base-sprite.ts:161

clone

clone(): Promise<OffscreenSprite>
Returns Promise<OffscreenSprite>
- Defined in av-cliper/src/sprite/offscreen-sprite.ts:86

copyStateTo

copyStateTo<T>(target): void
将当前 sprite 的属性赋值到目标

用于 clone，或 VisibleSprite 与 OffscreenSprite 实例间的类型转换
Type Parameters
- T extends BaseSprite
Parameters
- target: T
Returns void
Inherited from BaseSprite.copyStateTo
- Defined in av-cliper/src/sprite/base-sprite.ts:194

destroy

destroy(): void
Returns void
Overrides BaseSprite.destroy
- Defined in av-cliper/src/sprite/offscreen-sprite.ts:93

offscreenRender

offscreenRender(ctx, time): Promise<{
audio: Float32Array[];
done: boolean;
}>
绘制素材指定时刻的图像到 canvas 上下文，并返回对应的音频数据
Parameters
- ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
- time: number
  指定时刻，微秒
Returns Promise<{
audio: Float32Array[];
done: boolean;
}>
- Defined in av-cliper/src/sprite/offscreen-sprite.ts:44

setAnimation

setAnimation(keyFrame, opts): void
给素材添加动画，使用方法参考 css animation
Parameters
- keyFrame: Partial<Record<`${number}%` | "from" | "to", Partial<TAnimateProps>>>
- opts: IAnimationOpts
Returns void
Example
```
sprite.setAnimation(
  {
    '0%': { x: 0, y: 0 },
    '25%': { x: 1200, y: 680 },
    '50%': { x: 1200, y: 0 },
    '75%': { x: 0, y: 680 },
    '100%': { x: 0, y: 0 },
  },
  { duration: 4e6, iterCount: 1 },
);
```
See
视频水印动画
Inherited from BaseSprite.setAnimation
- Defined in av-cliper/src/sprite/base-sprite.ts:143

Class OffscreenSprite

Example

See

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns OffscreenSprite

Properties

Private #animatKeyFrame

Private #animatOpts

Private #clip

Private #destroyed

Private #evtTool

Type declaration

propsChange: ((value) => void)

Parameters

Returns void

Private #lastVf

Private #time

Type declaration

duration: number

offset: number

playbackRate: number

Private #zIndex

flip

on

Type declaration

Type Parameters

Parameters

Returns (() => void)

Returns void

Example

opacity

ready

See

rect

Accessors

time

Returns { duration: number; offset: number; playbackRate: number; }

duration: number

offset: number

playbackRate: number

Parameters

duration: number

offset: number

Optional playbackRate?: number

Returns void

zIndex

Returns number

Parameters

Returns void

Methods

Protected _render

Parameters

Returns void

animate

Parameters

Returns void

clone

Returns Promise<OffscreenSprite>

copyStateTo

Type Parameters

Parameters

Returns void

destroy

Returns void

offscreenRender

Parameters

Returns Promise<{ audio: Float32Array[]; done: boolean; }>

setAnimation

Parameters

Returns void

Example

See

`Private` #animatKeyFrame

`Private` #animatOpts

`Private` #clip

`Private` #destroyed

`Private` #evtTool

`Private` #lastVf

`Private` #time

`Private` #zIndex

Returns {
duration: number;
offset: number;
playbackRate: number;
}

`Optional` playbackRate?: number

`Protected` _render

Returns Promise<{
audio: Float32Array[];
done: boolean;
}>