Draw
This document describes how to use tools provided by the Super Board SDK to draw on created whiteboards.
Prerequisites
Create a whiteboard by referring to Create a super board.
Related functions
Draw on a whiteboard
SuperBoard SDK enables the drawing function by default.
Call setOperationMode method to set the operation mode to ZegoSuperBoardOperationMode.Draw，to enable the drawing feature of ZegoSuperBoard.
By default, Draw is enabled.
await ZegoSuperBoardManager.instance
.setOperationMode(mode: ZegoSuperBoardOperationMode.draw.value); Set the drawing tool type.
Set the setToolType, setBrushColor and setBrushSize methods to modify the type, color and size of the drawing tool.
// 设置白板工具为画笔
await ZegoSuperBoardManager.instance.setToolType(toolType: ZegoSuperBoardTool.pen);
// 画笔颜色，默认为红色
await ZegoSuperBoardManager.instance.setBrushColor(rgbValue: '#000000');
// 画笔粗细，默认为6
await ZegoSuperBoardManager.instance.setBrushSize(brushSize: 10); Enable the handwriting mode.
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.getInstance().enableHandwriting(false);
// Enable the handwriting mode.
ZegoSuperBoardManager.getInstance().enableHandwriting(true);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.getInstance().enableCustomCursor(false);
// Enable the custom cursor feature.
ZegoSuperBoardManager.getInstance().enableCustomCursor(true);
// Disable remote custom cursor display, which is enabled by default.
ZegoSuperBoardManager.getInstance().enableRemoteCursorVisible(false);
// Enable remote custom cursor display.
ZegoSuperBoardManager.getInstance().enableRemoteCursorVisible(true);
// Customize the cursor.
ZegoSuperBoardManager.getInstance().setCustomCursorAttribute(1, {
iconPath: 'FILE', // Customize the cursor URL, which can be a local or remote URL.
offsetX: 0, // Customize the offset of the cursor along the X-axis.
offsetY: 0 // Customize the offset of the cursor along the Y-axis.
})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 ZegoSuperBoardOperationMode.Draw. 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 ZegoSuperBoardOperationMode.None.