Options
All
  • Public
  • Public/Protected
  • All
Menu

Index

Type aliases

ICustomPopUnitOption

ICustomPopUnitOption: { onMount: any; onUnmount?: any }

自定义弹窗按钮属性。

点击自定义弹窗按钮后,用户通过onMount函数将元素挂载到div中。

点击其它区域时,会卸载弹窗按钮的div。用户可以选择在onUnmount函数中,添加卸载时的一些动作

example
 //设置图章弹窗。点击后可以选择图章按钮
 toolCollection.addOrSetTool({
    position: 'left',
    item: {
        tool: 'custom-popup-macro',
        hint: '图章',
        backgroundImage: Stamp,
        //渲染弹窗内容
        onMount: (container) => {
            ReactDOM.render(
                <MacroPopup
                     drawPlugin={app}
                />, 
                container
            )
        }
    }
 })

//MacroPopup是一个React组件,其render函数示意为:
 render() {
    return (
        <div className='stamp-popup'>
            <div className='section'>
            <div className='stamp-header'>
                图章
            </div>
        </div>
    )
 }


//弹窗的样式:
 .stamp-popup {
    position: absolute;
    left: 50px;
    padding: 8px;
    background: white;
    width: 180px;
    transform: translateY(-50%);
 }

Type declaration

  • onMount: function
    • onMount(div: HTMLDivElement): void
    • Parameters

      • div: HTMLDivElement

      Returns void

  • onUnmount: function
    • onUnmount(div: HTMLDivElement): void
    • Parameters

      • div: HTMLDivElement

      Returns void

ICustomStateUnitOption

ICustomStateUnitOption: { backgroundImageByState?: {}; defaultState: string; clickCb: any }

自定义状态图标自定义配置

example
 toolCollection.addOrSetTool({
     tool: 'custom-state-toggle-editable',
     hint: '切换编辑',
     clickCb: (currState) => {
         if (currState === 'editable') return 'non-editable'
         else return 'editable'
     },
     defaultState: 'editable',
     backgroundImageByState: {
         'editable': 'url_of_editable_state_icon',
         'non_editable': 'url_of_non_editable_state_icon'
     }
})

 toolCollection.on('iconClick', (toolName: string, opt: {
    //点击前的state
    state: string,
    //点击后的state
    newState: string
 }) => {
    if (toolName === 'custom-state-toggle-editable') {
        if (opt.newState === 'editable') {
            drawPlugin.enableDraw(true)
        } else {
            drawPlugin.enableDraw(false)
        }
    }
  })

Type declaration

  • Optional backgroundImageByState?: {}

    根据图标当前状态选择背景图

    • [state: string]: string
  • defaultState: string

    默认状态

  • clickCb: function
    • clickCb(state: string): string
    • 点击图标后,给定当前状态,返回下一个状态

      Parameters

      • state: string

      Returns string

IDocUploadOption

IDocUploadOption: { supportDocToPic?: boolean; supportPptToH5?: boolean; supportTransMedia?: boolean; supportUploadMedia?: boolean }

文档弹窗自定义配置:是否支持动态转码, 是否支持静态转码,是否支持上传音视频,是否支持上传并转码音视频

example
{
     tool: 'docUpload',
     hint: '文档上传',
     supportPptToH5: true
     supportDocToPic: true
     supportUploadMedia: true
     supportTransMedia: true
}

Type declaration

  • Optional supportDocToPic?: boolean

    若缺失,则默认为true

  • Optional supportPptToH5?: boolean

    若缺失,则默认为true

  • Optional supportTransMedia?: boolean

    若缺失,默认为true

  • Optional supportUploadMedia?: boolean

    若缺失,默认为true

IDynamicDocParam

IDynamicDocParam: { height: number; pageCount: number; url: string; width: number }

动态文档转码结果

Type declaration

  • height: number

    文档高度

  • pageCount: number

    文档页面总数

  • url: string

    动态文档URL

  • width: number

    文档宽度

IFont

IFont: { displayName: string; fontName: string } | { displayName: string; fontFace: IFontFace }

IFontFace

IFontFace: { format?: string; url: string }[] | { format?: string; url: string }

IMacroCommonProp

IMacroCommonProp: { clkAdd: boolean; cursor?: string; dragAdd: boolean; origin?: { x: number; y: number }; size?: "absolute" | "relative"; type: "image" | "text" }

Type declaration

  • clkAdd: boolean

    是否支持点击添加内容。 当type = 'text'时,clkAdd必须为true,否则无法添加文本

  • Optional cursor?: string

    设置宏教具时的鼠标指针。该属性的值和css中的cursor值语义一致。该属性有以下说明:

    1. cursor为图片地址时,图片的尺寸不能大于128 * 128
    2. Safari中图片的偏移量若为负数,会出现问题
  • dragAdd: boolean

    是否支持拖拽添加内容

  • Optional origin?: { x: number; y: number }

    origin只在点击添加元素时有效。

    origin表示元素和鼠标的相对关系。默认为: {x: 0, y: 0},即点击后,鼠标位于元素的左上角。 x、y的取值范围为0到1

    • x: number
    • y: number
  • Optional size?: "absolute" | "relative"

    只在类型为image, 且添加方式为点击添加时生效。

    默认为relative。 relative: 在不同缩放比时,多次添加的元素,在同一时刻的显示大小相同 absolute:在不同缩放比时,多次添加的元素,在添加的时刻的大小相同

  • type: "image" | "text"

    宏教具预添加内容类型

IMacroImageProp

IMacroImageProp: { height?: number; url: string; width?: number }

宏教具添加图片时的属性。

当width,height都缺失时,使用图片固有宽高。

