你可以调用 setCursorStyle 接口,自定义光标图标,自定义不同工具的光标图标。适用场景举例如下。


支持自定义图标的工具如下:
public interface CursorType {
int kArrow = 0; // 鼠标选择工具
int kPen = 2; // 画笔工具
int kShape = 3; // 图形绘制工具
int kText = 4; // 文本工具
int kErase = 5; // 橡皮工具
int kLaserPen = 6; // 激光笔工具
}java
typedef NS_ENUM(NSInteger, ByteWhiteBoardCursorType) {
ByteWhiteBoardCursorTypeNormal = 0, //鼠标选择工具
ByteWhiteBoardCursorTypePen = 2, //画笔工具
ByteWhiteBoardCursorTypeShape = 3, //形状绘制工具
ByteWhiteBoardCursorTypeText = 4, //文本工具
ByteWhiteBoardCursorTypeErase = 5, //橡皮擦工具
ByteWhiteBoardCursorTypeLaser = 6 //激光笔工具
};objectivec
interface CursorType {
int kArrow = 0; // 鼠标选择工具
int kPen = 2; // 画笔工具
int kShape = 3; // 图形绘制工具
int kText = 4; // 文本工具
int kErase = 5; // 橡皮工具
int kLaserPen = 6; // 激光笔工具
}js获取到白板对象后,通过以下代码初始化光标资源。
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);java
//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* earserCursorInfo = [[ByteWhiteBoardCursorInfo alloc] init];
NSString* earserImagePath = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"Images/cursor_earser.png"];
image = [UIImage imageWithContentsOfFile:earserImagePath];
earserCursorInfo.width = image.size.width/2;
earserCursorInfo.height = image.size.height/2;
earserCursorInfo.centerX = earserCursorInfo.width/2;
earserCursorInfo.centerY = earserCursorInfo.height/2;
earserCursorInfo.iconPath = earserImagePath;
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];
}objectivec
WhiteBoard?.setCursorStyle({
[CursorType.kErase]: { // 以橡皮擦工具为例
useSystemCursor: false, // 不使用浏览器自带光标
offsetX: 16, //距左上角偏移量
offsetY: 16, //距左上角偏移量
width: 32,
height: 32,
filePath: 'http://xxx.png', //图标地址
},
});
js使用自定义光标功能时,你通常还需要开启光标同步功能,把光标的轨迹同步给其他端。调用 WhiteBoard 中的 enableCursorSync,并传入 True。
| Android | iOS | Web | |
|---|---|---|---|
| 设置光标图标 | setCursorStyle | setCursorStyle: | setCursorStyle |
| 开启光标同步 | enableCursorSync | enableCursorSync: | enableCursorSync |