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.

Draw on a whiteboard

Note

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.

var currentSubView = await ZegoSuperBoardManager.getInstance().getSuperBoardView().getCurrentSuperBoardSubView();
if (currentSubView) {
    // ZegoSuperBoardOperationMode.Draw = 4
    currentSubView.setOperationMode(4);
}

var currentSubView = await ZegoSuperBoardManager.getInstance().getSuperBoardView().getCurrentSuperBoardSubView();
if (currentSubView) {
    // ZegoSuperBoardOperationMode.Draw = 4
    currentSubView.setOperationMode(4);
}

Set the drawing tool type.

Set the setToolType property of the ZegoSuperBoardManager class to modify the tool type of ZEGOCLOUD Super Board. Currently, 10 tools are supported.

None,         // No tool selected: 0
Pen ,         // Pen: 1
Text ,        // Text: 2
Line ,        // Straight line: 4
Rect ,        // Rectangle: 8
Ellipse ,     // Ellipse: 16
Selector ,    // Selector: 32
Eraser ,      // Eraser: 64
Laser ,       // Laser pen: 128
CustomImage , // Custom graphical tool: 256

None,         // No tool selected: 0
Pen ,         // Pen: 1
Text ,        // Text: 2
Line ,        // Straight line: 4
Rect ,        // Rectangle: 8
Ellipse ,     // Ellipse: 16
Selector ,    // Selector: 32
Eraser ,      // Eraser: 64
Laser ,       // Laser pen: 128
CustomImage , // Custom graphical tool: 256

Set the tool to Pen（graffiti brush）.

//  Set the whiteboard tool to pen.
// ZegoSuperBoardTool.Pen = 1
ZegoSuperBoardManager.getInstance().setToolType(1);
// Pen color, which is red by default.
ZegoSuperBoardManager.getInstance().setBrushColor('#FF0000');
// Pen size, which is 6 by default.
ZegoSuperBoardManager.getInstance().setBrushSize(10);

//  Set the whiteboard tool to pen.
// ZegoSuperBoardTool.Pen = 1
ZegoSuperBoardManager.getInstance().setToolType(1);
// Pen color, which is red by default.
ZegoSuperBoardManager.getInstance().setBrushColor('#FF0000');
// Pen size, which is 6 by default.
ZegoSuperBoardManager.getInstance().setBrushSize(10);

After the pen is set, use your finger to slide down in the area defined by ZegoSuperBoardView to view the drawing effect displayed on ZegoSuperBoardView.

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

// 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.

})

// 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.