你可以调用 setCursorStyle
接口,自定义光标图标,自定义不同工具的光标图标。适用场景举例如下。
支持自定义图标的工具如下:
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 端可见 }
获取到白板对象后,通过以下代码初始化光标资源。
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* 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]; }
WhiteBoard?.setCursorStyle({ [CursorType.kErase]: { // 以橡皮擦工具为例 useSystemCursor: false, // 不使用浏览器自带光标 offsetX: 16, //距左上角偏移量 offsetY: 16, //距左上角偏移量 width: 32, height: 32, filePath: 'http://xxx.png', //图标地址 }, });
使用自定义光标功能时,你通常还需要开启光标同步功能,把光标的轨迹同步给其他端。调用 WhiteBoard
中的 enableCursorSync
,并传入 True
。
Android | iOS | Web | |
---|---|---|---|
设置光标图标 | setCursorStyle | setCursorStyle: | setCursorStyle |
开启光标同步 | enableCursorSync | enableCursorSync: | enableCursorSync |