kfb-view 3.3.5 → 3.3.6

package/src/tool/Image.js

@@ -1,5 +1,5 @@
 import {Brush} from './Brush';
-import {getDistance, getRectPoints} from '../util/calculate';
+import {pointsToRegion} from '../util/calculate';
 import {EventEmitter} from '../util/event-emitter';
 
 const et = new EventEmitter();
@@ -22,41 +22,22 @@ class Image extends Brush {
    * @param {number} points[].x - 绘制的点x坐标
    * @param {number} points[].y - 绘制的点y坐标
    * @param {number=} scale
-   * @param {number=} angle
    */
-  draw(points, scale = 1, angle = 0) {
-    if (points.length === 2) {
-      points = getRectPoints(points);
-    }
-    const width = getDistance(points[1], points[0]);
-    const height = getDistance(points[2], points[0]);
-    const region = {
-      ...points[0],
-      width,
-      height,
-    };
+  draw(points, scale = 1) {
+    const region = pointsToRegion(points);
     if (this.options.imgLoadSuccess) {
-      this.drawImage(this.options.img, region, angle);
+      this.drawImage(this.options.img, region);
     } else if (this.options.img) {
       const img = this.options.img;
       et.$once('load', () => {
-        this.drawImage(img, region, angle);
+        this.drawImage(img, region);
       }, true, img);
     }
   }
 
-  drawImage(img, region, angle = 0) {
+  drawImage(img, region) {
     const ctx = this.canvas.getContext('2d');
-    ctx.beginPath();
-    ctx.save();
-    ctx.translate(region.x, region.y);
-    if (angle < 0) {
-      angle += 360;
-    }
-    const _rotation = angle % 360;
-    ctx.rotate(_rotation * Math.PI / 180);
-    ctx.drawImage(img, 0, 0, region.width, region.height);
-    ctx.restore();
+    ctx.drawImage(img, region.x, region.y, region.width, region.height);
   }
 }
 

package/src/view.js

@@ -1,8 +1,9 @@
 import openSeadragon from './plugin/openseadragon/openseadragon';
+import * as zr from './plugin/zrender/zrender';
 import './util/canvas';
 import {EventEmitter} from './util/event-emitter';
 import {$, dataType, deepClone} from './util';
-import {pointsToRegion, regionToPoint} from './util/calculate';
+import {pointsToRegion} from './util/calculate';
 import * as COMPONENTS from './const/component';
 import * as EVENTS from './const/event';
 import * as Components from './components';
@@ -113,6 +114,9 @@ export default class KfbView extends EventEmitter {
       width,
       height,
     };
+    // 必须初始化 openSeaDragon navigator
+    // 根据配置 启用不同模块功能： 标注模式，阅片模式，辅助工具集
+    // 阅片模式 支持轻量级标注
     this.mitt = {
       $on: this.$on,
       $emit: this.$emit,
@@ -126,6 +130,9 @@ export default class KfbView extends EventEmitter {
     initEvent(this);
     this.initLabelList(config.labelList || []);
     this.resizeViewContainer(this.$options);
+    if (config.showZrender) {
+      initZrender(this);
+    }
   }
 
   /**
@@ -133,17 +140,11 @@ export default class KfbView extends EventEmitter {
    * @param {Array} list
    */
   initLabelList(list) {
-    this.labelList = list.map((item) => {
-      if (!item.points?.length) {
-        const {startPoint, endPoint} = regionToPoint(item.region);
-        item.points = [startPoint, endPoint];
-      }
-      return new LabelModel({
-        ...item,
-        region: item.region || pointsToRegion(item.points),
-        __data__: deepClone(item),
-      });
-    });
+    this.labelList = list.map((item) => new LabelModel({
+      ...item,
+      region: item.region || pointsToRegion(item.points),
+      __data__: deepClone(item),
+    }));
     this.board?.setLabelList?.(this.labelList);
     this.shape?.setLabelList?.(this.labelList);
     this.area?.setLabelList?.(this.labelList);
@@ -151,17 +152,11 @@ export default class KfbView extends EventEmitter {
 
   appendLabelList(list) {
     this.labelList = [
-      ...this.labelList, ...list.map((item) => {
-        if (!item.points?.length) {
-          const {startPoint, endPoint} = regionToPoint(item.region);
-          item.points = [startPoint, endPoint];
-        }
-        return new LabelModel({
-          ...item,
-          region: item.region || pointsToRegion(item.points),
-          __data__: deepClone(item),
-        });
-      })];
+      ...this.labelList, ...list.map((item) => new LabelModel({
+        ...item,
+        region: item.region || pointsToRegion(item.points),
+        __data__: deepClone(item),
+      }))];
     this.board?.setLabelList?.(this.labelList);
     this.shape?.setLabelList?.(this.labelList);
     this.area?.setLabelList?.(this.labelList);
@@ -289,6 +284,23 @@ function initNavigator(kv) {
   }
 }
 
+// zrender的重绘 要在openSeaDragon触发渲染时间中去实时执行
+function initZrender(kv) {
+  const element = document.createElement('div');
+  element.setAttribute('id', 'openseadragon-zrender');
+  element.style.cssText += 'position:absolute;bottom: 0;left:0;width:100%;height:100%;z-index:0';
+  kv.viewer.canvas.appendChild(element);
+  kv.zViewer = zr.init(element, {renderer: 'canvas'});
+  kv.zApi = zr;
+  kv.openSeadragon = openSeadragon;
+  kv.viewer.addHandler('open', () => {
+    kv.$emit(EVENTS.EVENT_INIT_COMPLETE);
+  });
+  kv.viewer.addHandler('update-viewport', ()=>{
+    kv.$emit(EVENTS.EVENT_UPDATE_ZRENDER);
+  });
+}
+
 function createCanvas(kv) {
   const config = kv.$options;
   const canvas = document.createElement('canvas');
@@ -527,7 +539,6 @@ KfbView.marks = {};
 MARKS.forEach((key) => {
   KfbView.marks[key.toLocaleUpperCase()] = key;
 });
-
 KfbView.events = {
   ...EVENTS,
 };