kfb-view 2.1.12 → 2.1.15

package/package.json

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

package/src/components/board/index.js

@@ -140,7 +140,9 @@ export class Board extends ViewerCommon {
       this.points = [point];
     }
     this.clearCanvas();
+    this[tool].startDraw();
     this[tool].draw(this.imageToViewerElementPoints(this.points));
+    this[tool].endDraw();
     this.$emit(EVENT_START_PAINTING, this.getPaintOptions());
   }
 
@@ -166,7 +168,9 @@ export class Board extends ViewerCommon {
       this.points = [point, point];
     }
     this.clearCanvas();
+    this[tool].startDraw();
     this[tool].draw(this.imageToViewerElementPoints(this.points));
+    this[tool].endDraw();
     this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
   }
 
@@ -244,7 +248,9 @@ export class Board extends ViewerCommon {
       this.points.pop();
       this.points.push(point);
       this.clearCanvas();
+      this[tool].startDraw();
       this[tool].draw(this.imageToViewerElementPoints(this.points));
+      this[tool].endDraw();
       this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
     }
   }
@@ -282,8 +288,17 @@ export class Board extends ViewerCommon {
    * @return {boolean}
    */
   isInROI(point) {
-    return !this.options.ROI || this.isContainerLabel(point, this.ROIList) ||
-      this[this.tool].options.isROI;
+    if (this.options.ROI) {
+      return this[this.tool].options.isROI ||
+        this.isContainerLabel(point, this.ROIList);
+    } else if (this.ROIList.length > 0) {
+      return this[this.tool].options.isROI ||
+        this.isContainerLabel(point, this.ROIList);
+    } else {
+      return true;
+    }
+    /* return !this.options.ROI || this.isContainerLabel(point, this.ROIList) ||
+       this[this.tool].options.isROI;*/
   }
 
   /**
@@ -310,7 +325,9 @@ export class Board extends ViewerCommon {
     if (!this.isInDraw || this.points.length === 0) return;
     const points = this.imageToViewerElementPoints(this.points);
     this.clearCanvas();
+    this[this.tool].startDraw();
     this[this.tool].draw(points);
+    this[this.tool].endDraw();
     this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
   }
 }

package/src/components/rotation/index.js

@@ -38,8 +38,10 @@ class Rotation extends ViewerCommon {
   drawRect(startPoint, endPoint) {
     const rect = this.viewport.imageToViewportRectangle(0, 0, this.imgWidth,
       this.imgHeight);
+    this.rect.startDraw();
     this.rect.draw([startPoint, endPoint], this.viewport.getRotation(),
       this.viewport.viewportToViewerElementRectangle(rect));
+    this.rect.endDraw();
     this.drawThumbPoint();
   }
 

package/src/components/shape/index.js

@@ -1,6 +1,6 @@
 import {
-  POLYGON, HAS_REGION_TYPES, MARKS,
-  NO_NORMAL_REGION_TYPES,
+  HAS_REGION_TYPES, MARKS,
+  NO_NORMAL_REGION_TYPES, POINT_TYPES, POLYGON, REGION_TYPES,
 } from '../../const/mark';
 import {ViewerCommon} from '../common/common';
 import * as Tools from '../../tool';
@@ -59,20 +59,35 @@ export class Shape extends ViewerCommon {
     this.clearCanvas();
     // 区域标注列表
     const regionLabelList = this.labelList.filter(
-      ({tool, isClose}) => HAS_REGION_TYPES.includes(tool) && isClose).
+      ({tool, isClose}) => REGION_TYPES.includes(tool) || isClose && tool ===
+        POLYGON).
       map((item) => ({
         ...item,
         child: [],
         self: item,
       }));
+    // strokeStyle, lineWidth, fillStyle 相同认为是一个路径下的图形，一起绘制，优化性能
+    const sameFixWidthLabel = {}; // star, flag, star, font lineWidth固定为2
+    const sameNormalLabel = {};
     this.labelList.forEach((item) => {
       if (!this.isInCanvas(item.region)) return;
       if (item.show === false) return;
       if (!this[item.tool]) return;
-      if (HAS_REGION_TYPES.includes(item.tool) && item.isClose) {
-        this.drawLabel({...item, fillStyle: undefined});
+      const key = `${item.strokeStyle ?? ''}_${item.lineWidth ??
+      ''}_${item.fillStyle ?? ''}`;
+      const regionKey = `${item.strokeStyle ?? ''}_${item.lineWidth ?? ''}`;
+      if (POINT_TYPES.includes(item.tool)) {
+        if (sameFixWidthLabel[key]) {
+          sameFixWidthLabel[key].push(item);
+        } else {
+          sameFixWidthLabel[key] = [item];
+        }
       } else {
-        this.drawLabel(item);
+        if (sameNormalLabel[regionKey]) {
+          sameNormalLabel[regionKey].push(item);
+        } else {
+          sameNormalLabel[regionKey] = [item];
+        }
       }
       const parent = regionLabelList.find(
         (parent) => parent.self !== item && item.points.every(
@@ -81,6 +96,26 @@ export class Shape extends ViewerCommon {
         parent.child.push(item);
       }
     });
+    Object.values(sameFixWidthLabel).forEach((labels) => {
+      const ctx = this.canvas.getContext('2d');
+      ctx.beginPath();
+      labels.forEach((item) => {
+        this.drawLabel(item);
+      });
+      ctx.stroke();
+      if (labels?.[0]?.fillStyle) {
+        ctx.fill();
+      }
+    });
+    Object.values(sameNormalLabel).forEach((labels) => {
+      const ctx = this.canvas.getContext('2d');
+      ctx.beginPath();
+      labels.forEach((item) => {
+        this.drawLabel(item);
+      });
+      ctx.stroke();
+    });
+
     regionLabelList.forEach((item) => {
       if (!this.isInCanvas(item.region)) return;
       if (item.show === false) return;
@@ -103,9 +138,6 @@ export class Shape extends ViewerCommon {
     if (!NO_NORMAL_REGION_TYPES.includes(item.tool)) {
       this[item.tool].draw(points, this.viewport.getRotation(),
         this.imageToViewerElementRectangle(item.region));
-    } else if (item.tool === POLYGON) {
-      this[item.tool].draw(points);
-      this[item.tool].drawEndPoints(points);
     } else {
       this[item.tool].draw(points, scale);
     }

package/src/model/label.model.js

@@ -1,9 +1,14 @@
+import {DOT, FLAG, STAR} from '../const/mark';
+
 export class LabelModel {
   constructor(data = {}) {
     if (!data) data = {};
     this.id = data.id; // id标识
-    this.lineWidth = data.lineWidth; // 标注宽度
-    this.strokeStyle = data.strokeStyle; // 标注颜色
+    this.lineWidth = !data.lineWidth ?
+      (data.tool === STAR ? 15 :
+        data.tool === FLAG ? 30 : data.tool === DOT ? 10 : 2) :
+      data.lineWidth; // 标注宽度
+    this.strokeStyle = data.strokeStyle || '#027AFF'; // 标注颜色
     this.fillStyle = data.fillStyle; // 填充颜色
     this.description = data.description; // 描述
     this.fontSize = data.fontSize; // 字号
@@ -17,7 +22,7 @@ export class LabelModel {
     this.move = data.move; // 是否可移动
     this.resize = data.resize; // 是否可拖动大小
     this.isROI = data.isROI ?? false; // 是否是ROI
-    this.isClose = data.isClose ?? true; // 是否是闭合标注，针对Curve标注
+    this.isClose = data.isClose ?? true; // 是否是闭合标注
     this.select = data.select ?? false; // 是否是选中状态
     this.show = data.show ?? true; // 是否显示
     this.__other__ = data.__other__ || {}; // 其他信息

package/src/tool/Arrow.js

@@ -10,7 +10,6 @@ class Arrow extends Brush {
    */
   constructor() {
     super();
-    this.lineWidth = 2;
   }
 
   /**
@@ -23,17 +22,11 @@ class Arrow extends Brush {
     const startPoint = points[0];
     const endPoint = points[points.length - 1];
     const ctx = this.canvas.getContext('2d');
-    ctx.beginPath();
-    ctx.lineWidth = this.options.lineWidth || 2;
-    ctx.strokeStyle = this.options.strokeStyle || '#0000FF';
+    ctx.lineWidth = this.options.lineWidth;
+    ctx.strokeStyle = this.options.strokeStyle;
     ctx.moveTo(startPoint.x, startPoint.y);
     ctx.lineTo(endPoint.x, endPoint.y);
-    ctx.stroke();
-    ctx.closePath();
-    ctx.beginPath();
     ctx.drawArrow(startPoint, endPoint);
-    ctx.stroke();
-    ctx.closePath();
   }
 }
 

package/src/tool/Bilateral.js

@@ -10,7 +10,6 @@ class Bilateral extends Brush {
    */
   constructor() {
     super();
-    this.lineWidth = 2;
   }
 
   /**
@@ -23,18 +22,12 @@ class Bilateral extends Brush {
     const startPoint = points[0];
     const endPoint = points[points.length - 1];
     const ctx = this.canvas.getContext('2d');
-    ctx.beginPath();
-    ctx.lineWidth = this.options.lineWidth || 2;
-    ctx.strokeStyle = this.options.strokeStyle || '#0000FF';
+    ctx.lineWidth = this.options.lineWidth;
+    ctx.strokeStyle = this.options.strokeStyle;
     ctx.moveTo(startPoint.x, startPoint.y);
     ctx.lineTo(endPoint.x, endPoint.y);
-    ctx.stroke();
-    ctx.closePath();
-    ctx.beginPath();
     ctx.drawArrow(startPoint, endPoint);
     ctx.drawArrow(endPoint, startPoint);
-    ctx.stroke();
-    ctx.closePath();
   }
 }
 

package/src/tool/Brush.js

@@ -10,11 +10,7 @@ class Brush {
    */
   constructor() {
     this.thumb = new Thumb();
-    this.options = {
-      lineWidth: 2,
-      fillStyle: '',
-      strokeStyle: '#0000ff',
-    };
+    this.options = {};
   }
 
   /**
@@ -26,13 +22,23 @@ class Brush {
     this.canvas = canvas;
     this.thumb.setCanvas(canvas);
     this.options = {
-      lineWidth: 2,
-      fillStyle: '',
-      strokeStyle: '#0000ff',
       ...options,
     };
   }
 
+  startDraw() {
+    const ctx = this.canvas.getContext('2d');
+    ctx.beginPath();
+  }
+
+  endDraw() {
+    const ctx = this.canvas.getContext('2d');
+    ctx.stroke();
+    if (this.options.fillStyle) {
+      ctx.fill();
+    }
+  }
+
   /**
    * 画点
    * @param {Object} point

package/src/tool/Combination.js

@@ -42,7 +42,8 @@ class Combination extends Brush {
         points[0].y + region.height - centerPoint.y);
       ctx.lineTo(points[0].x - centerPoint.x, points[0].y - centerPoint.y);
     } else if (tool === ELLIPSE) {
-      ctx.drawOval(0, 0, region.width / 2, region.height / 2, false);
+      ctx.drawOval(0, 0, Math.abs(region.width / 2),
+        Math.abs(region.height / 2), false);
     }
     ctx.closePath();
     ctx.restore();
@@ -70,9 +71,9 @@ class Combination extends Brush {
           points[0].y - centerPoint.y);
         ctx.lineTo(points[0].x - centerPoint.x, points[0].y - centerPoint.y);
       } else if (tool === ELLIPSE) {
-        ctx.drawOval(0, 0, region.width / 2, region.height / 2, true);
+        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/Dot.js

@@ -21,20 +21,18 @@ class Dot extends Brush {
    * @param {number} scale
    */
   draw(points, scale = 1) {
-    let dist = this.options.lineWidth || 10;
+    let dist = this.options.lineWidth;
     dist *= scale;
     const point = points[0];
     const ctx = this.canvas.getContext('2d');
     const {x, y} = point;
     ctx.lineWidth = 2;
-    ctx.beginPath();
+    ctx.moveTo(x + dist, y);
     ctx.arc(x, y, dist, 0, Math.PI * 2, !1);
     if (this.options.fillStyle) {
       ctx.fillStyle = this.options.fillStyle;
-      ctx.fill();
     }
-    ctx.strokeStyle = this.options.strokeStyle || '#0000FF';
-    ctx.stroke();
+    ctx.strokeStyle = this.options.strokeStyle;
   }
 }
 

