kfb-view 3.1.5 → 3.2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kfb-view",
   "description": "一个在线kfb的阅片软件",
-  "version": "3.1.5",
+  "version": "3.2.1",
   "author": "qifeng.fan <qifeng.fan@hzztai.com>",
   "license": "MIT",
   "main": "lib/kfb-view.js",
@@ -22,6 +22,7 @@
     "lint": "eslint --ext .js src"
   },
   "dependencies": {
+    "mitt": "^3.0.1"
   },
   "devDependencies": {
     "axios": "^1.6.5",

package/src/components/area/index.js

@@ -255,8 +255,8 @@ export class Area extends ViewerCommon {
     // 如果是LINE或RECT或ELLIPSE或POLYGON则优先显示范围小的
     if (this.movePoint) {
       this.movePoint.label.select = true;
-      this.$emit(EVENT_SELECT_LABEL, this.movePoint.label);
-      this.$emit(EVENT_AREA_MOVE_START, this.movePoint.label);
+      this.mitt.$emit(EVENT_SELECT_LABEL, this.movePoint.label);
+      this.mitt.$emit(EVENT_AREA_MOVE_START, this.movePoint.label);
       this.draging = true;
     } else if (selectList.length > 0) {
       selectList.sort((a, b) => {
@@ -277,9 +277,9 @@ export class Area extends ViewerCommon {
       selectLabel.select = true;
     }
     selectLabel ?
-      this.$emit(EVENT_SELECT_LABEL, selectLabel) :
+      this.mitt.$emit(EVENT_SELECT_LABEL, selectLabel) :
       !this.movePoint && prevSelectLabel ?
-        this.$emit(EVENT_CANCEL_SELECT_LABEL, prevSelectLabel) : '';
+        this.mitt.$emit(EVENT_CANCEL_SELECT_LABEL, prevSelectLabel) : '';
     this.change();
   }
 
@@ -303,13 +303,13 @@ export class Area extends ViewerCommon {
             ...p,
             canMove: true,
           });
-          this.$emit(EVENT_ADD_POLYGON_POINT, label);
+          this.mitt.$emit(EVENT_ADD_POLYGON_POINT, label);
           this.change();
         } else {
-          this.$emit(EVENT_DB_CLICK_LABEL, label);
+          this.mitt.$emit(EVENT_DB_CLICK_LABEL, label);
         }
       } else {
-        this.$emit(EVENT_DB_CLICK_LABEL, label);
+        this.mitt.$emit(EVENT_DB_CLICK_LABEL, label);
       }
     });
   }
@@ -356,7 +356,7 @@ export class Area extends ViewerCommon {
       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.mitt.$emit(EVENT_AREA_MOVE_END, label);
       }
     }
     this.movePoint = undefined;
@@ -557,7 +557,7 @@ export class Area extends ViewerCommon {
         this.viewerElementToImageCoordinates(_endPoint.x, _endPoint.y)];
     }
     label.region = pointsToRegion(label.points);
-    this.$emit(EVENT_AREA_MOVING, label);
+    this.mitt.$emit(EVENT_AREA_MOVING, label);
     this.lastPoint = {x, y};
   }
 

package/src/components/board/index.js

@@ -157,7 +157,7 @@ export class Board extends ViewerCommon {
       strokeStyle: this.options.thumb.color,
       fillStyle: this.options.thumb.bgColor,
     });
