如何实现白板绘制功能 | 即构白板sdk系列功能2

本文主要介绍如何在已创建的白板上使用超级白板 SDK 提供的工具进行绘制。

/Pics/WhiteboardView/postman/superboard_scatch.gif

前提条件

参考文章《如何创建可多人协作的互动白板》创建了一个白板。

白板绘制实现流程

在白板上涂鸦

  1. 开启 ZegoSuperBoard 的绘制功能。
  • 将 setOperationMode 设置为 ZegoSuperBoardOperationModeDraw,即可开启 ZegoSuperBoard 的绘制功能并同时关闭滚动功能。
  • 将 setOperationMode 设置为 ZegoSuperBoardOperationModeScroll,会关闭绘制功能并同时打开滚动功能。
//获取当前正在展示的视图
ZegoSuperBoardSubView *superBoardSubView = [ZegoSuperBoardManager sharedInstance].superBoardView.currentSuperBoardSubView;
//设置当前展示的视图的操作模式为绘制
[superBoardSubView setOperationMode:ZegoSuperBoardOperationModeDraw];
  1. 设置绘制工具类型。

设置 ZegoSuperBoardManager 类的 toolType 属性可修改 ZegoSuperBoard 的工具类型,目前支持 10 种工具。

ZegoSuperBoardToolNone ,     //未选择
ZegoSuperBoardToolPen     // 涂鸦画笔
ZegoSuperBoardToolText ,    // 文本
ZegoSuperBoardToolLine ,    // 直线
ZegoSuperBoardToolRect ,    // 矩形
ZegoSuperBoardToolEllipse , // 圆
ZegoSuperBoardToolSelector ,// 选取图元
ZegoSuperBoardToolEraser ,  // 橡皮擦
ZegoSuperBoardToolLaser ,   // 激光笔
ZegoSuperBoardToolCustomImage ,   // 自定义图形工具
  1. 将工具设置为 ZegoSuperBoardToolPen 涂鸦画笔。
// 设置白板工具为画笔
[ZegoSuperBoardManager sharedInstance].toolType = ZegoSuperBoardToolPen;

// 画笔颜色,默认为红色
[ZegoSuperBoardManager sharedInstance].brushColor = UIColor.redColor;

// 画笔粗细,默认为16
[ZegoSuperBoardManager sharedInstance].brushSize = 16;

设置涂鸦画笔成功后,用手指在 ZegoSuperBoardView 的范围内按下移动,即可看到涂鸦效果展示在 ZegoSuperBoardView 上。

开发者可通过 enableHandwriting 开启笔锋模式,文首的图先后演示了无笔锋时的绘制效果和有笔锋时的绘制效果。

// 关闭笔锋(默认笔锋是关闭状态)
[ZegoSuperBoardManager sharedInstance].enableHandwriting = NO;

// 开启笔锋
[ZegoSuperBoardManager sharedInstance].enableHandwriting = YES;
  1. 可针对画笔设置自定义光标。

ZEGO SDK 已内置默认画笔图标,开发者可通过 setCustomCursorAttribute 设置画笔的光标样式。

// 关闭自定义光标(默认为开启状态)
[ZegoSuperBoardManager sharedInstance].enableCustomCursor = NO;

// 开启自定义光标
[ZegoSuperBoardManager sharedInstance].enableCustomCursor = YES;

// 关闭显示远程自定义光标(默认为开启状态)
[ZegoSuperBoardManager sharedInstance].enableRemoteCursorVisible = NO;

// 开启显示远程自定义光标 
[ZegoSuperBoardManager sharedInstance].enableRemoteCursorVisible = YES;

// 设置自定义光标
ZegoSuperBoardCursorAttribute * attribute = [ZegoSuperBoardCursorAttribute new];
attribute.iconPath = @"https://xxxxxxxx.com/xxx.png";  // 请使用正确的图片地址
attribute.offsetX = 0;  // 自定义光标作用点,绘制点作用在图片指定 x 偏移方向,默认为 0,不可超出图片宽度
attribute.offsetY = 0;  // 自定义光标作用点,绘制点作用在图片指定 y 偏移方向,默认为 0,不可超出图片高度
[[ZegoSuperBoardManager sharedInstance].superBoardView.currentSuperBoardSubView setCustomCursorAttrib

通过以上简单的 4 个步骤我们就可以实现白板绘制功能了,详细文档可访问:https://doc-zh.zego.im/article/11328

本文为原创稿件,版权归作者所有,如需转载,请注明出处:https://www.nxrte.com/jishu/5321.html

(0)

相关推荐

发表回复

登录后才能评论