@tencent/whiteboard:1.3.0
SDK的主要功能入口,通过实例化并持有 Sketch
,可完成对白板所有功能的访问。
创建新的白板实例,用于控制白板的渲染、交互、数据等。该类实现了所有的IApi接口。
Extends IApi
(SketchOptions)
白板初始化参数
// 获取用于插入白板的HTML节点的ID
const containerId = 'whiteboard-container';
// 获取房间号
const roomId = '12345';
// 获取鉴权信息
const token = '12345';
// 创建白板实例
const sketch = new Sketch({
containerId,
roomId,
token,
pluginList: [],
});
// 注册白板事件监听器
sketch.addListener('data_synced', () => {
// 同步数据后的回调
});
// 设置白板工具为画笔
sketch.board.setToolType(sketch.enum.toolType.BRUSH);
获取缩略图容器
HTMLElement
:
插件信息
插件入口页面URL或加载函数(函数类型参数主要用于插件开发调试)
Type: (string | SketchPluginLoadFunc)
SDK对外提供的所有功能都通过 IApi
统一定义,并通过不同的对象对功能做了分类,所有相关对象定义都在本目录下。
Sketch
内实现了 IApi
的所有接口,通过 Sketch
实例可以访问到 IApi
内定义的所有方法。
可在应用和插件内调用的接口
初始化插件
(PluginConfig)
插件配置
Promise<void>
枚举值定义
反馈问题类型
Type: IFeedbackType
元素类型
Type: IElementType
边框线条类型
Type: IBorderType
图形类型
Type: IShapeType
文件类型
Type: IDocumentType
画板类型
Type: IFrameType
箭头类型
Type: ILineArrowheadStyle
文本对齐方式
Type: ITextAlign
元素对齐/排列方式
Type: IArrangeMode
白板相关接口
获取元素的boundingBox
Promise<IBoundingBox>
获取画框信息列表
Promise<Array<IFrameInfo>>
设置指定类型元素的属性默认值,创建元素时如果没有指定该属性,将使用该默认值
Promise<void>
获取指定类型元素的属性默认值
(IElementType)
元素类型
(string)
元素属性
Promise<any>
用户相关接口
获取当前用户信息
Promise<CurrentUserInfo>
UI相关接口
初始化可拖动素材容器
(HTMLElement)
容器的HTML节点
(DraggableSourceContainerOptions)
可拖动素材容器的配置项
Promise<void>
打开模态对话框加载指定页面
(string)
要加载的页面的URL
(ModelOptions?)
模态对话框的配置项
Promise<void>
打开资源库对话框加载指定页面
(string)
要加载的页面的URL
(LibraryOptions?)
资源库对话框的配置项
Promise<void>
辅助工具接口
问题反馈上报
(IFeedbackType)
问题反馈编号
(Array<EnumType<any>>)
问题反馈类型
(string)
问题描述
(string)
截图URL
Promise<void>
资源相关接口
上传资源文件
(ResourceType)
资源类型
((File | Blob))
文件内容
(string)
文件名
(number)
(number)
(string)
文件夹ID
(function (): void)
(function (): void)
Promise<ResourceDocumentInfo>
获取资源文件信息
(string)
文件ID
Promise<ResourceDocumentInfo>
获取资源文件夹列表
(ResourceType)
文件类型
(string)
文件夹ID
(number)
分页索引
(number)
分页大小
(string)
文件名筛选
Promise<ResourceList>
请通过 Sketch
实例的 addListener
、removeListener
方法管理订阅,并在回调中处理相关逻辑。
回调事件
插件加载完成
Type: function (list: Array<PluginStatus>): void
(any)
插件状态列表
缩放比例变化
Type: function (scale: number): void
(any)
当前缩放比例
工具类型更新事件
Type: function (toolType: EnumType<any>): any
(IToolType)
当前工具类型
选择元素事件
Type: function (selectInfo: SelectInfo): void
(any)
选中元素的信息
对画布进行缩放、平移等操作后,视口发生变化,会触发该事件
Type: function (viewport: IRect): void
(any)
当前视口
画板列表变化
Type: function (frameList: Array<IFrameInfo>): void
(any)
变化后的画板列表
元素定义,包括线条、矩形、圆形、文本、图片等。
元素的访问可通过 Sketch
实例的 board
方法获取 IBoard
接口进行。
普通元素基类
Extends IElement
(IElementType
= IElementType.UNKNOWN
)
元素类型
文本元素
Extends INormalElement, IText, IBoxStyle
(IElementType
= IElementType.TEXT
)
元素类型
便签元素
Extends ITextElement
图形元素
Extends ITextElement
图形类型
Type: IShapeType
连线元素
Extends INormalElement, IBorderStyle
起始点关联元素ID
起始点相对位置
控制点集合
结束点关联元素ID
结束点相对位置
开始点箭头样式
Type: ILineArrowheadStyle
结束点箭头样式
Type: ILineArrowheadStyle
图片元素
Extends INormalElement
图片元素
Extends INormalElement
文档元素
Extends INormalElement
网页元素
Extends INormalElement, IPreview
视频元素
Extends INormalElement, IPreview
画框元素
Extends INormalElement
标题
画框类型
Type: IFrameType
画笔元素
Extends INormalElement, IBorderStyle
画笔点集合,每个点以一个Array表示,第一个元素为x,第二个元素为y,第三个元素为权重(预留,用于后续支持笔锋等功能)
连线控制点
Extends IAbsPosition
具有可编辑文本
文本对齐方式
Type: ITextAlign
文本颜色
文本字体
只能一对一匹配,将fontFamily = 'Microsoft Yahei, PingFang SC, Hiragino Sans GB, STHeiti, Microsoft Sans Serif, sans-serif'设置为sans-serif
文本大小
文本样式(正常/斜体)
Type: IFontStyle
具有盒子样式(背景和边框属性的组合)
Extends IBackgroundStyle, IBorderStyle
评论属性
Extends IRelPosition
所有枚举值可通过 Sketch
实例的 enum
方法获取 IEnum
接口进行访问。
这里定义了一些接口调用过程中可能用到的数据类型,一般不需要特别关心。通过对应接口的文档说明即可跳转到相应的类型定义。
创建元素参数
元素类型
Type: IElementType
插件配置
插件扩展点配置
Type: PluginExtensions
插件扩展点配置
工具栏扩展按钮配置
Type: ButtonExtension<ToolBarButton>
SVG图标配置
可拖动素材容器的配置项
获取可拖动项的预览图接口实现
Type: function (targetElement: HTMLElement): DraggableItemPreview
可拖动项被拖动时触发的事件
Type: function (canvasX: number, canvasY: number, targetElement: HTMLElement): void
可拖动项被点击时触发的事件
Type: function (targetElement: HTMLElement): void
资源文件信息
文件类型
Type: ResourceType
资源列表
文件列表
Type: Array<ResourceDocumentInfo>
文件夹列表
Type: Array<ResourceDirectoryInfo>
HTTP请求方法
Type:
("get"
| "GET"
| "delete"
| "DELETE"
| "head"
| "HEAD"
| "options"
| "OPTIONS"
| "post"
| "POST"
| "put"
| "PUT"
| "patch"
| "PATCH"
| "purge"
| "PURGE"
| "link"
| "LINK"
| "unlink"
| "UNLINK"
)
选框信息
获取网页预览图
元素排列模式
顶部对齐
上下居中对齐
底部对齐
左侧对齐
左右居中对齐
右侧对齐
横向排列
纵向排列
宫格排列