kfb-view 3.2.2 → 3.2.4

package/package.json

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

package/src/components/area/index.js

@@ -12,7 +12,7 @@ import {
   getAngle, getDistance, getPoint,
   getRectPoint,
   isPointInMatrix,
-  pointInOtherPoint, isPointInPolygon, pointsToRegion, isPointInLine,
+  pointInOtherPoint, isPointInPolygon, pointsToRegion, isPointInLine, getRectPointV2,
 } from '../../util/calculate';
 import {
   EVENT_ADD_POLYGON_POINT,
@@ -69,65 +69,60 @@ export class Area extends ViewerCommon {
 
   /**
    * 画线
-   * @param {Object} point
-   * @param {number} index
-   * @param {Boolean=} active 是否是激活状态
+   * @param {array} points
+   * @param {number} position
    */
-  drawLine(point, index, active) {
+  drawLines(points, position) {
     const ctx = this.canvas.getContext('2d');
-    ctx.beginPath();
-    const strokeStyle = !active ?
-      this.options.thumb.color :
-      this.options.thumb.activeColor;
-    const lineWidth = (!active ?
-      this.options.thumb.radius :
-      this.options.thumb.activeRadius) * 2;
-    ctx.strokeStyle = strokeStyle || '#01d0b0';
-    ctx.lineWidth = 2;
-    if (index === 0) {
-      ctx.moveTo(point.x - 5, point.y - 5);
-      ctx.lineTo(point.x - 5 + lineWidth, point.y - 5);
-      ctx.moveTo(point.x - 5, point.y - 5);
-      ctx.lineTo(point.x - 5, point.y - 5 + lineWidth);
-    } else if (index === 1) {
-      ctx.moveTo(point.x, point.y - 5);
-      ctx.lineTo(point.x - lineWidth / 2, point.y - 5);
-      ctx.moveTo(point.x, point.y - 5);
-      ctx.lineTo(point.x + lineWidth / 2, point.y - 5);
-    } else if (index === 2) {
-      ctx.moveTo(point.x + 5, point.y - 5);
-      ctx.lineTo(point.x + 5 - lineWidth, point.y - 5);
-      ctx.moveTo(point.x + 5, point.y - 5);
-      ctx.lineTo(point.x + 5, point.y - 5 + lineWidth);
-    } else if (index === 3) {
-      ctx.moveTo(point.x - 5, point.y);
-      ctx.lineTo(point.x - 5, point.y - lineWidth / 2);
-      ctx.moveTo(point.x - 5, point.y);
-      ctx.lineTo(point.x - 5, point.y + lineWidth / 2);
-    } else if (index === 4 && active) {
-      this.drawPoint(point, active);
-    } else if (index === 5) {
-      ctx.moveTo(point.x + 5, point.y);
-      ctx.lineTo(point.x + 5, point.y - lineWidth / 2);
-      ctx.moveTo(point.x + 5, point.y);
-      ctx.lineTo(point.x + 5, point.y + lineWidth / 2);
-    } else if (index === 6) {
-      ctx.moveTo(point.x - 5, point.y + 5);
-      ctx.lineTo(point.x - 5, point.y + 5 - lineWidth);
-      ctx.moveTo(point.x - 5, point.y + 5);
-      ctx.lineTo(point.x - 5 + lineWidth, point.y + 5);
-    } else if (index === 7) {
-      ctx.moveTo(point.x, point.y + 5);
-      ctx.lineTo(point.x - lineWidth / 2, point.y + 5);
-      ctx.moveTo(point.x, point.y + 5);
-      ctx.lineTo(point.x + lineWidth / 2, point.y + 5);
-    } else if (index === 8) {
-      ctx.moveTo(point.x + 5, point.y + 5);
-      ctx.lineTo(point.x + 5, point.y + 5 - lineWidth);
-      ctx.moveTo(point.x + 5, point.y + 5);
-      ctx.lineTo(point.x + 5 - lineWidth, point.y + 5);
-    }
-    ctx.stroke();
+    const dist = 5;
+    points.forEach((point, index) => {
+      ctx.beginPath();
+      ctx.strokeStyle = strokeStyle || '#01d0b0';
+      ctx.lineWidth = 2;
+      const active = index === position;
+      const strokeStyle = !active ?
+        this.options.thumb.color :
+        this.options.thumb.activeColor;
+      let lineWidth = (!active ?
+        this.options.thumb.radius :
+        this.options.thumb.activeRadius) * 2;
+      if (index === 0 || index === 2) {
+        const point1 = points[1];
+        const point2 = index === 2 ? points[5] : points[3];
+        const ratioX = point1.x > point.x ? -1 : 1;
+        const ratioY = point2.y > point.y ? -1 : 1;
+        ctx.moveTo(point.x + dist * ratioX, point.y + dist * ratioY);
+        ctx.lineTo(point.x + (dist - lineWidth) * ratioX, point.y + dist * ratioY);
+        ctx.moveTo(point.x + dist * ratioX, point.y + dist * ratioY);
+        ctx.lineTo(point.x + dist * ratioX, point.y + (dist - lineWidth) * ratioY);
+      } else if (index === 1 || index === 7) {
+        const point4 = points[4];
+        const ratioY = point4.y > point.y ? -1 : 1;
+        ctx.moveTo(point.x, point.y + dist * ratioY);
+        ctx.lineTo(point.x - lineWidth / 2, point.y + dist * ratioY);
+        ctx.moveTo(point.x, point.y + dist * ratioY);
+        ctx.lineTo(point.x + lineWidth / 2, point.y + dist * ratioY);
+      } else if (index === 3 || index === 5) {
+        const point4 = points[4];
+        const ratioX = point4.x > point.x ? -1 : 1;
+        ctx.moveTo(point.x + dist * ratioX, point.y);
+        ctx.lineTo(point.x + dist * ratioX, point.y - lineWidth / 2);
+        ctx.moveTo(point.x + dist * ratioX, point.y);
+        ctx.lineTo(point.x + dist * ratioX, point.y + lineWidth / 2);
+      } else if (index === 4 && active) {
+        this.drawPoint(point, active);
+      } else if (index === 6 || index === 8) {
+        const point3 = index === 8 ? points[5] : points[3];
+        const point7 = points[7];
+        const ratioY = point3.y > point.y ? -1 : 1;
+        const ratioX = point7.x > point.x ? -1 : 1;
+        ctx.moveTo(point.x + dist * ratioX, point.y + dist * ratioY);
+        ctx.lineTo(point.x + dist * ratioX, point.y + (dist - lineWidth) * ratioY);
+        ctx.moveTo(point.x + dist * ratioX, point.y + dist * ratioY);
+        ctx.lineTo(point.x + (dist - lineWidth) * ratioX, point.y + dist * ratioY);
+      }
+      ctx.stroke();
+    });
   }
 
   /**
@@ -154,7 +149,7 @@ export class Area extends ViewerCommon {
     let selectLabel;
     let prevSelectLabel = undefined;
     const bounds = this.viewport.viewportToImageRectangle(
-      this.viewport.getBounds());
+      this.viewport.getBoundsNoRotate());
     this.labelList.forEach((item) => {
       if (item.tool === IMAGE) {
         return;
@@ -172,19 +167,23 @@ export class Area extends ViewerCommon {
       let moveIndex = -1; // 可移动点位置
       let pointList = []; // 可移动点的集合
       const scale = this.getImageZoom(true) / item.scale;
-      const region = item.region;
-      const startPoint = this.imageToViewerElementCoordinates(region.x,
-        region.y);
-      const endPoint = this.imageToViewerElementCoordinates(
-        region.x + region.width, region.y + region.height);
+      const points = this.imageToViewerElementPoints(item.points);
+      const startPoint = {
+        x: points[0].x,
+        y: points[0].y,
+      };
+      const endPoint = {
+        x: points[points.length - 1].x,
+        y: points[points.length - 1].y,
+      };
       if (REGION_TYPES.includes(item.tool)) {
         // 区域类的图形有9个可移动的点
-        pointList = getRectPoint(startPoint, endPoint);
+        pointList = getRectPointV2(points);
         moveIndex = pointList.findIndex(
           (point) => pointInOtherPoint(point, {x, y}));
       } else if (item.tool === POLYGON) {
         // 曲线，每个有效的点都可以移动
-        pointList = this.setPointsMove(item);
+        pointList = this.setPointsMove(item, points);
         moveIndex = pointList.findIndex(
           (point) => point.canMove && pointInOtherPoint(point, {x, y}));
       } else if (LINE_TYPES.includes(item.tool)) {
@@ -318,25 +317,20 @@ export class Area extends ViewerCommon {
     const selectLabel = this.labelList.find(
       ({tool, select}) => tool === RECTANGLE && select);
     if (selectLabel && !this.movePoint) {
-      const region = this.imageToViewerElementRectangle(selectLabel.region);
+      const points = this.imageToViewerElementPoints(selectLabel.points);
       if (this.isContainerInRegion({x, y}, {
-        ...selectLabel,
-        region,
+        isClose: true,
+        points,
+        tool: RECTANGLE,
+        region: pointsToRegion(points),
       })) {
-        const startPoint = {
-          x: region.x,
-          y: region.y,
+        const centerPoint = {
+          x: (points[points.length - 1].x + points[0].x) / 2,
+          y: (points[points.length - 1].y + points[0].y) / 2,
         };
-        const endPoint = {
-          x: region.x + region.width,
-          y: region.y + region.height,
-        };
-        const pointList = getRectPoint(startPoint, endPoint);
-        const moveIndex = pointList.findIndex(
-          (point) => pointInOtherPoint(point, {x, y}));
-        if (moveIndex === 4) {
+        if (pointInOtherPoint(centerPoint, {x, y})) {
           this.isHover = true;
-          this.drawPoint(pointList[4], !!this.movePoint);
+          this.drawPoint(centerPoint, !!this.movePoint);
         } else if (this.isHover) {
           this.isHover = false;
           this.change();
@@ -386,67 +380,73 @@ export class Area extends ViewerCommon {
     e.preventDefaultAction = true;
     const scale = this.getImageZoom(true) / label.scale;
     const tool = label.tool;
-    const region = label.region;
-    const startPoint = this.imageToViewerElementCoordinates(region.x,
-      region.y);
-    const endPoint = this.imageToViewerElementCoordinates(
-      region.x + region.width, region.y + region.height);
+    const points = this.imageToViewerElementPoints(label.points);
+    const startPoint = points[0];
+    const endPoint = points[points.length - 1];
     const distX = (x - this.lastPoint.x);
     const distY = (y - this.lastPoint.y);
-    let _startPoint = {...startPoint};
-    let _endPoint = {...endPoint};
     if (LINE_TYPES.includes(tool)) {
       if (position === 4) {
-        _startPoint = {x: startPoint.x + distX, y: startPoint.y + distY};
-        _endPoint = {x: endPoint.x + distX, y: endPoint.y + distY};
+        points[0] = {x: startPoint.x + distX, y: startPoint.y + distY};
+        points[1] = {x: endPoint.x + distX, y: endPoint.y + distY};
       }
       if (position === 1) {
-        _startPoint = {x: startPoint.x + distX, y: startPoint.y + distY};
+        points[0] = {x: startPoint.x + distX, y: startPoint.y + distY};
       }
       if (position === 7) {
-        _endPoint = {x: endPoint.x + distX, y: endPoint.y + distY};
+        points[1] = {x: endPoint.x + distX, y: endPoint.y + distY};
       }
     } else if (REGION_TYPES.includes(tool)) {
-      const pointList = getRectPoint(startPoint, endPoint);
+      const pointList = getRectPointV2(points);
       switch (position) {
         case 0:
-          _startPoint = {x: pointList[0].x + distX, y: pointList[0].y + distY};
+          points[0] = {x: pointList[0].x + distX, y: pointList[0].y + distY};
+          points[1] = {x: pointList[2].x, y: pointList[2].y + distY};
+          points[2] = {x: pointList[6].x + distX, y: pointList[6].y};
           break;
         case 1:
-          _startPoint = {x: pointList[0].x, y: pointList[0].y + distY};
+          points[0] = {x: pointList[0].x, y: pointList[0].y + distY};
+          points[1] = {x: pointList[2].x, y: pointList[2].y + distY};
           break;
         case 2:
-          _startPoint = {x: pointList[0].x, y: pointList[0].y + distY};
-          _endPoint = {x: pointList[8].x + distX, y: pointList[8].y};
+          points[0] = {x: pointList[0].x, y: pointList[0].y + distY};
+          points[1] = {x: pointList[2].x + distX, y: pointList[2].y + distY};
+          points[3] = {x: pointList[8].x + distX, y: pointList[8].y};
           break;
         case 3:
-          _startPoint = {x: pointList[0].x + distX, y: pointList[0].y};
+          points[0] = {x: pointList[0].x + distX, y: pointList[0].y};
+          points[2] = {x: pointList[6].x + distX, y: pointList[6].y};
           break;
         case 4:
-          _startPoint = {x: pointList[0].x + distX, y: pointList[0].y + distY};
-          _endPoint = {x: pointList[8].x + distX, y: pointList[8].y + distY};
+          points[0] = {x: pointList[0].x + distX, y: pointList[0].y + distY};
+          points[1] = {x: pointList[2].x + distX, y: pointList[2].y + distY};
+          points[2] = {x: pointList[6].x + distX, y: pointList[6].y + distY};
+          points[3] = {x: pointList[8].x + distX, y: pointList[8].y + distY};
           break;
         case 5:
-          _endPoint = {x: pointList[8].x + distX, y: pointList[8].y};
+          points[1] = {x: pointList[2].x + distX, y: pointList[2].y};
+          points[3] = {x: pointList[8].x + distX, y: pointList[8].y};
           break;
         case 6:
-          _startPoint = {x: pointList[0].x + distX, y: pointList[0].y};
-          _endPoint = {x: pointList[8].x, y: pointList[8].y + distY};
+          points[0] = {x: pointList[0].x + distX, y: pointList[0].y};
+          points[2] = {x: pointList[6].x + distX, y: pointList[6].y + distY};
+          points[3] = {x: pointList[8].x, y: pointList[8].y + distY};
           break;
         case 7:
-          _endPoint = {x: pointList[8].x, y: pointList[8].y + distY};
+          points[2] = {x: pointList[6].x, y: pointList[6].y + distY};
+          points[3] = {x: pointList[8].x, y: pointList[8].y + distY};
           break;
         case 8:
-          _endPoint = {x: pointList[8].x + distX, y: pointList[8].y + distY};
+          points[1] = {x: pointList[2].x + distX, y: pointList[2].y};
+          points[2] = {x: pointList[6].x, y: pointList[6].y + distY};
+          points[3] = {x: pointList[8].x + distX, y: pointList[8].y + distY};
           break;
       }
     } else if (tool === POLYGON) {
-      const points = this.imageToViewerElementPoints(label.points).
-        map((item, index) => ({
-          ...item,
-          index,
-        }));
-      const movePoints = points.filter(({canMove}) => canMove);
+      const movePoints = points.map((item, index) => ({
+        ...item,
+        index,
+      })).filter(({canMove}) => canMove);
       let lastIndex = undefined;
       let nextIndex = undefined;
       // 获取当前移动点的上一个点和下一个点序号
@@ -527,13 +527,13 @@ export class Area extends ViewerCommon {
       });
     } else if (tool === FONT || tool === DOT) {
       if (position === 4) {
-        _startPoint = {x: endPoint.x + distX, y: endPoint.y + distY};
-        _endPoint = {x: endPoint.x + distX, y: endPoint.y + distY};
+        points[0] = {x: endPoint.x + distX, y: endPoint.y + distY};
+        points[1] = {x: endPoint.x + distX, y: endPoint.y + distY};
       }
     } else if (tool === STAR) {
       if (position === 4) {
-        _startPoint = {x: endPoint.x + distX, y: endPoint.y + distY};
-        _endPoint = {x: endPoint.x + distX, y: endPoint.y + distY};
+        points[0] = {x: endPoint.x + distX, y: endPoint.y + distY};
+        points[1] = {x: endPoint.x + distX, y: endPoint.y + distY};
       } else if (position === 0 || position === 2) {
         label.lineWidth -= distY / scale;
       } else if (position === 6 || position === 8) {
@@ -541,20 +541,18 @@ export class Area extends ViewerCommon {
       }
     } else if (tool === FLAG) {
       if (position === 4) {
-        _startPoint = {x: endPoint.x + distX, y: endPoint.y + distY};
-        _endPoint = {x: endPoint.x + distX, y: endPoint.y + distY};
+        points[0] = {x: endPoint.x + distX, y: endPoint.y + distY};
+        points[1] = {x: endPoint.x + distX, y: endPoint.y + distY};
       } else if (position === 0 || position === 2) {
         label.lineWidth -= distY / scale;
       } else if (position === 6 || position === 8) {
         label.lineWidth += distY / scale;
-        _endPoint = {x: endPoint.x, y: endPoint.y + distY};
-        _startPoint = {x: endPoint.x, y: endPoint.y + distY};
+        points[1] = {x: endPoint.x, y: endPoint.y + distY};
+        points[0] = {x: endPoint.x, y: endPoint.y + distY};
       }
     }
     if (tool !== POLYGON) {
-      label.points = [
-        this.viewerElementToImageCoordinates(_startPoint.x, _startPoint.y),
-        this.viewerElementToImageCoordinates(_endPoint.x, _endPoint.y)];
+      label.points = this.viewerElementToImagePoints(points);
     }
     label.region = pointsToRegion(label.points);
     this.mitt.$emit(EVENT_AREA_MOVING, label);
@@ -579,19 +577,9 @@ export class Area extends ViewerCommon {
       }, position === 4);
       this.drawPoint(points[1], position === 7);
     } else if (type === RECTANGLE) {
-      const sp = {
-        x: points[0].x < points[1].x ? points[0].x : points[1].x,
-        y: points[0].y < points[1].y ? points[0].y : points[1].y,
-      };
-      const ep = {
-        x: points[0].x > points[1].x ? points[0].x : points[1].x,
-        y: points[0].y > points[1].y ? points[0].y : points[1].y,
-      };
-      getRectPoint(sp, ep).forEach((point, i) => {
-        this.drawLine(point, i, position === i);
-      });
+      this.drawLines(getRectPointV2(points), position);
     } else if (REGION_TYPES.includes(type)) {
-      getRectPoint(points[0], points[1]).forEach((point, i) => {
+      getRectPointV2(points).forEach((point, i) => {
         this.drawPoint(point, position === i);
       });
     } else if (type === POLYGON) {
@@ -622,15 +610,11 @@ export class Area extends ViewerCommon {
     const label = this.labelList.find((item) => item.select);
     if (!label) return;
     if (label.show === false) return;
-    const region = label.region;
-    const startPoint =
-      this.imageToViewerElementCoordinates(region.x, region.y);
-    const endPoint =
-      this.imageToViewerElementCoordinates(
-        region.x + region.width, region.y + region.height);
+    const points = this.imageToViewerElementPoints(label.points);
+    const startPoint = points[0];
     const scale = this.getImageZoom(true) / label.scale;
     if (!NO_NORMAL_REGION_TYPES.includes(label.tool)) {
-      this.drawThumbPoints([startPoint, endPoint], label.tool);
+      this.drawThumbPoints(this.imageToViewerElementPoints(label.points), label.tool);
     } else if (label.tool === FONT) {
       const fontWidth = this.getFontWidth(label.text, label.fontSize);
       const pt = getPoint(startPoint, {
@@ -666,11 +650,9 @@ export class Area extends ViewerCommon {
         }], label.tool);
     } else if (label.tool === POLYGON) {
       if (this.draging) {
-        const points = this.imageToViewerElementPoints(label.points);
         this.drawThumbPoints(points, label.tool);
       } else {
-        const points = this.setPointsMove(label);
-        this.drawThumbPoints(points, label.tool);
+        this.drawThumbPoints(this.setPointsMove(label, points), label.tool);
       }
     }
     this[label.tool].setContent(this.canvas, {...label});
@@ -678,57 +660,52 @@ export class Area extends ViewerCommon {
 
   showLabelMeasure() {
     const bounds = this.viewport.viewportToImageRectangle(
-      this.viewport.getBounds());
-    const currentScale = this.getImageZoom(true);
-    if (currentScale * this.options.scale < this.options.measure.scale) {
-      const label = this.labelList.find((item) => item.select);
-      if (!label) return;
+      this.viewport.getBoundsNoRotate());
+    const currentScale = this.getImageZoom(true) * this.options.scale;
+    this.labelList.forEach((label) => {
       if (label.show === false) return;
+      if (!this.isInCanvas(label.region, bounds)) return;
+      this.labelDrawingFunc(label);
       if (label.measure === false) return;
-      this[label.tool].drawMeasureInfo.call(this, label,
-        this.getMeasureContent(label));
-    } else {
-      this.labelList.forEach((label) => {
-        if (label.show === false) return;
-        if (label.select && label.measure) {
-          this[label.tool].drawMeasureInfo.call(this, label,
-            this.getMeasureContent(label));
-        } else if (this.options.measure.defaultShow && label.measure) {
-          if (!this.isInCanvas(label.region, bounds)) return false;
-          this[label.tool].drawMeasureInfo.call(this, label,
-            this.getMeasureContent(label));
-        }
-        if (this.options.labelDrawing || this.options.label?.drawing) {
-          if (!this.isInCanvas(label.region, bounds)) return false;
-          const drawingFunc = this.options.label?.drawing ||
-            this.options.labelDrawing;
-          drawingFunc(this.canvas, label,
-            this.imageToViewerElementRectangle(label.region));
-        }
-      });
+      if (label.select) {
+        this[label.tool].drawMeasureInfo.call(this, label,
+          this.getMeasureContent(label));
+      } else if (currentScale >= this.options.measure.scale && this.options.measure.defaultShow) {
+        this[label.tool].drawMeasureInfo.call(this, label,
+          this.getMeasureContent(label));
+      }
+    });
+  }
+
+  labelDrawingFunc(label) {
+    if (this.options.labelDrawing || this.options.label?.drawing) {
+      const drawingFunc = this.options.label?.drawing ||
+        this.options.labelDrawing;
+      drawingFunc(this.canvas, label,
+        this.imageToViewerElementRectangle(label.region));
     }
   }
 
   /**
    * 设置可移动点，两端点相距30px以上认为是可移动点
    * @param {object} label
+   * @param {array} points
    * @return {{}[]}
    */
-  setPointsMove(label) {
-    const movePoints = this.imageToViewerElementPoints(label.points);
-    let lastPoint = movePoints[0];
+  setPointsMove(label, points) {
+    let lastPoint = points[0];
     const dist = this.options.label?.polygonWidth || 30;
-    movePoints.forEach((point, index) => {
+    points.forEach((point, index) => {
       point.canMove = false;
       label.points[index].canMove = false;
       if (index === 0 || (!pointInOtherPoint(lastPoint, point, dist) &&
-          !pointInOtherPoint(movePoints[0], point, dist)) ||
-        (index === movePoints.length - 1)) {
+          !pointInOtherPoint(points[0], point, dist)) ||
+        (index === points.length - 1)) {
         lastPoint = point;
         point.canMove = true;
         label.points[index].canMove = true;
       }
     });
-    return movePoints;
+    return points;
   }
 }

package/src/components/board/index.js

@@ -3,7 +3,7 @@ import * as Tools from '../../tool';
 import {
   POLYGON, DOT, FLAG, MARKS,
   NO_NORMAL_REGION_TYPES,
-  POINT_TYPES, STAR, ELLIPSE,
+  POINT_TYPES, STAR, ELLIPSE, REGION_TYPES,
 } from '../../const/mark';
 import {
   EVENT_START_PAINTING,
@@ -12,7 +12,7 @@ import {
 } from '../../const/event';
 import {
   getAngle,
-  getDistance,
+  getDistance, getRectPoints,
   pointInOtherPoint,
   pointsToRegion,
 } from '../../util/calculate';
@@ -142,8 +142,8 @@ export class Board extends ViewerCommon {
     const tool = this.tool;
     if (tool === POLYGON) {
       this.points.push(point);
-    } else if (ELLIPSE === tool) {
-      this.points = [point, point];
+    } else if (REGION_TYPES.includes(tool)) {
+      this.points = [point, point, point, point];
     } else {
       this.points = [point];
     }
@@ -174,14 +174,9 @@ export class Board extends ViewerCommon {
     }
     e.preventDefaultAction = true;
     const tool = this.tool;
-    if (ELLIPSE === tool) {
-      const _x = point.x - this.points[1].x;
-      const _y = point.y - this.points[1].y;
-      const _point = {
-        x: this.points[1].x - _x,
-        y: this.points[1].y - _y,
-      };
-      this.points = [_point, this.points[1], point];
+    if (REGION_TYPES.includes(tool)) {
+      const firstPoint = this.imageToViewerElementCoordinates(this.points[0].x, this.points[0].y);
+      this.points = this.viewerElementToImagePoints(getRectPoints([firstPoint, {x, y}]));
     } else if (!NO_NORMAL_REGION_TYPES.includes(tool)) {
       this.points = [this.points[0] || point, point];
     } else if (tool === POLYGON) {
@@ -217,23 +212,7 @@ export class Board extends ViewerCommon {
       return;
     }
     const tool = this.tool;
-    if (ELLIPSE === tool) {
-      const _x = point.x - this.points[1].x;
-      const _y = point.y - this.points[1].y;
-      const _point = {
-        x: this.points[1].x - _x,
-        y: this.points[1].y - _y,
-      };
-      this.points = [_point, point];
-      const firstPoint = this.imageToViewerElementCoordinates(this.points[0].x,
-        this.points[0].y);
-      const dist = getDistance(firstPoint, {x, y});
-      if (Math.abs(dist) < 10) {
-        this.points = [];
-        this.clearCanvas();
-        return;
-      }
-    } else if (!NO_NORMAL_REGION_TYPES.includes(tool)) {
+    if (!NO_NORMAL_REGION_TYPES.includes(tool)) {
       const firstPoint = this.imageToViewerElementCoordinates(this.points[0].x,
         this.points[0].y);
       const dist = getDistance(firstPoint, {x, y});
@@ -403,13 +382,13 @@ export class Board extends ViewerCommon {
   }
 
   getPaintOptions() {
-    console.log(this.tool);
     const form = new LabelModel({
       ...this[this.tool].options,
       points: this.points,
       scale: this.getImageZoom(true),
       region: pointsToRegion(this.points),
       tool: this.tool,
+      angle: this.viewport.getRotation() % 360,
     });
     if (form.measure) {
       this[this.tool].drawMeasureInfo.call(this, form,