kfb-view 2.2.0 → 2.2.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kfb-view",
   "description": "一个在线kfb的阅片软件",
-  "version": "2.2.0",
+  "version": "2.2.3",
   "author": "qifeng.fan <qifeng.fan@hzztai.com>",
   "license": "MIT",
   "main": "lib/kfb-view.js",

package/src/components/area/index.js

@@ -563,7 +563,7 @@ export class Area extends ViewerCommon {
     }
     this[label.tool].setContent(this.canvas, {...label});
     if (label.measure && label.select) {
-      this[label.tool].drawMeasureInfo(label,
+      this[label.tool].drawMeasureInfo.call(this, label,
         this.getMeasureContent(label), scale);
     }
   }

package/src/components/board/index.js

@@ -370,7 +370,7 @@ export class Board extends ViewerCommon {
       tool: this.tool,
     });
     if (form.measure) {
-      this[this.tool].drawMeasureInfo(form,
+      this[this.tool].drawMeasureInfo.call(this, form,
         this.getMeasureContent(form));
     }
     return form;

package/src/components/common/common.js

@@ -185,7 +185,7 @@ export class ViewerCommon extends EventEmitter {
       left: 0,
       top: 0,
       angle: 0,
-      content: [],
+      texts: [],
     };
     if (label.points.length <= 1) return content;
     const scale = this.getImageZoom(true) / label.scale;
@@ -230,7 +230,7 @@ export class ViewerCommon extends EventEmitter {
           left: p.x + distX * scale,
           top: p.y + distY * scale,
           angle: deg,
-          content: [
+          texts: [
             `长：${(Math.sqrt(w * w + h * h) * this.options.imageCapRes).toFixed(
               2)}${this.options.unit}`],
         };
@@ -250,7 +250,7 @@ export class ViewerCommon extends EventEmitter {
           left: p.x + 10 * scale,
           top: p.y,
           angle: 0,
-          content: [
+          texts: [
             `长轴：${(w * this.options.imageCapRes).toFixed(
               2)}${this.options.unit}`,
             `短轴：${(h * this.options.imageCapRes).toFixed(
@@ -274,7 +274,7 @@ export class ViewerCommon extends EventEmitter {
           left: p.x + 10 * scale,
           top: p.y,
           angle: 0,
-          content: [
+          texts: [
             `长：${(w * this.options.imageCapRes).toFixed(
               2)}${this.options.unit}`,
             `宽：${(h * this.options.imageCapRes).toFixed(
@@ -298,7 +298,7 @@ export class ViewerCommon extends EventEmitter {
           left: p.x,
           top: p.y,
           angle: 0,
-          content: [
+          texts: [
             `周长：${(pt * this.options.imageCapRes).toFixed(
               2)}${this.options.unit}`],
         };
@@ -309,12 +309,17 @@ export class ViewerCommon extends EventEmitter {
           left: 0,
           right: 0,
           angle: 0,
-          content: [],
+          texts: [],
         };
       }
         break;
     }
-    return content;
+    return {
+      ...content,
+      texts: this.options.measure.handler ?
+        this.options.measure.handler(content.texts, label) :
+        content.texts,
+    };
   }
 
   /**
@@ -387,30 +392,20 @@ export class ViewerCommon extends EventEmitter {
   /**
    * 判断region是否在canvas中
    * @param {Object} region
-   * @param {boolean} status
+   * @param {Object} bounds
    * @return {boolean}
    */
-  isInCanvas(region, status = false) {
-    const startPoint = status ?
-      {x: region.x, y: region.y} :
-      this.imageToViewerElementCoordinates(region.x, region.y);
-    const endPoint = status ?
-      {x: region.x + region.width, y: region.y + region.height} :
-      this.imageToViewerElementCoordinates(
-        region.x + region.width, region.y + region.height);
-    if (endPoint.x < startPoint.x) {
-      const x = startPoint.x;
-      startPoint.x = endPoint.x;
-      endPoint.x = x;
-    }
-    if (endPoint.y < startPoint.y) {
-      const y = startPoint.y;
-      startPoint.y = endPoint.y;
-      endPoint.y = y;
-    }
-    return !(startPoint.x > this.canvas.width ||
-      startPoint.y > this.canvas.height ||
-      endPoint.x < 0 || endPoint.y < 0);
+  isInCanvas(region, bounds) {
+    const viewReact = this.viewport.imageToViewportRectangle(region.x, region.y,
+      region.width, region.height);
+    const startPoint = {x: viewReact.x, y: viewReact.y};
+    const endPoint = {
+      x: viewReact.x + viewReact.width,
+      y: viewReact.y + viewReact.height,
+    };
+    return !(startPoint.x > (bounds.x + bounds.width) || startPoint.y >
+      (bounds.y + bounds.height) || endPoint.x < bounds.x || endPoint.y <
+      bounds.y);
   }
 
   getFontWidth(text, size) {
@@ -427,6 +422,18 @@ export class ViewerCommon extends EventEmitter {
 
   }
 
+  /**
+   * updated
+   * @param {Object=} options
+   */
+  updated(options = {}) {
+    this.options = {
+      ...this.options,
+      ...options,
+    };
+    this.change();
+  }
+
   /**
    * 清除canvas
    */

package/src/components/graduation/index.js

@@ -14,28 +14,16 @@ export class Graduation extends ViewerCommon {
    */
   constructor({viewer, canvas, cache, options}) {
     super(viewer, canvas, cache, options);
-    this.scales = options.scales || [0.2, 0.5, 0.8, 1, 2, 4, 10, 20, 40, 100];
+    this.scales = options.scales ||
+      [0.1, 0.4, 0.6, 1, 2, 4, 8, 10, 20, 40, 60, 100, 140, 200];
     this.microns = options.microns ||
-      [5000, 2000, 1250, 1000, 500, 250, 100, 50, 25, 10];
-    this.init();
-  }
-
-  /**
-   * 初始化函数
-   */
-  init() {
-    this.viewer.addHandler('animation', (res) => {
-      this.changeZoom();
-    });
-    setTimeout(() => {
-      this.changeZoom();
-    }, 100);
+      [5000, 2000, 1250, 1000, 500, 250, 200, 100, 50, 25, 20, 10, 5, 2];
   }
 
   /**
    * 倍率大小改变
    */
-  changeZoom() {
+  change() {
     const scales = [...this.scales];
     const zoom = this.viewport.viewportToImageZoom(
       this.viewport.getZoom(true)) * 40;
@@ -71,6 +59,9 @@ export class Graduation extends ViewerCommon {
     const height = this.canvas.height;
     ctx.beginPath();
     ctx.clearRect(0, 0, width, height);
+    if (!this.options.show) {
+      return;
+    }
     const {left, top, right, bottom} = this.options;
     let x = 10;
     let y = height - 10;
@@ -85,17 +76,18 @@ export class Graduation extends ViewerCommon {
       y = height - bottom;
     }
     ctx.beginPath();
-    ctx.strokeStyle = '#454545';
-    ctx.lineWidth = 2;
-    ctx.moveTo(x, y - 5);
+    ctx.strokeStyle = '#000000';
+    ctx.lineWidth = 3;
+    ctx.moveTo(x, y - 8);
     ctx.lineTo(x, y);
     ctx.lineTo(x + lineWidth, y);
-    ctx.lineTo(x + lineWidth, y - 5);
+    ctx.lineTo(x + lineWidth, y - 8);
     ctx.stroke();
     ctx.beginPath();
-    ctx.fillStyle = '#454545';
+    ctx.fillStyle = '#000000';
+    ctx.font = 'bold 16px Arial';
     const t = txt.toFixed(0) + this.options.unit;
     const fontWidth = ctx.measureText(t).width;
-    ctx.fillText(t, x + lineWidth / 2 - fontWidth / 2, top ? y + 10 : y - 10);
+    ctx.fillText(t, x + lineWidth / 2 - fontWidth / 2, top ? y + 12 : y - 12);
   }
 }

package/src/components/grid/index.js

@@ -0,0 +1,117 @@
+import {ViewerCommon} from '../common/common';
+
+/**
+ * 网格
+ * @class
+ */
+export class Grid extends ViewerCommon {
+  /**
+   * 初始化视图测量工具
+   * @param {Object} viewer
+   * @param {Object} canvas
+   * @param {Object} cache
+   * @param {Object} options
+   */
+  constructor({viewer, canvas, cache, options}) {
+    super(viewer, canvas, cache, options);
+    if (!this.options.scale) {
+      this.options.scale = 20;
+    }
+  }
+
+  change() {
+    const imageViewStartPoint = this.viewerElementToImageCoordinates(0, 0);
+    const imageViewXEndPoint = this.viewerElementToImageCoordinates(
+      this.canvas.width, 0);
+    const imageViewYEndPoint = this.viewerElementToImageCoordinates(0,
+      this.canvas.height);
+    let currentZoom = this.getImageZoom(true) * this.options.scale;
+    let baseScale = this.options.scale === 40 ? 3200 : 1600;
+    let twoCount = 0;
+    if (currentZoom >= 1) {
+      while (currentZoom / 2 >= 1) {
+        twoCount++;
+        currentZoom = currentZoom / 2;
+      }
+      if (twoCount) {
+        baseScale /= Math.pow(2, twoCount);
+      }
+    } else if (currentZoom < 1) {
+      while (currentZoom * 2 <= 1) {
+        twoCount++;
+        currentZoom = currentZoom * 2;
+      }
+      if (twoCount) {
+        baseScale *= Math.pow(2, twoCount);
+      }
+    }
+    const distX = imageViewXEndPoint.distanceTo(imageViewStartPoint);
+    const distY = imageViewYEndPoint.distanceTo(imageViewStartPoint);
+    const minX = Math.floor(imageViewStartPoint.x / baseScale);
+    const maxX = Math.floor((imageViewXEndPoint.x + distX) / baseScale);
+    const minY = Math.floor(imageViewStartPoint.y / baseScale);
+    const maxY = Math.floor((imageViewYEndPoint.y + distY) / baseScale);
+    const ctx = this.canvas.getContext('2d');
+    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    if (this.options.show) {
+      ctx.beginPath();
+      ctx.lineWidth = 1;
+      for (let i = minX; i <= maxX + 1; i++) {
+        const point = this.imageToViewerElementCoordinates(i * baseScale, 0);
+        ctx.moveTo(point.x, 0);
+        ctx.lineTo(point.x, this.canvas.height);
+      }
+      for (let i = minY; i <= maxY + 1; i++) {
+        const point = this.imageToViewerElementCoordinates(0, i * baseScale);
+        ctx.moveTo(0, point.y);
+        ctx.lineTo(this.canvas.width, point.y);
+      }
+      ctx.stroke();
+    }
+    if (this.options.ruler) {
+      const basePx = this.imageToViewerElementCoordinates(baseScale, 0).
+        minus(this.imageToViewerElementCoordinates(0, 0)).x;
+      ctx.beginPath();
+      ctx.strokeStyle = 'rgba(0, 0, 0, .8)';
+      ctx.fillStyle = 'rgba(0, 0, 0, .3)';
+      ctx.font = '14px Arial';
+      ctx.clearRect(0, 0, 20, this.canvas.height);
+      ctx.clearRect(0, 0, this.canvas.width, 20);
+      ctx.moveTo(20, 20);
+      ctx.lineTo(20, this.canvas.height);
+      ctx.moveTo(20, 20);
+      ctx.lineTo(this.canvas.width, 20);
+      for (let i = minX; i <= maxX + 1; i++) {
+        const point = this.imageToViewerElementCoordinates(i * baseScale, 0);
+        ctx.moveTo(point.x, 0);
+        ctx.lineTo(point.x, 20);
+        for (let j = 1; j < 5; j++) {
+          ctx.moveTo(point.x + (basePx / 5) * j, 16);
+          ctx.lineTo(point.x + (basePx / 5) * j, 20);
+          if (i !== minX) {
+            ctx.fillText(i * baseScale, point.x + 5, 13);
+          }
+        }
+      }
+      for (let i = minY; i <= maxY + 1; i++) {
+        const point = this.imageToViewerElementCoordinates(0, i * baseScale);
+        ctx.moveTo(0, point.y);
+        ctx.lineTo(20, point.y);
+        for (let j = 1; j < 5; j++) {
+          ctx.moveTo(16, point.y + (basePx / 5) * j);
+          ctx.lineTo(20, point.y + (basePx / 5) * j);
+          if (i !== minY) {
+            ctx.save();
+            ctx.translate(3, point.y + 5);
+            ctx.rotate(Math.PI / 2);
+            ctx.fillText(i * baseScale, 0, 0);
+            ctx.restore();
+          }
+        }
+      }
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.clearRect(0, 0, 20, 20);
+    }
+  }
+}

package/src/components/index.js

@@ -6,3 +6,4 @@ export {Shape} from './shape';
 export {Area} from './area';
 export {Board} from './board';
 export {Graduation} from './graduation';
+export {Grid} from './grid';

package/src/components/navigator/index.js

@@ -19,14 +19,32 @@ export class Navigator extends EventEmitter {
     this.viewport = rest.viewer.viewport;
     this.viewer = rest.viewer;
     this.el = rest.el;
-    this.height = rest.height || 200;
-    this.width = rest.width || 200;
+    this.height = rest.height || 150;
+    this.width = rest.width || 150;
     this.containerHeight = rest.containerHeight || window.innerHeight;
     this.containerWidth = rest.containerWidth || window.innerWidth;
     this.element = rest.element;
     this.pointList = rest.pointList || [];
-    this.info = '';
+    this.loadStatus = false; // 导航图加载状态
     this.init();
+    this.vestige = this.options.vestige ? {
+      show: true,
+      delay: 1000,
+      colors: [
+        'rgba(255, 255, 0, .5)',
+        'rgba(0, 255, 255, .5)',
+        'rgba(255, 0, 255, .5)'],
+      zooms: [5, 10, 20],
+      ...this.options.vestige,
+    } : {
+      show: true,
+      delay: 1000,
+      colors: [
+        'rgba(255, 255, 0, .5)',
+        'rgba(0, 255, 255, .5)',
+        'rgba(255, 0, 255, .5)'],
+      zooms: [5, 10, 20],
+    };
   }
 
   /**
@@ -51,15 +69,20 @@ export class Navigator extends EventEmitter {
       hLine.style.top =
         Math.round(rect.getBoundingClientRect().height / 2 +
           rect.offsetTop) + 'px';
+      vLine.style.backgroundColor = 'red';
+      hLine.style.backgroundColor = 'red';
     });
     this.$on('rect-draw', (e) => {
       const left = rect.offsetLeft;
       const top = rect.offsetTop;
+      const index = e.detail;
       const rectObj = {
         left: left,
         top: top,
         width: rect.clientWidth,
         height: rect.clientHeight,
+        scale: [...this.vestige.zooms].reverse()[index],
+        color: [...this.vestige.colors].reverse()[index],
       };
       this.pointList.push(rectObj);
       this.drawPointList(this.pointList);
@@ -82,9 +105,10 @@ export class Navigator extends EventEmitter {
     const colorCanvas = this.element.getElementsByClassName(
       'navigator-color-rect')[0];
     const ctx = colorCanvas.getContext('2d');
-    this.pointList.forEach((item) => {
-      this.drawRect(ctx, item);
-    });
+    this.pointList.sort((a, b) => a.scale > b.scale ? 1 : -1).
+      forEach((item) => {
+        this.drawRect(ctx, item);
+      });
   }
 
   /**
@@ -96,7 +120,7 @@ export class Navigator extends EventEmitter {
     // if (clear)
     // ctx.clearRect(0, 0, this.containerWidth, this.containerHeight);
     ctx.beginPath();
-    ctx.fillStyle = this.options.vestigeColor || 'rgba(255, 0, 255, .5)';
+    ctx.fillStyle = item.color;
     ctx.clearRect(item.left, item.top, item.width + 1, item.height + 1);
     ctx.fillRect(item.left, item.top, item.width + 1, item.height + 1);
   }
@@ -108,6 +132,9 @@ export class Navigator extends EventEmitter {
    * @param {Object=} rect 遮罩层元素
    */
   navigatorChange(zoom, refPoint, rect) {
+    if (!this.loadStatus) {
+      return;
+    }
     if (!refPoint) {
       refPoint = this.viewport.getCenter(true);
     }
@@ -270,14 +297,17 @@ export class Navigator extends EventEmitter {
     };
     rect.style.left = refPoint.x + 'px';
     rect.style.top = refPoint.y + 'px';
+    rect.style.border = '1px solid red';
     this.$emit('rect-change');
-    if (this.options.vestige) {
+    if (this.vestige.show !== false) {
       if (this.clearTimeId) window.clearTimeout(this.clearTimeId);
-      if (this.viewport.viewportToImageZoom(currentZoom) >=
-        (this.options.vestigeZoom ?? 1)) {
+      const currentImageZoom = this.viewport.viewportToImageZoom(currentZoom);
+      const index = [...this.vestige.zooms].reverse().findIndex(
+        (z) => currentImageZoom >= (z / (this.options.scale || 40)));
+      if (index !== -1) {
         this.clearTimeId = window.setTimeout(() => {
-          this.$emit('rect-draw');
-        }, this.options.vestigeDelay || 1000);
+          this.$emit('rect-draw', index);
+        }, this.vestige.delay || 1000);
       }
     }
   }
@@ -295,24 +325,25 @@ export class Navigator extends EventEmitter {
       const imgHeight = img.height;
       let scale = 1;
       if (imgWidth >= imgHeight) {
-        scale = imgWidth / this.width;
-        const trueHeight = imgHeight / scale;
-        canvas.width = this.width;
-        canvas.height = trueHeight;
-        ctx.drawImage(img, 0, 0, canvas.width, trueHeight);
-      }
-      if (imgHeight > imgWidth) {
         scale = imgHeight / this.height;
         const trueWidth = imgWidth / scale;
         canvas.height = this.height;
         canvas.width = trueWidth;
         ctx.drawImage(img, 0, 0, trueWidth, canvas.height);
       }
+      if (imgHeight > imgWidth) {
+        scale = imgWidth / this.width;
+        const trueHeight = imgHeight / scale;
+        canvas.width = this.width;
+        canvas.height = trueHeight;
+        ctx.drawImage(img, 0, 0, canvas.width, trueHeight);
+      }
       this.setViewRect(this.element.getElementsByClassName('view-rect')[0]);
       const colorCanvas = this.element.getElementsByClassName(
         'navigator-color-rect')[0];
       colorCanvas.width = this.canvas.width;
       colorCanvas.height = this.canvas.height;
+      this.loadStatus = true;
     };
     img.src = this.options.thumbnail; // 设置图片源地
     return canvas;
@@ -327,14 +358,6 @@ export class Navigator extends EventEmitter {
       const imgHeight = img.height;
       let scale = 1;
       if (imgWidth >= imgHeight) {
-        scale = imgWidth / this.width;
-        const trueHeight = imgHeight / scale;
-        this.canvas.width = this.width;
-        this.canvas.height = trueHeight;
-        ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        ctx.drawImage(img, 0, 0, this.canvas.width, trueHeight);
-      }
-      if (imgHeight > imgWidth) {
         scale = imgHeight / this.height;
         const trueWidth = imgWidth / scale;
         this.canvas.height = this.height;
@@ -342,6 +365,14 @@ export class Navigator extends EventEmitter {
         ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
         ctx.drawImage(img, 0, 0, trueWidth, this.canvas.height);
       }
+      if (imgHeight > imgWidth) {
+        scale = imgWidth / this.width;
+        const trueHeight = imgHeight / scale;
+        this.canvas.width = this.width;
+        this.canvas.height = trueHeight;
+        ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        ctx.drawImage(img, 0, 0, this.canvas.width, trueHeight);
+      }
       this.setViewRect(this.element.getElementsByClassName('view-rect')[0]);
       const colorCanvas = this.element.getElementsByClassName(
         'navigator-color-rect')[0];
@@ -350,4 +381,14 @@ export class Navigator extends EventEmitter {
     };
     img.src = this.options.thumbnail; // 设置图片源地
   }
+
+  toggleNavigator() {
+    const navigatorMain = this.element.getElementsByClassName(
+      'navigator-main')[0];
+    if (navigatorMain.style.display === 'none') {
+      navigatorMain.style.display = 'block';
+    } else {
+      navigatorMain.style.display = 'none';
+    }
+  }
 }

package/src/components/navigator/navigator.scss

@@ -14,7 +14,6 @@
       line-height: 1px;
       position: absolute;
       top: 0;
-      background-color: rgb(255, 0, 0);
     }
 
     .h-line {
@@ -23,12 +22,10 @@
       line-height: 1px;
       position: absolute;
       left: 0;
-      background-color: rgb(255, 0, 0);
     }
 
     .view-rect {
       top: -1px;
-      border: 1px solid rgb(255, 0, 0);
       background-color: rgb(255, 255, 255);
       position: absolute;
       cursor: pointer;

package/src/components/shape/index.js

@@ -51,14 +51,14 @@ export class Shape extends ViewerCommon {
    */
   change() {
     this.clearCanvas();
+    const bounds = this.viewport.getBounds();
     // 区域标注列表
     const regionLabelList = [];
     const labelList = this.labelList.filter((item) => {
       if (item.show === false) return false;
       if (!this[item.tool]) return false;
-      if (!this.isInCanvas(item.region)) return false;
-      if (REGION_TYPES.includes(item.tool) || item.isClose && item.tool ===
-        POLYGON && item.fillStyle) {
+      if ((REGION_TYPES.includes(item.tool) || item.isClose && item.tool ===
+        POLYGON) && item.fillStyle) {
         regionLabelList.push({
           ...item,
           child: [],
@@ -99,8 +99,9 @@ export class Shape extends ViewerCommon {
       clearTimeout(this.delaytimer);
       this.delaytimer = undefined;
     }
-    this.deepDrawLabel(sameFixWidthLabel, sameNormalLabel, 1);
+    this.deepDrawLabel(sameFixWidthLabel, sameNormalLabel, 1, bounds);
     regionLabelList.forEach((item) => {
+      if (!this.isInCanvas(item.region, bounds)) return false;
       this.combination.setContent(this.canvas, item);
       this.combination.draw({
         points: this.imageToViewerElementPoints(item.points),
@@ -112,7 +113,7 @@ export class Shape extends ViewerCommon {
     });
   }
 
-  deepDrawLabel(sameFixWidthLabel, sameNormalLabel, count) {
+  deepDrawLabel(sameFixWidthLabel, sameNormalLabel, count, bounds) {
     let currentDrawCount = 0; // 当前已绘制数量
     const ctx = this.canvas.getContext('2d');
     const remainFixLabel = {};
@@ -127,6 +128,7 @@ export class Shape extends ViewerCommon {
             remainFixLabel[key] = [item];
           }
         } else {
+          if (!this.isInCanvas(item.region, bounds)) return false;
           this.drawLabel(item);
         }
         currentDrawCount++;
@@ -151,6 +153,7 @@ export class Shape extends ViewerCommon {
             remainNormalLabel[key] = [item];
           }
         } else {
+          if (!this.isInCanvas(item.region, bounds)) return false;
           this.drawLabel(item);
         }
         currentDrawCount++;
@@ -166,7 +169,8 @@ export class Shape extends ViewerCommon {
       this.delaytimer = undefined;
     } else {
       this.delaytimer = setTimeout(() => {
-        this.deepDrawLabel(remainFixLabel, remainNormalLabel, count + 1);
+        this.deepDrawLabel(remainFixLabel, remainNormalLabel, count + 1,
+          bounds);
       }, 100);
     }
   }

package/src/components/tailoring/index.js

@@ -105,7 +105,7 @@ export class Tailoring extends ViewerCommon {
     ctx.stroke();
     ctx.beginPath();
     ctx.fillStyle = this.color;
-    ctx.font = '18px';
+    ctx.font = '18px Arial';
     ctx.fillText(
       `区域大小为：${rightTop.x - leftTop.x}*${rightBottom.y - rightTop.y}`,
       leftTop.x, leftTop.y - 50);

package/src/const/component.js

@@ -6,3 +6,4 @@ export const COMPONENT_ROTATION = 'rotation';
 export const COMPONENT_TAILORING = 'tailoring';
 export const COMPONENT_NAVIGATOR = 'navigator';
 export const COMPONENT_CACHE = 'cache';
+export const COMPONENT_FRID = 'grid';

package/src/tool/Brush.js

@@ -62,27 +62,26 @@ class Brush {
    * @param {number} [scale=1]
    */
   drawMeasureInfo(label, info, scale = 1) {
-    const {left, top, content, angle} = info;
+    const {left, top, texts, angle} = info;
     const ctx = this.canvas.getContext('2d');
     ctx.save();
     ctx.beginPath();
     ctx.translate(left, top);
     ctx.rotate(angle);
     ctx.scale(scale, scale);
-    ctx.font = `14px Arial`;
     const widthList = [];
-    content.forEach((info) => {
+    ctx.font = `${this.options.measure.fontSize}px Arial`;
+    texts.forEach((info) => {
       widthList.push(ctx.measureText(info).width);
     });
     const width = Math.max(...widthList);
-    ctx.fillStyle = 'rgba(0,0,0,.5)';
-    const height = content.length * 20 + 16 + (content.length - 1) * 4;
+    ctx.fillStyle = this.options.measure.backgroundColor;
+    const height = texts.length * 20 + 16 + (texts.length - 1) * 4;
     ctx.rect(0, 0, width + 22, height);
     ctx.fill();
     ctx.beginPath();
-    ctx.font = `14px Arial`;
-    ctx.fillStyle = '#FDFDFD';
-    content.forEach((info, index) => {
+    ctx.fillStyle = this.options.measure.color;
+    texts.forEach((info, index) => {
       ctx.fillText(info, 11, 8 + 14 + index * 24);
     });
     ctx.fill();