# Tutorial: 白板及批注

## 功能描述

本文主要介绍如何创建白板并简要示例白板功能

## 实现流程

1. 创建白板

    // createBoard参数示例具体见User类下的createBoard方法说明
    roomClient.selfUser.createBoard(boardWidth, boardHeight, backgroundColor, backgroundImage,'',boardWidth,boardHeight).then(function(board){
        //此时白板对象board已经产生，可以利用其宽高等属性在应用层创建相应元素
        createBoardHandle(board);
    }).otherwise(function(err){
        window.alert(JSON.stringify(err))
    });

    function createBoardHandle(board) {
        var boardWrapDiv = document.createElement('div');
        boardWrapDiv.style.width = '1300px';
        boardWrapDiv.style.height = '600px';
    }

2. 创建批注及批注初始化

    // 创建批注
    board.createAnnotation().then(function(annotation) {
        // 批注初始化方法，参数1为容器元素，参数2为批注初始化类型，推荐proportional成比例模式，具体见AnnotationInitTypeEnum枚举的描述
        annotation.init(boardWrapDiv, AnnotationInitTypeEnum.proportional).then(function(){})
    });

3. 批注容器和初始化模式的对比

初始化容器元素类型 | 初始化模式 | 结果
--- | --- | ---
div | AnnotationInitTypeEnum.proportional（成比例） | 推荐 SDK会根据外部容器元素宽高计算渲染的白板宽高，渲染的远端白板可以保持比例，不会造成画笔或者背景图的形变； SDK会自动创建背景层，无需应用层自动创建 SDK会自动更新背景图和背景色及下载白板时可以带背景层下载
div | AnnotationInitTypeEnum.full（平铺） | 不推荐 白板会撑满容器宽高 背景层需要应用层自行创建 背景图或者背景色不会自动更新 白板不会保持比例，可能会产生形变
canvas | AnnotationInitTypeEnum.full（平铺） | 不推荐 白板会撑满容器宽高 背景层需要应用层自行创建 背景图或者背景色不会自动更新 白板不会保持比例，可能会产生形变

4. 下图为创建好的白板示例，图中上方的工具条需要应用层自行实现，SDK提供相应接口，工具条涉及到的相关批注接口如下：

- 激光笔：annotation.hlightPointInit('./icon-laserPen-move.png', 20, 20)
- 笔：annotation.setShapeType(shapeTypeEnum.line)
- 颜色：annotation.setColor(‘'rgba(255,0,0,1'’)
- 橡皮擦：annotation.setShapeType(shapeTypeEnum.eraser)
- 撤销：annotation.undo()
- 重做：annotation.redo()
- 清除：annotation.clear()
- 文本：annotation.startTextInput(themeConfig)
- 保存：annotation.download()
- 上传图：annotation.uploadImg(token, fileTarget)
- 编辑图：annotation.setAllowEditImg(true)
- 旋转图：annotation.rotateImg()
- 放大：annotation.scaleImg(true, 0.1)
- 缩小：annotation.scaleImg(false, 0.1)
- 删除图：annotation.delImg()