-    this.$emit(EVENT_START_PAINTING, this.getPaintOptions());
+    this.mitt.$emit(EVENT_START_PAINTING, this.getPaintOptions());
   }
 
   /**
@@ -200,7 +200,7 @@ export class Board extends ViewerCommon {
       strokeStyle: this.options.thumb.color,
       fillStyle: this.options.thumb.bgColor,
     });
-    this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
+    this.mitt.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
   }
 
   /**
@@ -268,7 +268,7 @@ export class Board extends ViewerCommon {
         }
       }
     }
-    this.$emit(EVENT_END_PAINTING, this.getPaintOptions());
+    this.mitt.$emit(EVENT_END_PAINTING, this.getPaintOptions());
     // 是否只绘制一次
     if (this[this.tool].options.once) {
       this.endDraw();
@@ -300,10 +300,10 @@ export class Board extends ViewerCommon {
         return;
       }
     }
-    this.$emit(EVENT_END_PAINTING, this.getPaintOptions());
+    this.mitt.$emit(EVENT_END_PAINTING, this.getPaintOptions());
     // 是否只绘制一次
     if (this[this.tool].options.once) {
-      this.$emit(EVENT_STOP_PAINTING, this.getPaintOptions());
+      this.mitt.$emit(EVENT_STOP_PAINTING, this.getPaintOptions());
       this.endDraw();
     } else if (this[this.tool].options.clear) { // 是否结束绘画时清空画布
       this.points = [];
@@ -340,7 +340,7 @@ export class Board extends ViewerCommon {
         strokeStyle: this.options.thumb.color,
         fillStyle: this.options.thumb.bgColor,
       });
-      this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
+      this.mitt.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
     }
   }
 
@@ -351,7 +351,7 @@ export class Board extends ViewerCommon {
   onCanvasKey(e) {
     const {originalEvent} = e;
     if (originalEvent.key === 'Escape' && this.isInDraw) {
-      this.$emit(EVENT_STOP_PAINTING, this.getPaintOptions());
+      this.mitt.$emit(EVENT_STOP_PAINTING, this.getPaintOptions());
       this.endDraw();
     }
     if (originalEvent.key === 'Delete' || originalEvent.key ===
@@ -472,6 +472,6 @@ export class Board extends ViewerCommon {
       strokeStyle: this.options.thumb.color,
       fillStyle: this.options.thumb.bgColor,
     });
-    this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
+    this.mitt.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
   }
 }

package/src/components/common/common.js

@@ -1,4 +1,3 @@
-import {EventEmitter} from '../../util/event-emitter';
 import {Thumb} from '../../tool/Thumb';
 import {
   acreage,
@@ -20,12 +19,13 @@ import {
   LINE,
   RECTANGLE,
 } from '../../const/mark';
+import {getUnitNumber} from '../../util';
 
 /**
  * 通用方法类
  * @class
  */
-export class ViewerCommon extends EventEmitter {
+export class ViewerCommon {
   /**
    * 构造函数
    * @param {Object} viewer
@@ -34,12 +34,13 @@ export class ViewerCommon extends EventEmitter {
    * @param {Object} options
    */
   constructor(viewer, canvas, cache, options) {
-    super();
+    const {mitt, ...rest} = options || {};
+    this.mitt = mitt;
     this.viewer = viewer;
     this.cache = cache;
     this.viewport = viewer.viewport;
     this.canvas = canvas;
-    this.options = options || {};
+    this.options = rest || {};
     this.thumb = new Thumb();
     this.thumb.setCanvas(canvas);
   }
@@ -254,8 +255,7 @@ export class ViewerCommon extends EventEmitter {
           top: p.y + distY * scale,
           angle: deg,
           texts: [
-            `长：${(Math.sqrt(w * w + h * h) * this.options.imageCapRes).toFixed(
-              2)}${this.options.unit}`],
+            `长：${this.getUnitNumber((Math.sqrt(w * w + h * h) * this.options.imageCapRes).toFixed(2))}`],
         };
       }
         break;
@@ -263,9 +263,9 @@ export class ViewerCommon extends EventEmitter {
         const w = Math.abs(endPoint.x - startPoint.x) / 2;
         const h = Math.abs(endPoint.y - startPoint.y) / 2;
         const pt = perimeter(ELLIPSE, startPoint, endPoint,
-          this.options.imageCapRes);
+          this.options.imageCapRes).toFixed(2);
         const ac = acreage(ELLIPSE, startPoint, endPoint,
-          this.options.imageCapRes);
+          this.options.imageCapRes).toFixed(2);
         const rightTop = getRectPoint(startPoint, endPoint)[2];
         const p = this.imageToViewerElementCoordinates(rightTop.x,
           rightTop.y);
