web技术分享| web的白板工具栏封装

Posted 2022-02-01 anyRTC

最近做白板项目，最重要的工具栏模块在网上搜了搜都没找到想要的，狠下心自己原生封装一个。

最终效果展示：

使用白板 SDK

使用 anyRTC 的白板SDK
项目地址：https://demos.anyrtc.io/whiteboard-next-demo/
如有需要，可前往 anyRTC 官网咨询客服下载源码

原理

封装一个白板工具栏，通过传入容器id，工具相关配置，白板实例，自动生成对应的左侧白板工具栏

容器创建

<div id="ToolBarWhiteBoard"></div>

工具相关配置

• 侧边栏配置
• icon: 工具栏图标
• brushtooltype: 白板对应的工具类型
• brushFn: 白板设置工具类型的方法
• 侧边栏提示配置
  • tip: 提示
• 侧边栏内容配置
  • type: 类型
    • “progress” 进度条
    • “color” 颜色
    • “form” 形状
    • “text" 文字
      

具体相关配置展示如下：

// 白板颜色设置
var brushColor = [
  "#1A1A1E",
  "#0089FF",
  "#00E3FF",
  "#31FF88",
  "#FFEA00",
  "#FF6800",
  "#FF001C",
  "#ffffff",
];

/**
 * 白板工具栏设置
 * icon: 工具栏图标
 * tip: 提示
 * brushtooltype: 白板对应的工具类型
 * brushFn: 白板设置工具类型的方法
 * defaultcolor: 默认颜色
 * detail: 内容模块分类
 *
 * type: toolbar封装组件内部所用类型
 * contenttext: 内容模块名称
 *
 * *** progress 类型（进度条）
 * * min: 最小值
 * * max: 最大值
 * * defaultsize: 默认大小
 *
 * *** color 类型（颜色）
 * * detailcolor: 颜色数组
 * * defaultcolor: 默认颜色
 *
 * *** text 类型（文字）
 * * brushtooltype: 白板类型，内部仅封装“清除涂鸦/白板”
 *
 * *** form 类型（形状列表）
 * * detail: 形状列表
 *
 * */
var config_toolbar = [
  
    icon: "icon-default",
    tip: "鼠标",
    brushtooltype: 0, // 画笔工具类型 NONE
    brushFn: "setBrushType", // 白板对应方法
  ,
  
    icon: "icon-select",
    tip: "图选",
    brushtooltype: 1, // 画笔工具类型 SELECT
    brushFn: "setBrushType", // 白板对应方法
  ,
  
    icon: "icon-pen",
    tip: "涂鸦",
    brushtooltype: 2, // 画笔工具类型 FREE_DRAW
    brushFn: "setBrushType", // 白板对应方法
    detail: [
      
        type: "progress", // 进度条
        contenttext: "线宽",
        brushFn: "setBrushThin", // 白板对应方法
        defaultsize: 3,
        min: 1,
        max: 10,
      ,
      
        type: "color", // 颜色
        contenttext: "颜色",
        detailcolor: brushColor,
        defaultcolor: brushColor[0], // 画笔默认颜色
        brushFn: "setBrushColor", // 白板对应方法
      ,
    ],
  ,
  
    icon: "icon-laser",
    tip: "激光笔",
    brushtooltype: 4, // 画笔工具类型 LASER_POINTER
    brushFn: "setBrushType", // 白板对应方法
  ,
  
    icon: "icon-eraser",
    tip: "橡皮擦",
    brushtooltype: 3, // 画笔工具类型 ERASER
    brushFn: "setBrushType", // 白板对应方法
  ,
  
    icon: "icon-text",
    tip: "文本",
    brushtooltype: 9, // 画笔工具类型 TEXT
    brushFn: "setBrushType", // 白板对应方法
    detail: [
      
        type: "progress", // 进度条
        contenttext: "字号",
        brushFn: "setTextSize",
        defaultsize: 14,
        min: 10,
        max: 50,
      ,
      
        type: "color", // 颜色
        contenttext: "颜色",
        detailcolor: brushColor,
        defaultcolor: brushColor[0], // 文本默认颜色
        brushFn: "setTextColor", // 白板对应方法
      ,
    ],
  ,
  
    icon: "icon-setting",
    tip: "形状",
    brushtooltype: 7, // 画笔工具类型 RECT
    brushFn: "setBrushType", // 白板对应方法
    detail: [
      
        type: "form", // 形状
        detail: [
          
            icon: "icon-rect",
            tip: "矩形",
            brushtooltype: 7, // 画笔工具类型 RECT
            brushFn: "setBrushType", // 白板对应方法
          ,
          
            icon: "icon-elipse",
            tip: "椭圆",
            brushtooltype: 8, // 画笔工具类型 ELLIPSE
            brushFn: "setBrushType", // 白板对应方法
          ,
          
            icon: "icon-arrow",
            tip: "箭头",
            brushtooltype: 6, // 画笔工具类型 ARROW
            brushFn: "setBrushType", // 白板对应方法
          ,
          
            icon: "icon-line",
            tip: "直线",
            brushtooltype: 5, // 画笔工具类型 LINE
            brushFn: "setBrushType", // 白板对应方法
          ,
        ],
      ,
      
        type: "progress", // 进度条
        contenttext: "线宽",
        brushFn: "setBrushThin", // 白板对应方法
        defaultsize: 3,
        min: 1,
        max: 10,
      ,
      
        type: "color", // 颜色
        contenttext: "颜色",
        detailcolor: brushColor,
        defaultcolor: brushColor[0], // 画笔颜色
        brushFn: "setBrushColor", // 白板对应方法
      ,
    ],
  ,
  
    icon: "icon-clear",
    tip: "清除",
    detail: [
      
        contenttext: "清空涂鸦",
        type: "text",
        brushtooltype: "涂鸦", //
        brushFn: "clear", // 白板对应方法
      ,
      
        contenttext: "清空白板",
        type: "text",
        brushtooltype: "白板", //
        brushFn: "clear", // 白板对应方法
      ,
    ],
  ,
  
    icon: "icon-copy",
    tip: "背景",
    detail: [
      
        type: "color", // 背景颜色
        contenttext: "颜色",
        detailcolor: brushColor,
        // defaultcolor: brushColor[0], // 背景默认颜色
        brushFn: "setBackgroundColor", // 白板对应方法
      ,
    ],
  ,
];

