kfb-view 3.2.0 → 3.2.2

package/lib/kfb-view.js.LICENSE.txt

@@ -1,9 +1,9 @@
-//! Built on 2023-05-25
+//! Built on 2024-04-01
 
-//! Git commit: v4.1.0-0-8849681
+//! Git commit: v4.1.1-1-f90d9814
 
 //! License: http://openseadragon.github.io/license/
 
 //! http://openseadragon.github.io
 
-//! openseadragon 4.1.0
+//! openseadragon 4.1.1

package/package.json

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

package/src/components/common/common.js

@@ -19,6 +19,7 @@ import {
   LINE,
   RECTANGLE,
 } from '../../const/mark';
+import {getUnitNumber} from '../../util';
 
 /**
  * 通用方法类
@@ -254,8 +255,7 @@ export class ViewerCommon {
           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 {
         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 {
           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 {
         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 {
           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 {
           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 {
     };
   }
 
+  getUnitNumber(number) {
+    return getUnitNumber(number, this.options.units, this.options.binary);
+  }
+
   /**
    * 判断region是否在canvas中
    * @param {Object} region

package/src/components/graduation/index.js

@@ -1,5 +1,6 @@
 import {ViewerCommon} from '../common/common';
 import {EVENT_GRADUATION_CHANGE} from '../../const/event';
+import {getUnitNumber} from '../../util';
 
 /**
  * 刻度线
@@ -15,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);
     }
   }
 
@@ -79,16 +78,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;
   }
 }