Pano开发者中心
  • 开发者中心
  • 下载中心

›白板

新手入门

  • 简介
  • 名词解释
  • 创建第一个应用

规则说明

  • Channel ID命名规则
  • 权限控制
  • 计费说明
  • 频道最大时长说明
  • 每月一万分钟免费说明
  • 布局参数说明
  • 水印

场景方案

    教育行业

    • 1vN互动小班课
    • 互动直播大班课

快速接入

  • 简介
  • 音视频

    • Windows (C++)
    • iOS (Objective-C)
    • Android (Java)
    • Web
    • Electron
    • Flutter
    • React Native
    • Unity

    白板

    • Windows (C++)
    • iOS (Objective-C)
    • Android (Java)
    • Web
    • Electron
    • Flutter
    • React Native

高级功能(RTC)

  • 简介
  • 屏幕共享
  • 分组讨论
  • 状态回调
  • 设备诊断
  • 音量指示
  • 控制声音
  • 声卡操作
  • 混音/伴音
  • 混响
  • 耳返
  • 变声
  • 美颜
  • 音视频数据回调
  • 音视频外部采集
  • 收发多路视频
  • 多窗口渲染
  • 性能检测
  • 截图
  • 反馈

高级功能(RTS)

  • 简介
  • 白板

    • Windows (C++)
    • iOS (Objective-C)
    • Android (Java)
    • Web
    • Flutter

    标注

    • 视频标注
    • 共享标注
    • 外部标注

    消息

    • 消息服务

    远程控制

    • 远程控制

操作实践

  • 切换大小屏

RESTful API

  • 基本格式
  • 生成Token
  • 频道管理
  • 云端录制
  • CDN推流
  • 文档转码
  • 消息服务
  • 服务端消息通知

SDK API

  • SDK接口说明
  • Windows (C++)
  • macOS/iOS (Objective-C)
  • Android (Java)
  • Web SDK (IE专用版)
  • Web SDK

    • 浏览器兼容性
    • RtcEngine
    • GroupManager
    • RtcWhiteboard
    • RtsService
    • RtcMessage
    • Annotation
    • Constants

更新记录

  • 简介
  • Windows
  • macOS
  • iOS
  • Android
  • Electron
  • Flutter
  • React Native
  • Unity
  • Web(全功能SDK)
  • Web(RTS SDK)
  • Web(IE专用音视频SDK)

帮助

  • FAQ
  • 更多帮助

Windows (C++)

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

如需查看完整 SDK API 列表,请点击左侧导航查看:SDK API - Windows (C++) - RtcWhiteboard。

导入SDK

请 点此查看 如何导入SDK。

扩展插件

如果白板内需要使用下列功能,还需下载相应的扩展插件并解压放置到主程序(exe)所在的目录中。

如果白板内需要使用动态课件,扩展插件下载地址:

  • x64版本
  • x86版本

如果白板内需要使用PDF文档,扩展插件下载地址:

  • x64版本
  • x86版本

获取白板

使用白板前,请先 初始化 RtcEngine 实例,再通过其 getWhiteboardEngine 方法获取白板引擎(RtcWhiteboard)。

auto* whiteboard = rtcEngine_->getWhiteboardEngine();

注册通知

通过 RtcWhiteboard 实例的 setCallback 方法设置白板回调函数,用来接收白板事件通知。

whiteboard->setCallback(cb);

完整的回调方法列表与介绍,请查看 RtcWhiteboard::Callback 类。

加入频道

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

  • 如果需要同时使用音视频和白板功能,请将其配置为:
    kChannelServiceMedia | kChannelServiceWhiteboard;
  • 如果仅使用白板功能,请将其配置为 kChannelServiceWhiteboard。

打开白板

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

第一位用户打开白板时,其他用户会收到 RtcEngine::Callback 的 onWhiteboardStart() 通知。

whiteboard->open(view);

工具条

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

全局属性

白板颜色

背景色

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

WBColor bgColor = { 1.f, 1.f, 1.f, 1.f };
whiteboard->setBackgroundColor(wbColor);

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

前景色

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

WBColor fgColor = { 192.f / 255, 0, 123.f / 255, 1 };
whiteboard->setForegroundColor(fgColor);

填充色

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

WBColor fillColor = { 0.5f, 0.5f, 0.5f, 0.5f };
whiteboard->setFillColor(fillColor);

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

  • 通过 RtcWhiteboard 实例的 setFontSize 方法设置字体大小。
whiteboard->setFontSize(size); // 范围:[10, 96]
  • 通过 RtcWhiteboard 实例的 setFontStyle 方法设置字体样式(粗体、斜体)。
