kfb-view 2.2.2 → 2.2.5

package/package.json

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

package/src/components/area/index.js

@@ -6,7 +6,7 @@ import {
   LINE_TYPES, MARKS,
   NO_NORMAL_REGION_TYPES,
   REGION_TYPES,
-  STAR,
+  STAR, IMAGE,
 } from '../../const/mark';
 import {
   baseNumber, getAngle, getDistance, getPoint,
@@ -39,6 +39,7 @@ export class Area extends ViewerCommon {
     super(viewer, canvas, cache, options);
     this.labelList = [];
     this.movePoint = undefined;
+    this.currentPressPoint = undefined;
     this.lastPoint = undefined;
     this.draging = false;
     MARKS.forEach((mark) => {
@@ -82,12 +83,16 @@ export class Area extends ViewerCommon {
    */
   onCanvasPress({x, y}) {
     this.movePoint = undefined;
+    this.currentPressPoint = undefined;
     this.lastPoint = undefined;
     this.draging = false;
     let selectList = [];
     let selectLabel;
     let prevSelectLabel = undefined;
     this.labelList.forEach((item) => {
+      if (item.tool === IMAGE) {
+        return;
+      }
       if (item.select) {
         prevSelectLabel = item;
       }
@@ -181,6 +186,7 @@ export class Area extends ViewerCommon {
       // moveIndex>-1,表示选中的是图形中可移动的点
       if (~moveIndex) {
         this.movePoint = {position: moveIndex, label: item};
+        this.currentPressPoint = {x, y};
       } else if ((item.tool !== POLYGON &&
           isPointInMatrix(pointList[0], pointList[2], pointList[6], pointList[8],
             {x, y})) ||
@@ -258,10 +264,14 @@ export class Area extends ViewerCommon {
    */
   onCanvasRelease({x, y}) {
     if (this.movePoint && this.options.drag !== false) {
-      const label = this.movePoint.label;
-      this.$emit(EVENT_AREA_MOVE_END, label);
+      const dist = getDistance(this.currentPressPoint, {x, y});
+      if (Math.abs(dist) > 1) {
+        const label = this.movePoint.label;
+        this.$emit(EVENT_AREA_MOVE_END, label);
+      }
     }
     this.movePoint = undefined;
+    this.currentPressPoint = undefined;
     this.lastPoint = undefined;
     this.draging = false;
     this.change();
@@ -563,7 +573,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

@@ -11,6 +11,7 @@ import {
   EVENT_IN_PAINTING,
 } from '../../const/event';
 import {
+  getDistance,
   pointInOtherPoint,
   pointsToRegion,
 } from '../../util/calculate';
@@ -148,13 +149,11 @@ export class Board extends ViewerCommon {
     const points = this.imageToViewerElementPoints(this.points);
     this[tool].draw(points);
     this[tool].endDraw();
-    if (tool === POLYGON) {
-      this[tool].drawPoints(points, {
-        radius: this.options.thumb.radius,
-        strokeStyle: this.options.thumb.color,
-        fillStyle: this.options.thumb.bgColor,
-      });
-    }
+    this[tool].drawPoints(points, {
+      radius: this.options.thumb.radius,
+      strokeStyle: this.options.thumb.color,
+      fillStyle: this.options.thumb.bgColor,
+    });
     this.$emit(EVENT_START_PAINTING, this.getPaintOptions());
   }
 
@@ -185,13 +184,11 @@ export class Board extends ViewerCommon {
     const points = this.imageToViewerElementPoints(this.points);
     this[tool].draw(points);
     this[tool].endDraw();
-    if (tool === POLYGON) {
-      this[tool].drawPoints(points, {
-        radius: this.options.thumb.radius,
-        strokeStyle: this.options.thumb.color,
-        fillStyle: this.options.thumb.bgColor,
-      });
-    }
+    this[tool].drawPoints(points, {
+      radius: this.options.thumb.radius,
+      strokeStyle: this.options.thumb.color,
+      fillStyle: this.options.thumb.bgColor,
+    });
     this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
   }
 
@@ -209,10 +206,15 @@ export class Board extends ViewerCommon {
       return;
     }
     const tool = this.tool;
-    if (point.x === this.points[0].x && point.y === this.points[0].y &&
-      !NO_NORMAL_REGION_TYPES.includes(tool)) {
-      this.points = [];
-      return;
+    if (!NO_NORMAL_REGION_TYPES.includes(tool)) {
+      const firstPoint = this.imageToViewerElementCoordinates(this.points[0].x,
+        this.points[0].y);
+      const dist = getDistance(firstPoint, {x, y});
+      if (Math.abs(dist) < 10) {
+        this.points = [];
+        this.clearCanvas();
+        return;
+      }
     } else if (POINT_TYPES.includes(tool)) {
       this.points = [point, point];
     } else if (tool === POLYGON) {
@@ -305,13 +307,11 @@ export class Board extends ViewerCommon {
       const points = this.imageToViewerElementPoints(this.points);
       this[tool].draw(points);
       this[tool].endDraw();
-      if (tool === POLYGON) {
-        this[tool].drawPoints(points, {
-          radius: this.options.thumb.radius,
-          strokeStyle: this.options.thumb.color,
-          fillStyle: this.options.thumb.bgColor,
-        });
-      }
+      this[tool].drawPoints(points, {
+        radius: this.options.thumb.radius,
+        strokeStyle: this.options.thumb.color,
+        fillStyle: this.options.thumb.bgColor,
+      });
       this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
     }
   }
@@ -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;
@@ -422,13 +422,11 @@ export class Board extends ViewerCommon {
     this[this.tool].startDraw();
     this[this.tool].draw(points);
     this[this.tool].endDraw();
-    if (this.tool === POLYGON) {
-      this[this.tool].drawPoints(points, {
-        radius: this.options.thumb.radius,
-        strokeStyle: this.options.thumb.color,
-        fillStyle: this.options.thumb.bgColor,
-      });
-    }
+    this[this.tool].drawPoints(points, {
+      radius: this.options.thumb.radius,
+      strokeStyle: this.options.thumb.color,
+      fillStyle: this.options.thumb.bgColor,
+    });
     this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
   }
 }

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,
+    };
   }
 
   /**
@@ -417,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

@@ -15,28 +15,15 @@ export class Graduation extends ViewerCommon {
   constructor({viewer, canvas, cache, options}) {
     super(viewer, canvas, cache, options);
     this.scales = options.scales ||
-      [0.1, 0.4, 0.6, 1, 2, 4, 8, 10, 20, 40, 80, 100];
+      [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, 200, 100, 50, 25, 10, 5];
-    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;
@@ -72,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;
@@ -88,16 +78,16 @@ export class Graduation extends ViewerCommon {
     ctx.beginPath();
     ctx.strokeStyle = '#000000';
     ctx.lineWidth = 3;
-    ctx.moveTo(x, y - 5);
+    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 = '#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,120 @@
+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.font = '14px Arial';
+      ctx.fillStyle = '#fff';
+      ctx.fillRect(0, 0, 20, this.canvas.height);
+      ctx.fillRect(0, 0, this.canvas.width, 20);
+      ctx.beginPath();
+      ctx.fillStyle = 'rgba(0, 0, 0, .3)';
+      ctx.strokeStyle = 'rgba(0, 0, 0, .8)';
+      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.fillStyle = '#fff';
+      ctx.fillRect(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

@@ -81,6 +81,7 @@ export class Navigator extends EventEmitter {
         top: top,
         width: rect.clientWidth,
         height: rect.clientHeight,
+        scale: [...this.vestige.zooms].reverse()[index],
         color: [...this.vestige.colors].reverse()[index],
       };
       this.pointList.push(rectObj);
@@ -104,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);
+      });
   }
 
   /**
@@ -301,7 +303,7 @@ export class Navigator extends EventEmitter {
       if (this.clearTimeId) window.clearTimeout(this.clearTimeId);
       const currentImageZoom = this.viewport.viewportToImageZoom(currentZoom);
       const index = [...this.vestige.zooms].reverse().findIndex(
-        (z) => currentImageZoom > (z / (this.options.scale || 40)));
+        (z) => currentImageZoom >= (z / (this.options.scale || 40)));
       if (index !== -1) {
         this.clearTimeId = window.setTimeout(() => {
           this.$emit('rect-draw', index);

package/src/components/shape/index.js

@@ -1,12 +1,10 @@
 import {
-  HAS_REGION_TYPES,
+  HAS_REGION_TYPES, IMAGE,
   MARKS, NO_NORMAL_REGION_TYPES, POINT_TYPES, POLYGON, REGION_TYPES,
 } from '../../const/mark';
 import {ViewerCommon} from '../common/common';
 import * as Tools from '../../tool';
 import {Combination} from '../../tool/Combination';
-import {EVENT_CANCEL_SELECT_LABEL} from '../../const/event';
-import * as EVENTS from '../../const/event';
 
 /**
  * 用来显示标注线的canvas
@@ -70,7 +68,12 @@ export class Shape extends ViewerCommon {
     // strokeStyle, lineWidth, fillStyle 相同认为是一个路径下的图形，一起绘制，优化性能
     const sameFixWidthLabel = {}; // star, flag, star, font lineWidth固定为2
     const sameNormalLabel = {};
+    const imageLabel = [];
     labelList.forEach((item) => {
+      if (item.tool === IMAGE) {
+        imageLabel.push(item);
+        return;
+      }
       const key = `${item.strokeStyle ?? ''}_${item.lineWidth ??
       ''}_${item.fillStyle ?? ''}`;
       const regionKey = `${item.strokeStyle ?? ''}_${item.lineWidth ?? ''}`;
@@ -111,6 +114,9 @@ export class Shape extends ViewerCommon {
         tool,
       })), this.viewport.getRotation());
     });
+    imageLabel.forEach((item) => {
+      this.drawLabel(item);
+    });
   }
 
   deepDrawLabel(sameFixWidthLabel, sameNormalLabel, count, bounds) {

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/const/mark.js

@@ -8,6 +8,7 @@ export const FONT = 'Font';
 export const STAR = 'Star';
 export const FLAG = 'Flag';
 export const DOT = 'Dot';
+export const IMAGE = 'Image';
 
 export const POINT_TYPES = [FONT, STAR, FLAG, DOT];
 export const REGION_TYPES = [RECTANGLE, ELLIPSE];
@@ -24,4 +25,5 @@ export const MARKS = [
   FONT,
   STAR,
   FLAG,
-  DOT];
+  DOT,
+  IMAGE];

package/src/model/label.model.js

@@ -17,6 +17,7 @@ export class LabelModel {
     this.measure = data.measure; // 是否显示测量信息
     this.points = data.points; // 绘制点
     this.tool = data.tool; // 绘制工具
+    this.src = data.src; // 图片地址
     this.scale = data.scale; // 绘制倍率
     this.region = data.region; // 绘制区域
     this.move = data.move; // 是否可移动
@@ -27,5 +28,13 @@ export class LabelModel {
     this.show = data.show ?? true; // 是否显示
     this.__other__ = data.__other__ || {}; // 其他信息
     this.__data__ = data.__data__ ?? data; // 记录原始数据
+    if (this.src) {
+      this.img = new Image();
+      this.img.src = this.src;
+      this.imgLoadSuccess = false;
+      this.img.onload = () => {
+        this.imgLoadSuccess = true;
+      };
+    }
   }
 }

package/src/tool/Brush.js

@@ -46,6 +46,12 @@ class Brush {
     this.thumb.draw(point, config);
   }
 
+  drawPoints(points, config) {
+    points.forEach((point) => {
+      this.drawThumb(point, config);
+    });
+  }
+
   /**
    * 画笔具体操作
    * @param {Object[]} points - 绘制的点
@@ -62,27 +68,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();

package/src/tool/Image.js

@@ -0,0 +1,41 @@
+import {Brush} from './Brush';
+import {pointsToRegion} from '../util/calculate';
+
+/**
+ * 线段类
+ * @class
+ */
+class Image extends Brush {
+  /**
+   * 初始化数据
+   */
+  constructor() {
+    super();
+  }
+
+  /**
+   * 画线
+   * @param {Object[]} points - 绘制的点
+   * @param {number} points[].x - 绘制的点x坐标
+   * @param {number} points[].y - 绘制的点y坐标
+   * @param {number=} scale
+   */
+  draw(points, scale = 1) {
+    const region = pointsToRegion(points);
+    const ctx = this.canvas.getContext('2d');
+    const drawImage = () => {
+      ctx.drawImage(this.options.img, region.x, region.y, region.width,
+        region.height);
+      this.options.img.removeEventListener('load', drawImage);
+    };
+    if (this.options.imgLoadSuccess) {
+      drawImage();
+    } else if (this.options.img) {
+      this.options.img.addEventListener('load', drawImage);
+    }
+  }
+}
+
+export {
+  Image,
+};

package/src/tool/Polygon.js

@@ -27,12 +27,6 @@ class Polygon extends Brush {
       }
     }
   }
-
-  drawPoints(points, config) {
-    points.forEach((point) => {
-      this.drawThumb(point, config);
-    });
-  }
 }
 
 export {

package/src/tool/index.js

@@ -9,3 +9,4 @@ export {Font} from './Font';
 export {Star} from './Star';
 export {Flag} from './Flag';
 export {Dot} from './Dot';
+export {Image} from './Image';