Draw on a whiteboard

This document describes how to use tools provided by the Super Board SDK to draw on created whiteboards.

Prerequisites

A whiteboard is created by referring to Getting started.

Draw on a whiteboard

1. Enable the drawing feature of Super Board.

• Call setOperationMode method to set the operation mode to ZegoSuperBoardOperationMode.Draw to enable the drawing feature of ZEGO Super Board.

• The drawing feature is enabled by default.

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

2. Set the drawing tool type.

Call the setToolType method of the ZegoSuperBoardManager class to modify the tool type of ZEGO Super Board. Currently, 10 tools are supported.

None ,        // No tool selected
Pen           // Pen
Text ,        // Text
Line ,        // Straight line
Rect ,        // Rectangle
Ellipse ,     // Ellipse
Selector ,    // Selector
Eraser ,      // Eraser
Laser ,       // Laser pen
CustomImage , // Custom graphical tool

3. Set the tool to pen.

// 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 16 by default.
ZegoSuperBoardManager.getInstance().setBrushSize(10);

4. After the pen is set, use a mouse to slide down in the area defined by ZegoSuperBoardView to view the drawing effect.

// Disable the handwriting mode, which is disabled by default.
ZegoSuperBoardManager.getInstance().enableHandwriting(false);

// Enable the handwriting mode.
ZegoSuperBoardManager.getInstance().enableHandwriting(true);

5. 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 style.
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.