kfb-view 3.1.2 → 3.1.4

package/package.json

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

package/src/components/common/common.js

@@ -1,8 +1,15 @@
 import {EventEmitter} from '../../util/event-emitter';
 import {Thumb} from '../../tool/Thumb';
 import {
-  acreage, getAngle, perimeter, pointsToRegion,
-  getRectPoint, isPointInEllipse, isPointInMatrix, isPointInPolygon,
+  acreage,
+  getAngle,
+  perimeter,
+  pointsToRegion,
+  getRectPoint,
+  isPointInEllipse,
+  isPointInMatrix,
+  isPointInPolygon,
+  calculatePolygonArea,
 } from '../../util/calculate';
 import {Point, Rect} from '../../plugin/openseadragon/openseadragon';
 import {
@@ -253,8 +260,8 @@ export class ViewerCommon extends EventEmitter {
       }
         break;
       case ELLIPSE: {
-        const w = Math.abs(endPoint.x - startPoint.x);
-        const h = Math.abs(endPoint.y - startPoint.y);
+        const w = Math.abs(endPoint.x - startPoint.x) / 2;
+        const h = Math.abs(endPoint.y - startPoint.y) / 2;
         const pt = perimeter(ELLIPSE, startPoint, endPoint,
           this.options.imageCapRes);
         const ac = acreage(ELLIPSE, startPoint, endPoint,
@@ -316,7 +323,9 @@ export class ViewerCommon extends EventEmitter {
           angle: 0,
           texts: [
             `周长：${(pt * this.options.imageCapRes).toFixed(
-              2)}${this.options.unit}`],
+              2)}${this.options.unit}`,
+            `面积：${calculatePolygonArea(points,
+              this.options.imageCapRes).toFixed(2)}${this.options.unit}²`],
         };
       }
         break;
@@ -360,7 +369,9 @@ export class ViewerCommon extends EventEmitter {
     const ctx = this.canvas.getContext('2d');
     ctx.beginPath();
     ctx.font = `${size}px Arial`;
-    return ctx.measureText(text).width;
+    const texts = text.split('\n');
+    const maxText = texts.sort((a, b) => a.length > b.length ? -1 : 1)[0];
+    return ctx.measureText(maxText).width;
   }
 
   /**

package/src/tool/Font.js

@@ -30,7 +30,10 @@ class Font extends Brush {
     ctx.rotate(angle / 180 * Math.PI);
     ctx.scale(scale, scale);
     ctx.font = `${this.options.fontSize}px Arial`;
-    ctx.fillText(text, 0, 0);
+    const texts = text.split('\n');
+    texts.forEach((v, index) => {
+      ctx.fillText(v, 0, 0 + index * this.options.fontSize);
+    });
     ctx.restore();
   }
 }

package/src/util/calculate.js

@@ -395,6 +395,32 @@ function acreage(type, startPoint, endPoint, imageCapRes = 1) {
   return ag;
 }
 
+function calculatePolygonArea(points, ratio) {
+  const numVertices = points.length;
+
+  if (numVertices < 3) {
+    // 无法构成多边形，返回0
+    return 0;
+  }
+
+  let area = 0;
+
+  for (let i = 0; i < numVertices; i++) {
+    const currentVertex = points[i];
+    const nextVertex = points[(i + 1) % numVertices]; // 下一个顶点
+
+    const x1 = currentVertex.x * ratio;
+    const y1 = currentVertex.y * ratio;
+    const x2 = nextVertex.x * ratio;
+    const y2 = nextVertex.y * ratio;
+
+    area += (x1 * y2 - x2 * y1); // 通过叉乘计算每个三角形的面积
+  }
+
+  // 最终的面积可能为负数，取绝对值
+  return Math.abs(area / 2);
+}
+
 /**
  * 几何图形的周长
  * @param {string} type
@@ -414,8 +440,8 @@ function perimeter(type, startPoint, endPoint, imageCapRes = 1) {
     pt = (distX + distY) * 2;
   }
   if (type === 'Ellipse') {
-    const a = distX >= distY ? distX : distY;
-    const b = distX >= distY ? distY : distX;
+    const a = (distX >= distY ? distX : distY) / 2;
+    const b = (distX >= distY ? distY : distX) / 2;
     pt = 4 * (a - b) + 2 * Math.PI * b;
   }
   /* if (type === 'polygon') {
@@ -440,4 +466,5 @@ export {
   getPoint,
   getAngle,
   getDistance,
+  calculatePolygonArea,
 };