kfb-view 2.2.0 → 2.2.1

package/package.json

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

package/src/components/common/common.js

@@ -387,30 +387,20 @@ export class ViewerCommon extends EventEmitter {
   /**
    * 判断region是否在canvas中
    * @param {Object} region
-   * @param {boolean} status
+   * @param {Object} bounds
    * @return {boolean}
    */
-  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;
-      endPoint.x = x;
-    }
-    if (endPoint.y < startPoint.y) {
-      const y = startPoint.y;
-      startPoint.y = endPoint.y;
-      endPoint.y = y;
-    }
-    return !(startPoint.x > this.canvas.width ||
-      startPoint.y > this.canvas.height ||
-      endPoint.x < 0 || endPoint.y < 0);
+  isInCanvas(region, bounds) {
+    const viewReact = this.viewport.imageToViewportRectangle(region.x, region.y,
+      region.width, region.height);
+    const startPoint = {x: viewReact.x, y: viewReact.y};
+    const endPoint = {
+      x: viewReact.x + viewReact.width,
+      y: viewReact.y + viewReact.height,
+    };
+    return !(startPoint.x > (bounds.x + bounds.width) || startPoint.y >
+      (bounds.y + bounds.height) || endPoint.x < bounds.x || endPoint.y <
+      bounds.y);
   }
 
   getFontWidth(text, size) {

package/src/components/shape/index.js

@@ -51,12 +51,12 @@ export class Shape extends ViewerCommon {
    */
   change() {
     this.clearCanvas();
+    const bounds = this.viewport.getBounds();
     // 区域标注列表
     const regionLabelList = [];
     const labelList = this.labelList.filter((item) => {
       if (item.show === false) return false;
       if (!this[item.tool]) return false;
-      if (!this.isInCanvas(item.region)) return false;
       if (REGION_TYPES.includes(item.tool) || item.isClose && item.tool ===
         POLYGON && item.fillStyle) {
         regionLabelList.push({
@@ -99,8 +99,9 @@ export class Shape extends ViewerCommon {
       clearTimeout(this.delaytimer);
       this.delaytimer = undefined;
     }
-    this.deepDrawLabel(sameFixWidthLabel, sameNormalLabel, 1);
+    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),
@@ -112,7 +113,7 @@ export class Shape extends ViewerCommon {
     });
   }
 
-  deepDrawLabel(sameFixWidthLabel, sameNormalLabel, count) {
+  deepDrawLabel(sameFixWidthLabel, sameNormalLabel, count, bounds) {
     let currentDrawCount = 0; // 当前已绘制数量
     const ctx = this.canvas.getContext('2d');
     const remainFixLabel = {};
@@ -127,6 +128,7 @@ export class Shape extends ViewerCommon {
             remainFixLabel[key] = [item];
           }
         } else {
+          if (!this.isInCanvas(item.region, bounds)) return false;
           this.drawLabel(item);
         }
         currentDrawCount++;
@@ -151,6 +153,7 @@ export class Shape extends ViewerCommon {
             remainNormalLabel[key] = [item];
           }
         } else {
+          if (!this.isInCanvas(item.region, bounds)) return false;
           this.drawLabel(item);
         }
         currentDrawCount++;
@@ -166,7 +169,8 @@ export class Shape extends ViewerCommon {
       this.delaytimer = undefined;
     } else {
       this.delaytimer = setTimeout(() => {
-        this.deepDrawLabel(remainFixLabel, remainNormalLabel, count + 1);
+        this.deepDrawLabel(remainFixLabel, remainNormalLabel, count + 1,
+          bounds);
       }, 100);
     }
   }