kfb-view 3.2.3 → 3.2.4

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,
 };