kfb-view 2.1.20 → 2.2.2

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();
-    }
   }
 
   /**
@@ -57,31 +51,26 @@ export class Shape extends ViewerCommon {
    */
   change() {
     this.clearCanvas();
+    const bounds = this.viewport.getBounds();
     // 区域标注列表
     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 ((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,43 @@ export class Shape extends ViewerCommon {
         parent.child.push(item);
       }
     });
+    if (this.delaytimer) {
+      clearTimeout(this.delaytimer);
+      this.delaytimer = undefined;
+    }
+    this.deepDrawLabel(sameFixWidthLabel, sameNormalLabel, 1, bounds);
+    regionLabelList.forEach((item) => {
+      if (!this.isInCanvas(item.region, bounds)) return false;
+      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, bounds) {
+    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 {
+          if (!this.isInCanvas(item.region, bounds)) return false;
+          this.drawLabel(item);
+        }
+        currentDrawCount++;
       });
       const firstLabel = labels?.[0];
       if (firstLabel?.fillStyle) {
@@ -120,35 +141,38 @@ 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 {
+          if (!this.isInCanvas(item.region, bounds)) return false;
+          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,
+          bounds);
+      }, 100);
+    }
   }
 
   drawLabel(item) {

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);
@@ -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,

package/src/view.js

@@ -6,7 +6,7 @@ import {pointsToRegion} from './util/calculate';
 import * as COMPONENTS from './const/component';
 import * as EVENTS from './const/event';
 import * as Components from './components';
-import {MARKS} from './const/mark';
+import {MARKS, POLYGON} from './const/mark';
 import {LabelModel} from './model/label.model';
 
 /**
@@ -27,19 +27,25 @@ 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 单位
    * @param {Object} config.area 交互区域,触发点击、拖动等事件
    * @param {boolean=} config.area.disabled 是否禁用area
    * @param {boolean=} config.area.drag 是否允许拖动
-   * @param {boolean=} config.area.thumb 选中区域时是否显示标注点
-   * @param {boolean=} config.area.thumbRadius 选中区域标注点的半径
-   * @param {boolean=} config.area.thumbColor 选中区域标注点的颜色
+   * @param {Object} config.thumb 选中区域时标注点配置
+   * @param {boolean=} config.thumb.show 选中区域时是否标注点
+   * @param {number=} config.thumb.radius 选中区域标注点的半径
+   * @param {String=} config.thumb.color 选中区域标注点的颜色
+   * @param {String=} config.thumb.bgColor 选中区域标注点的背景颜色
+   * @param {number=} config.thumb.activeRadius 标注点激活状态下的半径
+   * @param {boolean=} config.thumb.activeColor 标注点激活状态下颜色
+   * @param {boolean=} config.thumb.activeBgColor 标注点激活状态下背景颜色
    * @param {Object} config.rotation 旋转图像参数
    * @param {boolean=} config.rotation.disabled 是否禁用旋转
    * @param {Object} config.tailoring 裁剪图像参数
@@ -254,7 +260,18 @@ function initComponentsOptions(kv, type) {
     viewer: kv.viewer,
     cache: kv.cache,
     canvas: createCanvas(kv),
-    options: {...config[type], ...pxConversion},
+    options: {
+      ...config[type], ...pxConversion, thumb: config.thumb ? {
+        radius: 5,
+        activeRadius: 7,
+        activeBgColor: '#01d0b0',
+        ...config.thumb,
+      } : {
+        radius: 5,
+        activeRadius: 7,
+        activeBgColor: '#01d0b0',
+      },
+    },
   };
 }
 
@@ -287,8 +304,7 @@ function initEvent(kv) {
       e.preventDefaultAction = true;
       kv.tailoring.onCanvasDrag(e.position);
     } else if (kv.area?.movePoint) {
-      e.preventDefaultAction = true;
-      kv.area.onCanvasDrag(e.position);
+      kv.area.onCanvasDrag(e.position, e);
       kv.change();
     }
   });
@@ -308,12 +324,17 @@ function initEvent(kv) {
     e.preventDefaultAction = true;
     const {originalEvent} = e;
     handlerCacheEvent(originalEvent, kv);
-    handlerLabelEvent(originalEvent, kv);
-    kv.area?.onCanvasKey?.(e);
-    kv.shape?.onCanvasKey?.(e);
-    kv.board?.onCanvasKey?.(e);
-    kv.tailoring?.onCanvasKey?.(e);
-    kv.rotation?.onCanvasKey?.(e);
+    if (kv.board?.isInDraw) {
+      kv.board?.onCanvasKey?.(e);
+    } else if (kv.rotation?.isInRotation) {
+      kv.rotation?.onCanvasKey?.(e);
+    } else if (kv.tailoring?.isInTailoring) {
+      kv.tailoring?.onCanvasKey?.(e);
+    } else {
+      handlerLabelEvent(originalEvent, kv);
+      kv.area?.change?.(e);
+      kv.shape?.change?.(e);
+    }
   }, 100));
 
   kv.viewer.addHandler('canvas-double-click', (e) => {
@@ -391,17 +412,36 @@ function handlerCacheEvent(e, kv) {
 }
 
 function handlerLabelEvent(e, kv) {
+  const index = kv.labelList.findIndex((item) => item.select);
+  const label = kv.labelList[index];
   if (e.key === 'h') {
-    const label = kv.labelList.find((label) => label.select);
     if (!label) return;
     label.show = false;
     kv.$emit(EVENTS.EVENT_HIDDEN_LABEL, label);
-  }
-  if (e.key === 'Delete' || e.key === 'Backspace') {
-    const index = kv.labelList.findIndex((label) => label.select);
-    if (!~index) return;
-    kv.$emit(EVENTS.EVENT_DELETE_LABEL, kv.labelList[index]);
-    kv.labelList.splice(index, 1);
+  } else if (e.key === 'Delete' || e.key === 'Backspace') {
+    if (!label) return;
+    if (kv.area?.movePoint?.label?.tool === POLYGON) {
+      const movePoint = kv.area.movePoint;
+      movePoint.label.points.splice(movePoint.position, 1);
+      if (movePoint.label.points.length === 0) {
+        kv.$emit(EVENTS.EVENT_DELETE_LABEL, label);
+        kv.labelList.splice(index, 1);
+      } else {
+        kv.$emit(EVENTS.EVENT_DELETE_POLYGON_POINT, movePoint.label);
+      }
+      kv.area.movePoint = undefined;
+    } else {
+      kv.$emit(EVENTS.EVENT_DELETE_LABEL, label);
+      kv.labelList.splice(index, 1);
+    }
+  } else if (e.key === 'Escape') {
+    if (label) {
+      kv.$emit(EVENTS.EVENT_CANCEL_SELECT_LABEL, label);
+    }
+    kv.labelList.forEach((item) => {
+      item.select = false;
+      item.show = true;
+    });
   }
 }