kfb-view 3.0.9 → 3.1.1

package/package.json

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

package/src/components/area/index.js

@@ -698,9 +698,11 @@ export class Area extends ViewerCommon {
           this[label.tool].drawMeasureInfo.call(this, label,
             this.getMeasureContent(label));
         }
-        if (this.options.labelDrawing) {
+        if (this.options.labelDrawing || this.options.label?.drawing) {
           if (!this.isInCanvas(label.region, bounds)) return false;
-          this.options.labelDrawing(this.canvas, label,
+          const drawingFunc = this.options.label?.drawing ||
+            this.options.labelDrawing;
+          drawingFunc(this.canvas, label,
             this.imageToViewerElementRectangle(label.region));
         }
       });
@@ -715,11 +717,12 @@ export class Area extends ViewerCommon {
   setPointsMove(label) {
     const movePoints = this.imageToViewerElementPoints(label.points);
     let lastPoint = movePoints[0];
+    const dist = this.options.label?.polygonWidth || 30;
     movePoints.forEach((point, index) => {
       point.canMove = false;
       label.points[index].canMove = false;
-      if (index === 0 || (!pointInOtherPoint(lastPoint, point, 30) &&
-          !pointInOtherPoint(movePoints[0], point, 30)) ||
+      if (index === 0 || (!pointInOtherPoint(lastPoint, point, dist) &&
+          !pointInOtherPoint(movePoints[0], point, dist)) ||
         (index === movePoints.length - 1)) {
         lastPoint = point;
         point.canMove = true;

package/src/components/board/index.js

@@ -3,7 +3,7 @@ import * as Tools from '../../tool';
 import {
   POLYGON, DOT, FLAG, MARKS,
   NO_NORMAL_REGION_TYPES,
-  POINT_TYPES, STAR,
+  POINT_TYPES, STAR, ELLIPSE,
 } from '../../const/mark';
 import {
   EVENT_START_PAINTING,
@@ -142,6 +142,8 @@ export class Board extends ViewerCommon {
     const tool = this.tool;
     if (tool === POLYGON) {
       this.points.push(point);
+    } else if (ELLIPSE === tool) {
+      this.points = [point, point];
     } else {
       this.points = [point];
     }
@@ -172,7 +174,15 @@ export class Board extends ViewerCommon {
     }
     e.preventDefaultAction = true;
     const tool = this.tool;
-    if (!NO_NORMAL_REGION_TYPES.includes(tool)) {
+    if (ELLIPSE === tool) {
+      const _x = point.x - this.points[1].x;
+      const _y = point.y - this.points[1].y;
+      const _point = {
+        x: this.points[1].x - _x,
+        y: this.points[1].y - _y,
+      };
+      this.points = [_point, this.points[1], point];
+    } else if (!NO_NORMAL_REGION_TYPES.includes(tool)) {
       this.points = [this.points[0] || point, point];
     } else if (tool === POLYGON) {
       this.points.push(point);
@@ -207,7 +217,23 @@ export class Board extends ViewerCommon {
       return;
     }
     const tool = this.tool;
-    if (!NO_NORMAL_REGION_TYPES.includes(tool)) {
+    if (ELLIPSE === tool) {
+      const _x = point.x - this.points[1].x;
+      const _y = point.y - this.points[1].y;
+      const _point = {
+        x: this.points[1].x - _x,
+        y: this.points[1].y - _y,
+      };
+      this.points = [_point, point];
+      const firstPoint = this.imageToViewerElementCoordinates(this.points[0].x,
+        this.points[0].y);
+      const dist = getDistance(firstPoint, {x, y});
+      if (Math.abs(dist) < 10) {
+        this.points = [];
+        this.clearCanvas();
+        return;
+      }
+    } else if (!NO_NORMAL_REGION_TYPES.includes(tool)) {
       const firstPoint = this.imageToViewerElementCoordinates(this.points[0].x,
         this.points[0].y);
       const dist = getDistance(firstPoint, {x, y});
@@ -342,11 +368,12 @@ export class Board extends ViewerCommon {
     const points = this.imageToViewerElementPoints(this.points);
     let firstPoint = points[0];
     // 过滤曲线的点，点之间的距离小于10默认为一个点，取第一个
+    const dist = this.options.label?.polygonWidth || 30;
     this.points = this.points.filter((p, index) => {
       const _p = points[index];
       if (index === 0) return true;
       if (index === this.points.length - 1) return true;
-      if (pointInOtherPoint(firstPoint, _p, 30)) {
+      if (pointInOtherPoint(firstPoint, _p, dist)) {
         const nextPoint = points[index + 1];
         if (nextPoint) {
           const deg = Math.abs(getAngle(_p, firstPoint, nextPoint));

package/src/view.js

@@ -76,7 +76,10 @@ export default class KfbView extends EventEmitter {
    * @param {boolean=} config.measure.fontSize 标注注释文字大小
    * @param {boolean=} config.measure.defaultShow 标注是否默认永久显示，false表示只在选中时显示
    * @param {boolean=} config.measure.scale 标注默认永久显示时的倍率，
-   * @param {boolean=} config.labelDrawing 标注绘制回调，
+   * @param {Object} config.label 标注配置
+   * @param {number=} config.label.polygonWidth 曲线点识别宽度，
+   * @param {function=} config.label.drawing 标注绘制回调，
+   * @param {function=} config.labelDrawing 标注绘制回调   @deprecated Use label.drawing instead
    * @param {array} config.labelList 标注列表
    */
   constructor(config) {
@@ -282,6 +285,7 @@ function initComponentsOptions(kv, type) {
     options: {
       scale: config.scale,
       labelDrawing: config.labelDrawing,
+      label: config.label || {},
       measure: {
         backgroundColor: 'rgba(0,0,0,.5)',
         color: '#FFF',