whiteboard->setFontStyle(WBFontStyle::NORMAL);
// 可选值:NORMAL, BOLD, ITALIC, BOLD_ITALIC

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

  • 通过 RtcWhiteboard 实例的 setLineWidth 方法设置线条和边框的宽度。
whiteboard->setLineWidth(size); // 范围:[1, 20]
  • 通过 RtcWhiteboard 实例的 setFillType 方法设置封闭图形填充方式。
whiteboard->setFillType(WBFillType::NONE);
// 可选值:NONE 不填充、COLOR 填充颜色

常用工具

设置工具类型

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

whiteboard->setToolType(WBToolType::NONE); // 空,画板不响应操作,但是可以操作动态课件中的内容
whiteboard->setToolType(WBToolType::TEXT); // 文本工具
whiteboard->setToolType(WBToolType::PATH); // 画笔工具
whiteboard->setToolType(WBToolType::LASER); // 激光笔工具
whiteboard->setToolType(WBToolType::LINE); // 直线工具
whiteboard->setToolType(WBToolType::POLYLINE); // 折线工具
whiteboard->setToolType(WBToolType::ARC); // 弧线工具
whiteboard->setToolType(WBToolType::CURVE); // 曲线工具
whiteboard->setToolType(WBToolType::ARROW); // 箭头工具
whiteboard->setToolType(WBToolType::RECT); // 矩形工具
whiteboard->setToolType(WBToolType::POLYGON); // 多边形工具
whiteboard->setToolType(WBToolType::ELLIPSE); // 椭圆工具
// 使用图章工具前,请先 addStamp(添加图章)、setStamp(设置图章,切换不同图章时需重新设置图章)
whiteboard->setToolType(WBToolType::STAMP); // 图章工具
whiteboard->setToolType(WBToolType::SELECT); // 选择工具,可以触摸移动图形
// 从 1.6.6 版本开始,ERASER 工具更改为 DELETER 工具
whiteboard->setToolType(WBToolType::DELETER); // 删除工具,用于删除图形
// 刷子工具本质上是对图层区域做透明处理,所以开启刷子功能时,不要移动和缩放图形
// 刷子工具,可以结合 setLineWidth 方法设置其宽度
whiteboard->setToolType(WBToolType::BRUSH); // 刷子工具,用于擦除图形的局部
  • IMAGE 工具为保留类型,开发者请勿使用。
  • 请在加入白板频道成功后再进行白板操作。

撤销与重做

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

whiteboard->undo();
  • 只能对自己的操作记录进行撤销与重做。
  • 另请关注通知:onUndoStatusChanged, onRedoStatusChanged。

图片操作

设置背景图片缩放模式

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

/* WBImageScalingMode 可选值:
   FIT 长边充满,短边留空,左上角对齐
   AUTO_FILL 短边充满,长边裁剪,左上角对齐
   FILL_WIDTH 宽度充满,顶部对齐
   FILL_HEIGHT 高度充满,左侧对齐
   FIT_CENTER 适合视图,居中
   以上方式都会保持背景图片宽高比
*/
whiteboard->setBackgroundImageScalingMode(WBImageScalingMode::FIT);

设置背景图片

通过 RtcWhiteboard 实例的 setBackgroundImage(const char *imageUrl) 方法设置当前页的背景图片,setBackgroundImage(const char *imageUrl, WBPageNumber pageNo) 方法设置指定页的背景图片。

const char* imageUrl = "https://..."; // 图片 URL,本地或网络路径均可
whiteboard->setBackgroundImage(imageUrl);

导入背景图片列表

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

const char* url1 = "https://..."; // 仅支持网络路径
const char* url2 = "https://...";
const char* urls[] = { url1, url2 };
whiteboard->addBackgroundImages(urls, _countof(urls));

上传图片

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

const char* imageUrl = "https://..."; // 图片 URL,本地或网络路径均可
whiteboard->addImageFile(imageUrl);

多媒体操作

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

上传音频

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

const char* mediaUrl = "https://domain/path/filename.mp3"; // 媒体 URL,可为本地路径或远程 URL
whiteboard->addAudioFile(mediaUrl);

上传视频

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

const char* mediaUrl = "https://domain/path/filename.mp4"; // 媒体 URL,可为本地路径或远程 URL
whiteboard->addVideoFile(mediaUrl);

设置用户角色

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

定义类型权限备注
ADMIN管理员可以使用工具,可以操作所有用户的内容一个频道只能有一位管理员
ATTENDEE普通用户可以使用工具,只能操作自己的内容默认角色
VIEWER仅观看的用户不能使用工具,只能缩放和移动
wbEngine->setRoleType(WBRoleType::ADMIN); // 设置自己为管理员