工具栏样式

如需更改，请自行修改

.tip 
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s;
  position: absolute;
  padding: 6px 12px;
  background-color: #5a5a66;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-size: 12px;
  user-select: none;
  z-index: 20;

.tip::before 
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #5a5a66;
  transform: rotate(45deg);
  z-index: 10;


.tip_left 
  left: 60px;
  width: 100%;

.tip_left::before 
  left: -4px;


.tip_top 
  top: -36px;

.tip_top::before 
  bottom: -4px;


.tip_bottom 
  bottom: -36px;
  width: 100%;

.tip_bottom::before 
  top: -4px;


.toolbar 
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 2px 20px 0px rgba(192, 192, 205, 0.2);
  padding: 8px 2px;

.toolbar .toolbar_tool 
  position: relative;
  padding: 2px 6px;

.toolbar .toolbar_tool .toolbar_tool_buton 
  z-index: 40;
  border-radius: 4px;
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;

.toolbar .toolbar_tool .toolbar_tool_buton .toolbar_tool_icon 
  font-size: 20px;
  opacity: 1;
  color: #5a5a67;

.toolbar .toolbar_tool .toolbar_tool_buton .toolbar_tool_icon_activate 
  color: #294bff;

.toolbar .toolbar_tool .toolbar_tool_buton:hover 
  z-index: 40;
  cursor: pointer;
  background: #f5f6fa;

.toolbar .toolbar_tool .toolbar_tool_buton:hover .tip 
  z-index: 40;
  transition: opacity 1s;
  opacity: 1;
  visibility: visible;

.toolbar .toolbar_tool .toolbar_tool_detail 
  z-index: 50;
  transition: opacity 1s;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0px;
  left: 60px;
  background: #fff;
  box-shadow: 0px 2px 20px 0px rgba(192, 192, 205, 0.2);
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  padding: 20px;
  font-size: 12px;
  color: #5a5a67;
  user-select: none;

.toolbar .toolbar_tool .toolbar_tool_detail_visibility 
  transition: opacity 1s;
  opacity: 1;
  visibility: visible;

.toolbar .toolbar_tool .toolbar_tool_color 
  width: 100%;
  height: 40px;


/* color */
.colorinfo 
  display: flex;
  margin: 10px 0 0;
  white-space: nowrap;

.colorinfo .colorlist 
  display: grid;
  grid-template-columns: repeat(4, 25%);
  align-items: center;