当width或者height缺失其一时,缺失的属性根据图片宽高比调整

Type declaration

  • Optional height?: number
  • url: string

    图片url地址。请确保图片地址无访问限制

  • Optional width?: number

IMacroPayload

IMacroPayload: IMacroCommonProp & { attr: IMacroImageProp | IMacroTextProp }

宏教具的属性

example

下面的示例代码设置了如下属性:

  1. 点击方式添加图片(clkAdd=true & dragAdd=false)
  2. 初始图片大小随缩放变化(size=relative)
  3. 缩放100%时图片大小为图片固有尺寸(未设置attr.width, attr.height)
  4. 鼠标指针和图片一致(cursor)
    drawPlugin.setTool('macro', {
      cursor: "url('https://jdvodj7gqfxcq.vod.126.net/jdvodj7gqfxcq/840ac4e9216c4bbdad10dd2f168c2f15.png'), auto",
      size: 'relative',
      type: 'image',
      clkAdd: true,
      dragAdd: false,
      attr: {
          url: "https://jdvodj7gqfxcq.vod.126.net/jdvodj7gqfxcq/840ac4e9216c4bbdad10dd2f168c2f15.png"
      }
    })
    

IMacroTextProp

IMacroTextProp: { fill?: string; fontFamily?: string; fontSize?: number; stroke?: string; text: string }

宏教具添加文本时的属性

Type declaration

  • Optional fill?: string

    文本背景色。缺失时使用白板当前的默认背景色

  • Optional fontFamily?: string

    字体。缺失时使用白板当前的默认字体

  • Optional fontSize?: number

    fontSize长度限制为12-300。默认为32

  • Optional stroke?: string

    文本颜色。缺失时使用白板当前的默认颜色

  • text: string

    文本长度限制为1-100

IMediaEntity

IMediaEntity: { docId: string; fileType: string; name: string; params: IMediaParams; showDelete?: boolean }

Type declaration

  • docId: string
  • fileType: string
  • name: string
  • params: IMediaParams
  • Optional showDelete?: boolean

IMediaParams

IMediaParams: { bucket: string; object: string; origin: string; trans: boolean; url: string; video: boolean }

Type declaration

  • bucket: string
  • object: string
  • origin: string
  • trans: boolean
  • url: string
  • video: boolean

IMultiInOneOption

IMultiInOneOption: { itemPerRow?: number; subItems: IUnitOption[] }

收纳图标自定义配置

example
{
     tool: 'multiInOne',
     hint: '更多',
     itemPerRow: 4,
     subItems: [
         {
             item: 'video',
             hint: '上传视频
         },
         {
             item: 'audio',
             hint: '上传音频'
         },
     ]
}

Type declaration

  • Optional itemPerRow?: number

    每一行多少个图标。默认为4个

  • subItems: IUnitOption[]

    收纳盒中包含的子图标

IPlatform

IPlatform: "web" | "ios" | "android" | "pc" | "mac" | "pad"

sdk运行的目标设置

IPosition

IPosition: "leftBottom" | "left" | "leftTop" | "topLeft" | "top" | "topRight" | "rightTop" | "right" | "rightBottom" | "bottomRight" | "bottom" | "bottomLeft"

工具栏的位置

IPreviewUnitOption

IPreviewUnitOption: { previewSliderPosition: "left" | "right" }

预览图标自定义配置

控制预览图弹出的方位

example
{
     tool: 'preview',
     hint: '预览弹窗',
     previewSliderPosition: 'right'
}

Type declaration

  • previewSliderPosition: "left" | "right"

IResourceEntity

IResourceEntity: { docId: string; fileType: string; name: string; params: IStaticDocParam | IDynamicDocParam | IStaticDocParamDeprecated[] | IMediaParams; payload: any; state: number }

Type declaration

IResourceMetaData

IResourceMetaData: { height: number; loaded: boolean; type: "image"; url: string; width: number } | { duration: number; height: number; loaded: boolean; type: "video"; url: string; width: number } | { duration: number; loaded: boolean; type: "audio"; url: string }

IShapeSelectOption

IShapeSelectOption: { subItems: IUnitOption[] }

图形选择图标的自定义配置

Type declaration

ITool

ITool: "select" | "laser" | "pen" | "text" | "element-eraser" | "duplicate" | "clear" | "undo" | "redo" | "pan" | "image" | "zoomIn" | "zoomOut" | "reset" | "fitToContentDoc" | "zoomLevel" | "firstPage" | "lastPage" | "prevPage" | "nextPage" | "pageInfo" | "preview" | "docUpload" | "docSelect" | "pageBoardInfo" | "fitToContent" | "fitToDoc" | "shapeSelect"

工具栏工具类型。除了下面列出的类型外,还可以设置自定义工具栏按钮:

custom-xxx: xxx是任意字符串。表示自定义组件。

custom-state-yyy: yyy是任意字符串。表示自定义状态组件 ICustomStateUnitOption

custom-popup-zzz: zzz是任意字符串。表示自定义弹窗组件 ICustomPopUnitOption

IToolCustomProperty

各类图标的私有配置

IUnitOption

IUnitOption: { backgroundImage?: string; hint?: string; id?: string; size?: number; tool: ITool | string } & IToolCustomProperty
example

示例为收纳盒的配置

{
     tool: 'undo',
     hint: '撤销'
}

IVisionArgs

IVisionArgs: { broadcaster: string; broadcasterName: string | undefined }

broadcasterName: 主播名称。优先使用昵称(nickname), 若初始化时未设置nickname,则为主播uid

broadcaster: 主播uid

Type declaration

  • broadcaster: string
  • broadcasterName: string | undefined