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

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

最终效果展示：

使用白板 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 #fff;
  box-shadow: 0px 0px 3px #294bff;
  display: flex;
  justify-content: center;
}
.progress .progress_dot:hover .tip {
  transition: opacity 1s;
  opacity: 1;
  visibility: visible;
}
.progress .progress_dot:hover .tip_top {
  top: -44px;
}
.progress .progress_bg {
  width: 0px;
  height: 4px;
  background-color: #294bff;
  border-radius: 3px;
  position: absolute;
}
.progress .progress_bgpro {
  width: 100%;
  height: 4px;
  background-color: #f0f0fc;
  border-radius: 3px;
  position: absolute;
}

具体封装代码如下：

// 侧边工具栏
class ToolBar {
  constructor(options) {
    if (options) {
      // 获取容器
      const oToolBar = document.getElementById(options.el);
      oToolBar.className = "toolbar";
      // oToolBar.style.height = options.infolists.length * 40 + "px";
      this.board = options.board;
      this.toolbaar = oToolBar;
      // 创建容器侧边栏
      this.createSideBar(oToolBar, options.infolists);
    }
    // 清除容器内容显示
    const oBody = document.getElementsByTagName("body")[0];
    oBody.addEventListener("click", this.clearShow);
  }
  // 创建侧边栏
  createSideBar(toolbarDom, infolists) {
    infolists.map((info, index) => {
      // 创建工具
      const oCreateTool = document.createElement("div");
      oCreateTool.className = "toolbar_tool";
      // 工具按钮
      const oCreateToolButton = document.createElement("div");
      oCreateToolButton.className = "toolbar_tool_buton";
      // 工具按钮icon (默认选中第一个 )
      const oCreateToolButtonIcon = document.createElement("i");
      if (index == 0) {
        oCreateToolButtonIcon.className =
          "toolbar_tool_icon toolbar_tool_icon_activate iconfont " + info.icon;
      } else {
        oCreateToolButtonIcon.className =
          "toolbar_tool_icon iconfont " + info.icon;
      }
      // 工具经过提示tip
      const oCreateToolTip = document.createElement("div");
      oCreateToolTip.className = "tip tip_left";
      oCreateToolTip.textContent = info.tip;

      // 添加
      oCreateToolButton.appendChild(oCreateToolButtonIcon);
      oCreateToolButton.appendChild(oCreateToolTip);
      oCreateTool.appendChild(oCreateToolButton);
      toolbarDom.appendChild(oCreateTool);
      // 创建侧边栏内容
      if (info.detail && info.detail.length > 0) {
        this.createSideBarDetail(oCreateTool, info.detail);
      }
      // 侧边栏点击
      this.showSideBarDetail(oCreateTool, info);
    });
  }
  // 创建侧边栏内容
  createSideBarDetail(toolDom, detailedinfo) {
    // 创建详细分类
    const oCreateToolDetail = document.createElement("div");
    oCreateToolDetail.className = "toolbar_tool_detail";
    const _this = this;
    detailedinfo.map((detail) => {
      switch (detail.type) {
        case "progress":
          // 设置默认大小
          _this.board[detail.brushFn](detail.defaultsize);

          const oProgress = document.createElement("div");
          oProgress.className =
            detail.brushFn == "setBrushThin"
              ? "progressinfo thin_progress "
              : "progressinfo size_progress";

          if (detail.contenttext) {
            const oProgressText = document.createElement("div");
            oProgressText.className = "progressinfo_text";
            oProgressText.textContent = detail.contenttext;
            oProgress.appendChild(oProgressText);
          }

          // 进度条
          new progress(
            {
              document: oProgress,
              defaultwidth:
                detail.brushFn == "setBrushThin"
                  ? _this.board.getBrushThin()
                  : _this.board.getTextSize(),
              min: detail.min,
              max: detail.max,
            },
            function (num) {
              _this.board[detail.brushFn](num);
            }
          );

          oCreateToolDetail.appendChild(oProgress);
          break;
        case "color":
          const oColorInfoList = document.createElement("div");
          oColorInfoList.className = "colorinfo";
          oColorInfoList.onclick = function (e) {
            // 停止冒泡行为
            stopBubble(e);
          };
          if (detail.contenttext) {
            const oCreateToolDetailColorText = document.createElement("div");
            oCreateToolDetailColorText.textContent = detail.contenttext;
            oColorInfoList.appendChild(oCreateToolDetailColorText);
          }
          const oCreateToolDetailColorList = document.createElement("div");
          oCreateToolDetailColorList.className = "colorlist";

          if (detail.brushFn == "setBrushColor") {
            // 画笔默认颜色
            _this.board[detail.brushFn](detail.defaultcolor);
          } else if (
            detail.brushFn == "setBackgroundColor" &&
            detail.defaultcolor
          ) {
            // 背景默认颜色(需要白板创建后才可以设置)
            let oTimer = setInterval(function () {
              if (_this.board.getCurrentBoardId()) {
                clearInterval(oTimer);
                _this.board[detail.brushFn](detail.defaultcolor);
              }
            });
          } else if (detail.brushFn == "setTextColor" && detail.defaultcolor) {
            // 文字默认颜色
            _this.board[detail.brushFn](detail.defaultcolor);
          }

          detail.detailcolor.map((color) => {
            const oCreateToolDetailColor = document.createElement("div");

            oCreateToolDetailColor.setAttribute("data-color", color);
            if (detail.brushFn == "setBrushColor") {
              // 画笔相关颜色
              oCreateToolDetailColor.className =
                detail.defaultcolor == color
                  ? "color color_active bu_color"
                  : "color bu_color";
            } else if (detail.brushFn == "setBackgroundColor") {
              // 白板背景颜色
              oCreateToolDetailColor.className = "color bg_color";
            } else if (detail.brushFn == "setTextColor") {
              // 白板文本默认颜色
              oCreateToolDetailColor.className =
                detail.defaultcolor == color
                  ? "color color_active text_color"
                  : "color text_color";
            }

            oCreateToolDetailColor.style.backgroundColor = color;
            oCreateToolDetailColor.onclick = function (e) {
              // 停止冒泡行为
              stopBubble(e);
              _this.board[detail.brushFn](color);
              _this.clearColor(_this.board, detail);
              _this.clearShow();
            };
            oCreateToolDetailColorList.appendChild(oCreateToolDetailColor);
          });

          oColorInfoList.appendChild(oCreateToolDetailColorList);
          oCreateToolDetail.appendChild(oColorInfoList);
          break;
        case "form":
          const oCreateToolDetailFrom = document.createElement("div");
          oCreateToolDetailFrom.className = "form";
          detail.detail.map((form) => {
            const oCreateToolDetailButton = document.createElement("div");
            oCreateToolDetailButton.className = "form_button";

            oCreateToolDetailButton.setAttribute(
              "data-form",
              form.brushtooltype
            );

            // 分类工具按钮提示tip
            const oCreateToolDetailTip = document.createElement("div");
            oCreateToolDetailTip.className = "tip tip_top";
            oCreateToolDetailTip.textContent = form.tip;

            // 分类工具按钮icon
            const oCreateToolDetailButtonIcon = document.createElement("i");
            oCreateToolDetailButtonIcon.className =
              "form_button_icon iconfont " + form.icon;

            oCreateToolDetailButton.appendChild(oCreateToolDetailTip);
            oCreateToolDetailButton.appendChild(oCreateToolDetailButtonIcon);
            oCreateToolDetailButton.onclick = function (e) {
              // 停止冒泡行为
              stopBubble(e);
              _this.board[form.brushFn](form.brushtooltype);
              _this.formBrush(_this.board);
              _this.clearShow();
            };
            oCreateToolDetailFrom.appendChild(oCreateToolDetailButton);
            oCreateToolDetail.appendChild(oCreateToolDetailFrom);
          });
          break;
        case "text":
          const oText = document.createElement("div");
          if (detail.contenttext) {
            oText.textContent = detail.contenttext;
          }
          oText.className = "detail_text";
          oText.onclick = function (e) {
            // 停止冒泡行为
            stopBubble(e);
            if (detail.brushtooltype == "涂鸦") {
              _this.board[detail.brushFn]();
            } else if (detail.brushtooltype == "白板") {
              _this.board[detail.brushFn](true);
            }
            // 清楚后变鼠标
            _this.board.setBrushType(0);
            _this.clearShow();
          };
          oCreateToolDetail.style.alignItems = "center";
          oCreateToolDetail.appendChild(oText);
          break;
        default:
          break;
      }
    });
    toolDom.appendChild(oCreateToolDetail);
  }
  // 侧边栏内容显示/隐藏
  showSideBarDetail(toolDom, detailedinfo) {
    const _this = this;
    toolDom.onclick = function (e) {
      // 停止冒泡行为
      stopBubble(e);
      if (detailedinfo.brushFn) {
        _this.board[detailedinfo.brushFn](detailedinfo.brushtooltype);
      }
      if (detailedinfo.detail) {
        detailedinfo.detail.map((item) => {
          switch (item.type) {
            case "progress":
              // 进度条默认显示
              _this.progressDefault(_this.board, item);
              break;
            case "color":
              // 当前背景颜色
              _this.clearColor(_this.board, item);
              break;
            case "form":
              // 形状(当前画笔形状)
              _this.formBrush(_this.board);
              break;
            default:
              break;
          }
        });
      }

      const oCreateToolDetail = toolDom.getElementsByClassName(
        "toolbar_tool_detail"
      )[0];
      if (oCreateToolDetail) {
        if (
          oCreateToolDetail.classList.contains("toolbar_tool_detail_visibility")
        ) {
          oCreateToolDetail.classList.remove("toolbar_tool_detail_visibility");
        } else {
          _this.clearShow();
          oCreateToolDetail.classList.add("toolbar_tool_detail_visibility");
        }
      } else {
        _this.clearShow();
      }

      // 点击效果
      const oSelectIcon =
        toolDom.getElementsByClassName("toolbar_tool_icon")[0];
      const oAllButton = document.getElementsByClassName("toolbar_tool_icon");
      for (let detail = 0; detail < oAllButton.length; detail++) {
        oAllButton[detail].classList.remove("toolbar_tool_icon_activate");
      }
      oSelectIcon.classList.add("toolbar_tool_icon_activate");
    };
  }
  // 颜色清空
  clearColor(board, info) {
    let oBoardColor = null;
    let oColorList = null;
    if (info.brushFn == "setBrushColor") {
      // 画笔颜色
      oBoardColor = board.getBrushColor();
      oColorList = document.getElementsByClassName("bu_color");
    } else if (info.brushFn == "setBackgroundColor") {
      // 背景颜色
      oBoardColor = board.getBackgroundColor();
      oColorList = document.getElementsByClassName("bg_color");
    } else if (info.brushFn == "setTextColor") {
      // 文本颜色
      oBoardColor = board.getTextColor();
      oColorList = document.getElementsByClassName("text_color");
    }

    for (let index = 0; index < oColorList.length; index++) {
      if (oBoardColor == oColorList[index].getAttribute("data-color")) {
        oColorList[index].classList.add("color_active");
      } else {
        oColorList[index].classList.remove("color_active");
      }
    }
  }
  // 进度条默认显示
  progressDefault(board, info) {
    let boardwidth = null;
    let oBrushAllProgress = null;
    if (info.brushFn == "setBrushThin") {
      boardwidth = board.getBrushThin();
      oBrushAllProgress = document.getElementsByClassName("thin_progress");
    } else if (info.brushFn == "setTextSize") {
      boardwidth = board.getTextSize();
      oBrushAllProgress = document.getElementsByClassName("size_progress");
    }
    if (oBrushAllProgress) {
      for (let x = 0; x < oBrushAllProgress.length; x++) {
        const oAllProgress =
          oBrushAllProgress[x].getElementsByClassName("progress");
        for (let index = 0; index < oAllProgress.length; index++) {
          const oProgressWidth = oAllProgress[index].offsetWidth;
          const oDot =
            oAllProgress[index].getElementsByClassName("progress_dot")[0];
          const oBg =
            oAllProgress[index].getElementsByClassName("progress_bg")[0];
          const oTip = oAllProgress[index].getElementsByClassName("tip")[0];
          oDot.style.marginLeft =
            ((boardwidth - info.min) / (info.max - info.min)) *
              (oProgressWidth - oDot.offsetWidth) +
            "px";
          oBg.style.width =
            ((boardwidth - info.min) / (info.max - info.min)) *
              (oProgressWidth - oDot.offsetWidth) +
            "px";
          oTip.textContent = boardwidth;
        }
      }
    }
  }

  // 形状(当前画笔形状)
  formBrush(board) {
    // 当前画笔形状
    const oBrush = board.getBrushType();

    const oBrushLists = document.getElementsByClassName("form_button");
    for (let index = 0; index < oBrushLists.length; index++) {
      const oIcon =
        oBrushLists[index].getElementsByClassName("form_button_icon")[0];
      if (oBrushLists[index].getAttribute("data-form") == oBrush) {
        oIcon.classList.add("form_button_icon_active");
      } else {
        oIcon.classList.remove("form_button_icon_active");
      }
    }
  }
  // 所有显示效果清除
  clearShow() {
    const oAllDetail = document.getElementsByClassName("toolbar_tool_detail");
    if (oAllDetail && oAllDetail.length > 0) {
      for (let detail = 0; detail < oAllDetail.length; detail++) {
        oAllDetail[detail].classList.remove("toolbar_tool_detail_visibility");
      }
    }
  }
  // 销毁
  destroy() {
    this.toolbaar.innerHTML = "";
  }
}