kfb-view 2.2.4 → 2.2.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kfb-view",
   "description": "一个在线kfb的阅片软件",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "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,
+  STAR, IMAGE,
 } from '../../const/mark';
 import {
   baseNumber, getAngle, getDistance, getPoint,
@@ -90,6 +90,9 @@ export class Area extends ViewerCommon {
     let selectLabel;
     let prevSelectLabel = undefined;
     this.labelList.forEach((item) => {
+      if (item.tool === IMAGE) {
+        return;
+      }
       if (item.select) {
         prevSelectLabel = item;
       }

package/src/components/shape/index.js

@@ -1,12 +1,10 @@
 import {
-  HAS_REGION_TYPES,
+  HAS_REGION_TYPES, IMAGE,
   MARKS, NO_NORMAL_REGION_TYPES, POINT_TYPES, POLYGON, REGION_TYPES,
 } from '../../const/mark';
 import {ViewerCommon} from '../common/common';
 import * as Tools from '../../tool';
 import {Combination} from '../../tool/Combination';
-import {EVENT_CANCEL_SELECT_LABEL} from '../../const/event';
-import * as EVENTS from '../../const/event';
 
 /**
  * 用来显示标注线的canvas
@@ -70,7 +68,12 @@ export class Shape extends ViewerCommon {
     // strokeStyle, lineWidth, fillStyle 相同认为是一个路径下的图形，一起绘制，优化性能
     const sameFixWidthLabel = {}; // star, flag, star, font lineWidth固定为2
     const sameNormalLabel = {};
+    const imageLabel = [];
     labelList.forEach((item) => {
+      if (item.tool === IMAGE) {
+        imageLabel.push(item);
+        return;
+      }
       const key = `${item.strokeStyle ?? ''}_${item.lineWidth ??
       ''}_${item.fillStyle ?? ''}`;
       const regionKey = `${item.strokeStyle ?? ''}_${item.lineWidth ?? ''}`;
@@ -111,6 +114,9 @@ export class Shape extends ViewerCommon {
         tool,
       })), this.viewport.getRotation());
     });
+    imageLabel.forEach((item) => {
+      this.drawLabel(item);
+    });
   }
 
   deepDrawLabel(sameFixWidthLabel, sameNormalLabel, count, bounds) {

package/src/const/mark.js

@@ -8,6 +8,7 @@ export const FONT = 'Font';
 export const STAR = 'Star';
 export const FLAG = 'Flag';
 export const DOT = 'Dot';
+export const IMAGE = 'Image';
 
 export const POINT_TYPES = [FONT, STAR, FLAG, DOT];
 export const REGION_TYPES = [RECTANGLE, ELLIPSE];
@@ -24,4 +25,5 @@ export const MARKS = [
   FONT,
   STAR,
   FLAG,
-  DOT];
+  DOT,
+  IMAGE];

package/src/model/label.model.js

@@ -17,6 +17,7 @@ export class LabelModel {
     this.measure = data.measure; // 是否显示测量信息
     this.points = data.points; // 绘制点
     this.tool = data.tool; // 绘制工具
+    this.src = data.src; // 图片地址
     this.scale = data.scale; // 绘制倍率
     this.region = data.region; // 绘制区域
     this.move = data.move; // 是否可移动
@@ -27,5 +28,13 @@ export class LabelModel {
     this.show = data.show ?? true; // 是否显示
     this.__other__ = data.__other__ || {}; // 其他信息
     this.__data__ = data.__data__ ?? data; // 记录原始数据
+    if (this.src) {
+      this.img = new Image();
+      this.img.src = this.src;
+      this.imgLoadSuccess = false;
+      this.img.onload = () => {
+        this.imgLoadSuccess = true;
+      };
+    }
   }
 }

package/src/tool/Image.js

@@ -0,0 +1,41 @@
+import {Brush} from './Brush';
+import {pointsToRegion} from '../util/calculate';
+
+/**
+ * 线段类
+ * @class
+ */
+class Image extends Brush {
+  /**
+   * 初始化数据
+   */
+  constructor() {
+    super();
+  }
+
+  /**
+   * 画线
+   * @param {Object[]} points - 绘制的点
+   * @param {number} points[].x - 绘制的点x坐标
+   * @param {number} points[].y - 绘制的点y坐标
+   * @param {number=} scale
+   */
+  draw(points, scale = 1) {
+    const region = pointsToRegion(points);
+    const ctx = this.canvas.getContext('2d');
+    const drawImage = () => {
+      ctx.drawImage(this.options.img, region.x, region.y, region.width,
+        region.height);
+      this.options.img.removeEventListener('load', drawImage);
+    };
+    if (this.options.imgLoadSuccess) {
+      drawImage();
+    } else if (this.options.img) {
+      this.options.img.addEventListener('load', drawImage);
+    }
+  }
+}
+
+export {
+  Image,
+};

package/src/tool/index.js

@@ -9,3 +9,4 @@ export {Font} from './Font';
 export {Star} from './Star';
 export {Flag} from './Flag';
 export {Dot} from './Dot';
+export {Image} from './Image';