@@ -274,12 +274,10 @@ export class ViewerCommon extends EventEmitter {
           top: p.y,
           angle: 0,
           texts: [
-            `长轴：${(w * this.options.imageCapRes).toFixed(
-              2)}${this.options.unit}`,
-            `短轴：${(h * this.options.imageCapRes).toFixed(
-              2)}${this.options.unit}`,
-            `周长：${(pt).toFixed(2)}${this.options.unit}`,
-            `面积：${(ac).toFixed(2)}${this.options.unit}²`],
+            `长轴：${this.getUnitNumber((w * this.options.imageCapRes).toFixed(2))}`,
+            `短轴：${this.getUnitNumber((h * this.options.imageCapRes).toFixed(2))}`,
+            `周长：${this.getUnitNumber(pt)}`,
+            `面积：${this.getUnitNumber(ac)}²`],
         };
       }
         break;
@@ -287,9 +285,9 @@ export class ViewerCommon extends EventEmitter {
         const w = Math.abs(endPoint.x - startPoint.x);
         const h = Math.abs(endPoint.y - startPoint.y);
         const pt = perimeter(RECTANGLE, startPoint, endPoint,
-          this.options.imageCapRes);
+          this.options.imageCapRes).toFixed(2);
         const ac = acreage(RECTANGLE, startPoint, endPoint,
-          this.options.imageCapRes);
+          this.options.imageCapRes).toFixed(2);
         const rightTop = getRectPoint(startPoint, endPoint)[2];
         const p = this.imageToViewerElementCoordinates(rightTop.x,
           rightTop.y);
@@ -298,12 +296,10 @@ export class ViewerCommon extends EventEmitter {
           top: p.y,
           angle: 0,
           texts: [
-            `长：${(w * this.options.imageCapRes).toFixed(
-              2)}${this.options.unit}`,
-            `宽：${(h * this.options.imageCapRes).toFixed(
-              2)}${this.options.unit}`,
-            `周长：${(pt).toFixed(2)}${this.options.unit}`,
-            `面积：${(ac).toFixed(2)}${this.options.unit}²`],
+            `长：${this.getUnitNumber((w * this.options.imageCapRes).toFixed(2))}`,
+            `宽：${this.getUnitNumber((h * this.options.imageCapRes).toFixed(2))}`,
+            `周长：${this.getUnitNumber(pt)}`,
+            `面积：${this.getUnitNumber(ac)}²`],
         };
       }
         break;
@@ -322,10 +318,9 @@ export class ViewerCommon extends EventEmitter {
           top: p.y,
           angle: 0,
           texts: [
-            `周长：${(pt * this.options.imageCapRes).toFixed(
-              2)}${this.options.unit}`,
-            `面积：${calculatePolygonArea(points,
-              this.options.imageCapRes).toFixed(2)}${this.options.unit}²`],
+            `周长：${this.getUnitNumber((pt * this.options.imageCapRes).toFixed(2))}`,
+            `面积：${this.getUnitNumber(calculatePolygonArea(points,
+              this.options.imageCapRes).toFixed(2))}²`],
         };
       }
         break;
@@ -348,6 +343,10 @@ export class ViewerCommon extends EventEmitter {
     };
   }
 
+  getUnitNumber(number) {
+    return getUnitNumber(number, this.options.units, this.options.binary);
+  }
+
   /**
    * 判断region是否在canvas中
    * @param {Object} region
@@ -419,6 +418,6 @@ export class ViewerCommon extends EventEmitter {
    * 销毁事件
    */
   destroy() {
-    this.$off();
+    this.mitt.$off();
   }
 }

package/src/components/graduation/index.js

@@ -1,4 +1,6 @@
 import {ViewerCommon} from '../common/common';
