Draw on a whiteboard
This document describes how to use tools provided by the Super Board SDK to draw on created whiteboards.
Prerequisites
Creat a whiteboard by referring to Create a super board.
Draw on a whiteboard
- Enable the drawing feature of Super Board.
- Call setOperationMode method to set the operation mode to
ZegoSuperBoardOperationModeDrawto enable the drawing feature and disable the scrolling feature of Super Board. - Call setOperationMode to set the operation mode to
ZegoSuperBoardOperationModeScrollto disable the drawing feature and enable the scrolling feature of Super Board.
// Obtain the view that is being displayed.
ZegoSuperBoardSubView *superBoardSubView = [ZegoSuperBoardManager sharedInstance].superBoardView.currentSuperBoardSubView;
// Set the operation mode of the view that is being displayed to drawing.
[superBoardSubView setOperationMode:ZegoSuperBoardOperationModeDraw];- Set the drawing tool type.
Set the toolType property of the ZegoSuperBoardManager class to modify the tool type of ZEGO Super Board. Currently, 10 tools are supported.
ZegoSuperBoardToolNone, // No tool selected
ZegoSuperBoardToolPen // Pen
ZegoSuperBoardToolText , // Text
ZegoSuperBoardToolLine , // Straight line
ZegoSuperBoardToolRect , // Rectangle
ZegoSuperBoardToolEllipse , // Ellipse
ZegoSuperBoardToolSelector ,// Selector
ZegoSuperBoardToolEraser , // Eraser
ZegoSuperBoardToolLaser , // Laser pen
ZegoSuperBoardToolCustomImage , // Custom graphical tool- Set the tool to pen.
// Set the whiteboard tool to pen.
[ZegoSuperBoardManager sharedInstance].toolType = ZegoSuperBoardToolPen;
// Pen color, which is red by default.
[ZegoSuperBoardManager sharedInstance].brushColor = UIColor.redColor;
// Pen size, which is 16 by default.
[ZegoSuperBoardManager sharedInstance].brushSize = 16;After the pen is set, use your finger to slide down in the area defined by ZegoSuperBoardView to view the drawing effect.
You can call the enableHandwriting method to enable the handwriting mode. The figures at the beginning of this document show the drawing effects when the handwriting mode is enabled and disabled.
// Disable the handwriting mode, which is disabled by default.
[ZegoSuperBoardManager sharedInstance].enableHandwriting = NO;
// Enable the handwriting mode.
[ZegoSuperBoardManager sharedInstance].enableHandwriting = YES;- Customize the cursor for the pen.
A default pen icon is embedded in the ZEGO SDK. You can call the setCustomCursorAttribute method to set the cursor style for the pen.
// Disable the custom cursor feature, which is enabled by default.
[ZegoSuperBoardManager sharedInstance].enableCustomCursor = NO;
// Enable the custom cursor feature.
[ZegoSuperBoardManager sharedInstance].enableCustomCursor = YES;
// Disable remote custom cursor display, which is enabled by default.
[ZegoSuperBoardManager sharedInstance].enableRemoteCursorVisible = NO;
// Enable remote custom cursor display.
[ZegoSuperBoardManager sharedInstance].enableRemoteCursorVisible = YES;
// Customize the cursor.
ZegoSuperBoardCursorAttribute * attribute = [ZegoSuperBoardCursorAttribute new];
attribute.iconPath = @"https://xxxxxxxx.com/xxx.png"; // Specify a correct image URL.
attribute.offsetX = 0; // Customize the offset of the cursor along the X-axis, which is 0 by default and cannot exceed the image width.
attribute.offsetY = 0; // Customize the offset of the cursor along the Y-axis, which is 0 by default and cannot exceed the image height.
[[ZegoSuperBoardManager sharedInstance].superBoardView.currentSuperBoardSubView setCustomCursorAttribute:ZegoSuperBoardViewCursorTypePen cursorAttribute:attribute complete:nil];FAQ
1. How to dynamically control user operation permissions?
The ZEGO Super Board SDK does not include business operation logic. You need to convey operation permission data through signaling on the business side and combine it with the setOperationMode function.
For example, when a teacher wants to allow a student to draw on the whiteboard, the teacher's app needs to send a signal to the student's app. The student's app calls the setOperationMode function and sets the mode to ZegoSuperBoardOperationModeDraw. When the teacher no longer allows the student to draw on the whiteboard, the teacher's app sends a signal to the student's app again, and the student's app calls the setOperationMode function again, setting the mode to ZegoSuperBoardOperationModeNone.