@bixi/label-angular v10.0.0-rc7.3

• 在线体验
• 代码仓库

1. 安装使用

安装依赖

yarn add @bixi/label-angular

修改 angular.json

{
  "architect": {
    "build": {
      "options": {
        "assets": [
          {
            "glob": "**/*",
            "input": "node_modules/@bixi/label-angular/engine",
            "output": "/bixi-label-engine"
          }
        ]
      }
    }    
  }
}

模块注册

import { BixiLabelModule } from '@bixi/label-angular';

@NgModule({
  imports: [
    BixiLabelModule,
  ]
})
export class SharedModule { }

2. 设计理念

Label Engine

标注引擎（通过 iframe 引入）, 只负责单纯做两件事：

1. 标注图层的渲染
2. 标注事件的监听

LabelTextHub 和 LabelTableHub

在使用标注器组件时候你需要先实例化一个标注控制器，然后将其传入标注组件，之后标注的所有事件都将会被它所接管，以文本标注为例

import { LabelTextHub } from '@bixi/label-angular';

@Component({
  template: `
  <bixi-label-text
    engine="./bixi-label-engine/index.html"
    [hub]="hub">
  </bixi-label-text>`
})
export class LabelHubDemoComponent{
  hub = new LabelTextHub({
    dev: true,
  });
}

对于业务组件而言, LabelTextHub 就像是一个邮局，它可以告诉你有哪些事件发生，也允许你主动往它上面投递事件等待引擎处理，比如

export class LabelHubDemoComponent{
  hub = new LabelHub({
    dev: true,
  });

  ngOnInit() {
    this.hub.pagination$
      .subscribe(({ pageNumber }) => {
        console.warn('内部更改了页码', pageNumber);
      });
  }

  pageChange() {
    // 业务组件主动更改页码
    this.hub.setPageNumber(2);
  }
}

LabelTextHub 对修改是封闭的，但是对扩展是完全开放的，我们将核心数据都实现了成员保护，只有当你需要完全定制 Hub 的时候，你可以继承它然后扩展它，就像下面这样可以实现 Hook 的功能

import { LabelTextHub } from '@bixi/label-angular';

export class MyHub extends LabelTextHub {
  constructor(options) {
    super(options);
  }

  setZoom(zoom) {
    console.warn('set zoom1', zoom);
    this._api.setZoom(zoom);
    console.warn('set zoom2', zoom);
  }
}

但如果像上面这样仅仅是打印日志的话，那么你可以不必这么舍近求远，我们提供了开发模式，丰富的日志可以帮助你快速排查问题，而它仅需要一行配置

hub = new LabelTextHub({
  dev: true
});

3. 使用细节

3.0 文本和表格通用 API

首先我们需要知道，不管是 LabelTextHub 还是 LabelTableHub，实际上都是继承自 LabelHub，以下是通用的 API

LabelHub

构造参数

成员属性

成员方法

3.1 文本标注

示例代码

LabelTextHub

成员方法

bixi-label-text

3.2 表格标注

示例代码

LabelTableHub

成员方法

bixi-label-text

Type

interface IInitBaseOptions {
  id: string;
  pdfUrl: string;
  pdfInfoUrl: string;
  pdfCharsUrl: string;
  engineMode: EngineMode;
  pdfSize?: number;
}

export interface ITextInitOptions extends IInitBaseOptions {
  operateMode: TextOperateMode;
  selectedLabeStyle?: Partial<CSSStyleDeclaration>;
  labelStyle?: Partial<CSSStyleDeclaration>;
}

export interface ITableInitOptions extends IInitBaseOptions {
  operateMode: TableOperateMode;
  mergeable?: boolean;
  splitable?: boolean;
}

更多详细类型定义