kfb-view 2.1.20 → 2.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kfb-view",
   "description": "一个在线kfb的阅片软件",
-  "version": "2.1.20",
+  "version": "2.2.0",
   "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/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();
     }
   }
 

package/src/components/shape/index.js

@@ -5,6 +5,8 @@ import {
 import {ViewerCommon} from '../common/common';
 import * as Tools from '../../tool';
 import {Combination} from '../../tool/Combination';
+import {EVENT_CANCEL_SELECT_LABEL} from '../../const/event';
+import * as EVENTS from '../../const/event';
 
 /**
  * 用来显示标注线的canvas
@@ -25,6 +27,7 @@ export class Shape extends ViewerCommon {
       this[mark] = new Tools[mark];
     });
     this.combination = new Combination();
+    this.delaytimer = [];
   }
 
   /**
@@ -32,15 +35,6 @@ export class Shape extends ViewerCommon {
    * @param {Object} e
    */
   onCanvasKey(e) {
-    const {originalEvent} = e;
-    e.preventDefaultAction = true;
-    if (originalEvent.code === 'Escape') {
-      this.labelList.forEach((item) => {
-        item.select = false;
-        item.show = true;
-      });
-      this.change();
-    }
   }
 
   /**
@@ -59,29 +53,24 @@ export class Shape extends ViewerCommon {
     this.clearCanvas();
     // 区域标注列表
     const regionLabelList = [];
-    this.labelList.forEach(
-      (item) => {
-        if (REGION_TYPES.includes(item.tool) || item.isClose && item.tool ===
-          POLYGON) {
-          regionLabelList.push({
-            ...item,
-            child: [],
-            self: item,
-          });
-        }
-      });
+    const labelList = this.labelList.filter((item) => {
+      if (item.show === false) return false;
+      if (!this[item.tool]) return false;
+      if (!this.isInCanvas(item.region)) return false;
+      if (REGION_TYPES.includes(item.tool) || item.isClose && item.tool ===
+        POLYGON && item.fillStyle) {
+        regionLabelList.push({
+          ...item,
+          child: [],
+          self: item,
+        });
+      }
+      return true;
+    });
     // strokeStyle, lineWidth, fillStyle 相同认为是一个路径下的图形，一起绘制，优化性能
     const sameFixWidthLabel = {}; // star, flag, star, font lineWidth固定为2
     const sameNormalLabel = {};
-    this.labelList.forEach((item) => {
-      if (item.show === false) return;
-      if (!this[item.tool]) return;
-      if (!this.isInCanvas(item.region)) return;
-      /* const point = this.imageToViewerElementCoordinates(item.points[0].x,
-        item.points[0].y);
-      if ((point.x > this.canvas.width ||
-        point.y > this.canvas.height ||
-        point.x < 0 || point.y < 0)) return;*/
+    labelList.forEach((item) => {
       const key = `${item.strokeStyle ?? ''}_${item.lineWidth ??
       ''}_${item.fillStyle ?? ''}`;
       const regionKey = `${item.strokeStyle ?? ''}_${item.lineWidth ?? ''}`;
@@ -106,11 +95,41 @@ export class Shape extends ViewerCommon {
         parent.child.push(item);
       }
     });
+    if (this.delaytimer) {
+      clearTimeout(this.delaytimer);
+      this.delaytimer = undefined;
+    }
+    this.deepDrawLabel(sameFixWidthLabel, sameNormalLabel, 1);
+    regionLabelList.forEach((item) => {
+      this.combination.setContent(this.canvas, item);
+      this.combination.draw({
+        points: this.imageToViewerElementPoints(item.points),
+        tool: item.tool,
+      }, item.child.map(({points, tool}) => ({
+        points: this.imageToViewerElementPoints(points),
+        tool,
+      })), this.viewport.getRotation());
+    });
+  }
+
+  deepDrawLabel(sameFixWidthLabel, sameNormalLabel, count) {
+    let currentDrawCount = 0; // 当前已绘制数量
     const ctx = this.canvas.getContext('2d');
-    Object.values(sameFixWidthLabel).forEach((labels) => {
+    const remainFixLabel = {};
+    Object.keys(sameFixWidthLabel).forEach((key) => {
+      const labels = sameFixWidthLabel[key];
       ctx.beginPath();
       labels.forEach((item) => {
-        this.drawLabel(item);
+        if (currentDrawCount >= 5000) { // 一次最多绘制5000个标注，多余标注延迟绘制
+          if (remainFixLabel[key]) {
+            remainFixLabel[key].push(item);
+          } else {
+            remainFixLabel[key] = [item];
+          }
+        } else {
+          this.drawLabel(item);
+        }
+        currentDrawCount++;
       });
       const firstLabel = labels?.[0];
       if (firstLabel?.fillStyle) {
@@ -120,35 +139,36 @@ export class Shape extends ViewerCommon {
       ctx.strokeStyle = firstLabel.strokeStyle;
       ctx.stroke();
     });
-    Object.values(sameNormalLabel).forEach((labels) => {
+    const remainNormalLabel = {};
+    Object.keys(sameNormalLabel).forEach((key) => {
+      const labels = sameNormalLabel[key];
       ctx.beginPath();
       labels.forEach((item) => {
-        this.drawLabel(item);
+        if (currentDrawCount >= 5000) { // 一次最多绘制5000个标注，多余标注延迟绘制
+          if (remainNormalLabel[key]) {
+            remainNormalLabel[key].push(item);
+          } else {
+            remainNormalLabel[key] = [item];
+          }
+        } else {
+          this.drawLabel(item);
+        }
+        currentDrawCount++;
       });
       const firstLabel = labels?.[0];
       ctx.lineWidth = firstLabel.lineWidth;
       ctx.strokeStyle = firstLabel.strokeStyle;
       ctx.stroke();
     });
-
-    regionLabelList.forEach((item) => {
-      if (item.show === false) return;
-      if (!this[item.tool]) return;
-      if (!this.isInCanvas(item.region)) return;
-      /*  const point = this.imageToViewerElementCoordinates(item.points[0].x,
-          item.points[0].y);
-        if ((point.x > this.canvas.width ||
-          point.y > this.canvas.height ||
-          point.x < 0 || point.y < 0)) return;*/
-      this.combination.setContent(this.canvas, item);
-      this.combination.draw({
-        points: this.imageToViewerElementPoints(item.points),
-        tool: item.tool,
-      }, item.child.map(({points, tool}) => ({
-        points: this.imageToViewerElementPoints(points),
-        tool,
-      })), this.viewport.getRotation());
-    });
+    if (Object.keys(remainFixLabel).length === 0 &&
+      Object.keys(remainNormalLabel).length === 0) {
+      console.log(`end deep draw label, draw count: ${count}`);
+      this.delaytimer = undefined;
+    } else {
+      this.delaytimer = setTimeout(() => {
+        this.deepDrawLabel(remainFixLabel, remainNormalLabel, count + 1);
+      }, 100);
+    }
   }
 
   drawLabel(item) {

package/src/components/tailoring/index.js

@@ -219,11 +219,9 @@ export class Tailoring extends ViewerCommon {
    * @param {Object} e
    */
   onCanvasKey(e) {
-    if (this.isInTailoring) {
-      const {originalEvent} = e;
-      if (originalEvent.code === 'Escape') {
-        this.stopTailoring();
-      }
+    const {originalEvent} = e;
+    if (originalEvent.key === 'Escape') {
+      this.stopTailoring();
     }
   }
 

package/src/const/event.js

@@ -1,3 +1,4 @@
+
 export const EVENT_START_PAINTING = 'start-painting';
 export const EVENT_IN_PAINTING = 'in-painting';
 export const EVENT_END_PAINTING = 'end-painting';
@@ -13,4 +14,6 @@ export const EVENT_CACHE_BACK = 'cache-back';
 export const EVENT_CACHE_FORWARD = 'cache-forward';
 export const EVENT_HIDDEN_LABEL = 'hidden-label';
 export const EVENT_DELETE_LABEL = 'delete-label';
+export const EVENT_DELETE_POLYGON_POINT = 'delete-polygon-point';
+export const EVENT_ADD_POLYGON_POINT = 'add-polygon-point';
 export const EVENT_NAVIGATOR_VESTIGE = 'navigator-vestige';

package/src/tool/Brush.js

@@ -42,7 +42,7 @@ class Brush {
    * @param {Object} point
    * @param {Object} config 参数，参见thumb
    */
-  drawPoint(point, config) {
+  drawThumb(point, config) {
     this.thumb.draw(point, config);
   }
 

package/src/tool/Combination.js

@@ -74,6 +74,7 @@ class Combination extends Brush {
         ctx.drawOval(0, 0, Math.abs(region.width / 2),
           Math.abs(region.height / 2), true);
       }
+      ctx.closePath();
       ctx.restore();
     });
     if (this.options.fillStyle) {

package/src/tool/Polygon.js

@@ -28,12 +28,9 @@ class Polygon extends Brush {
     }
   }
 
-  drawPoints(points) {
+  drawPoints(points, config) {
     points.forEach((point) => {
-      this.thumb.draw(point, {
-        thumbRadius: this.options.thumbRadius ?? 5,
-        strokeStyle: this.options.thumbColor,
-      });
+      this.drawThumb(point, config);
     });
   }
 }

package/src/tool/Thumb.js

@@ -1,6 +1,6 @@
 const ThumbConfig = {
   lineWidth: 2,
-  thumbRadius: 5,
+  radius: 5,
   fillStyle: 'rgba(255, 255, 255, 1)',
   strokeStyle: '#01d0b0',
 };
@@ -51,7 +51,7 @@ class Thumb {
     config = this.getConfig(config);
     ctx.beginPath();
     ctx.lineWidth = config.lineWidth;
-    ctx.arc(x, y, config.thumbRadius, 0, Math.PI * 2, !1);
+    ctx.arc(x, y, config.radius, 0, Math.PI * 2, !1);
     ctx.fillStyle = config.fillStyle;
     ctx.fill();
     ctx.strokeStyle = config.strokeStyle;

package/src/util/calculate.js

@@ -132,9 +132,8 @@ function isPointInPolygon(p, poly) {
     if ((sy < py && ty >= py) || (sy >= py && ty < py)) {
       // 线段上与射线 Y 坐标相同的点的 X 坐标
       const x = sx + (py - sy) * (tx - sx) / (ty - sy);
-
-      // 点在多边形的边上
-      if (x === px) {
+      // 点在多边形的边上,8像素的偏差
+      if (Math.abs(x - px) < 10) {
         return true;
       }
 
@@ -149,6 +148,29 @@ function isPointInPolygon(p, poly) {
   return flag;
 }
 
+/**
+ * 判断一个点是否在一条线段上
+ * @param {Object}  p
+ * @param {Object[]} points
+ * @return {boolean}
+ */
+function isPointInLine(p, points) {
+  const startPoint = points[0];
+  const endPoint = points[1];
+  // 判断线段两端点是否在射线两侧
+  if ((startPoint.y < p.y && endPoint.y >= p.y) ||
+    (startPoint.y >= p.y && endPoint.y < p.y)) {
+    // 线段上与射线 Y 坐标相同的点的 X 坐标
+    const x = startPoint.x + (p.y - startPoint.y) *
+      (endPoint.x - startPoint.x) / (endPoint.y - startPoint.y);
+    // 点在多边形的边上,8像素的偏差
+    if (Math.abs(x - p.x) < 8) {
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
  * points转换成Region
  * @param {Object[]} points - 绘制的点
@@ -366,6 +388,7 @@ export {
   pointsToRegion,
   regionToPoint,
   isPointInPolygon,
+  isPointInLine,
   isNegNumber,
   baseNumber,
   acreage,