You need to enable JavaScript to run this app.
导航

自定义光标图标

最近更新时间2023.06.12 20:23:40

首次发布时间2022.12.21 20:42:16

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

  • 移动端 SDK 默认不显示光标图形,你希望当用户选择不同工具时,显示不同的图标。
  • Web 端 SDK(1.3.0 及以后版本)集成了默认光标资源。你希望更换为符合业务 UI 规范要求的图标。

前提条件

  • 已经集成了 1.3.0 及以上版本的白板 SDK,并完成了基础功能构建
  • 图标资源包,例如:
    Cursor_icons.zip
    9.86KB
    • 移动端需要将图标资源打包到应用安装包中
    • Web 端需要将自定义图标资源上传到用户可以访问的 CDN 服务器上。

步骤和示例代码

支持自定义图标的工具如下:

public interface CursorType {
    int kArrow = 0;      // 鼠标选择工具
    int kPen = 2;        // 画笔工具
    int kShape = 3;      // 图形绘制工具
    int kText = 4;       // 文本工具
    int kErase = 5;      // 橡皮工具
    int kLaserPen = 6;   // 激光笔工具
}

获取到白板对象后,通过以下代码初始化光标资源。

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);

使用自定义光标功能时,你通常还需要开启光标同步功能,把光标的轨迹同步给其他端。调用 WhiteBoard 中的 enableCursorSync,并传入 True

API 参考

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