kfb-view 3.2.2 → 3.2.4

package/src/components/common/common.js

@@ -8,7 +8,7 @@ import {
   isPointInEllipse,
   isPointInMatrix,
   isPointInPolygon,
-  calculatePolygonArea,
+  calculatePolygonArea, getRectPointV2,
 } from '../../util/calculate';
 import {Point, Rect} from '../../plugin/openseadragon/openseadragon';
 import {
@@ -93,6 +93,9 @@ export class ViewerCommon {
    * @return {boolean}
    */
   isContainerInRegion(point, {region, tool, points, isClose}) {
+    if (tool === POLYGON && isClose) {
+      return isPointInPolygon(point, points);
+    }
     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};
@@ -107,9 +110,6 @@ export class ViewerCommon {
     if (tool === RECTANGLE) {
       return isPointInMatrix(p1, p2, p3, p4, point);
     }
-    if (tool === POLYGON && isClose) {
-      return isPointInPolygon(point, points);
-    }
     return false;
   }
 
@@ -178,6 +178,23 @@ export class ViewerCommon {
     });
   }
 
+
+  /**
+   * 转化图像点数组到元素坐标点数组
+   * @param {Array} points
+   * @return {{}[]}
+   */
+  viewerElementToImagePoints(points) {
+    return (points || []).map((point) => {
+      const p = this.viewerElementToImageCoordinates(point.x, point.y);
+      return {
+        canMove: point.canMove,
+        x: p.x,
+        y: p.y,
+      };
+    });
+  }
+
   /**
    * 返回图像倍率
    * @param {boolean} current Pass true for the current location; defaults to false (target location).
@@ -224,36 +241,12 @@ export class ViewerCommon {
         };
         const w = Math.abs(endPoint.x - startPoint.x);
         const h = Math.abs(endPoint.y - startPoint.y);
-        const center = {
-          x: (endPoint.x + startPoint.x) / 2,
-          y: (endPoint.y + startPoint.y) / 2,
-        };
-        const deg = getAngle(startPoint, {...startPoint, x: startPoint.x + 1},
-          endPoint);
-        const p = this.imageToViewerElementCoordinates(center.x,
-          center.y);
-        let distY = -50;
-        let distX = -50;
-        if (endPoint.y < startPoint.y && endPoint.x > startPoint.x) {
-          distY = -50;
-          distX = -50;
-        }
-        if (endPoint.y < startPoint.y && endPoint.x < startPoint.x) {
-          distY = -10;
-          distX = 50;
-        }
-        if (endPoint.y > startPoint.y && endPoint.x > startPoint.x) {
-          distY = 10;
-          distX = -50;
-        }
-        if (endPoint.y > startPoint.y && endPoint.x < startPoint.x) {
-          distY = 50;
-          distX = 80;
-        }
+        const p = this.imageToViewerElementCoordinates(endPoint.x,
+          endPoint.y);
         content = {
-          left: p.x + distX * scale,
-          top: p.y + distY * scale,
-          angle: deg,
+          left: p.x + 10 * scale,
+          top: p.y,
+          angle: 0,
           texts: [
             `长：${this.getUnitNumber((Math.sqrt(w * w + h * h) * this.options.imageCapRes).toFixed(2))}`],
         };

package/src/components/graduation/index.js

@@ -17,7 +17,7 @@ export class Graduation extends ViewerCommon {
   constructor({viewer, canvas, cache, options}) {
     super(viewer, canvas, cache, options);
     this.microns = options.microns ||
-      [5000, 2000, 1500, 1250, 1000, 800, 500, 400, 250, 200, 150, 125, 100, 80, 60, 40, 20, 10, 8, 5];
+      [5000, 2000, 1500, 1250, 1000, 800, 500, 400, 250, 200, 150, 125, 100, 80, 60, 40, 20, 10, 8, 5, 4, 2, 1];
   }
 
   /**
@@ -25,8 +25,9 @@ export class Graduation extends ViewerCommon {
    */
   change() {
     const microns = this.microns;
-    const rect = this.viewerElementToImageRectangle({x: 0, y: 0, width: 50, height: 50});
-    const max = rect.height * this.options.imageCapRes;
+    const startPoint = this.viewerElementToImageCoordinates(0, 0);
+    const endPoint = this.viewerElementToImageCoordinates(50, 0);
+    const max = endPoint.distanceTo(startPoint) * this.options.imageCapRes;
     const index = this.microns.findIndex((i) => i <= max);
     if (!~index) {
       this.setScaleLine(microns[microns.length - 1],
@@ -45,7 +46,7 @@ export class Graduation extends ViewerCommon {
   setScaleLine(txt, px) {
     const startPoint = this.imageToViewerElementCoordinates(0, 0);
     const endPoint = this.imageToViewerElementCoordinates(px, 0);
-    const width = Math.abs(endPoint.x - startPoint.x);
+    const width = endPoint.distanceTo(startPoint);
     if (this.options.custom) {
       this.mitt.$emit(EVENT_GRADUATION_CHANGE, {width, txt});
     } else {

package/src/components/shape/index.js

@@ -1,6 +1,6 @@
 import {
   HAS_NO_FILL_TYPES,
-  HAS_REGION_TYPES, IMAGE,
+  IMAGE,
   MARKS, POINT_TYPES, POLYGON, REGION_TYPES,
 } from '../../const/mark';
 import {ViewerCommon} from '../common/common';
@@ -51,7 +51,7 @@ export class Shape extends ViewerCommon {
   change() {
     this.clearCanvas();
     const bounds = this.viewport.viewportToImageRectangle(
-      this.viewport.getBounds());
+      this.viewport.getBoundsNoRotate());
     // strokeStyle, lineWidth, fillStyle 相同认为是一个路径下的图形，一起绘制，优化性能
     const sameFixWidthLabel = {}; // star, flag, star, font lineWidth固定为2
     const sameNormalLabel = {};
@@ -173,7 +173,7 @@ export class Shape extends ViewerCommon {
         }, item.child.map(({points, tool}) => ({
           points: this.imageToViewerElementPoints(points),
           tool,
-        })), this.viewport.getRotation());
+        })), this.getAngle(item.angle));
       });
     } else {
       this.delaytimer = setTimeout(() => {
@@ -184,16 +184,20 @@ export class Shape extends ViewerCommon {
     }
   }
 
+  getAngle(angle) {
+    const currentAngle = this.viewport.getRotation() % 360;
+    return angle ? angle > currentAngle ? currentAngle - angle + 360 : currentAngle - angle : currentAngle;
+  }
+
   drawLabel(item) {
     item.viewerElementPoints = this.imageToViewerElementPoints(item.points);
     const points = item.viewerElementPoints;
     this[item.tool].setContent(this.canvas, item);
     if (REGION_TYPES.includes(item.tool)) {
-      this[item.tool].draw(points, this.viewport.getRotation(),
-        this.imageToViewerElementRectangle(item.region));
+      this[item.tool].draw(points, this.getAngle(item.angle));
     } else {
       const scale = this.getImageZoom(true) / item.scale;
-      this[item.tool].draw(points, scale);
+      this[item.tool].draw(points, scale, this.getAngle(item.angle));
     }
   }
 }

package/src/tool/Combination.js

@@ -1,6 +1,6 @@
 import {Brush} from './Brush';
 import {POLYGON, ELLIPSE, RECTANGLE} from '../const/mark';
-import {pointsToRegion} from '../util/calculate';
+import {getRectPoints, pointsToRegion} from '../util/calculate';
 
 /**
  * 曲线类
@@ -17,16 +17,23 @@ class Combination extends Brush {
    */
   draw(parent, children, rotation = 0) {
     const ctx = this.canvas.getContext('2d');
-    const {tool, points} = parent;
+    let {tool, points} = parent;
     ctx.beginPath();
     ctx.save();
+    if (points.length === 2) {
+      points = getRectPoints(points);
+    }
     const region = pointsToRegion(points);
     const centerPoint = {
       x: region.x + region.width / 2,
       y: region.y + region.height / 2,
     };
     ctx.translate(centerPoint.x, centerPoint.y);
-    ctx.rotate(rotation * Math.PI / 180);
+    if (rotation < 0) {
+      rotation += 360;
+    }
+    const _rotation = rotation % 360;
+    ctx.rotate(_rotation * Math.PI / 180);
     if (tool === POLYGON) {
       ctx.drawPolygon(points.map((p) => ({
         x: p.x - centerPoint.x,
@@ -48,6 +55,9 @@ class Combination extends Brush {
     ctx.closePath();
     ctx.restore();
     children.forEach(({tool, points}) => {
+      if (points.length === 2) {
+        points = getRectPoints(points);
+      }
       ctx.save();
       const region = pointsToRegion(points);
       const centerPoint = {
@@ -55,7 +65,7 @@ class Combination extends Brush {
         y: region.y + region.height / 2,
       };
       ctx.translate(centerPoint.x, centerPoint.y);
-      ctx.rotate(rotation * Math.PI / 180);
+      ctx.rotate(_rotation * Math.PI / 180);
       if (tool === POLYGON) {
         ctx.drawPolygon(points.map((p) => ({
           x: p.x - centerPoint.x,

package/src/tool/Ellipse.js

@@ -1,4 +1,5 @@
 import {Brush} from './Brush';
+import {getDistance, getRectPoints} from '../util/calculate';
 
 /**
  * 椭圆类
@@ -18,9 +19,8 @@ class Ellipse extends Brush {
    * @param {number} points[].x - 绘制的点x坐标
    * @param {number} points[].y - 绘制的点y坐标
    * @param {number} rotation
-   * @param {Object} region
    */
-  draw(points, rotation = 0, region) {
+  draw(points, rotation = 0) {
     const startPoint = points[0];
     const endPoint = points[points.length - 1];
     const ctx = this.canvas.getContext('2d');
@@ -29,24 +29,23 @@ class Ellipse extends Brush {
     if (this.options.fillStyle) {
       ctx.fillStyle = this.options.fillStyle;
     }
+    if (points.length === 2) {
+      points = getRectPoints(points);
+    }
     ctx.save();
     const centerPoint = {
       x: (startPoint.x + endPoint.x) / 2,
       y: (startPoint.y + endPoint.y) / 2,
     };
-    const width = region?.width ?
-      Math.abs(region.width) :
-      Math.abs(endPoint.x - startPoint.x);
-    const height = region?.height ?
-      Math.abs(region.height) :
-      Math.abs(endPoint.y - startPoint.y);
+    const width = getDistance(points[1], points[0]);
+    const height = getDistance(points[2], points[0]);
     ctx.translate(centerPoint.x, centerPoint.y);
-    ctx.rotate(rotation * Math.PI / 180);
-    if (rotation < 90 && rotation >= 0 || rotation > 180 && rotation < 270) {
-      ctx.drawOval(0, 0, width / 2, height / 2);
-    } else {
-      ctx.drawOval(0, 0, height / 2, width / 2);
+    if (rotation < 0) {
+      rotation += 360;
     }
+    const _rotation = rotation % 360;
+    ctx.rotate(_rotation * Math.PI / 180);
+    ctx.drawOval(0, 0, width / 2, height / 2);
     ctx.restore();
   }
 }

package/src/tool/Font.js

@@ -18,16 +18,17 @@ class Font extends Brush {
    * @param {number} points[].x - 绘制的点x坐标
    * @param {number} points[].y - 绘制的点y坐标
    * @param {number=} scale
+   * @param {number} rotation
    */
-  draw(points, scale = 1) {
+  draw(points, scale = 1, rotation = 0) {
     const point = points[0];
-    const angle = this.options.angle || 0;
     const text = this.options.text || '编辑文字';
     const ctx = this.canvas.getContext('2d');
     ctx.fillStyle = this.options.strokeStyle;
     ctx.save();
+    const _rotation = rotation % 360;
     ctx.translate(point.x, point.y);
-    ctx.rotate(angle / 180 * Math.PI);
+    ctx.rotate(_rotation * Math.PI / 180);
     ctx.scale(scale, scale);
     ctx.font = `${this.options.fontSize}px Arial`;
     const texts = text.split('\n');

package/src/tool/Rectangle.js

@@ -1,4 +1,5 @@
 import {Brush} from './Brush';
+import {getRectPoints} from '../util/calculate';
 
 /**
  * 矩形类
@@ -17,12 +18,11 @@ class Rectangle extends Brush {
    * @param {Object[]} points - 绘制的点
    * @param {number} points[].x - 绘制的点x坐标
    * @param {number} points[].y - 绘制的点y坐标
-   * @param {number} rotation
-   * @param {Object} region
    */
-  draw(points, rotation = 0, region) {
-    const startPoint = points[0];
-    const endPoint = points[points.length - 1];
+  draw(points) {
+    if (points.length === 2) {
+      points = getRectPoints(points);
+    }
     const ctx = this.canvas.getContext('2d');
     ctx.lineWidth = this.options.lineWidth;
     ctx.strokeStyle = this.options.strokeStyle;
@@ -30,24 +30,11 @@ class Rectangle extends Brush {
       ctx.fillStyle = this.options.fillStyle;
     }
     ctx.save();
-    const centerPoint = {
-      x: (startPoint.x + endPoint.x) / 2,
-      y: (startPoint.y + endPoint.y) / 2,
-    };
-    const width = region?.width ?
-      Math.abs(region.width) :
-      Math.abs(endPoint.x - startPoint.x);
-    const height = region?.height ?
-      Math.abs(region.height) :
-      Math.abs(endPoint.y - startPoint.y);
-    ctx.translate(centerPoint.x, centerPoint.y);
-    if (rotation < 90 && rotation >= 0 || rotation > 180 && rotation < 270) {
-      ctx.rotate(rotation * Math.PI / 180);
-      ctx.rect(-width / 2, -height / 2, width, height);
-    } else {
-      ctx.rotate(rotation * Math.PI / 180);
-      ctx.rect(-height / 2, -width / 2, height, width);
-    }
+    ctx.moveTo(points[0].x, points[0].y);
+    ctx.lineTo(points[1].x, points[1].y);
+    ctx.lineTo(points[3].x, points[3].y);
+    ctx.lineTo(points[2].x, points[2].y);
+    ctx.lineTo(points[0].x, points[0].y);
     ctx.restore();
   }
 }

package/src/util/calculate.js

@@ -51,6 +51,43 @@ function getRectPoint(startPoint, endPoint, deg = 0) {
     }];
 }
 
+/**
+ * 通过起始点和结束点获取矩形中的9个点
+ * @param {Object} points
+ * @param {number=} deg
+ * @return {*[]}
+ */
+function getRectPointV2(points, deg = 0) {
+  if (points.length === 2) {
+    return getRectPoint(points[0], points[1], deg);
+  }
+  const centerX = (points[0].x + points[3].x) / 2;
+  const centerY = (points[0].y + points[3].y) / 2;
+  return [
+    points[0],
+    {
+      x: (points[1].x + points[0].x) / 2,
+      y: (points[1].y + points[0].y) / 2,
+    },
+    points[1],
+    {
+      x: (points[2].x + points[0].x) / 2,
+      y: (points[2].y + points[0].y) / 2,
+    }, {
+      x: centerX,
+      y: centerY,
+    }, {
+      x: (points[1].x + points[3].x) / 2,
+      y: (points[1].y + points[3].y) / 2,
+    },
+    points[2],
+    {
+      x: (points[2].x + points[3].x) / 2,
+      y: (points[2].y + points[3].y) / 2,
+    },
+    points[3]];
+}
+
 /*
 * 叉乘计算公式 a×b ＝（x1y2－x2y1）
 * @param {Object} p1
@@ -239,6 +276,14 @@ function pointsToRegion(points) {
       height: points[1].y - points[0].y,
     };
   }
+  if (points.length === 4) {
+    return {
+      x: points[0].x,
+      y: points[0].y,
+      width: getDistance(points[1], points[0]) * (points[0].x < points[1].x ? 1 : -1),
+      height: getDistance(points[2], points[0]) * (points[0].y < points[2].y ? 1 : -1),
+    };
+  }
   const sortPointX = [...points].sort((a, b) => a.x - b.x);
   const sortPointY = [...points].sort((a, b) => a.y - b.y);
   const startPoint = {x: sortPointX[0].x, y: sortPointY[0].y};
@@ -334,6 +379,21 @@ function getPoint(cen, first, deg) {
   };
 }
 
+/**
+ * 通过两个点计算矩形的四个点
+ *  @param {array} points
+ * */
+function getRectPoints(points) {
+  return [
+    points[0], {
+      x: points[1].x,
+      y: points[0].y,
+    }, {
+      x: points[0].x,
+      y: points[1].y,
+    }, points[1]];
+}
+
 /**
  * 计算三点之间的夹角
  * @param {object} cen
@@ -472,4 +532,6 @@ export {
   getDistance,
   calculatePolygonArea,
   getRandomId,
+  getRectPoints,
+  getRectPointV2,
 };