@zhinan-oppo/canvas-player

scroll-handle

Install

使用 yarn 安装

yarn add @zhinan-oppo/canvas-player

import { CanvasPlayer } from '@zhinan-oppo/canvas-player';

Usage

CanvasPlayer

constructor(canvas, imageURLs, options?: CanvasPlayerOptions)

• canvas: HTMLCanvasElement，用于绘制图片的 canvas
• imageURLs: string[] 一组图片序列的 URL
• options: 非必需
  • fitImageSize: boolean，默认true
    • 是否将 canvas 的width和height设置成第一张加载完成的图片的width和height
  • posterFrame: false|'first'|'last'|number，默认'first'
    • 'first'|'last': 默认显示第一张/最后一张图片
    • number: 默认显示imageURLs中对应的图片

load(): Promise<HTMLImageElement[]>

• 加载所有图片

seek(i, options): Promise<void>

• i: 0 <= i < imageURLs.length
• options: 非必需
  • draw: 是否将当前指定的图片绘制到 canvas 中，默认true

seekPercent(p, options): Promise<void>

• 相当于seek(Math.round(p * (imageURLs.length - 1)), options)

play(options): Promise<void>

• 播放序列帧

• options:

  • fps: number，每秒播放图片的张数，默认值 24
  • mode: enum PlayMode，默认值Normal
    • Normal: 顺序播放序列帧到结尾并停止
    • Reverse: 逆序播放序列帧到开头并停止
    • Loop: 顺序播放序列帧到结尾后从头开始
    • Alternate: 顺序播放序列帧到结尾后逆序播放，循环往复
  • waitingOnLoading: boolean，是否等待图片加载，默认true
    • true: 等待直到要绘制的图片加载完成
    • false: 不等待图片加载，下一帧图片可绘制时直接跳过正在加载的图片
  • onUpdated: (i: number) => void，图片绘制完成后的回调，参数i为所绘制的图片在imageURLs中的索引
  • onEnded: (i: number) => void，播放结束的回调
    • 当mode为PlayMode.Normal时，i === -1
    • 当mode为PlayMode.Reverse时，i === imageURLs.length
    • 当mode为PlayMode.Loop或PlayMode.Alternate时，onEnded不会被触发

pause(): void

• 暂停

playing: boolean

• 是否在播放

Example

import { CanvasPlayer, PlayMode } from '@zhinan-oppo/canvas-player';

const canvas = document.getElementById('canvas');
const urls = ['https://example.com/0.png', 'https://example.com/1.png'];
const player = new CanvasPlayer(canvas, urls);
player.play({
  mode: PlayMode.Alternate,
  onUpdated: i => {
    console.log(i);
  },
});

<div>
  <canvas id="canvas" />
</div>