kfb-view 2.2.8 → 2.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kfb-view",
   "description": "一个在线kfb的阅片软件",
-  "version": "2.2.8",
+  "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);
@@ -517,6 +604,7 @@ export class Area extends ViewerCommon {
    */
   change() {
     this.clearCanvas();
+    this.showLabelMeasure();
     const label = this.labelList.find((item) => item.select);
     if (!label) return;
     if (label.show === false) return;
@@ -572,9 +660,34 @@ export class Area extends ViewerCommon {
       }
     }
     this[label.tool].setContent(this.canvas, {...label});
-    if (label.measure && label.select) {
+  }
+
+  showLabelMeasure() {
+    const bounds = 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;
+      if (label.show === false) return;
+      if (label.measure === false) return;
       this[label.tool].drawMeasureInfo.call(this, label,
-        this.getMeasureContent(label), scale);
+        this.getMeasureContent(label));
+    } else {
+      this.labelList.forEach((label) => {
+        if (label.show === false) return;
+        if (label.measure === false) return;
+        const content = this.getMeasureContent(label);
+        if (label.select) {
+          this[label.tool].drawMeasureInfo.call(this, label, content);
+        } else if (this.options.measure.defaultShow) {
+          if (!this.isInCanvas(label.region, bounds)) return false;
+          this[label.tool].drawMeasureInfo.call(this, label, content);
+        }
+        if (this.options.labelDrawing) {
+          this.options.labelDrawing(this.canvas, label,
+            this.imageToViewerElementRectangle(label.region));
+        }
+      });
     }
   }
 

package/src/components/board/index.js

@@ -383,7 +383,10 @@ export class Board extends ViewerCommon {
     });
     if (form.measure) {
       this[this.tool].drawMeasureInfo.call(this, form,
-        this.getMeasureContent(form));
+        this.getMeasureContent({
+          ...form,
+          select: true,
+        }));
     }
     return form;
   }

package/src/components/common/common.js

@@ -314,11 +314,12 @@ export class ViewerCommon extends EventEmitter {
       }
         break;
     }
+    const handler = label.select ?
+      (this.options.measure.selectHandler || this.options.measure.handler) :
+      this.options.measure.handler;
     return {
       ...content,
-      texts: this.options.measure.handler ?
-        this.options.measure.handler(content.texts, label) :
-        content.texts,
+      texts: handler ? handler(content.texts, label) : content.texts,
     };
   }
 

package/src/tool/Brush.js

@@ -69,6 +69,9 @@ class Brush {
    */
   drawMeasureInfo(label, info, scale = 1) {
     const {left, top, texts, angle} = info;
+    if (!texts.length) {
+      return;
+    }
     const ctx = this.canvas.getContext('2d');
     ctx.save();
     ctx.beginPath();

package/src/view.js

@@ -66,9 +66,13 @@ export default class KfbView extends EventEmitter {
    * @param {boolean=} config.grid.show 是否显示网格线
    * @param {boolean=} config.grid.ruler 是否启用标尺
    * @param {function=} config.measure.handler 标注信息的回调处理
+   * @param {function=} config.measure.selectHandler 标注信息选中时的回调处理
    * @param {boolean=} config.measure.color 标注注释颜色
    * @param {boolean=} config.measure.backgroundColor 标注注释背景色
    * @param {boolean=} config.measure.fontSize 标注注释文字大小
+   * @param {boolean=} config.measure.defaultShow 标注是否默认永久显示，false表示只在选中时显示
+   * @param {boolean=} config.measure.scale 标注默认永久显示时的倍率，
+   * @param {boolean=} config.labelDrawing 标注绘制回调，
    * @param {array} config.labelList 标注列表
    */
   constructor(config) {
@@ -272,10 +276,13 @@ function initComponentsOptions(kv, type) {
     canvas: createCanvas(kv),
     options: {
       scale: config.scale,
+      labelDrawing: config.labelDrawing,
       measure: {
         backgroundColor: 'rgba(0,0,0,.5)',
         color: '#FFF',
         fontSize: 14,
+        scale: 10,
+        defaultShow: false,
         ...(config.measure || {}),
       },
       ...config[type],
@@ -404,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);