kfb-view 2.2.1 → 2.2.4

package/src/tool/Brush.js

@@ -46,6 +46,12 @@ class Brush {
     this.thumb.draw(point, config);
   }
 
+  drawPoints(points, config) {
+    points.forEach((point) => {
+      this.drawThumb(point, config);
+    });
+  }
+
   /**
    * 画笔具体操作
    * @param {Object[]} points - 绘制的点
@@ -62,27 +68,26 @@ class Brush {
    * @param {number} [scale=1]
    */
   drawMeasureInfo(label, info, scale = 1) {
-    const {left, top, content, angle} = info;
+    const {left, top, texts, angle} = info;
     const ctx = this.canvas.getContext('2d');
     ctx.save();
     ctx.beginPath();
     ctx.translate(left, top);
     ctx.rotate(angle);
     ctx.scale(scale, scale);
-    ctx.font = `14px Arial`;
     const widthList = [];
-    content.forEach((info) => {
+    ctx.font = `${this.options.measure.fontSize}px Arial`;
+    texts.forEach((info) => {
       widthList.push(ctx.measureText(info).width);
     });
     const width = Math.max(...widthList);
-    ctx.fillStyle = 'rgba(0,0,0,.5)';
-    const height = content.length * 20 + 16 + (content.length - 1) * 4;
+    ctx.fillStyle = this.options.measure.backgroundColor;
+    const height = texts.length * 20 + 16 + (texts.length - 1) * 4;
     ctx.rect(0, 0, width + 22, height);
     ctx.fill();
     ctx.beginPath();
-    ctx.font = `14px Arial`;
-    ctx.fillStyle = '#FDFDFD';
-    content.forEach((info, index) => {
+    ctx.fillStyle = this.options.measure.color;
+    texts.forEach((info, index) => {
       ctx.fillText(info, 11, 8 + 14 + index * 24);
     });
     ctx.fill();

package/src/tool/Polygon.js

@@ -27,12 +27,6 @@ class Polygon extends Brush {
       }
     }
   }
-
-  drawPoints(points, config) {
-    points.forEach((point) => {
-      this.drawThumb(point, config);
-    });
-  }
 }
 
 export {

package/src/view.js

@@ -19,6 +19,7 @@ export default class KfbView extends EventEmitter {
    * @constructs
    * @param {Object} config 配置参数
    * @param {HTMLElement|string} config.el 图像容器
+   * @param {number=} config.scale 图像的最大倍率
    * @param {Object} config.openSeadragonOptions openSeadragon参数
    * @param {function=} config.tileDrawing openSeadragon绘制tile-drawing事件回调
    * @param {Object} [config.navigator = {}] navigator参数
@@ -27,10 +28,11 @@ export default class KfbView extends EventEmitter {
    * @param {string} config.navigator.width navigator宽度
    * @param {string} config.navigator.height navigator高度
    * @param {string} config.navigator.thumbnail 缩略图地址
-   * @param {boolean=} config.navigator.vestige 是否显示缩略图浏览痕迹
-   * @param {number=} config.navigator.vestigeDelay 浏览痕迹颜色时间
-   * @param {string=} config.navigator.vestigeColor 浏览痕迹颜色
-   * @param {number=} config.navigator.vestigeZoom 浏览痕迹触发倍率
+   * @param {Object} config.navigator.vestige 缩略图浏览痕迹配置
+   * @param {boolean=} config.navigator.vestige.show 是否显示缩略图浏览痕迹
+   * @param {number=} config.navigator.vestige.delay 浏览痕迹颜色时间
+   * @param {string[]=} config.navigator.vestige.colors 浏览痕迹颜色
+   * @param {number[]=} config.navigator.vestige.zooms 浏览痕迹触发倍率
    * @param {Object} config.pxConversion 像素转换参数
    * @param {number} config.pxConversion.imageCapRes 像素转换倍率
    * @param {string} config.pxConversion.unit 单位
@@ -56,9 +58,17 @@ export default class KfbView extends EventEmitter {
    * @param {boolean=} config.board.ROI 是否开启ROI，开启后只能在标注类型是ROI的区域内绘制图形
    * @param {Object} config.graduation 刻度参数
    * @param {boolean=} config.graduation.disabled 是否禁用刻度
+   * @param {boolean=} config.graduation.show 是否显刻度
    * @param {boolean=} config.graduation.custom 是否自定义刻度,抛出graduation-change事件
    * @param {array=} config.graduation.scales 倍率数组
    * @param {array=} config.graduation.microns 刻度长度数组，在对应倍率范围内显示的刻度长度
+   * @param {boolean=} config.grid.disabled 是否禁用网格线
+   * @param {boolean=} config.grid.show 是否显示网格线
+   * @param {boolean=} config.grid.ruler 是否启用标尺
+   * @param {function=} config.measure.handler 标注信息的回调处理
+   * @param {boolean=} config.measure.color 标注注释颜色
+   * @param {boolean=} config.measure.backgroundColor 标注注释背景色
+   * @param {boolean=} config.measure.fontSize 标注注释文字大小
    * @param {array} config.labelList 标注列表
    */
   constructor(config) {
@@ -235,6 +245,7 @@ function initNavigator(kv) {
       containerHeight: config.height,
       containerWidth: config.width,
       element: navigator,
+      scale: config.scale,
       ...config.navigator,
     });
   }
@@ -260,7 +271,16 @@ function initComponentsOptions(kv, type) {
     cache: kv.cache,
     canvas: createCanvas(kv),
     options: {
-      ...config[type], ...pxConversion, thumb: config.thumb ? {
+      scale: config.scale,
+      measure: {
+        backgroundColor: 'rgba(0,0,0,.5)',
+        color: '#FFF',
+        fontSize: 14,
+        ...(config.measure || {}),
+      },
+      ...config[type],
+      ...pxConversion,
+      thumb: config.thumb ? {
         radius: 5,
         activeRadius: 7,
         activeBgColor: '#01d0b0',