编辑区组件

编辑区只会在编辑器中被使用到，主要用于修改数据参数更新视图。

编辑区组件是一个 React hooks 组件，需要注意的是我们提供了常见的 UI 组件库，以及在 props 中内置了 editor 实例，具体的 editor 内置参数和方法可以参考文档Editor-SDK中的vsdk.editor相关文档。

项目常用库：

Semi.design: https://semi.design/
PixiJS: https://pixijs.com/
Mobx: https://mobx.js.org/
自建组件库：@h5/videoUI

只需要记住两步操作：1、修改数据 2、更新视图即可，下面我们来看看案例：

jsx

import React from "react";
import { observer } from "mobx-react";
import { options } from "@h5/videoPluginSDK";
import { TextArea } from "@douyinfe/semi-ui";

const { Align, Opacity, Rotation, Size, Position, Colour, Animation } = options;

export interface IOptionsProps {}

function Options(props: IOptionsProps) {
  return (
    <Tabs
      className="optionTabs"
      activeKey={editor.elementOptionType}
      onChange={e => {
        // tab切换
        editor.elementOptionType = e as any;
      }}
    >
      <TabPane tab="基础" itemKey="basic">
        <div className="scroll scrollBox">
          <Align />
          <Position />
          <Size />
          <QrcodeSet />
          <Opacity />
          <Rotation />
        </div>
      </TabPane>
      <TabPane tab="动画" itemKey="animation">
        <Animation />
      </TabPane>
      <TabPane tab="滤镜" itemKey="colour">
        <Colour />
      </TabPane>
    </Tabs>
  );
}

export default observer(Options);

QrcodeSet 组件：

jsx

import React from 'react';
import { observer } from 'mobx-react';
import { plugin, options } from "@h5/videoPluginSDK";

const { Color, Item } = options;

function QrcodeSet(props) {
  // 获取当前操作的元素
  const [, forceUpdate] = useReducer(x => x + 1, 0);
  const elementData = editor.getElementData() as QrcodeElement;
  return (
    <>
      <Item title="二维码内容">
        <TextArea
          showClear
          value={elementData.text}
          onChange={v => {
            elementData.text = v;
            editor.updateMovie();
            forceUpdate();
          }}
          onBlur={() => {
            // 保存操作记录
            editor.record({
              type: 'elements_update',
              desc: '修改二维码内容',
            });
          }}
        />
      </Item>
      <Item title="二维码颜色">
        <Color
          value={elementData.colorDark}
          onChange={(e: any) => {
            // 修改二维码颜色
            elementData.colorDark = `rgba(${e.rgb.r}, ${e.rgb.g}, ${e.rgb.b}, ${e.rgb.a})`;
            forceUpdate();
            editor.updateMovie();
          }}
          onAfterChange={() => {
            // 保存操作记录
            editor.record({
              type: 'elements_update',
              desc: '修改二维码颜色',
            });
          }}
        />
      </Item>
    </>
  );
}
export default observer(QrcodeSet);

编辑区组件 ​

编辑区组件