React Native

本文结合部分 SDK API ，介绍如何快速接入白板功能。

导入SDK

请 点此查看 如何导入SDK。

获取白板

使用白板前，请先 初始化 RtcEngineKit 实例，再通过其 whiteboardEngine 方法获取白板控制接口。

this._engine?.whiteboardEngine();

注册通知

通过 RtcWhiteboard 实例的 addListener 方法注册白板回调，用来接收白板事件通知。

this._whiteboard?.addListener('onCreateDoc', (result, fileId) => {
    // 创建白板文件通知
});
this._whiteboard?.addListener('onContentUpdated', () => {
    // 白板内容更新通知
});
this._whiteboard?.addListener('onMessage', (userId, message) => {
    // 收到白板消息的通知
});
......

完整的回调方法列表与介绍，请查看 RtcWhiteboardEventHandler。

加入频道

请 点此查看 如何加入频道。对于加入频道时的 serviceFlags 参数：

  • 如果需要同时使用音视频和白板功能，请将其配置为：
    [ChannelService.Media, ChannelService.Whiteboard]；
  • 如果仅使用白板功能，请将其配置为 [ChannelService.Whiteboard]。

打开白板

加入白板频道成功后，通过 RtcWhiteboard 实例的 open 方法打开白板。

第一位用户打开白板时，其他用户会收到 RtcEngineEventHandler 的 onWhiteboardStart 通知。

private whiteboardView = React.createRef<RtcWhiteboardSurfaceView>();
......
this._whiteboard?.open(this.whiteboardView);

工具条

SDK 内部已实现白板工具绘制和数据同步，但是由于不同的开发者有不同的 UI 设计，因此 SDK 不提供涉及 UI 交互的白板工具条。
请开发者自行设计白板工具条，来结合调用 SDK 接口以执行相应的白板操作。

全局属性

白板颜色

背景色

通过 RtcWhiteboard 实例的 setBackgroundColor 方法设置白板背景色。

let bgColor = new WBColor(0.5, 0.5, 0.5, 1.0);
this._whiteboard?.setBackgroundColor(bgColor);

白板背景色仅在本地显示，不会同步给其他用户。因此每位用户的白板背景色可以不同。

前景色

通过 RtcWhiteboard 实例的 setForegroundColor 方法设置白板前景色。
前景色适用于文字、线条和边框的颜色。

let fgColor = new WBColor(0, 0, 1.0, 1.0);
this._whiteboard?.setForegroundColor(fgColor);

填充色

通过 RtcWhiteboard 实例的 setFillColor 方法设置白板填充色。
填充色适用于封闭图形（如椭圆和矩形）的填充颜色。

let fillColor = new WBColor(1.0, 0, 0, 1.0);
this._whiteboard?.setFillColor(fillColor);
// 当 WBFillType 为 Color 时，填充色才会生效
this._whiteboard?.setFillType(WBFillType.Color);

适用于文字工具的全局属性

  • 通过 RtcWhiteboard 实例的 setFontSize 方法设置字体大小。
this._whiteboard?.setFontSize(36);
  • 通过 RtcWhiteboard 实例的 setFontStyle 方法设置字体样式（粗体、斜体）。
this._whiteboard?.setFontStyle(WBFontStyle.BoldItalic);
// 可选值：Normal, Bold, Italic, BoldItalic

适用于图形工具的全局属性

  • 通过 RtcWhiteboard 实例的 setLineWidth 方法设置线条和边框的宽度。
this._whiteboard?.setLineWidth(10);
  • 通过 RtcWhiteboard 实例的 setFillType 方法设置封闭图形填充方式。
this._whiteboard?.setFillType(WBFillType.Color);
// 可选值：None 不填充、Color 填充颜色

常用工具

设置工具类型

通过 RtcWhiteboard 实例的 setToolType 方法设置工具类型。

this._whiteboard?.setToolType(WBToolType.None); // 空，画板不响应操作，但是可以操作动态课件中的内容
this._whiteboard?.setToolType(WBToolType.Text); // 文本工具
this._whiteboard?.setToolType(WBToolType.Path); // 画笔工具
this._whiteboard?.setToolType(WBToolType.Laser); // 激光笔工具
this._whiteboard?.setToolType(WBToolType.Line); // 直线工具
this._whiteboard?.setToolType(WBToolType.Arrow); // 箭头工具
this._whiteboard?.setToolType(WBToolType.Rect); // 矩形工具
this._whiteboard?.setToolType(WBToolType.Ellipse); // 椭圆工具
this._whiteboard?.setToolType(WBToolType.Select); // 选择工具，可以触摸移动图形
this._whiteboard?.setToolType(WBToolType.Eraser); // 橡皮檫工具，用于删除图形
// 刷子工具本质上是对图层区域做透明处理，所以开启刷子功能时，不要移动和缩放图形
// 刷子工具，可以结合 setLineWidth 方法设置擦除宽度
this._whiteboard?.setToolType(WBToolType.Brush);

请在加入白板频道成功后再进行白板操作。

撤销与重做

通过 RtcWhiteboard 实例的 undo 方法撤消上一次操作，redo 方法重做上一次被撤销的操作。

this._whiteboard?.undo();

只能对自己的操作记录进行撤销与重做。

图片操作

设置背景图片缩放模式

通过 RtcWhiteboard 实例的 setBackgroundImageScalingMode 方法设置背景图片缩放模式。

// WBImageScalingMode 可选值：Fit/AutoFill/FillWidth/FillHeight/FitCenter
this._whiteboard?.setBackgroundImageScalingMode(WBImageScalingMode.AutoFill);