+import {EVENT_GRADUATION_CHANGE} from '../../const/event';
+import {getUnitNumber} from '../../util';
 
 /**
  * 刻度线
@@ -14,26 +16,24 @@ 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, 60, 100, 140, 200];
     this.microns = options.microns ||
-      [5000, 2000, 1250, 1000, 500, 250, 200, 100, 50, 25, 20, 10, 5, 2];
+      [5000, 2000, 1500, 1250, 1000, 800, 500, 400, 250, 200, 150, 125, 100, 80, 60, 40, 20, 10, 8, 5];
   }
 
   /**
    * 倍率大小改变
    */
   change() {
-    const scales = [...this.scales];
-    const zoom = this.viewport.viewportToImageZoom(
-      this.viewport.getZoom(true)) * 40;
-    const index = scales.findIndex((scale) => scale >= zoom);
+    const microns = this.microns;
+    const rect = this.viewerElementToImageRectangle({x: 0, y: 0, width: 50, height: 50});
+    const max = rect.height * this.options.imageCapRes;
+    const index = this.microns.findIndex((i) => i <= max);
     if (!~index) {
-      this.setScaleLine(this.microns[this.microns.length - 1],
-        this.microns[this.microns.length - 1] / this.options.imageCapRes);
+      this.setScaleLine(microns[microns.length - 1],
+        microns[microns.length - 1] / this.options.imageCapRes);
     } else {
-      this.setScaleLine(this.microns[index],
-        this.microns[index] / this.options.imageCapRes);
+      this.setScaleLine(microns[index],
+        microns[index] / this.options.imageCapRes);
     }
   }
 
@@ -46,8 +46,9 @@ export class Graduation extends ViewerCommon {
     const startPoint = this.imageToViewerElementCoordinates(0, 0);
     const endPoint = this.imageToViewerElementCoordinates(px, 0);
     const width = Math.abs(endPoint.x - startPoint.x);
+    console.log(width, txt);
     if (this.options.custom) {
-      this.$emit('graduation-change', {width, txt});
+      this.mitt.$emit(EVENT_GRADUATION_CHANGE, {width, txt});
     } else {
       this.paintGraduation({width, txt});
     }
@@ -78,16 +79,39 @@ export class Graduation extends ViewerCommon {
     ctx.beginPath();
     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 - 8);
-    ctx.stroke();
-    ctx.beginPath();
     ctx.fillStyle = '#000000';
-    ctx.font = 'bold 16px Arial';
-    const t = txt.toFixed(0) + this.options.unit;
+    ctx.font = 'bold 14px Arial';
+    const tick = this.options.tick || {
+      height: 8,
+      number: 5,
+    };
+    const unitIndex = this.getUnitIndex(txt * tick.number, this.options.units, this.options.binary);
+    const t = getUnitNumber(txt * tick.number, this.options.units, this.options.binary, unitIndex);
     const fontWidth = ctx.measureText(t).width;
-    ctx.fillText(t, x + lineWidth / 2 - fontWidth / 2, top ? y + 12 : y - 12);
+    ctx.fillText(t, x + lineWidth * tick.number - fontWidth / 2, y + 20);
+    new Array(tick.number).fill(1).forEach((i, index) => {
+      ctx.moveTo(x + lineWidth * index, y - tick.height);
+      ctx.lineTo(x + lineWidth * index, y);
+      ctx.lineTo(x + lineWidth * (index + 1), y);
+      ctx.lineTo(x + lineWidth * (index + 1), y - tick.height);
+      const t = getUnitNumber(txt * index, this.options.units, this.options.binary, unitIndex).
+        replace(this.options.units[unitIndex], '');
+      const fontWidth = ctx.measureText(t).width;
+      ctx.fillText(t, x + lineWidth * index - fontWidth / 2, y + 20);
+    });
+    ctx.stroke();
+  }
+
+  getUnitIndex(number, units, binary) {
+    let i = number;
+    let index = 0;
+    while (i >= binary) {
+      i = i / binary;
+      index++;
+    }
+    if (!units[index]) {
+      index = units.length - 1;
+    }
+    return index;
   }
 }