kfb-view 2.1.19 → 2.2.1

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,35 +51,26 @@ export class Shape extends ViewerCommon {
    */
   change() {
     this.clearCanvas();
+    const bounds = this.viewport.getBounds();
     // 区域标注列表
     const regionLabelList = [];
-    const polygonLabelList = [];
-    this.labelList.forEach(
-      (item) => {
-        if (item.tool === POLYGON) {
-          polygonLabelList.push(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 ?? ''}`;
@@ -110,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) {
@@ -124,45 +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());
-    });
-
-    polygonLabelList.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);
-      this[item.tool].setContent(this.canvas, item);
-      this[item.tool].drawPoint(point);
-    });
+    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

@@ -220,8 +220,7 @@ export class Tailoring extends ViewerCommon {
    */
   onCanvasKey(e) {
     const {originalEvent} = e;
-    e.preventDefaultAction = true;
-    if (originalEvent.code === 'Escape') {
+    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/model/label.model.js

@@ -23,7 +23,6 @@ export class LabelModel {
     this.resize = data.resize; // 是否可拖动大小
     this.isROI = data.isROI ?? false; // 是否是ROI
     this.isClose = data.isClose ?? true; // 是否是闭合标注
-    this.showStartPoint = data.showStartPoint ?? true; // 是否默认显示开始点，只针对曲线
     this.select = data.select ?? false; // 是否是选中状态
     this.show = data.show ?? true; // 是否显示
     this.__other__ = data.__other__ || {}; // 其他信息

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

@@ -16,7 +16,8 @@ class Polygon extends Brush {
     ctx.lineWidth = this.options.lineWidth;
     ctx.strokeStyle = this.options.strokeStyle;
     ctx.moveTo(points[0].x, points[0].y);
-    points.forEach((point) => {
+    points.forEach((point, index) => {
+      if (index === 0) return;
       ctx.lineTo(point.x, point.y);
     });
     if (this.options.isClose) {
@@ -27,21 +28,10 @@ class Polygon extends Brush {
     }
   }
 
-  drawPoint(point) {
-    if (this.options.showStartPoint) {
-      const ctx = this.canvas.getContext('2d');
-      ctx.beginPath();
-      ctx.fillStyle = '#0000008d';
-      ctx.fillRect(point.x - 20, point.y - 25, 40, 20);
-      ctx.beginPath();
-      ctx.font = `14px Arial`;
-      ctx.fillStyle = '#ffffff';
-      ctx.fillText('起点', point.x - 15, point.y - 10);
-      this.thumb.draw(point, {
-        thumbRadius: this.options.thumbRadius ?? 5,
-        strokeStyle: this.options.thumbColor,
-      });
-    }
+  drawPoints(points, config) {
+    points.forEach((point) => {
+      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';
 
 /**
@@ -37,9 +37,14 @@ export default class KfbView extends EventEmitter {
    * @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 +259,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 +303,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,17 +323,27 @@ function initEvent(kv) {
     e.preventDefaultAction = true;
     const {originalEvent} = e;
     handlerCacheEvent(originalEvent, kv);
-    handlerLabelEvent(originalEvent, kv);
-    kv.shape?.onCanvasKey?.(e);
-    kv.area?.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) => {
-    kv.area?.onCanvasDblClick?.(e.position);
-    kv.tailoring?.onCanvasDblClick?.(e.position);
+    if (kv.board?.isInDraw) {
+      kv.board.onCanvasDblClick(e.position);
+    } else if (kv.tailoring?.isInTailoring) {
+      kv.tailoring?.onCanvasDblClick?.(e.position);
+    } else {
+      kv.area?.onCanvasDblClick?.(e.position);
+    }
   });
 
   kv.viewer.addHandler('resize', (e) => {
@@ -331,6 +356,43 @@ function initEvent(kv) {
       kv.board.onCanvasMove(e);
     }
   }, true, kv.$el);
+
+  let isRightDown = false;
+  let dragPosition;
+
+  kv.viewer.canvas.addEventListener('contextmenu', function(event) {
+    if (kv.board?.isInDraw) {
+      event.preventDefault();
+    }
+  });
+
+  kv.viewer.addHandler('canvas-nonprimary-press', function(e) {
+    console.log('nonprimary press');
+    if (e.button === 2) {
+      isRightDown = true;
+    }
+    dragPosition = e.position.clone();
+  });
+
+  kv.viewer.addHandler('canvas-nonprimary-release', function(e) {
+    console.log('nonprimary release');
+    if (e.button === 2) {
+      isRightDown = false;
+    }
+  });
+
+  new openSeadragon.MouseTracker({
+    element: kv.viewer.canvas,
+    moveHandler: function(event) {
+      if (isRightDown && kv.board?.isInDraw) {
+        console.log('nonprimary drag');
+        let delta = event.position.minus(dragPosition);
+        dragPosition = event.position.clone();
+        kv.viewer.viewport.panBy(
+          kv.viewer.viewport.deltaPointsFromPixels(delta.negate()));
+      }
+    },
+  });
 }
 
 function handlerCacheEvent(e, kv) {
@@ -349,17 +411,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;
+    });
   }
 }