kfb-view 2.1.18 → 2.1.19

package/package.json

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

package/src/components/board/index.js

@@ -74,6 +74,7 @@ export class Board extends ViewerCommon {
       measure: true,
       clear: true,
       isClose: true,
+      showStartPoint: true,
       ...options,
       lineWidth: !options.lineWidth ?
         (this.tool === STAR ? 15 :
@@ -103,6 +104,7 @@ export class Board extends ViewerCommon {
       text: '',
       measure: true,
       clear: true,
+      showStartPoint: true,
       ...options,
       lineWidth: !options.lineWidth ?
         (this.tool === STAR ? 15 :
@@ -143,6 +145,11 @@ export class Board extends ViewerCommon {
     this[tool].startDraw();
     this[tool].draw(this.imageToViewerElementPoints(this.points));
     this[tool].endDraw();
+    if (tool === POLYGON) {
+      const point = this.imageToViewerElementCoordinates(this.points[0].x,
+        this.points[0].y);
+      this[tool].drawPoint(point);
+    }
     this.$emit(EVENT_START_PAINTING, this.getPaintOptions());
   }
 
@@ -171,6 +178,11 @@ export class Board extends ViewerCommon {
     this[tool].startDraw();
     this[tool].draw(this.imageToViewerElementPoints(this.points));
     this[tool].endDraw();
+    if (tool === POLYGON) {
+      const point = this.imageToViewerElementCoordinates(this.points[0].x,
+        this.points[0].y);
+      this[tool].drawPoint(point);
+    }
     this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
   }
 
@@ -249,8 +261,10 @@ export class Board extends ViewerCommon {
       this.points.push(point);
       this.clearCanvas();
       this[tool].startDraw();
-      this[tool].draw(this.imageToViewerElementPoints(this.points));
+      const points = this.imageToViewerElementPoints(this.points);
+      this[tool].draw(points);
       this[tool].endDraw();
+      this[tool].drawPoint(points[0]);
       this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
     }
   }

package/src/components/shape/index.js

@@ -59,8 +59,12 @@ export class Shape extends ViewerCommon {
     this.clearCanvas();
     // 区域标注列表
     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({
@@ -149,6 +153,16 @@ export class Shape extends ViewerCommon {
         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);
+    });
   }
 
   drawLabel(item) {

package/src/model/label.model.js

@@ -23,6 +23,7 @@ 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/Polygon.js

@@ -26,6 +26,23 @@ 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,
+      });
+    }
+  }
 }
 
 export {