设置背景图片

通过 RtcWhiteboard 实例的 setBackgroundImage(imageUrl: string) 方法设置当前页的背景图片，setBackgroundImageWithPage(imageUrl: string, pageNo: number) 设置指定页的背景图片。

this._whiteboard?.setBackgroundImage(imageUrl);

导入背景图片列表

通过 RtcWhiteboard 实例的 addBackgroundImages 方法导入背景图片列表到当前白板文档。

let urls = ['...url1...', '...url2...'];
urls.push('...url3...');
this._whiteboard?.addBackgroundImages(urls);

上传图片

通过 RtcWhiteboard 实例的 addImageFile 方法上传图片（此方法上传的图片支持拖拽）。

let imageUrl = 'https://domain/path/filename.jpg'; // 可为本地路径或远程 URL
this._whiteboard?.addImageFile(imageUrl);

多媒体操作

Admin 用户操作音视频（包括动态课件中嵌入的音视频，以及通过下列方法上传到白板中的音视频）时，播放状态（播放、暂停、拖动进度条）会自动同步给其他用户。

上传音频

通过 RtcWhiteboard 实例的 addAudioFile 方法上传音频文件到当前页面。

let mediaUrl = 'https://domain/path/filename.mp3'; // 可为本地路径或远程 URL
this._whiteboard?.addAudioFile(mediaUrl);

上传视频

通过 RtcWhiteboard 实例的 addVideoFile 方法上传视频文件到当前页面。

var mediaUrl = 'https://domain/path/filename.mp4'; // 可为本地路径或远程 URL
this._whiteboard?.addVideoFile(mediaUrl);

设置用户角色

通过 RtcWhiteboard 实例的 setRoleType 方法设置自己的角色(这是异步操作，请注意监听 onRoleTypeChanged 通知)。
角色的区别：

定义类型权限备注
Admin管理员可以使用工具，可以操作所有用户的内容一个频道只能有一位管理员
Attendee普通用户可以使用工具，只能操作自己的内容默认角色
Viewer仅观看的用户不能使用工具，只能缩放和移动
 
this._whiteboard?.setRoleType(WBRoleType.Admin); // 设置自己为管理员

画板操作

缩放和移动

缩放

通过 RtcWhiteboard 实例的 getCurrentScaleFactor 方法获取当前白板视图的缩放比例，setCurrentScaleFactor 方法设置缩放比例。

this._whiteboard?.getCurrentScaleFactor().then(scale => console.info('current scale:', scale));
this._whiteboard?.setCurrentScaleFactor(2.0); // 取值范围 [0.1, 5.0]

重置当前页视角

通过 RtcWhiteboard 实例的 resetVision 方法重置当前页视角，将当前文档或动态课件一键居中，或者将默认白板恢复初始大小。

this._whiteboard?.resetVision();

手势控制缩放和移动

通过 RtcWhiteboard 实例的 setOption 方法，type 参数设置为 ScaleMove，option 参数设置为 boolean 类型来设置是否允许手势控制白板缩放和移动（不影响通过 setCurrentScaleFactor 方法控制缩放）。

this._whiteboard?.setOption(true, WBOptionType.ScaleMove); // 默认值为 true (允许手势控制)

UI 交互

通过 RtcWhiteboard 实例的 setOption 方法，type 参数设置为 EnableUIResponse，option 参数设置为 boolean 类型来设置白板是否响应 UI 交互事件。
默认启用，如果传入 false 则白板不再响应任何 UI 交互，既不能移动和缩放，也不能使用任何工具。

this._whiteboard?.setOption(true, WBOptionType.EnableUIResponse);

隐藏画板内容

通过 RtcWhiteboard 实例的 setOption 方法，type 参数设置为 ShowDraws，option 参数设置为 boolean 类型来隐藏或显示白板图形（不影响背景图片和动态课件）。

this._whiteboard?.setOption(true, WBOptionType.ShowDraws); // true: 显示(默认值)，false: 隐藏

清除画板内容

通过 RtcWhiteboard 实例的 clearContents 方法清除画板内容。

  • 此方法需要管理员权限。
  • curPage 参数表示是否仅限清除当前页面。
  • type 参数表示清除的内容类型。
    • 为 All 时清除所有内容
    • 为 Draws 时清除图形
    • 为 BackgroundImage 时清除背景图片
// 管理员清除所有页面的所有内容
this._whiteboard?.clearContents(false, WBClearType.All).then(result => {console.log('clearContents result:', result)});

通过 RtcWhiteboard 实例的 clearUserContents 方法清除特定用户的画板内容。

  • 需要管理员权限才能清除其他用户添加的内容。
  • curPage 参数表示是否仅限清除当前页面。
  • type 参数表示清除的内容类型。
    • 为 All 时清除所有内容
    • 为 Draws 时清除图形
    • 为 BackgroundImage 时清除背景图片
// 管理员清除特定用户添加的图形
this._whiteboard?.clearUserContents('20000', false, WBClearType.Draws).then(result => {console.log('clearUserContents result:', result)});

关闭/离开白板

通过 RtcWhiteboard 实例的 close 方法关闭白板（仅关闭当前用户的白板 UI）。

this._whiteboard?.close();

通过 RtcWhiteboard 实例的 leave 方法离开白板（关闭当前用户的白板 UI，并且断开白板服务）。

this._whiteboard?.leave();

示例代码

为方便开发者了解接口使用方式，我们还提供示例代码，请体验参考：

Last updated on 2022/2/24
← Flutter简介 →