.colorinfo .colorlist .color 
  margin: 12px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: 1px solid #efefef;

.colorinfo .colorlist .color_active 
  margin: 10px;
  border: 2px solid #fff;
  box-shadow: 0px 0px 2px 1px #294bff;


/* text */
.detail_text 
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
  padding: 6px 4px;
  text-align: center;

.detail_text:hover 
  background: #f5f6fa;


/* from */
.form 
  display: flex;

.form .form_button 
  z-index: 50;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  padding: 4px;

.form .form_button:hover 
  cursor: pointer;
  background: #f5f6fa;
  border-radius: 4px;

.form .form_button:hover .tip 
  transition: opacity 1s;
  opacity: 1;
  visibility: visible;

.form .form_button:hover .tip_top 
  top: -40px;
  width: 100%;

.form .form_button .form_button_icon 
  font-size: 20px;

.form .form_button .form_button_icon_active 
  color: #294bff;


/* progress */
.progressinfo 
  display: flex;
  align-items: center;
  white-space: nowrap;

.progressinfo .progressinfo_text 
  margin-right: 12px;

原生封装-工具类

进度条封装

/**
 * 进度条
 */
class progress 
  constructor(options, callback) 
    if (options) 
      this.initprogress(options, callback);
    
  
  //
  initprogress(options, callback) 
    options.max = Number(options.max);
    options.min = Number(options.min);
    // 创建最外围
    const oProgress = document.createElement("div");
    oProgress.className = "progress";
    const oProgressWidth = oProgress.offsetWidth;
    // 创建进度条拖拽点
    const oProgressDot = document.createElement("div");
    oProgressDot.className = "progress_dot";
    oProgressDot.style.marginLeft =
      (options.defaultwidth / (options.max - options.min)) * oProgressWidth +
      "px";

    // 创建提示
    const oCreateToolDetailTip = document.createElement("div");
    oCreateToolDetailTip.className = "tip tip_top";
    oCreateToolDetailTip.textContent = options.defaultwidth;
    oProgressDot.appendChild(oCreateToolDetailTip);

    // 创建进度条bg
    const oProgressBg = document.createElement("div");
    oProgressBg.className = "progress_bg";
    oProgressBg.style.width =
      (options.defaultwidth / (options.max - options.min)) * oProgressWidth +
      "px";

    //
    const oProgressBgPro = document.createElement("div");
    oProgressBgPro.className = "progress_bgpro";

    oProgress.appendChild(oProgressBgPro);
    oProgress.appendChild(oProgressDot);
    oProgress.appendChild(oProgressBg);

    options.document.appendChild(oProgress);

    var isfalse = false,
      m = Math,
      b = document.body,
      value = 0,
      ratio = options.max - options.min;

    oProgressDot.onmousedown = function (e) 
      // 停止冒泡行为
      stopBubble(e);
      isfalse = true;
      var X = e.clientX;
      var offleft = this.offsetLeft;
      var max = oProgress.offsetWidth - this.offsetWidth;
      oProgress.onmousemove = function (e) 
        if (isfalse == false) 
          return;
        
        var changeX = e.clientX;

        var moveX = m.min(max, m.max(-2, offleft + (changeX - X)));

        value = m.round(m.max(0, moveX / max) * ratio) + options.min;
        oCreateToolDetailTip.textContent = value;
        oProgressDot.style.marginLeft = m.max(0, moveX) + "px";
        oProgressBg.style.width = moveX + 6 + "px";
      ;
    ;
    oProgress.onmouseup = function () 
      if (isfalse) 
        callback(Number(value));
      
      isfalse = false;
    ;
    oProgress.onmouseleave = function () 
      if (isfalse) 
        callback(Number(value));
      
      isfalse = false;
    ;
  

进度条样式

.progress 
  width: 100%;
  height: 4px;
  padding: 20px 0;
  background: #fff;
  border-radius: 3px;
  position: relative;

.progress .progress_dot 
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #294bff;
  position: absolute;
  margin-top: -4px;
  cursor: pointer;
  border: 1px solid #fffweb技术分享| 白板SDK之函数和方程式的运用

 web技术分享| 白板SDK的几种图形检测算法
 web技术分享| 白板SDK的几种图形检测算法
 IOS技术分享| anyRTC 互动白板场景实现
 web技术分享| 日期选择限制组件二次封装
 如何在 FlowUsNotion笔记软件使用白板和代码绘制流程图