kfb-view 2.2.7 → 2.2.9

package/package.json

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

package/src/components/area/index.js

@@ -517,6 +517,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 +573,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

@@ -11,6 +11,7 @@ import {
   EVENT_IN_PAINTING,
 } from '../../const/event';
 import {
+  getAngle,
   getDistance,
   pointInOtherPoint,
   pointsToRegion,
@@ -344,7 +345,18 @@ export class Board extends ViewerCommon {
       if (index === 0) return true;
       if (index === this.points.length - 1) return true;
       if (pointInOtherPoint(firstPoint, _p, 30)) {
-        return false;
+        const nextPoint = points[index + 1];
+        if (nextPoint) {
+          const deg = Math.abs(getAngle(_p, firstPoint, nextPoint));
+          const angle = deg * 180 / Math.PI;
+          if (angle < 90) {
+            firstPoint = _p;
+            return true;
+          }
+          return false;
+        } else {
+          return false;
+        }
       } else {
         firstPoint = _p;
         return true;
@@ -371,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/plugin/openseadragon/openseadragon.js

@@ -17344,6 +17344,7 @@ function OpenSeadragon(options) {
         sourceHeight: sourceHeight,
         position: position,
         size: size,
+        pixelDensityRatio: $.pixelDensityRatio,
       });
       /* context.drawImage(
          rendered.canvas,

package/src/tool/Brush.js

@@ -69,12 +69,15 @@ 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();
     ctx.translate(left, top);
     ctx.rotate(angle);
-    ctx.scale(scale, scale);
+    // ctx.scale(scale, scale);
     const widthList = [];
     ctx.font = `${this.options.measure.fontSize}px Arial`;
     texts.forEach((info) => {

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],