kfb-view 2.2.9 → 2.3.0

package/package.json

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

package/src/components/area/index.js

@@ -6,7 +6,7 @@ import {
   LINE_TYPES, MARKS,
   NO_NORMAL_REGION_TYPES,
   REGION_TYPES,
-  STAR, IMAGE,
+  STAR, IMAGE, RECTANGLE,
 } from '../../const/mark';
 import {
   baseNumber, getAngle, getDistance, getPoint,
@@ -66,6 +66,69 @@ export class Area extends ViewerCommon {
     });
   }
 
+  /**
+   * 画线
+   * @param {Object} point
+   * @param {number} index
+   * @param {Boolean=} active 是否是激活状态
+   */
+  drawLine(point, index, active) {
+    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();
+  }
+
   /**
    * 设置List
    * @param {Object} list
@@ -256,6 +319,26 @@ export class Area extends ViewerCommon {
     });
   }
 
+  onCanvasMove({x, y}) {
+    const selectLabel = this.labelList.find(
+      ({tool, select}) => tool === RECTANGLE && select);
+    if (selectLabel) {
+      const region = selectLabel.region;
+      const startPoint = this.imageToViewerElementCoordinates(region.x,
+        region.y);
+      const endPoint = this.imageToViewerElementCoordinates(
+        region.x + region.width, region.y + region.height);
+      const pointList = getRectPoint(startPoint, endPoint);
+      const moveIndex = pointList.findIndex(
+        (point) => pointInOtherPoint(point, {x, y}));
+      if (moveIndex === 4) {
+        this.drawPoint(pointList[4], !!this.movePoint);
+      } else {
+        this.change();
+      }
+    }
+  }
+
   /**
    * 监听鼠标释放事件
    * @param {Object} e
@@ -489,6 +572,10 @@ export class Area extends ViewerCommon {
         y: (points[0].y + points[1].y) / 2,
       }, position === 4);
       this.drawPoint(points[1], position === 7);
+    } else if (type === RECTANGLE) {
+      getRectPoint(points[0], points[1]).forEach((point, i) => {
+        this.drawLine(point, i, position === i);
+      });
     } else if (REGION_TYPES.includes(type)) {
       getRectPoint(points[0], points[1]).forEach((point, i) => {
         this.drawPoint(point, position === i);

package/src/view.js

@@ -411,6 +411,9 @@ function initEvent(kv) {
   new openSeadragon.MouseTracker({
     element: kv.viewer.canvas,
     moveHandler: function(event) {
+      if (kv.area?.onCanvasMove) {
+        kv.area.onCanvasMove(event.position);
+      }
       if (isRightDown && kv.board?.isInDraw) {
         console.log('nonprimary drag');
         let delta = event.position.minus(dragPosition);