数据类

元素数据类文件为ElementData.ts

- qrcode
 |- config.ts  # 插件配置
 |- ElementData.ts # 元素数据类
 |- Element.tsx # 预览区组件
 |- Options.tsx # 编辑区组件
 |- index.ts # 默认入口
 |- types.ts # TS类型定义

以二维码插件为例，所有的元素数据都需要继承BaseElement（具体参考工程数据）:

// 基于https://www.npmjs.com/package/qrcodejs2这个二维码插件进行开发，二维码的配置参数来源于此

interface Params {
  text: string; // 二维码内容
  size: number; // 尺寸大小
  colorDark?: string; // 背景色
  colorLight?: string; // 块区域的颜色
  correctLevel?: "L" | "M" | "Q" | "H"; // 二维码精度
}

export class ElementData extends BaseElement {
  style: ElementStyle; // 位置大小旋转
  animates?: AnimationItem[]; // 动画
  mask?: ElementMask; // 蒙版
  text: string = ""; // 二维码内容
  colorDark: string = "#000000"; // 背景色
  colorLight: string = "#ffffff"; // 块区域的颜色
  correctLevel: "L" | "M" | "Q" | "H" = "Q";

  constructor(params: Params) {
    const { size, ...other } = params;
    this.style.width = size;
    this.style.height = size;
    // 位置默认在左上角，元素的定位是以中心点为参考点进行定位的，比如画布中心坐标就是[movieData.width/2, movieData.height/2]
    this.style.x = size / 2;
    this.style.y = size / 2;
    Object.assign(this, other);
  }
}

使用 ElementData：

// 1、构建二维码插件元素数据
const elementData = new ElementData({
  text: "https://video.h5ds.com",
  colorDark: "#ffffff", // 背景色
  colorLight: "#000000", // 块区域的颜色
  correctLevel: "H",
  size: 200,
});

// 位置设置居中
elementData.style.x = movieData.width / 2;
elementData.style.y = movieData.height / 2;

// 2、添加插件元素到数据中
movieData.elements.push(elementData);

// 3、更新视图
core.update();

数据类 ​

数据类