npm package: @grombolar/polygon.js
Description: canvas draw polygon
Author: grombolar
Latest version: 1.1.21
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# CANVAS 绘制多边形

### 使用方法

NPM 引入

```bash
npm install --save @grombolar/polygon.js

import polygon from '@grombolar/polygon.js';
```

HTML 引入

```html
<script src="polygon.js"></script>
<canvas id="canvas" width="800" height="800"></canvas>
<script>
  const pCanvas = polygon.createCanvas("canvas");
  // 监听点的变化
  pCanvas.on(pCanvas.POLYGON_CHANGE,(data)=>{
    console.log(data);
  })
  // 全屏框选
  const fullscreen = () => pCanvas.fullscreen();
  // 清空全部图形
  const clearAll = () => pCanvas.clearAll();
  // 删除选中图形
  const deletePolygon = () => pCanvas.deletePolygon();
  // 选中多边形
  const deletePolygon = () => pCanvas.selectPolygon();
</script>
```

### Config 参数与说明

| Field                    | Type    | Default               | Description                    |
| ------------------------ | ------- | --------------------- | ------------------------------ |
| lineWidth                | number  | 1                     | 多边形边宽度                   |
| lineColor                | string  | 'rgb(0,255,255)'      | 多边形边颜色                   |
| fillColor                | string  | 'rgba(0,255,255,0.6)' | 多边形填充颜色                 |
| pointRadiu               | number  | 4                     | 多边形顶点半径                 |
| pointBorderColor         | string  | 'rgb(0,255,255)'      | 多边形顶点边框颜色             |
| pointFillColor           | string  | 'rgb(0,255,255)'      | 多边形顶点颜色                 |
| activeLineWidth          | number  | 2                     | 选中的多边形边框宽度           |
| activeLineColor          | string  | 'rgb(21,132,218)'     | 选中的多边形边框颜色           |
| activeFillColor          | string  | 'rgba(21,132,218,.5)' | 选中的多边形填充颜色           |
| activePolygonPointRadius | number  | 6                     | 选中多边形顶点的半径           |
| activePointRadiu         | number  | 8                     | 选中的点半径                   |
| activePointBorderColor   | string  | 'rgb(0,0,0)'          | 选中的点半径边框颜色           |
| activePointFillColor     | string  | 'rgb(21,132,218)'     | 选中多边形顶点颜色             |
| fillPath                 | boolean | true                  | 是否填充多边形                 |
| customizeMenu            | boolean | false                 | 是否有自定义菜单               |
| superposable             | boolean | true                  | 多边形是否可以重叠（碰撞检测） |
| percentum                | boolean | false                 | 坐标是否是百分比               |
| maxNumber                | number  | -1                    | 绘制多边形数量上限             |
| maxPoint                 | number  | -1                    | 每个多边形点上限               |
| useCanDraw               | boolean  | false                | 是否启用开始绘制按钮            |
| autoClose                | boolean  | true                 | 是否自动闭合当前正在绘制的多边形               |
| selfIntersect            | boolean  | true                 | 多边形是否可以自相交               |

### 方法

全屏框选

```bash
function fullScreen():void;
```

清空全部图形

```bash
function clearAll():void;
```

删除选中图形

```bash
function deletePolygon():void;
```

结束当前绘制

```bash
function endDraw():void;
```

注入多边形
```bash
function pushPolygon(polygons:{x:number,y:number}[][]):void;
```

选中多边形
```bash
function selectPolygon(index:number):void;
```

### 监听事件

监听多边形点的变化

POLYGON_CHANGE

```bash
pCanvas.on(polygon.Events.POLYGON_CHANGE,(data)=>{
  console.log(data);
})
```

监听选中的多边形变化
ACTIVE_POLYGON
```bash
pCanvas.on(polygon.Events.ACTIVE_POLYGON,(data)=>{
  console.log(data);
})
```

正在绘制的多边形变化
CURRENT_POINTS
```bash
pCanvas.on(polygon.Events.CURRENT_POINTS,(data)=>{
  console.log(data);
})
```

多边形是否发生了重叠
POLYGON_OVERLAP
```bash
pCanvas.on(polygon.Events.POLYGON_OVERLAP,(data)=>{
  console.log(data);
})
```

绘制多边形超出设置的上限
POLYGON_OVERRUN
```bash
pCanvas.on(polygon.Events.POLYGON_OVERRUN,(data:{code:1||2,message:string})=>{
  if(data.code == 1){
    console.log(`绘制的多边形个数超出上限`,data.message)
  }else if(data.code == 2){
    console.log(`绘制的多边形点数超出上限`,data.message)
  }
})
```

当前正在绘制的图形出现自相交
POLYGON_SELF_INTERSECTION
```bash
pCanvas.on(polygon.Events.POLYGON_SELF_INTERSECTION,(data)=>{
  console.log(data);
})
```