画板操作

缩放和移动

缩放

通过 RtcWhiteboard 实例的:

  • getCurrentScaleFactor 方法获取当前白板视图的缩放比例
  • getCurrentMaxScaleFactor 方法获取当前白板视图的最大缩放比例
  • getCurrentMinScaleFactor 方法获取当前白板视图的最小缩放比例
  • setCurrentScaleFactor 方法设置缩放比例
float scale = whiteboard->getCurrentScaleFactor();
scale -= 0.1f;
whiteboard->setCurrentScaleFactor(scale); // 取值范围 [0.1, 5.0]

重置当前页视角

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

whiteboard->resetVision();

手势控制缩放和移动

通过 RtcWhiteboard 实例的 setOption 方法,option 参数设置为 ENABLE_SCALE_MOVE,param 参数设置为布尔值来设置是否允许手势控制白板缩放和移动(不影响通过 setCurrentScaleFactor 方法控制缩放)。

bool param = true; // true: 允许(默认值),false: 禁用
whiteboard->setOption(WBOption::ENABLE_UI_RESPONSE, &param, sizeof(param));

同步光标位置

通过 RtcWhiteboard 实例的 setOption 方法:

  • option 参数设置为 ENABLE_CURSORPOS_SYNC,param 参数设置为布尔值来设置是否同步光标位置给其他用户。
  • option 参数设置为 ENABLE_SHOW_REMOTE_CURSOR,param 参数设置为布尔值来设置是否显示其他用户的光标位置。
  • 这两个参数默认都是关闭的。
bool param1 = true;
whiteboard->setOption(WBOption::ENABLE_CURSORPOS_SYNC, &param1, sizeof(param1));
bool param2 = true;
whiteboard->setOption(WBOption::ENABLE_SHOW_REMOTE_CURSOR, &param2, sizeof(param2));

UI 交互

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

bool param = true; // true: 启用(默认值),false: 关闭白板 UI 交互
whiteboard->setOption(WBOption::ENABLE_UI_RESPONSE, &param, sizeof(param));

隐藏画板内容

通过 RtcWhiteboard 实例的 setOption 方法,option 参数设置为 ENABLE_SHOW_DRAWS,param 参数设置为布尔值来隐藏或显示白板图形(不影响背景图片和动态课件)。

bool param = true; // true: 显示(默认值),false: 隐藏
whiteboard->setOption(WBOption::ENABLE_SHOW_DRAWS, &param, sizeof(param));

清除画板内容

白板的层级结构为:白板 -> 文档 -> 页面。

通过 RtcWhiteboard 实例的 clearDocContents 清除指定文档的内容(此方法需要管理员权限)。

const char* fileId = "12345";
whiteboard->clearDocContents(fileId, WBClearType::ALL); // 管理员清除指定文档的所有内容

通过 RtcWhiteboard 实例的 clearContents 方法清除当前文档的画板内容(此方法需要管理员权限)。

whiteboard->clearContents(false, WBClearType::ALL); // 管理员清除当前文档所有页面的所有内容

通过 RtcWhiteboard 实例的 clearUserContents 方法清除当前文档中特定用户的画板内容。
所有用户都可以清除自己的内容,清除其他用户的内容需要管理员权限。

// 管理员清除当前文档中特定用户添加的图形
whiteboard->clearUserContents(10000, false, WBClearType::DRAWS);

关闭/离开白板

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

whiteboard->close();

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

whiteboard->leave();

高级功能

请 点此查看 Windows 白板的高级功能介绍。

SDK API 指南

更多白板 SDK 接口,请 点此查看 API 列表。

示例代码

为方便开发者了解丰富的接口使用方式,我们还提供示例代码,请体验参考:

  • GitHub
  • Gitee
Last updated on 4/8/2022
← UnityiOS (Objective-C) →
  • 导入SDK
    • 扩展插件
  • 获取白板
  • 注册通知
  • 加入频道
  • 打开白板
  • 工具条
  • 全局属性
    • 白板颜色
    • 适用于文字工具的全局属性
    • 适用于图形工具的全局属性
  • 常用工具
    • 设置工具类型
    • 撤销与重做
  • 图片操作
    • 设置背景图片缩放模式
    • 设置背景图片
    • 导入背景图片列表
    • 上传图片
  • 多媒体操作
    • 上传音频
    • 上传视频
  • 设置用户角色
  • 画板操作
    • 缩放和移动
    • 同步光标位置
    • UI 交互
    • 隐藏画板内容
    • 清除画板内容
  • 关闭/离开白板
  • 高级功能
  • SDK API 指南
  • 示例代码
浙ICP备20002645号 ©2019-2022 Pano拍乐云