实时音视频
实时音视频
文档指南
请输入
实时音视频
快速入门
场景方案
开发指南
Token 鉴权
音频管理
视频管理
屏幕共享
SDK 升级指南
客户端 API 参考
服务端 API 参考
房间管理
转推直播
输入在线媒体流
WTN 流（原公共流）
实时数据监控
历史数据查询
业务标识管理
实时消息通信
历史版本（文档停止维护）
2023-08-01
2023-06-01
转推直播
2022-06-01
2020-12-01
转推直播
输入在线媒体流
获取数据指标
常见问题
集成相关
质量相关
AI 音视频互动方案
开发指南
配置 ASR/LLM/TTS 服务
API 参考
硬件对话智能体
用户指南
服务端 API
智能体
实时信令
互动白板
客户端 API 参考
服务端 API 参考
- 文档首页
实时音视频互动白板高级功能自定义光标图标
复制全文
下载 pdf自定义光标图标
文档反馈
问问助手你可以调用 setCursorStyle 接口，自定义光标图标，自定义不同工具的光标图标。适用场景举例如下。
- 移动端 SDK 默认不显示光标图形，你希望当用户选择不同工具时，显示不同的图标。
- Web 端 SDK（1.3.0 及以后版本）集成了默认光标资源。你希望更换为符合业务 UI 规范要求的图标。
-
前提条件
- 已经集成了 1.3.0 及以上版本的白板 SDK，并完成了基础功能构建。
- 图标资源包，例如：Cursor_icons.zip。
- 移动端需要将图标资源打包到应用安装包中。
- Web 端需要将自定义图标资源上传到用户可以访问的 CDN 服务器上。
步骤和示例代码
支持自定义图标的工具如下：
Java
Objective-C
JavaScript
public interface CursorType {
int kArrow = 0; // 鼠标选择工具
int kPen = 2; // 画笔工具
int kShape = 3; // 图形绘制工具
int kText = 4; // 文本工具
int kErase = 5; // 橡皮工具
int kLaserPen = 6; // 激光笔工具
}
typedef NS_ENUM(NSInteger, ByteWhiteBoardCursorType) {
ByteWhiteBoardCursorTypeNormal = 0, //鼠标选择工具
ByteWhiteBoardCursorTypePen = 2, //画笔工具
ByteWhiteBoardCursorTypeShape = 3, //形状绘制工具
ByteWhiteBoardCursorTypeText = 4, //文本工具
ByteWhiteBoardCursorTypeErase = 5, //橡皮擦工具
ByteWhiteBoardCursorTypeLaser = 6 //激光笔工具
};
interface CursorType {
int kArrow = 0; // 鼠标选择工具
int kPen = 2; // 画笔工具
int kShape = 3; // 图形绘制工具
int kText = 4; // 文本工具
int kErase = 5; // 橡皮工具
int kLaserPen = 6; // 激光笔工具
int kMove = 7, //图形平移光标，光标不同步此类型，仅 Web 端可见
int kRotate = 8, //图形旋转光标，光标不同步此类型，仅 Web 端可见
}
获取到白板对象后，通过以下代码初始化光标资源。
Java
Objective-C
JavaScript
HashMap<Integer, CursorInfo> cursorStyles = new HashMap<>();
CursorInfo cursorInfoArrow = new CursorInfo(5, 5, R.drawable.cursor_normal);
CursorInfo cursorInfoPen = new CursorInfo(10, 35, R.drawable.cursor_pen);
CursorInfo cursorInfoShape = new CursorInfo(18, 18, R.drawable.cursor_arrow);
CursorInfo cursorInfoText = new CursorInfo(11, 23, R.drawable.cursor_text);
CursorInfo cursorInfoErase = new CursorInfo(18, 18, R.drawable.cursor_erase);
CursorInfo cursorInfoLaserPen = new CursorInfo(40, 40, R.drawable.cursor_laser);
cursorStyles.put(UserCursorInfo.CursorType.kArrow, cursorInfoArrow);
cursorStyles.put(UserCursorInfo.CursorType.kPen, cursorInfoPen);
cursorStyles.put(UserCursorInfo.CursorType.kShape, cursorInfoShape);
cursorStyles.put(UserCursorInfo.CursorType.kText, cursorInfoText);
cursorStyles.put(UserCursorInfo.CursorType.kErase, cursorInfoErase);
cursorStyles.put(UserCursorInfo.CursorType.kLaserPen, cursorInfoLaserPen);
whiteboard.setCursorStyle(cursorStyles);
//1. 将图片资源放置到本地工程目录下，确保在 [NSBundle mainBundle] 中能获取到路径
//本例将图片放置到工程Images目录下
//注意：图片不要放到 Assets中。
//2. 参考如下方法，将自定义光标图片传给 SDK
- (void)setCustomCursorStyle {
ByteWhiteBoardCursorInfo* laserCursorInfo = [[ByteWhiteBoardCursorInfo alloc] init];
NSString* laserImagePath = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"Images/cursor_laser.png"];
UIImage* image = [UIImage imageWithContentsOfFile:laserImagePath];
laserCursorInfo.width = image.size.width/2;
laserCursorInfo.height = image.size.height/2;
laserCursorInfo.centerX = laserCursorInfo.width/2;
laserCursorInfo.centerY = laserCursorInfo.height/2;
laserCursorInfo.iconPath = laserImagePath;
ByteWhiteBoardCursorInfo* penCursorInfo = [[ByteWhiteBoardCursorInfo alloc] init];
NSString* penImagePath = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"Images/cursor_pen.png"];
image = [UIImage imageWithContentsOfFile:penImagePath];
penCursorInfo.width = image.size.width/2;
penCursorInfo.height = image.size.height/2;
penCursorInfo.centerX = 0;
penCursorInfo.centerY = penCursorInfo.height;
penCursorInfo.iconPath = penImagePath;
ByteWhiteBoardCursorInfo* normalCursorInfo = [[ByteWhiteBoardCursorInfo alloc] init];
NSString* normalImagePath = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"Images/cursor_normal.png"];
image = [UIImage imageWithContentsOfFile:normalImagePath];
normalCursorInfo.width = image.size.width/2;
normalCursorInfo.height = image.size.height/2;
normalCursorInfo.centerX = 0;
normalCursorInfo.centerY = 0;
normalCursorInfo.iconPath = normalImagePath;
ByteWhiteBoardCursorInfo* eraserCursorInfo = [[ByteWhiteBoardCursorInfo alloc] init];
NSString* eraserImagePath = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"Images/cursor_eraser.png"];
image = [UIImage imageWithContentsOfFile:eraserImagePath];
eraserCursorInfo.width = image.size.width/2;
eraserCursorInfo.height = image.size.height/2;
eraserCursorInfo.centerX = eraserCursorInfo.width/2;
eraserCursorInfo.centerY = eraserCursorInfo.height/2;
eraserCursorInfo.iconPath = eraserImagePath;
ByteWhiteBoardCursorInfo* shapeCursorInfo = [[ByteWhiteBoardCursorInfo alloc] init];
NSString* shapeImagePath = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"Images/cursor_shape.png"];
image = [UIImage imageWithContentsOfFile:shapeImagePath];
shapeCursorInfo.width = image.size.width/2;
shapeCursorInfo.height = image.size.height/2;
shapeCursorInfo.centerX = shapeCursorInfo.width/2;
shapeCursorInfo.centerY = shapeCursorInfo.height/2;
shapeCursorInfo.iconPath = shapeImagePath;
ByteWhiteBoardCursorInfo* textCursorInfo = [[ByteWhiteBoardCursorInfo alloc] init];
NSString* textImagePath = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"Images/cursor_text.png"];
image = [UIImage imageWithContentsOfFile:textImagePath];
textCursorInfo.width = image.size.width/2;
textCursorInfo.height = image.size.height/2;
textCursorInfo.centerX = textCursorInfo.width/2;
textCursorInfo.centerY = textCursorInfo.height/2;
textCursorInfo.iconPath = textImagePath;
NSDictionary* styleConfig = @{[NSString stringWithFormat:@"%ld", ByteWhiteBoardCursorTypeNormal] : normalCursorInfo,
[NSString stringWithFormat:@"%ld", ByteWhiteBoardCursorTypePen] : penCursorInfo,
[NSString stringWithFormat:@"%ld", ByteWhiteBoardCursorTypeShape] : shapeCursorInfo,
[NSString stringWithFormat:@"%ld", ByteWhiteBoardCursorTypeText] : textCursorInfo,
[NSString stringWithFormat:@"%ld", ByteWhiteBoardCursorTypeErase] : earserCursorInfo,
[NSString stringWithFormat:@"%ld", ByteWhiteBoardCursorTypeLaser] : laserCursorInfo};
[self.board setCursorStyle:styleConfig];
}
WhiteBoard?.setCursorStyle({
[CursorType.kErase]: { // 以橡皮擦工具为例
useSystemCursor: false, // 不使用浏览器自带光标
offsetX: 16, //距左上角偏移量
offsetY: 16, //距左上角偏移量
width: 32,
height: 32,
filePath: 'http://xxx.png', //图标地址
},
})
使用自定义光标功能时，你通常还需要开启光标同步功能，把光标的轨迹同步给其他端。调用 WhiteBoard 中的 enableCursorSync，并传入 True。
API 参考
| Android | iOS | Web |
| Android | iOS | Web |
设置光标图标 | |||
开启光标同步 |
最近更新时间：2026.08.06 10:46:54
这个页面对您有帮助吗？
有用
有用
无用
无用