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 to set the operation mode to ZegoSuperBoardOperationMode.Draw to enable the drawing feature and disable the scrolling feature of ZEGO Super Board.
• Call setOperationMode to set the operation mode to ZegoSuperBoardOperationMode.Scroll to disable the drawing feature and enable the scrolling feature of ZEGO Super Board.

ZegoSuperBoardView superBoardView = ZegoSuperBoardManager.getInstance().getSuperBoardView();
if (superBoardView != null) {
    ZegoSuperBoardSubView currentSubView =  superBoardView.getCurrentSuperBoardSubView();
    // Obtain the view that is being displayed.
    if (currentSubView != null) {
        // Set the operation mode of the view that is being displayed to drawing.
        currentSubView.setOperationMode(ZegoSuperBoardOperationMode.Draw.getMode());
    }
}

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.

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

3. Set the tool to pen.

// Set the whiteboard tool to pen.
ZegoSuperBoardManager.getInstance().setToolType(ZegoSuperBoardTool.Pen);

// Pen color, which is red by default.
ZegoSuperBoardManager.getInstance().setBrushColor(Color.RED);

// Pen size, which is 16 by default.
ZegoSuperBoardManager.getInstance().setBrushSize(10);

4. After the pen is set, use your finger 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.
ZegoSuperBoardCursorAttribute attribute = new ZegoSuperBoardCursorAttribute();
attribute.url = url;    // Customize the cursor URL, which can be a local or remote URL.
attribute.pox_x = 10;   // Customize the offset of the cursor along the X-axis.
attribute.pox_y = 10;   // Customize the offset of the cursor along the Y-axis.
currentSubView.setCustomCursorAttribute(ZegoSuperBoardViewCursorType.Pen, attribute, new IZegoSuperBoardApiCalledCallback() {
    @Override
    public void onApiCalledResult(int errorCode) {
        // TODO: 2024/10/22  
    }
});

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.