kfb-view 2.1.20 → 2.2.2

package/package.json

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

package/src/components/area/index.js

@@ -12,9 +12,10 @@ import {
   baseNumber, getAngle, getDistance, getPoint,
   getRectPoint,
   isPointInMatrix,
-  pointInOtherPoint, isPointInPolygon, pointsToRegion,
+  pointInOtherPoint, isPointInPolygon, pointsToRegion, isPointInLine,
 } from '../../util/calculate';
 import {
+  EVENT_ADD_POLYGON_POINT,
   EVENT_AREA_MOVE_END,
   EVENT_AREA_MOVE_START, EVENT_AREA_MOVING, EVENT_CANCEL_SELECT_LABEL,
   EVENT_DB_CLICK_LABEL,
@@ -48,12 +49,19 @@ export class Area extends ViewerCommon {
   /**
    * 画点
    * @param {Object} point
-   * @param {Object=} config 参数，参见thumb
+   * @param {Boolean=} active 是否是激活状态
    */
-  drawPoint(point, config) {
+  drawPoint(point, active) {
     this.thumb.draw(point, {
-      ...config,
-      strokeStyle: this.options.thumbColor,
+      radius: !active ?
+        this.options.thumb.radius :
+        this.options.thumb.activeRadius,
+      strokeStyle: !active ?
+        this.options.thumb.color :
+        this.options.thumb.activeColor,
+      fillStyle: !active ?
+        this.options.thumb.bgColor :
+        this.options.thumb.activeBgColor,
     });
   }
 
@@ -214,7 +222,31 @@ export class Area extends ViewerCommon {
   onCanvasDblClick({x, y}) {
     setTimeout(() => {
       const label = this.labelList.find((item) => item.select);
-      this.$emit(EVENT_DB_CLICK_LABEL, label);
+      if (label?.tool === POLYGON) {
+        const points = this.imageToViewerElementPoints(label.points);
+        let index = -1;
+        for (let i = 0, l = points.length, j = l - 1; i < l; j = i, i++) {
+          const s = points[i];
+          const t = points[j];
+          if (isPointInLine({x, y}, [s, t])) {
+            index = i;
+            break;
+          }
+        }
+        if (index > -1) {
+          const p = this.viewerElementToImageCoordinates(x, y);
+          label.points.splice(index, 0, {
+            ...p,
+            canMove: true,
+          });
+          this.$emit(EVENT_ADD_POLYGON_POINT, label);
+          this.change();
+        } else {
+          this.$emit(EVENT_DB_CLICK_LABEL, label);
+        }
+      } else {
+        this.$emit(EVENT_DB_CLICK_LABEL, label);
+      }
     });
   }
 
@@ -237,11 +269,12 @@ export class Area extends ViewerCommon {
 
   /**
    * 监听鼠标拖动事件
+   * @param {Object} position
+   * @param {number} position.x
+   * @param {number} position.y
    * @param {Object} e
-   * @param {number} e.x
-   * @param {number} e.y
    */
-  onCanvasDrag({x, y}) {
+  onCanvasDrag({x, y}, e) {
     if (this.options.drag === false) return;
     if (!this.lastPoint) this.lastPoint = {x, y};
     const label = this.movePoint.label;
@@ -251,6 +284,7 @@ export class Area extends ViewerCommon {
     if (!isMove && !isResize) return;
     if (position === 4 && !isMove) return;
     if (position !== 4 && !isResize) return;
+    e.preventDefaultAction = true;
     const scale = this.getImageZoom(true) / label.scale;
     const tool = label.tool;
     const region = label.region;
@@ -428,54 +462,42 @@ export class Area extends ViewerCommon {
     this.lastPoint = {x, y};
   }
 
-  /**
-   * 监听鼠标按钮事件
-   * @param {Object} e
-   */
-  onCanvasKey(e) {
-    const {originalEvent} = e;
-    const label = this.labelList.find((item) => item.select);
-    if (originalEvent.code === 'Escape' && label) {
-      this.$emit(EVENT_CANCEL_SELECT_LABEL, label);
-      this.change();
-    }
-  }
-
   /**
    * 绘制点
    * @param {Object} points
    * @param {string}  type
    */
-  drawThumbPoint(points, type) {
-    if (this.options.thumb === false) {
+  drawThumbPoints(points, type) {
+    if (this.options.thumb.show === false) {
       return;
     }
-    const thumbRadius = this.options.thumbRadius ?? 5;
+    const position = this.movePoint?.position;
     if (LINE_TYPES.includes(type)) {
-      this.drawPoint(points[0], {thumbRadius});
+      this.drawPoint(points[0], position === 1);
       this.drawPoint({
         x: (points[0].x + points[1].x) / 2,
         y: (points[0].y + points[1].y) / 2,
-      }, {thumbRadius: thumbRadius + 2});
-      this.drawPoint(points[1], {thumbRadius});
+      }, position === 4);
+      this.drawPoint(points[1], position === 7);
     } else if (REGION_TYPES.includes(type)) {
-      getRectPoint(points[0], points[1]).forEach((point) => {
-        this.drawPoint(point, {thumbRadius});
+      getRectPoint(points[0], points[1]).forEach((point, i) => {
+        this.drawPoint(point, position === i);
       });
     } else if (type === POLYGON) {
-      points.forEach((point) => {
+      points.forEach((point, i) => {
         if (point.canMove) {
-          this.drawPoint(point, {thumbRadius});
+          this.drawPoint(point, position === i);
         }
       });
     } else if (type === FONT || type === DOT) {
-      this.drawPoint(points[0], {thumbRadius});
+      this.drawPoint(points[0], position === 4);
     } else if (type === STAR || type === FLAG) {
       getRectPoint(points[0], points[1]).
-        filter((item, index) => index === 0 || index === 2 || index === 4 ||
-          index === 6 || index === 8).
-        forEach((point) => {
-          this.drawPoint(point, {thumbRadius});
+        forEach((point, index) => {
+          if (index === 0 || index === 2 || index === 4 ||
+            index === 6 || index === 8) {
+            this.drawPoint(point, position === index);
+          }
         });
     }
   }
@@ -496,17 +518,17 @@ export class Area extends ViewerCommon {
         region.x + region.width, region.y + region.height);
     const scale = this.getImageZoom(true) / label.scale;
     if (!NO_NORMAL_REGION_TYPES.includes(label.tool)) {
-      this.drawThumbPoint([startPoint, endPoint], label.tool);
+      this.drawThumbPoints([startPoint, endPoint], label.tool);
     } else if (label.tool === FONT) {
       const fontWidth = this.getFontWidth(label.text, label.fontSize);
       const pt = getPoint(startPoint, {
         x: startPoint.x + fontWidth / 2 * scale,
         y: startPoint.y - label.fontSize / 2 * scale + 4,
       }, label.angle);
-      this.drawThumbPoint([pt], label.tool);
+      this.drawThumbPoints([pt], label.tool);
     } else if (label.tool === STAR) {
       const dist = label.lineWidth * scale;
-      this.drawThumbPoint([
+      this.drawThumbPoints([
         {
           x: startPoint.x - dist,
           y: startPoint.y - dist,
@@ -515,14 +537,14 @@ export class Area extends ViewerCommon {
           y: startPoint.y + dist,
         }], label.tool);
     } else if (label.tool === DOT) {
-      this.drawThumbPoint([
+      this.drawThumbPoints([
         {
           x: startPoint.x,
           y: startPoint.y,
         }], label.tool);
     } else if (label.tool === FLAG) {
       const dist = label.lineWidth * scale;
-      this.drawThumbPoint([
+      this.drawThumbPoints([
         {
           x: startPoint.x,
           y: startPoint.y - dist,
@@ -533,10 +555,10 @@ export class Area extends ViewerCommon {
     } else if (label.tool === POLYGON) {
       if (this.draging) {
         const points = this.imageToViewerElementPoints(label.points);
-        this.drawThumbPoint(points, label.tool);
+        this.drawThumbPoints(points, label.tool);
       } else {
         const points = this.setPointsMove(label);
-        this.drawThumbPoint(points, label.tool);
+        this.drawThumbPoints(points, label.tool);
       }
     }
     this[label.tool].setContent(this.canvas, {...label});

package/src/components/board/index.js

@@ -149,7 +149,11 @@ export class Board extends ViewerCommon {
     this[tool].draw(points);
     this[tool].endDraw();
     if (tool === POLYGON) {
-      this[tool].drawPoints(points);
+      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());
   }
@@ -182,7 +186,11 @@ export class Board extends ViewerCommon {
     this[tool].draw(points);
     this[tool].endDraw();
     if (tool === POLYGON) {
-      this[tool].drawPoints(points);
+      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());
   }
@@ -298,7 +306,11 @@ export class Board extends ViewerCommon {
       this[tool].draw(points);
       this[tool].endDraw();
       if (tool === POLYGON) {
-        this[tool].drawPoints(points);
+        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());
     }
@@ -309,18 +321,16 @@ export class Board extends ViewerCommon {
    * @param {Object} e
    */
   onCanvasKey(e) {
-    if (this.isInDraw) {
-      const {originalEvent} = e;
-      if (originalEvent.code === 'Escape') {
-        this.endDraw();
-      }
-      if (originalEvent.code === 'Delete' || originalEvent.key ===
-        'Backspace') {
-        // 曲线绘制中，按删除键，删除上一个标注点
-        if (this.tool === POLYGON && this.points.length > 1) {
-          this.points.splice(this.points.length - 2, 1);
-          this.change();
-        }
+    const {originalEvent} = e;
+    if (originalEvent.key === 'Escape') {
+      this.endDraw();
+    }
+    if (originalEvent.key === 'Delete' || originalEvent.key ===
+      'Backspace') {
+      // 曲线绘制中，按删除键，删除上一个标注点
+      if (this.tool === POLYGON && this.points.length > 1) {
+        this.points.splice(this.points.length - 2, 1);
+        this.change();
       }
     }
   }
@@ -345,8 +355,7 @@ export class Board extends ViewerCommon {
       const lastTwoPoint = this.points[this.points.length - 2];
       if (pointInOtherPoint(
         this.imageToViewerElementCoordinates(lastPoint.x, lastPoint.y),
-        this.imageToViewerElementCoordinates(lastTwoPoint.x, lastTwoPoint.y),
-        30)) {
+        this.imageToViewerElementCoordinates(lastTwoPoint.x, lastTwoPoint.y))) {
         this.points.splice(this.points.length - 2, 1);
       }
     }
@@ -414,7 +423,11 @@ export class Board extends ViewerCommon {
     this[this.tool].draw(points);
     this[this.tool].endDraw();
     if (this.tool === POLYGON) {
-      this[this.tool].drawPoints(points);
+      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

@@ -387,30 +387,20 @@ export class ViewerCommon extends EventEmitter {
   /**
    * 判断region是否在canvas中
    * @param {Object} region
-   * @param {boolean} status
+   * @param {Object} bounds
    * @return {boolean}
    */
-  isInCanvas(region, status = false) {
-    const startPoint = status ?
-      {x: region.x, y: region.y} :
-      this.imageToViewerElementCoordinates(region.x, region.y);
-    const endPoint = status ?
-      {x: region.x + region.width, y: region.y + region.height} :
-      this.imageToViewerElementCoordinates(
-        region.x + region.width, region.y + region.height);
-    if (endPoint.x < startPoint.x) {
-      const x = startPoint.x;
-      startPoint.x = endPoint.x;
-      endPoint.x = x;
-    }
-    if (endPoint.y < startPoint.y) {
-      const y = startPoint.y;
-      startPoint.y = endPoint.y;
-      endPoint.y = y;
-    }
-    return !(startPoint.x > this.canvas.width ||
-      startPoint.y > this.canvas.height ||
-      endPoint.x < 0 || endPoint.y < 0);
+  isInCanvas(region, bounds) {
+    const viewReact = this.viewport.imageToViewportRectangle(region.x, region.y,
+      region.width, region.height);
+    const startPoint = {x: viewReact.x, y: viewReact.y};
+    const endPoint = {
+      x: viewReact.x + viewReact.width,
+      y: viewReact.y + viewReact.height,
+    };
+    return !(startPoint.x > (bounds.x + bounds.width) || startPoint.y >
+      (bounds.y + bounds.height) || endPoint.x < bounds.x || endPoint.y <
+      bounds.y);
   }
 
   getFontWidth(text, size) {

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/rotation/index.js

@@ -91,7 +91,7 @@ class Rotation extends ViewerCommon {
       this.drawPoint({
         x: point.x,
         y: point.y,
-      }, {thumbRadius: 5});
+      }, {radius: 5});
     });
   }
 
@@ -151,12 +151,10 @@ class Rotation extends ViewerCommon {
    * @param {Object} e
    */
   onCanvasKey(e) {
-    if (this.isInRotation) {
-      const {originalEvent} = e;
-      if (originalEvent.code === 'Escape') {
-        this.viewport.setRotation(0);
-        this.stopRotation();
-      }
+    const {originalEvent} = e;
+    if (originalEvent.key === 'Escape') {
+      this.viewport.setRotation(0);
+      this.stopRotation();
     }
   }