package/src/tool/Ellipse.js

@@ -24,8 +24,12 @@ class Ellipse extends Brush {
     const startPoint = points[0];
     const endPoint = points[points.length - 1];
     const ctx = this.canvas.getContext('2d');
+    ctx.lineWidth = this.options.lineWidth;
+    ctx.strokeStyle = this.options.strokeStyle;
+    if (this.options.fillStyle) {
+      ctx.fillStyle = this.options.fillStyle;
+    }
     ctx.save();
-    ctx.beginPath();
     const centerPoint = {
       x: (startPoint.x + endPoint.x) / 2,
       y: (startPoint.y + endPoint.y) / 2,
@@ -38,23 +42,11 @@ class Ellipse extends Brush {
       Math.abs(endPoint.y - startPoint.y);
     ctx.translate(centerPoint.x, centerPoint.y);
     ctx.rotate(rotation * Math.PI / 180);
-    ctx.lineWidth = this.options.lineWidth || 2;
-    ctx.strokeStyle = this.options.strokeStyle || '#0000FF';
     if (rotation < 90 && rotation >= 0 || rotation > 180 && rotation < 270) {
       ctx.drawOval(0, 0, width / 2, height / 2);
-      if (this.options.fillStyle) {
-        ctx.fillStyle = this.options.fillStyle;
-        ctx.drawOval(0, 0, width / 2, height / 2);
-        ctx.fill();
-      }
     } else {
-      if (this.options.fillStyle) {
-        ctx.fillStyle = this.options.fillStyle;
-        ctx.drawOval(0, 0, height / 2, width / 2);
-        ctx.fill();
-      }
+      ctx.drawOval(0, 0, height / 2, width / 2);
     }
-    ctx.stroke();
     ctx.restore();
   }
 }

package/src/tool/Flag.js

@@ -13,16 +13,14 @@ class Flag extends Brush {
    * @param {number} scale
    */
   draw(points, scale = 1) {
-    let dist = this.options.lineWidth || 30;
+    let dist = this.options.lineWidth;
     dist *= scale;
     const point = points[0];
     const ctx = this.canvas.getContext('2d');
-    ctx.beginPath();
     ctx.lineWidth = 2;
-    ctx.strokeStyle = this.options.strokeStyle || '#0000FF';
+    ctx.strokeStyle = this.options.strokeStyle;
     ctx.moveTo(point.x, point.y);
     ctx.lineTo(point.x, point.y - dist);
-    ctx.stroke();
     const _dist = dist / 5;
     const p1 = {
       x: point.x + _dist,
@@ -41,10 +39,8 @@ class Flag extends Brush {
       y: point.y - dist,
     };
     ctx.bezierCurve([p1, p2, p3, p4]);
-    ctx.stroke();
     ctx.moveTo(p4.x, p4.y);
     ctx.lineTo(p4.x, p4.y + dist / 2);
-    ctx.stroke();
     const p11 = {
       x: point.x + _dist,
       y: point.y - dist / 2,
@@ -62,10 +58,8 @@ class Flag extends Brush {
       y: point.y - dist / 2,
     };
     ctx.bezierCurve([p11, p22, p33, p44]);
-    ctx.stroke();
     ctx.moveTo(p1.x, p1.y);
     ctx.lineTo(p11.x, p11.y);
-    ctx.stroke();
   }
 }
 

package/src/tool/Font.js

@@ -24,15 +24,14 @@ class Font extends Brush {
     const angle = this.options.angle || 0;
     const text = this.options.text || '编辑文字';
     const ctx = this.canvas.getContext('2d');
-    ctx.beginPath();
+    ctx.fillStyle = this.options.fillStyle || this.options.strokeStyle ||
+      '#FDFDFD';
     ctx.save();
     ctx.translate(point.x, point.y);
     ctx.rotate(angle / 180 * Math.PI);
     ctx.scale(scale, scale);
     ctx.font = `${this.options.fontSize || 14}px Arial`;
-    ctx.fillStyle = this.options.strokeStyle || '#FDFDFD';
     ctx.fillText(text, 0, 0);
-    ctx.stroke();
     ctx.restore();
   }
 }

package/src/tool/Line.js

@@ -22,9 +22,8 @@ class Line extends Brush {
     const startPoint = points[0];
     const endPoint = points[points.length - 1];
     const ctx = this.canvas.getContext('2d');
-    ctx.beginPath();
-    ctx.lineWidth = this.options.lineWidth || 2;
-    ctx.strokeStyle = this.options.strokeStyle || '#0000FF';
+    ctx.lineWidth = this.options.lineWidth;
+    ctx.strokeStyle = this.options.strokeStyle;
     ctx.moveTo(startPoint.x, startPoint.y);
     ctx.lineTo(endPoint.x, endPoint.y);
     const deg = Math.atan2((endPoint.y - startPoint.y),
@@ -35,7 +34,6 @@ class Line extends Brush {
     ctx.lineTo(startPoint.x - distX, startPoint.y + distY);
     ctx.moveTo(endPoint.x + distX, endPoint.y - distY);
     ctx.lineTo(endPoint.x - distX, endPoint.y + distY);
-    ctx.stroke();
   }
 }
 

package/src/tool/Polygon.js

@@ -5,22 +5,6 @@ import {Brush} from './Brush';
  * @class
  */
 class Polygon extends Brush {
-  /**
-   * 绘制结束点
-   * @param {Object[]} points - 绘制的点
-   * @param {number} points[].x - 绘制的点x坐标.
-   * @param {number} points[].y - 绘制的点y坐标.
-   */
-  drawEndPoints(points) {
-    const ctx = this.canvas.getContext('2d');
-    ctx.beginPath();
-    ctx.lineWidth = this.options.lineWidth || 2;
-    ctx.strokeStyle = this.options.strokeStyle || '#0000FF';
-    ctx.moveTo(points[points.length - 1].x, points[points.length - 1].y);
-    ctx.lineTo(points[0].x, points[0].y);
-    ctx.stroke();
-  }
-
   /**
    * 绘制
    * @param {Object[]} points - 绘制的点
@@ -29,19 +13,18 @@ class Polygon extends Brush {
    */
   draw(points) {
     const ctx = this.canvas.getContext('2d');
-    ctx.beginPath();
-    ctx.lineWidth = this.options.lineWidth || 2;
-    ctx.strokeStyle = this.options.strokeStyle || '#0000FF';
+    ctx.lineWidth = this.options.lineWidth;
+    ctx.strokeStyle = this.options.strokeStyle;
     ctx.moveTo(points[0].x, points[0].y);
     points.forEach((point) => {
       ctx.lineTo(point.x, point.y);
     });
-    if (this.options.fillStyle && this.options.isClose) {
+    if (this.options.isClose) {
       ctx.lineTo(points[0].x, points[0].y);
-      ctx.fillStyle = this.options.fillStyle;
-      ctx.fill();
+      if (this.options.fillStyle) {
+        ctx.fillStyle = this.options.fillStyle;
+      }
     }
-    ctx.stroke();
   }
 }
 

package/src/tool/Rectangle.js

@@ -24,8 +24,12 @@ class Rectangle extends Brush {
     const startPoint = points[0];
     const endPoint = points[points.length - 1];
     const ctx = this.canvas.getContext('2d');
+    ctx.lineWidth = this.options.lineWidth;
+    ctx.strokeStyle = this.options.strokeStyle;
+    if (this.options.fillStyle) {
+      ctx.fillStyle = this.options.fillStyle;
+    }
     ctx.save();
-    ctx.beginPath();
     const centerPoint = {
       x: (startPoint.x + endPoint.x) / 2,
       y: (startPoint.y + endPoint.y) / 2,
@@ -37,26 +41,13 @@ class Rectangle extends Brush {
       Math.abs(region.height) :
       Math.abs(endPoint.y - startPoint.y);
     ctx.translate(centerPoint.x, centerPoint.y);
-    ctx.lineWidth = this.options.lineWidth || 2;
-    ctx.strokeStyle = this.options.strokeStyle || '#0000FF';
     if (rotation < 90 && rotation >= 0 || rotation > 180 && rotation < 270) {
       ctx.rotate(rotation * Math.PI / 180);
       ctx.rect(-width / 2, -height / 2, width, height);
-      if (this.options.fillStyle) {
-        ctx.fillStyle = this.options.fillStyle;
-        ctx.rect(-width / 2, -height / 2, width, height);
-        ctx.fill();
-      }
     } else {
       ctx.rotate(rotation * Math.PI / 180);
       ctx.rect(-height / 2, -width / 2, height, width);
-      if (this.options.fillStyle) {
-        ctx.fillStyle = this.options.fillStyle;
-        ctx.rect(-height / 2, -width / 2, height, width);
-        ctx.fill();
-      }
     }
-    ctx.stroke();
     ctx.restore();
   }
 }

package/src/tool/Star.js

@@ -21,7 +21,7 @@ class Star extends Brush {
    * @param {number} scale
    */
   draw(points, scale = 1) {
-    let dist = this.options.lineWidth || 15;
+    let dist = this.options.lineWidth;
     const point = points[0];
     dist *= scale;
     this.endPoint = {x: point.x, y: point.y};
@@ -67,8 +67,7 @@ class Star extends Brush {
       y: point.y - dist + short_side * Math.cos(angle),
     };
     const ctx = this.canvas.getContext('2d');
-    ctx.beginPath();
-    ctx.lineWidth = 1;
+    ctx.lineWidth = 2;
     ctx.moveTo(p1.x, p1.y);
     ctx.lineTo(p2.x, p2.y);
     ctx.lineTo(p3.x, p3.y);
@@ -80,11 +79,9 @@ class Star extends Brush {
     ctx.lineTo(p9.x, p9.y);
     ctx.lineTo(p10.x, p10.y);
     ctx.lineTo(p1.x, p1.y);
-    ctx.strokeStyle = this.options.strokeStyle || '#0000FF';
-    ctx.stroke();
+    ctx.strokeStyle = this.options.strokeStyle;
     if (this.options.fillStyle) {
       ctx.fillStyle = this.options.fillStyle;
-      ctx.fill();
     }
   }
 }

package/src/util/canvas.js

@@ -60,6 +60,7 @@ CanvasRenderingContext2D.prototype.drawOval = function drawOval(
   this.save();
   // 选择a、b中的较大者作为arc方法的半径参数
   const r = (a > b) ? a : b;
+  console.log(r);
   const ratioX = a / r; // 横轴缩放比率
   const ratioY = b / r; // 纵轴缩放比率
   this.scale(ratioX, ratioY); // 进行缩放（均匀压缩）
@@ -153,20 +154,17 @@ CanvasRenderingContext2D.prototype.bezierCurve = function(...rest) {
         throw new SyntaxError('Parameter length greater than 1');
       }
       if (points.length === 2) {
-        this.beginPath();
         this.moveTo(points[0].x, points[0].y);
         this.lineTo(points[1].x, points[1].y);
         this.stroke();
       }
       if (points.length === 3) {
-        this.beginPath();
         const startPoint = points[0];
         this.moveTo(startPoint.x, startPoint.y);
         this.quadraticCurveTo(points[1].x, points[1].y, points[2].x,
           points[2].y);
         this.stroke();
       } else if (points.length === 4) {
-        this.beginPath();
         const startPoint = points[0];
         this.moveTo(startPoint.x, startPoint.y);
         this.bezierCurveTo(points[1].x, points[1].y, points[2].x, points[2].y,
@@ -177,7 +175,6 @@ CanvasRenderingContext2D.prototype.bezierCurve = function(...rest) {
         const calculationPoints = [...new Array(101)].map(
           (item, index) => bezierCurve.calculationPoint(index / 100));
         for (let t = 1; t < 101; t++) {
-          this.beginPath();
           this.moveTo(calculationPoints[t - 1].x, calculationPoints[t - 1].y);
           this.lineTo(calculationPoints[t].x, calculationPoints[t].y);
           this.stroke();