# @grombolar/polygon.js

> canvas draw polygon

Latest version **1.1.21** (published 2023-05-11) · Apache-2.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @grombolar/polygon.js
pnpm add @grombolar/polygon.js
yarn add @grombolar/polygon.js
bun add @grombolar/polygon.js
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.21 |
| Published | 2023-05-11 |
| First published | 2023-04-03 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 245.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | grombolar |
| Maintainers | grombolar |
| Keywords | canvas, polygon |

## Links

- npm: https://www.npmjs.com/package/@grombolar/polygon.js
- Repository: https://github.com/Grombolar/polygon.js
- Homepage: https://github.com/Grombolar/polygon.js#readme
- Issues: https://github.com/Grombolar/polygon.js/issues
- npm.io page: https://npm.io/package/@grombolar/polygon.js

## Dependencies (3)

- [es6-promise](https://npm.io/package/es6-promise.md) ^4.2.5
- [ja-contextmenu](https://npm.io/package/ja-contextmenu.md) ^1.4.4
- [webworkify-webpack](https://npm.io/package/webworkify-webpack.md) ^2.1.5

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.1.21 (latest) — 2023-05-11
- 1.1.2 — 2023-05-11
- 1.1.1 — 2023-05-11
- 1.1.0 — 2023-05-11
- 1.0.8 — 2023-04-11
- 1.0.7 — 2023-04-11
- 1.0.6 — 2023-04-11
- 1.0.5 — 2023-04-11
- 1.0.3 — 2023-04-10
- 1.0.2 — 2023-04-07
- 1.0.1 — 2023-04-04
- 1.0.0 — 2023-04-03

## README

# 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);
})
```

---
_Source: https://npm.io/package/@grombolar/polygon.js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._