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.
})