kfb-view 3.2.6 → 3.2.8

package/package.json

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

package/src/components/common/common.js

@@ -18,6 +18,8 @@ import {
   RECTANGLE,
 } from '../../const/mark';
 
+import locale from '../locale';
+
 /**
  * 通用方法类
  * @class
@@ -202,6 +204,10 @@ export class ViewerCommon {
       this.viewport.getZoom(current));
   }
 
+  translate(key) {
+    return locale[(this.options.lang ?? 'zh-cn').toLocaleLowerCase()][key];
+  }
+
   getMeasureContent(label) {
     let content = {
       left: 0,
@@ -245,7 +251,7 @@ export class ViewerCommon {
           top: p.y,
           angle: 0,
           texts: [
-            `长：${this.getUnitNumber(Math.sqrt(w * w + h * h) * this.options.imageCapRes)}`],
+            `${this.translate('length')}：${this.getUnitNumber(Math.sqrt(w * w + h * h) * this.options.imageCapRes)}`],
         };
       }
         break;
@@ -262,10 +268,10 @@ export class ViewerCommon {
           top: p.y,
           angle: 0,
           texts: [
-            `长轴：${this.getUnitNumber(a)}`,
-            `短轴：${this.getUnitNumber(b)}`,
-            `周长：${this.getUnitNumber(4 * (a - b) + 2 * Math.PI * b)}`,
-            `面积：${this.getUnitNumber(Math.PI * a * b / this.options.binary)}²`],
+            `${this.translate('long_axis')}：${this.getUnitNumber(a)}`,
+            `${this.translate('short_axis')}：${this.getUnitNumber(b)}`,
+            `${this.translate('perimeter')}：${this.getUnitNumber(4 * (a - b) + 2 * Math.PI * b)}`,
+            `${this.translate('area')}：${this.getUnitNumber(Math.PI * a * b / this.options.binary)}²`],
         };
       }
         break;
@@ -282,10 +288,10 @@ export class ViewerCommon {
           top: p.y,
           angle: 0,
           texts: [
-            `长：${this.getUnitNumber(w)}`,
-            `宽：${this.getUnitNumber(h)}`,
-            `周长：${this.getUnitNumber(pt)}`,
-            `面积：${this.getUnitNumber(ac)}²`],
+            `${this.translate('length')}：${this.getUnitNumber(w)}`,
+            `${this.translate('width')}：${this.getUnitNumber(h)}`,
+            `${this.translate('perimeter')}：${this.getUnitNumber(pt)}`,
+            `${this.translate('area')}：${this.getUnitNumber(ac)}²`],
         };
       }
         break;
@@ -304,8 +310,8 @@ export class ViewerCommon {
           top: p.y,
           angle: 0,
           texts: [
-            `周长：${this.getUnitNumber((pt * this.options.imageCapRes).toFixed(2))}`,
-            `面积：${this.getUnitNumber(
+            `${this.translate('perimeter')}：${this.getUnitNumber((pt * this.options.imageCapRes).toFixed(2))}`,
+            `${this.translate('area')}：${this.getUnitNumber(
               calculatePolygonArea(points, this.options.imageCapRes) / this.options.binary)}²`],
         };
       }

package/src/components/locale/index.js

@@ -0,0 +1,7 @@
+import {default as en} from './lang/en';
+import {default as zhCn} from './lang/zh-cn';
+
+export default {
+  'en': en,
+  'zh-cn': zhCn,
+};

package/src/components/locale/lang/en.js

@@ -0,0 +1,12 @@
+export default {
+  length: 'Length',
+  width: 'Width',
+  perimeter: 'Perimeter',
+  area: 'Area',
+  long_axis: 'Long Axis',
+  short_axis: 'Short Axis',
+  complete_screenshot: 'Double-click within the area to complete screenshot',
+  cancel_screenshot: 'Double-click outside or press ESC to cancel screenshot',
+  area_size: 'Area size is ',
+  drag_resize: 'drag resize',
+};

package/src/components/locale/lang/zh-cn.js

@@ -0,0 +1,12 @@
+export default {
+  length: '长',
+  width: '宽',
+  perimeter: '周长',
+  area: '面积',
+  long_axis: '长轴',
+  short_axis: '短轴',
+  complete_screenshot: '双击区域内表示完成截图',
+  cancel_screenshot: '双击区域外或按ESC表示取消截图',
+  area_size: '区域大小为：',
+  drag_resize: '拖动调整',
+};

package/src/components/tailoring/index.js

@@ -8,6 +8,7 @@ import {
   pointInOtherPoint,
   isPointInMatrix,
 } from '../../util/calculate';
+import {Point, Rect} from '../../plugin/openseadragon/openseadragon';
 
 /**
  * 用来裁剪/截图
@@ -57,21 +58,13 @@ export class Tailoring extends ViewerCommon {
       pointList[6],
       pointList[8]];
     if (now) {
-      this.emitTailoringRegion();
-      this.mitt.$emit(EVENT_TAILORING_SCREENSHOT, {
-        base64: this.getScreenCanvasImage(),
-        region: this.viewerElementToImageRectangle({
-          x: this.tailoringPoints[0].x, y: this.tailoringPoints[0].y,
-          width: this.tailoringPoints[3].x - this.tailoringPoints[0].x,
-          height: this.tailoringPoints[3].y - this.tailoringPoints[0].y,
-        }),
-      });
+      this.emitScreenShot();
       this.stopTailoring();
     } else {
       this.color = color || '#FFF';
       this.contents = contents?.length ?
         contents :
-        ['双击区域内表示完成截图', '双击区域外或按ESC表示取消截图'];
+        [];
       this.change();
     }
   }
@@ -136,17 +129,38 @@ export class Tailoring extends ViewerCommon {
     ctx.font = '18px Arial';
     const width = (rightTop.x - leftTop.x).toFixed(2) / 1;
     const height = (rightBottom.y - rightTop.y).toFixed(2) / 1;
-    ctx.fillText(
-      this.contents?.[2] ?
-        this.contents[2](width, height) :
-        (`区域大小为：${width}*${height}`),
-      leftTop.x, leftTop.y - 50);
-    ctx.fillText(this.contents?.[0] ?? `双击区域内表示完成截图`, leftTop.x,
-      leftTop.y - 30);
-    ctx.fillText(this.contents?.[1] ?? `双击区域外或按ESC表示取消截图`,
-      leftTop.x,
-      leftTop.y - 10);
+    ctx.fillText(this.contents?.[2] ?
+      this.contents[2](width, height) :
+      (`${this.translate('area_size')}${width}*${height}，${this.translate('drag_resize')}`), leftTop.x, leftTop.y - 50);
+    ctx.fillText(this.contents?.[0] ?? `${this.translate('complete_screenshot')}`, leftTop.x, leftTop.y - 30);
+    ctx.fillText(this.contents?.[1] ?? `${this.translate('cancel_screenshot')}`, leftTop.x, leftTop.y - 10);
     ctx.stroke();
+    ctx.beginPath();
+    ctx.fillStyle = '#000000';
+    let areaInterval = 4;
+    let areaDist = 100;
+    if (rightTop.x + areaDist + areaInterval > this.canvas.width) {
+      areaDist = -100;
+      areaInterval = -4;
+    }
+    ctx.rect(rightTop.x + areaInterval, rightTop.y, areaDist, 40);
+    ctx.fill();
+    ctx.save();
+    ctx.beginPath();
+    ctx.translate(rightTop.x + areaInterval + areaDist / 2, rightTop.y - 5);
+    ctx.fillStyle = '#ffffff';
+    ctx.drawConfirm();
+    ctx.restore();
+    ctx.save();
+    ctx.beginPath();
+    if (areaDist < 0) {
+      ctx.translate(rightTop.x + areaDist + areaInterval, rightTop.y - 5);
+    } else {
+      ctx.translate(rightTop.x + areaInterval, rightTop.y - 5);
+    }
+    ctx.fillStyle = '#ffffff';
+    ctx.drawCancel();
+    ctx.restore();
   }
 
   /**
@@ -158,6 +172,24 @@ export class Tailoring extends ViewerCommon {
   onCanvasPress({x, y}) {
     this.movePointIndex = this.tailoringPoints.findIndex(
       (point) => pointInOtherPoint(point, {x, y}, 30));
+    const rightTopPoint = this.tailoringPoints[1];
+
+    let areaInterval = 4;
+    let areaDist = 100;
+    let cancelArea = new Rect(rightTopPoint.x + 14, rightTopPoint.y, 30, 40);
+    let confirmArea = new Rect(rightTopPoint.x + 64, rightTopPoint.y, 30, 40);
+    if (rightTopPoint.x + areaDist + areaInterval > this.canvas.width) {
+      cancelArea = new Rect(rightTopPoint.x - 94, rightTopPoint.y, 30, 40);
+      confirmArea = new Rect(rightTopPoint.x - 44, rightTopPoint.y, 30, 40);
+    }
+    const point = new Point(x, y);
+    if (cancelArea.containsPoint(point)) {
+      this.stopTailoring();
+    }
+    if (confirmArea.containsPoint(point)) {
+      this.emitScreenShot();
+      this.stopTailoring();
+    }
   }
 
   /**
@@ -242,6 +274,20 @@ export class Tailoring extends ViewerCommon {
         };
         break;
     }
+    this.tailoringPoints.forEach((i) => {
+      if (i.x < 0) {
+        i.x = 0;
+      }
+      if (i.y < 0) {
+        i.y = 0;
+      }
+      if (i.x > this.canvas.width) {
+        i.x = this.canvas.width;
+      }
+      if (i.y > this.canvas.height) {
+        i.y = this.canvas.height;
+      }
+    });
     this.clearCanvas();
     this.drawRect();
     this.drawTailoring();
@@ -262,19 +308,23 @@ export class Tailoring extends ViewerCommon {
 
   onCanvasDblClick(position) {
     if (this.tailoringPoints.length > 0 && this.isPointInMatrix(position)) {
-      this.emitTailoringRegion();
-      this.mitt.$emit(EVENT_TAILORING_SCREENSHOT, {
-        base64: this.getScreenCanvasImage(),
-        region: this.viewerElementToImageRectangle({
-          x: this.tailoringPoints[0].x, y: this.tailoringPoints[0].y,
-          width: this.tailoringPoints[3].x - this.tailoringPoints[0].x,
-          height: this.tailoringPoints[3].y - this.tailoringPoints[0].y,
-        }),
-      });
+      this.emitScreenShot();
     }
     this.stopTailoring();
   }
 
+  emitScreenShot() {
+    this.emitTailoringRegion();
+    this.mitt.$emit(EVENT_TAILORING_SCREENSHOT, {
+      base64: this.getScreenCanvasImage(),
+      region: this.viewerElementToImageRectangle({
+        x: this.tailoringPoints[0].x, y: this.tailoringPoints[0].y,
+        width: this.tailoringPoints[3].x - this.tailoringPoints[0].x,
+        height: this.tailoringPoints[3].y - this.tailoringPoints[0].y,
+      }),
+    });
+  }
+
   /**
    * 判断鼠标在区域内
    * @param {Object} point 鼠标位置

package/src/util/canvas.js

@@ -192,3 +192,56 @@ CanvasRenderingContext2D.prototype.bezierCurve = function(...rest) {
 };
 
 
+CanvasRenderingContext2D.prototype.drawConfirm = function drawConfirm() {
+  this.save();
+  this.miterLimit = 4;
+  this.scale(0.046875, 0.046875);
+  this.save();
+  this.beginPath();
+  this.moveTo(836.266667, 311.466667);
+  this.lineTo(806.4, 281.59999999999997);
+  this.bezierCurveTo(797.866667, 273.06666699999994, 785.0666669999999, 273.06666699999994, 776.533333,
+    281.59999999999997);
+  this.lineTo(435.2, 622.933333);
+  this.bezierCurveTo(430.933333, 627.1999999999999, 430.933333, 627.1999999999999, 426.66666699999996, 622.933333);
+  this.lineTo(264.53333399999997, 460.79999999999995);
+  this.bezierCurveTo(256.00000099999994, 452.2666669999999, 243.20000099999996, 452.2666669999999, 234.66666699999996,
+    460.79999999999995);
+  this.lineTo(204.79999999999995, 490.66666699999996);
+  this.bezierCurveTo(196.26666699999996, 499.2, 196.26666699999996, 511.99999999999994, 204.79999999999995, 520.533334);
+  this.lineTo(422.4, 738.133334);
+  this.bezierCurveTo(426.66666699999996, 742.400001, 435.2, 742.400001, 439.466667, 738.133334);
+  this.lineTo(836.266667, 341.333333);
+  this.bezierCurveTo(844.8, 332.8, 844.8, 320, 836.266667, 311.466667);
+  this.closePath();
+  this.fill();
+  this.stroke();
+  this.restore();
+  this.restore();
+};
+
+CanvasRenderingContext2D.prototype.drawCancel = function drawCancel() {
+  this.save();
+  this.miterLimit = 4;
+  this.scale(0.046875, 0.046875);
+  this.save();
+  this.beginPath();
+  this.moveTo(768, 307.552);
+  this.lineTo(716.448, 256);
+  this.lineTo(512, 460.448);
+  this.lineTo(307.552, 256);
+  this.lineTo(256, 307.552);
+  this.lineTo(460.448, 512);
+  this.lineTo(256, 716.448);
+  this.lineTo(307.552, 768);
+  this.lineTo(512, 563.552);
+  this.lineTo(716.448, 768);
+  this.lineTo(768, 716.448);
+  this.lineTo(563.552, 512);
+  this.lineTo(768, 307.552);
+  this.closePath();
+  this.fill();
+  this.stroke();
+  this.restore();
+  this.restore();
+};

package/src/view.js

@@ -86,6 +86,7 @@ export default class KfbView extends EventEmitter {
    * @param {function=} config.labelDrawing 标注绘制回调   @deprecated Use label.drawing instead
    * @param {array} config.labelList 标注列表
    * @param {function} config.handleKey 按钮处理回调
+   * @param {string} config.lang 语言
    */
   constructor(config) {
     super();
@@ -299,6 +300,7 @@ function initComponentsOptions(kv, type) {
     options: {
       mitt: kv.mitt,
       scale: config.scale,
+      lang: config.lang,
       labelDrawing: config.labelDrawing,
       label: config.label || {},
       measure: {