kfb-view 2.1.15 → 2.1.18

package/package.json

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

package/src/components/common/common.js

@@ -71,29 +71,40 @@ export class ViewerCommon extends EventEmitter {
    * @return {boolean}
    */
   isContainerLabel(point, list) {
-    const contain = list.find(({region, tool, points, isClose}) => {
-      const p1 = {x: region.x, y: region.y};
-      const p2 = {x: region.x + region.width, y: region.y};
-      const p3 = {x: region.x, y: region.y + region.height};
-      const p4 = {x: region.x + region.width, y: region.y + region.height};
-      const center = {
-        x: region.x + region.width / 2, y: region.y + region.height / 2,
-      };
-      if (tool === ELLIPSE) {
-        return isPointInEllipse(point, center, Math.abs(region.width / 2),
-          Math.abs(region.height / 2 >> 0));
-      }
-      if (tool === RECTANGLE) {
-        return isPointInMatrix(p1, p2, p3, p4, point);
-      }
-      if (tool === POLYGON && isClose) {
-        return isPointInPolygon(point, points);
-      }
-      return false;
-    });
+    const contain = list.find((item) => this.isContainerInRegion(point, item));
     return !!contain;
   }
 
+  /**
+   * 判断点是否在某个区域内
+   * @param {Object} point
+   * @param {Object} region
+   * @param {String} tool
+   * @param {Array} points
+   * @param {boolean} isClose
+   * @return {boolean}
+   */
+  isContainerInRegion(point, {region, tool, points, isClose}) {
+    const p1 = {x: region.x, y: region.y};
+    const p2 = {x: region.x + region.width, y: region.y};
+    const p3 = {x: region.x, y: region.y + region.height};
+    const p4 = {x: region.x + region.width, y: region.y + region.height};
+    const center = {
+      x: region.x + region.width / 2, y: region.y + region.height / 2,
+    };
+    if (tool === ELLIPSE) {
+      return isPointInEllipse(point, center, Math.abs(region.width / 2),
+        Math.abs(region.height / 2 >> 0));
+    }
+    if (tool === RECTANGLE) {
+      return isPointInMatrix(p1, p2, p3, p4, point);
+    }
+    if (tool === POLYGON && isClose) {
+      return isPointInPolygon(point, points);
+    }
+    return false;
+  }
+
   /**
    * 转化图像区域到元素坐标区域
    * @param {number} x
@@ -149,10 +160,14 @@ export class ViewerCommon extends EventEmitter {
    * @return {{}[]}
    */
   imageToViewerElementPoints(points) {
-    return (points || []).map((point) => ({
-      ...point,
-      ...this.imageToViewerElementCoordinates(point.x, point.y),
-    }));
+    return (points || []).map((point) => {
+      const p = this.imageToViewerElementCoordinates(point.x, point.y);
+      return {
+        canMove: point.canMove,
+        x: p.x,
+        y: p.y,
+      };
+    });
   }
 
   /**
@@ -372,12 +387,17 @@ export class ViewerCommon extends EventEmitter {
   /**
    * 判断region是否在canvas中
    * @param {Object} region
+   * @param {boolean} status
    * @return {boolean}
    */
-  isInCanvas(region) {
-    const startPoint = this.imageToViewerElementCoordinates(region.x, region.y);
-    const endPoint = this.imageToViewerElementCoordinates(
-      region.x + region.width, region.y + region.height);
+  isInCanvas(region, status = false) {
+    const startPoint = status ?
+      {x: region.x, y: region.y} :
+      this.imageToViewerElementCoordinates(region.x, region.y);
+    const endPoint = status ?
+      {x: region.x + region.width, y: region.y + region.height} :
+      this.imageToViewerElementCoordinates(
+        region.x + region.width, region.y + region.height);
     if (endPoint.x < startPoint.x) {
       const x = startPoint.x;
       startPoint.x = endPoint.x;

package/src/components/shape/index.js

@@ -1,6 +1,6 @@
 import {
-  HAS_REGION_TYPES, MARKS,
-  NO_NORMAL_REGION_TYPES, POINT_TYPES, POLYGON, 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';
@@ -58,21 +58,30 @@ export class Shape extends ViewerCommon {
   change() {
     this.clearCanvas();
     // 区域标注列表
-    const regionLabelList = this.labelList.filter(
-      ({tool, isClose}) => REGION_TYPES.includes(tool) || isClose && tool ===
-        POLYGON).
-      map((item) => ({
-        ...item,
-        child: [],
-        self: item,
-      }));
+    const regionLabelList = [];
+    this.labelList.forEach(
+      (item) => {
+        if (REGION_TYPES.includes(item.tool) || item.isClose && item.tool ===
+          POLYGON) {
+          regionLabelList.push({
+            ...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 (!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;*/
       const key = `${item.strokeStyle ?? ''}_${item.lineWidth ??
       ''}_${item.fillStyle ?? ''}`;
       const regionKey = `${item.strokeStyle ?? ''}_${item.lineWidth ?? ''}`;
@@ -90,37 +99,48 @@ export class Shape extends ViewerCommon {
         }
       }
       const parent = regionLabelList.find(
-        (parent) => parent.self !== item && item.points.every(
-          (point) => this.isContainerLabel(point, [parent])));
+        (parent) => HAS_REGION_TYPES.includes(parent.tool) && parent.self !==
+          item && item.points.every(
+            (point) => this.isContainerInRegion(point, parent)));
       if (parent) {
         parent.child.push(item);
       }
     });
+    const ctx = this.canvas.getContext('2d');
     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) {
+      const firstLabel = labels?.[0];
+      if (firstLabel?.fillStyle) {
+        ctx.fillStyle = firstLabel.fillStyle;
         ctx.fill();
       }
+      ctx.strokeStyle = firstLabel.strokeStyle;
+      ctx.stroke();
     });
     Object.values(sameNormalLabel).forEach((labels) => {
-      const ctx = this.canvas.getContext('2d');
       ctx.beginPath();
       labels.forEach((item) => {
         this.drawLabel(item);
       });
+      const firstLabel = labels?.[0];
+      ctx.lineWidth = firstLabel.lineWidth;
+      ctx.strokeStyle = firstLabel.strokeStyle;
       ctx.stroke();
     });
 
     regionLabelList.forEach((item) => {
-      if (!this.isInCanvas(item.region)) return;
       if (item.show === false) return;
       if (!this[item.tool]) return;
-      this.combination.setContent(this.canvas, {...item});
+      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,
@@ -132,13 +152,13 @@ export class Shape extends ViewerCommon {
   }
 
   drawLabel(item) {
-    const scale = this.getImageZoom(true) / item.scale;
     const points = this.imageToViewerElementPoints(item.points);
-    this[item.tool].setContent(this.canvas, {...item});
+    this[item.tool].setContent(this.canvas, item);
     if (!NO_NORMAL_REGION_TYPES.includes(item.tool)) {
       this[item.tool].draw(points, this.viewport.getRotation(),
         this.imageToViewerElementRectangle(item.region));
     } else {
+      const scale = this.getImageZoom(true) / item.scale;
       this[item.tool].draw(points, scale);
     }
   }

package/src/model/label.model.js

@@ -11,7 +11,7 @@ export class LabelModel {
     this.strokeStyle = data.strokeStyle || '#027AFF'; // 标注颜色
     this.fillStyle = data.fillStyle; // 填充颜色
     this.description = data.description; // 描述
-    this.fontSize = data.fontSize; // 字号
+    this.fontSize = data.fontSize || 14; // 字号
     this.text = data.text; // 文字
     this.angle = data.angle ?? 0; // 旋转角度
     this.measure = data.measure; // 是否显示测量信息

package/src/tool/Brush.js

@@ -21,9 +21,7 @@ class Brush {
   setContent(canvas, options) {
     this.canvas = canvas;
     this.thumb.setCanvas(canvas);
-    this.options = {
-      ...options,
-    };
+    this.options = options;
   }
 
   startDraw() {

package/src/tool/Font.js

@@ -24,13 +24,12 @@ class Font extends Brush {
     const angle = this.options.angle || 0;
     const text = this.options.text || '编辑文字';
     const ctx = this.canvas.getContext('2d');
-    ctx.fillStyle = this.options.fillStyle || this.options.strokeStyle ||
-      '#FDFDFD';
+    ctx.fillStyle = this.options.strokeStyle;
     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.font = `${this.options.fontSize}px Arial`;
     ctx.fillText(text, 0, 0);
     ctx.restore();
   }

package/src/tool/Star.js

@@ -24,7 +24,6 @@ class Star extends Brush {
     let dist = this.options.lineWidth;
     const point = points[0];
     dist *= scale;
-    this.endPoint = {x: point.x, y: point.y};
     const angle = 36 / 180 * Math.PI;
     const angle1 = 54 / 180 * Math.PI;
     const long_side = Math.sin(angle) * dist * 2;

package/src/util/canvas.js

@@ -60,7 +60,6 @@ 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); // 进行缩放（均匀压缩）

package/src/view.js

@@ -96,7 +96,6 @@ export default class KfbView extends EventEmitter {
     this.labelList = list.map((item) => new LabelModel({
       ...item,
       region: item.region || pointsToRegion(item.points),
-      strokeStyle: item.strokeStyle || '#0000FF',
       __data__: deepClone(item),
     }));
     this.board?.setLabelList?.(this.labelList);
@@ -106,10 +105,9 @@ export default class KfbView extends EventEmitter {
 
   appendLabelList(list) {
     this.labelList = [
-      ...this.labelList, list.map((item) => new LabelModel({
+      ...this.labelList, ...list.map((item) => new LabelModel({
         ...item,
         region: item.region || pointsToRegion(item.points),
-        strokeStyle: item.strokeStyle || '#0000FF',
         __data__: deepClone(item),
       }))];
     this.board?.setLabelList?.(this.labelList);

package/test.html

@@ -7,7 +7,7 @@
 <body>
 
 <canvas id="canvas" width="800" height="600"></canvas>
-
+<button id="reDraw">重绘</button>
 <script>
   /**
    * 清除圆形区域
@@ -206,109 +206,40 @@
 </script>
 <script>
   const canvas = document.getElementById('canvas');
+  const reDrawBtn = document.getElementById('reDraw');
   const ctx = canvas.getContext('2d');
-  ctx.beginPath();
-
-  drawA([{x: 10, y: 10}, {x: 50, y: 40}]);
-  drawA([{x: 70, y: 70}, {x: 120, y: 120}]);
-
-  drawB([{x: 130, y: 130}, {x: 90, y: 60}]);
-  drawB([{x: 20, y: 20}, {x: 20, y: 90}]);
-  drawF([{x: 300, y: 200}]);
-  drawF([{x: 100, y: 500}]);
-
-  function drawA(points) {
-    const startPoint = points[0];
-    const endPoint = points[points.length - 1];
-    ctx.lineWidth = 2;
-    ctx.strokeStyle = '#0000FF';
-    ctx.moveTo(startPoint.x, startPoint.y);
-    ctx.lineTo(endPoint.x, endPoint.y);
-    ctx.drawArrow(startPoint, endPoint);
-    ctx.stroke();
-  }
 
-  function drawB(points) {
-    const startPoint = points[0];
-    const endPoint = points[points.length - 1];
-    ctx.lineWidth = 2;
-    ctx.strokeStyle = '#00FF00';
-    ctx.moveTo(startPoint.x, startPoint.y);
-    ctx.lineTo(endPoint.x, endPoint.y);
-    ctx.drawArrow(startPoint, endPoint);
-    ctx.drawArrow(endPoint, startPoint);
-    ctx.stroke();
-  }
-
-  function drawF(points, scale = 1) {
-    let dist = 30;
-    dist *= scale;
+  function drwaP(points) {
+    let dist = 4 * 1;
     const point = points[0];
+    const ctx = canvas.getContext('2d');
+    const {x, y} = point;
     ctx.lineWidth = 2;
-    ctx.strokeStyle = '#0000FF';
-    ctx.moveTo(point.x, point.y);
-    ctx.lineTo(point.x, point.y - dist);
-    const _dist = dist / 5;
-    const p1 = {
-      x: point.x + _dist,
-      y: point.y - dist,
-    };
-    const p2 = {
-      x: point.x + _dist * 2,
-      y: point.y - dist - _dist,
-    };
-    const p3 = {
-      x: point.x + _dist * 4,
-      y: point.y - dist + _dist,
-    };
-    const p4 = {
-      x: point.x + dist,
-      y: point.y - dist,
-    };
-    ctx.bezierCurve([p1, p2, p3, p4]);
-    ctx.moveTo(p4.x, p4.y);
-    ctx.lineTo(p4.x, p4.y + dist / 2);
-    const p11 = {
-      x: point.x + _dist,
-      y: point.y - dist / 2,
-    };
-    const p22 = {
-      x: point.x + _dist * 2,
-      y: point.y - dist / 2 - _dist,
-    };
-    const p33 = {
-      x: point.x + _dist * 4,
-      y: point.y - dist / 2 + _dist,
-    };
-    const p44 = {
-      x: point.x + dist,
-      y: point.y - dist / 2,
-    };
-    ctx.bezierCurve([p11, p22, p33, p44]);
-    ctx.moveTo(p1.x, p1.y);
-    ctx.lineTo(p11.x, p11.y);
-    ctx.stroke();
+    ctx.moveTo(x + dist, y);
+    ctx.arc(x, y, dist, 0, Math.PI * 2, !1);
   }
 
-  console.log(new Date().getTime());
-  console.time('draw');
+  ctx.beginPath();
   ctx.fillStyle = '#ff0000';
   ctx.strokeStyle = '#00ff00';
   ctx.lineWidth = 2;
-  ctx.beginPath();
-  for (let i = 0; i < 800; i++) {
-    for (let j = 0; j < 600; j++) {
-      if (i % 50 === 0 && j % 50 === 0) {
-        ctx.moveTo(i + 4, j);
-        ctx.arc(i, j, 4, 0, Math.PI * 2, !1);
-      }
-    }
+  for (let i = 0; i < 4000; i++) {
+    drwaP([{x: Math.random() * 800, y: Math.random() * 600}]);
   }
-  ctx.fill();
   ctx.stroke();
-  console.timeEnd('draw');
-  console.log(new Date().getTime());
-
+  reDrawBtn.addEventListener('click', (e) => {
+    ctx.clearRect(0, 0, 800, 600);
+    console.time('draw');
+    ctx.beginPath();
+    ctx.fillStyle = '#ff0000';
+    ctx.strokeStyle = '#00ff00';
+    ctx.lineWidth = 2;
+    for (let i = 0; i < 10000; i++) {
+      drwaP([{x: Math.random() * 800, y: Math.random() * 600}]);
+    }
+    ctx.stroke();
+    console.timeEnd('draw');
+  });
 
 </script>
 </body>