跳到主要内容

画布工具配置

更新时间 2025/02/25 05:40:11

Web SDK 内置了丰富的工具，支持按需配置并使用。画布内可配置工具栏包括常态画布页面布局下：

  • 左上方的菜单栏：包含自定义菜单、下载、搜索工具等。
  • 右上方的工具栏：包含激光笔、计时器等工具。
  • 左侧的工具栏：包括画布绘制相关工具
  • 左下角的工具栏：包含帧框列表展开按钮和翻页器工具栏。
  • 右下角工具栏：包含缩放、地图等工具。

画布工具配置项​

toolbarWidgetsConfigs?: ToolBarWidgetsConfigsT;

画布工具配置项属性说明​

下表为 ToolBarWidgetsConfigsT 类型属性说明：

属性
类型
说明
titleBarVisible
boolean | undefined
左上方标题栏显示配置（ undefined 则跟随 sdk 自定义显示，否则根据配置显示）
search
boolean
标题栏中搜索工具显示配置
download
boolean
标题栏中下载工具显示配置
floatBarVisible
boolean | undefined
右上方靠左侧工具栏显示配置（undefined 则跟随 sdk 自定义显示，否则根据配置显示）
timer
boolean
计时器工具显示配置
laser
boolean
激光笔工具显示配置
meeting
boolean
会议工具显示配置
optionBarVisible
boolean | undefined
右上方右侧工具栏显示配置（undefined 则跟随 sdk 自定义显示，否则根据配置显示）
cursor
boolean
光标工具显示配置
boardMemberList
boolean
白板在线成员列表显示配置，包含跟随功能
bottomLeftBarVisible
boolean | undefined
左下方工具栏显示配置（undefined 则跟随 sdk 自定义显示，否则根据配置显示）
frameListBar
boolean
展开帧框列表按钮显示配置
bottomRightBarVisible
boolean | undefined
右下方工具栏显示配置（undefined 则 sdk 自定义显示，否则根据配置显示）
ai
boolean
ai 入口显示配置
miniMap
boolean
迷你地图显示配置
fullscreen
boolean
全屏工具显示配置
helpCenter
boolean
帮助中心工具显示配置
toolBarVisible
boolean | undefined
左侧绘制工具栏显示配置（undefined 则跟随 sdk 自定义显示，否则根据配置显示）
toolbarConfig
object
左侧绘制工具栏中工具配置，详见下方绘制工具栏配置说明

绘制工具栏配置属性说明​

下方为绘制工具栏配置toolbarConfig属性说明：

注：

  • 此参数为工具显示白名单，只有在配置中的工具才会显示。未配置该参数时会显示画布默认绘制工具。
  • 除模板工具外，其他工具都能开箱即用。模板工具配置方式请参考模板工具配置。
属性
类型
说明
template
boolean
模板工具
stickyNote
boolean
便签工具
shapes
boolean
图形工具
text
boolean
文本工具
connectLine
boolean
文本工具
draw
boolean
画笔工具
comment
boolean
批注工具
frame
boolean
帧框工具
mindMap
boolean
思维导图工具
table
boolean
表格工具
kanban
boolean
看板工具
upload
boolean
上传工具
webpage
boolean
嵌入网页工具
sticker
boolean
贴纸工具
timer
boolean
计时器工具

使用示例​

const initRes = await InfiWebSdk.getSdkInstance({
  ...,
  // 设置画布工具配置项
  toolbarWidgetsConfigs: {
    titleBarVisible: true,
    optionBarVisible: true,
    floatBarVisible: true,
    meeting: false,
    // 设置画布绘制工具配置项
    toolbarConfig: {
      sticker: true,
      stickyNote: true,
      connectLine: true,
      frame: true,
    },
  },
});