kfb-view 3.2.0 → 3.2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kfb-view",
   "description": "一个在线kfb的阅片软件",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "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);
     }
   }
 
@@ -47,6 +46,7 @@ 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.mitt.$emit(EVENT_GRADUATION_CHANGE, {width, txt});
     } else {
@@ -79,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;
   }
 }

package/src/util/index.js

@@ -64,9 +64,23 @@ function delayedTrigger(callback, time = 1000) {
   };
 }
 
+function getUnitNumber(number, units, binary, index = 0) {
+  let i = number;
+  while (i >= binary) {
+    i = i / binary;
+    index++;
+  }
+  if (!units[index]) {
+    index = units.length - 1;
+  }
+  return (number / Math.pow(binary, index)).toFixed(2) / 1 + units[index];
+}
+
+
 export {
   $,
   dataType,
   deepClone,
   delayedTrigger,
+  getUnitNumber,
 };

package/src/view.js

@@ -35,7 +35,9 @@ export default class KfbView extends EventEmitter {
    * @param {number[]=} config.navigator.vestige.zooms 浏览痕迹触发倍率
    * @param {Object} config.pxConversion 像素转换参数
    * @param {number} config.pxConversion.imageCapRes 像素转换倍率
+   * @param {string[]=} config.pxConversion.units 单位组
    * @param {string} config.pxConversion.unit 单位
+   * @param {number} config.pxConversion.binary 几进制, 2, 16, 24, 1000
    * @param {Object} config.area 交互区域,触发点击、拖动等事件
    * @param {boolean=} config.area.disabled 是否禁用area
    * @param {boolean=} config.area.drag 是否允许拖动
@@ -63,7 +65,9 @@ export default class KfbView extends EventEmitter {
    * @param {boolean=} config.graduation.disabled 是否禁用刻度
    * @param {boolean=} config.graduation.show 是否显刻度
    * @param {boolean=} config.graduation.custom 是否自定义刻度,抛出graduation-change事件
-   * @param {array=} config.graduation.scales 倍率数组
+   * @param {Object} config.graduation.tick 刻度线参数
+   * @param {number=} config.graduation.tick.height 刻度线高度
+   * @param {number=} config.graduation.tick.number 刻度线段落
    * @param {array=} config.graduation.microns 刻度长度数组，在对应倍率范围内显示的刻度长度
    * @param {boolean=} config.grid.disabled 是否禁用网格线
    * @param {boolean=} config.grid.show 是否显示网格线
@@ -285,7 +289,7 @@ function createCanvas(kv) {
 
 function initComponentsOptions(kv, type) {
   const config = kv.$options;
-  const pxConversion = config.pxConversion || {imageCapRes: 1, unit: ''};
+  const pxConversion = config.pxConversion || {imageCapRes: 1, units: []};
   return {
     kv,
     viewer: kv.viewer,
@@ -306,6 +310,7 @@ function initComponentsOptions(kv, type) {
       },
       ...config[type],
       ...pxConversion,
+      units: pxConversion.units ?? [pxConversion.unit ?? ''], // 兼容之前只显示一个的单位
       thumb: config.thumb ? {
         radius: 5,
         activeRadius: 7,