kfb-view 2.2.1 → 2.2.2

package/package.json

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

package/src/components/graduation/index.js

@@ -14,9 +14,10 @@ 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, 80, 100];
     this.microns = options.microns ||
-      [5000, 2000, 1250, 1000, 500, 250, 100, 50, 25, 10];
+      [5000, 2000, 1250, 1000, 500, 250, 200, 100, 50, 25, 10, 5];
     this.init();
   }
 
@@ -85,15 +86,16 @@ export class Graduation extends ViewerCommon {
       y = height - bottom;
     }
     ctx.beginPath();
-    ctx.strokeStyle = '#454545';
-    ctx.lineWidth = 2;
+    ctx.strokeStyle = '#000000';
+    ctx.lineWidth = 3;
     ctx.moveTo(x, y - 5);
     ctx.lineTo(x, y);
     ctx.lineTo(x + lineWidth, y);
     ctx.lineTo(x + lineWidth, y - 5);
     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);

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,19 @@ 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,
+        color: [...this.vestige.colors].reverse()[index],
       };
       this.pointList.push(rectObj);
       this.drawPointList(this.pointList);
@@ -96,7 +118,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 +130,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 +295,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 +323,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 +356,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 +363,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];

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

@@ -57,8 +57,8 @@ export class Shape extends ViewerCommon {
     const labelList = this.labelList.filter((item) => {
       if (item.show === false) return false;
       if (!this[item.tool]) 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: [],

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/view.js

@@ -27,10 +27,11 @@ export default class KfbView extends EventEmitter {
    * @param {string} config.navigator.width navigator宽度
    * @param {string} config.navigator.height navigator高度
    * @param {string} config.navigator.thumbnail 缩略图地址
-   * @param {boolean=} config.navigator.vestige 是否显示缩略图浏览痕迹
-   * @param {number=} config.navigator.vestigeDelay 浏览痕迹颜色时间
-   * @param {string=} config.navigator.vestigeColor 浏览痕迹颜色
-   * @param {number=} config.navigator.vestigeZoom 浏览痕迹触发倍率
+   * @param {Object} config.navigator.vestige 缩略图浏览痕迹配置
+   * @param {boolean=} config.navigator.vestige.show 是否显示缩略图浏览痕迹
+   * @param {number=} config.navigator.vestige.delay 浏览痕迹颜色时间
+   * @param {string[]=} config.navigator.vestige.colors 浏览痕迹颜色
+   * @param {number[]=} config.navigator.vestige.zooms 浏览痕迹触发倍率
    * @param {Object} config.pxConversion 像素转换参数
    * @param {number} config.pxConversion.imageCapRes 像素转换倍率
    * @param {string} config.pxConversion.unit 单位