你可以调用 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。

API 参考
AndroidiOSWeb
设置光标图标setCursorStylesetCursorStyle:setCursorStyle
开启光标同步enableCursorSyncenableCursorSync:enableCursorSync