@zijin/area-select

AreaSelect

通过所见即所得的方式标识出图片中的不规则区域。

效果图：

使用示例：

注意：

• 本组件依赖与3D框架three；
• 本组件使用原生javascript开发，可以angular、vue、react等框架中使用；
• 可以通过鼠标、键盘或者调用areaEditor实例方法的方式执行命令

todo: 设置坐标轴原点的位置

区域标注组件特点：

1. 支持绘制任意多边形
2. 支持起点、终点自动磁吸
3. 支持调整单个节点的位置
4. 支持撤销操作
5. 支持删除多余节点
6. 支持不可编辑状态和可编辑状态切换
7. 封闭的图形填色
8. 支持同时绘制多副封闭区域
9. 支持在多个封闭区域之间进行切换，只有当前激活的多边形才可以进行编辑
10. 支持已经绘制好的多边形，重新打开
11. 支持当前激活多边形删除

使用(angular)：

npm install @zijin/area-select

angular template

<h2 style="width:800px;margin: 0 auto;text-align: center;">area-select 示例</h2>
<div id="container" style="width:800px;height:500px;margin: 5px auto;"></div>
<div style="width:800px;margin: 5px auto;">
  <button (click)="onClick('getValue')">获取值</button>
  <button (click)="onClick('disable')">禁用</button>
  <button (click)="onClick('enable')">取消禁用</button>
  <button (click)="onClick('newArea')">新建区域（mouse right click）</button>
  <button (click)="onClick('cancelPoint')">撤销（mouse right click）</button>
  <button (click)="onClick('delete')">删除当前处于激活状态的区域(delete)</button>
  <button (click)="onClick('openArea')">打开已封闭区域(backspace)</button>
  <button (click)="onClick('previous')">上一个区域（left arrow）</button>
  <button (click)="onClick('next')">下一个区域（right arrow）</button>
  <button (click)="onClick('clear')">清空</button>
  <br>
  <code>{{text}}</code>
</div>

angular component

import {AfterViewInit, Component} from '@angular/core';
import {AreaEditor} from '@zijin/area-select';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent implements AfterViewInit {
  text = '';

  areaEditor;

  // tslint:disable-next-line:typedef
  onClick(param) {
    switch (param) {
      case 'getValue':
        this.text = JSON.stringify(this.areaEditor.value);
        break;
      case 'disable':
        this.areaEditor.disable();
        break;
      case 'enable':
        this.areaEditor.enable();
        break;
      case 'newArea':
        this.areaEditor.newArea();
        break;
      case 'cancelPoint':
        this.areaEditor.cancelPoint();
        break;
      case 'delete':
        this.areaEditor.delete();
        break;
      case 'openArea':
        this.areaEditor.openArea();
        break;
      case 'previous':
        this.areaEditor.previous();
        break;
      case 'next':
        this.areaEditor.next();
        break;
      case 'clear':
        this.areaEditor.clear();
        break;
    }
  }

  // tslint:disable-next-line:typedef
  ngAfterViewInit() {
    const areaEditor = this.areaEditor = new AreaEditor();
    areaEditor.bootstrap({
      container: document.getElementById('container'),
      layoutUrl: 'assets/layout.jpeg',
      width: 1442,
      height: 834
    });
  }
}