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';
}
  1. 创建批注及批注初始化
// 创建批注
board.createAnnotation().then(function(annotation) {
    // 批注初始化方法，参数1为容器元素，参数2为批注初始化类型，推荐proportional成比例模式，具体见AnnotationInitTypeEnum枚举的描述
    annotation.init(boardWrapDiv, AnnotationInitTypeEnum.proportional).then(function(){})
});
  1. 批注容器和初始化模式的对比
初始化容器元素类型 初始化模式 结果
div AnnotationInitTypeEnum.proportional（成比例） 推荐
SDK会根据外部容器元素宽高计算渲染的白板宽高，渲染的远端白板可以保持比例，不会造成画笔或者背景图的形变；
SDK会自动创建背景层，无需应用层自动创建
SDK会自动更新背景图和背景色及下载白板时可以带背景层下载
div AnnotationInitTypeEnum.full（平铺） 不推荐
白板会撑满容器宽高
背景层需要应用层自行创建
背景图或者背景色不会自动更新
白板不会保持比例，可能会产生形变
canvas AnnotationInitTypeEnum.full（平铺） 不推荐
白板会撑满容器宽高
背景层需要应用层自行创建
背景图或者背景色不会自动更新
白板不会保持比例，可能会产生形变
  1. 下图为创建好的白板示例，图中上方的工具条需要应用层自行实现，SDK提供相应接口，工具条涉及到的相关批注接口如下：