kfb-view 3.2.7 → 3.2.9

package/package.json

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

package/src/components/shape/index.js

@@ -105,12 +105,14 @@ export class Shape extends ViewerCommon {
       clearTimeout(this.delaytimer);
       this.delaytimer = undefined;
     }
-    this.deepDrawLabel(sameFixWidthLabel, sameNormalLabel, regionLabelList,
-      imageLabel, 1, bounds);
+    // 优先绘制图片标注
+    imageLabel.forEach((item) => {
+      this.drawLabel(item);
+    });
+    this.deepDrawLabel(sameFixWidthLabel, sameNormalLabel, regionLabelList, 1, bounds);
   }
 
-  deepDrawLabel(sameFixWidthLabel, sameNormalLabel, regionLabelList,
-                imageLabel, count, bounds) {
+  deepDrawLabel(sameFixWidthLabel, sameNormalLabel, regionLabelList, count, bounds) {
     let currentDrawCount = 0; // 当前已绘制数量
     const ctx = this.canvas.getContext('2d');
     const remainFixLabel = {};
@@ -118,7 +120,7 @@ export class Shape extends ViewerCommon {
       const labels = sameFixWidthLabel[key];
       ctx.beginPath();
       labels.forEach((item) => {
-        if (currentDrawCount >= 2000) { // 一次最多绘制2000个标注，多余标注延迟绘制
+        if (currentDrawCount >= 4000) { // 一次最多绘制4000个点，多余标注延迟绘制
           if (remainFixLabel[key]) {
             remainFixLabel[key].push(item);
           } else {
@@ -127,7 +129,7 @@ export class Shape extends ViewerCommon {
         } else {
           this.drawLabel(item);
         }
-        currentDrawCount++;
+        currentDrawCount = currentDrawCount + item.points.length;
       });
       const firstLabel = labels?.[0];
       if (firstLabel?.fillStyle) {
@@ -142,7 +144,7 @@ export class Shape extends ViewerCommon {
       const labels = sameNormalLabel[key];
       ctx.beginPath();
       labels.forEach((item) => {
-        if (currentDrawCount >= 2000) { // 一次最多绘制2000个标注，多余标注延迟绘制
+        if (currentDrawCount >= 4000) { // 一次最多绘制4000个点，多余标注延迟绘制
           if (remainNormalLabel[key]) {
             remainNormalLabel[key].push(item);
           } else {
@@ -151,7 +153,7 @@ export class Shape extends ViewerCommon {
         } else {
           this.drawLabel(item);
         }
-        currentDrawCount++;
+        currentDrawCount = currentDrawCount + item.points.length;
       });
       const firstLabel = labels?.[0];
       ctx.lineWidth = firstLabel.lineWidth;
@@ -162,9 +164,6 @@ export class Shape extends ViewerCommon {
       Object.keys(remainNormalLabel).length === 0) {
       console.log(`end deep draw label, draw count: ${count}`);
       this.delaytimer = undefined;
-      imageLabel.forEach((item) => {
-        this.drawLabel(item);
-      });
       regionLabelList.forEach((item) => {
         this.combination.setContent(this.canvas, item);
         this.combination.draw({
@@ -177,8 +176,7 @@ export class Shape extends ViewerCommon {
       });
     } else {
       this.delaytimer = setTimeout(() => {
-        this.deepDrawLabel(remainFixLabel, remainNormalLabel, regionLabelList,
-          imageLabel, count + 1,
+        this.deepDrawLabel(remainFixLabel, remainNormalLabel, regionLabelList, count + 1,
           bounds);
       }, 100);
     }

package/src/components/tailoring/index.js

@@ -137,17 +137,27 @@ export class Tailoring extends ViewerCommon {
     ctx.stroke();
     ctx.beginPath();
     ctx.fillStyle = '#000000';
-    ctx.rect(rightTop.x + 4, rightTop.y, 100, 40);
+    let areaInterval = 4;
+    let areaDist = 100;
+    if (rightTop.x + areaDist + areaInterval > this.canvas.width) {
+      areaDist = -100;
+      areaInterval = -4;
+    }
+    ctx.rect(rightTop.x + areaInterval, rightTop.y, areaDist, 40);
     ctx.fill();
     ctx.save();
     ctx.beginPath();
-    ctx.translate(rightTop.x + 54, rightTop.y - 5);
+    ctx.translate(rightTop.x + areaInterval + areaDist / 2, rightTop.y - 5);
     ctx.fillStyle = '#ffffff';
     ctx.drawConfirm();
     ctx.restore();
     ctx.save();
     ctx.beginPath();
-    ctx.translate(rightTop.x + 4, rightTop.y - 5);
+    if (areaDist < 0) {
+      ctx.translate(rightTop.x + areaDist + areaInterval, rightTop.y - 5);
+    } else {
+      ctx.translate(rightTop.x + areaInterval, rightTop.y - 5);
+    }
     ctx.fillStyle = '#ffffff';
     ctx.drawCancel();
     ctx.restore();
@@ -163,8 +173,15 @@ export class Tailoring extends ViewerCommon {
     this.movePointIndex = this.tailoringPoints.findIndex(
       (point) => pointInOtherPoint(point, {x, y}, 30));
     const rightTopPoint = this.tailoringPoints[1];
-    const cancelArea = new Rect(rightTopPoint.x + 14, rightTopPoint.y, 30, 40);
-    const confirmArea = new Rect(rightTopPoint.x + 64, rightTopPoint.y, 30, 40);
+
+    let areaInterval = 4;
+    let areaDist = 100;
+    let cancelArea = new Rect(rightTopPoint.x + 14, rightTopPoint.y, 30, 40);
+    let confirmArea = new Rect(rightTopPoint.x + 64, rightTopPoint.y, 30, 40);
+    if (rightTopPoint.x + areaDist + areaInterval > this.canvas.width) {
+      cancelArea = new Rect(rightTopPoint.x - 94, rightTopPoint.y, 30, 40);
+      confirmArea = new Rect(rightTopPoint.x - 44, rightTopPoint.y, 30, 40);
+    }
     const point = new Point(x, y);
     if (cancelArea.containsPoint(point)) {
       this.stopTailoring();
@@ -257,6 +274,20 @@ export class Tailoring extends ViewerCommon {
         };
         break;
     }
+    this.tailoringPoints.forEach((i) => {
+      if (i.x < 0) {
+        i.x = 0;
+      }
+      if (i.y < 0) {
+        i.y = 0;
+      }
+      if (i.x > this.canvas.width) {
+        i.x = this.canvas.width;
+      }
+      if (i.y > this.canvas.height) {
+        i.y = this.canvas.height;
+      }
+    });
     this.clearCanvas();
     this.drawRect();
     this.drawTailoring();

package/src/tool/Image.js

@@ -1,5 +1,5 @@
 import {Brush} from './Brush';
-import {pointsToRegion} from '../util/calculate';
+import {getDistance, getRectPoints} from '../util/calculate';
 import {EventEmitter} from '../util/event-emitter';
 
 const et = new EventEmitter();
@@ -22,22 +22,41 @@ class Image extends Brush {
    * @param {number} points[].x - 绘制的点x坐标
    * @param {number} points[].y - 绘制的点y坐标
    * @param {number=} scale
+   * @param {number=} angle
    */
-  draw(points, scale = 1) {
-    const region = pointsToRegion(points);
+  draw(points, scale = 1, angle = 0) {
+    if (points.length === 2) {
+      points = getRectPoints(points);
+    }
+    const width = getDistance(points[1], points[0]);
+    const height = getDistance(points[2], points[0]);
+    const region = {
+      ...points[0],
+      width,
+      height,
+    };
     if (this.options.imgLoadSuccess) {
-      this.drawImage(this.options.img, region);
+      this.drawImage(this.options.img, region, angle);
     } else if (this.options.img) {
       const img = this.options.img;
       et.$once('load', () => {
-        this.drawImage(img, region);
+        this.drawImage(img, region, angle);
       }, true, img);
     }
   }
 
-  drawImage(img, region) {
+  drawImage(img, region, angle = 0) {
     const ctx = this.canvas.getContext('2d');
-    ctx.drawImage(img, region.x, region.y, region.width, region.height);
+    ctx.beginPath();
+    ctx.save();
+    ctx.translate(region.x, region.y);
+    if (angle < 0) {
+      angle += 360;
+    }
+    const _rotation = angle % 360;
+    ctx.rotate(_rotation * Math.PI / 180);
+    ctx.drawImage(img, 0, 0, region.width, region.height);
+    ctx.restore();
   }
 }