# 多边形编辑类 EditPolygonItem 示例
::: details 目录
[[toc]]
:::

## 绘制示例

<edit-items-editpolygon-editpolygon/>

::: details 示例代码

<<< @/docs/.vuepress/components/edit/items/editpolygon/editpolygon.vue

:::

## 源代码

::: details 查看代码

<<< @/docs/guides/edit/items/src/EditPolygonItem.ts

:::

## 代码说明

### 1 当 EditPolygonItem 为编辑状态时，需要将 EditPolygonItem 赋给 grabItem
``` js {4}
 // 编辑状态时的 LineItem
 this.polygonItem = new EditPolygonItem(null);
 this.polygonItem.status = SItemStatus.Create;
 this.scene.grabItem = this.polygonItem;
```
### 2 当 EditPolygonItem 为正常状态时，需要将 grabItem 置为 null
``` js {4}
 // 正常状态时的 LineItem
 this.polygonItem = new EditPolygonItem(null);
 this.polygonItem.status = SItemStatus.Normal;
 this.scene.grabItem = null;
```
### 3 当 EditPolygonItem 为试图垂直水平绘制时需要修改 verAndLeve 属性
``` js {3}
 // 编辑状态时的 LineItem
 this.polygonItem = new EditPolygonItem(null,);
 this.polygonItem.status = SItemStatus.Create;
 this.polygonItem.verAndLeve = true;
 this.scene.grabItem = this.polygonItem;
```
### 4 当 EditPolygonItem 修改属性但是画板尚未变化时需要刷新
``` js {4}
 // 编辑状态时的 LineItem
 this.polygonItem = new EditPolygonItem(null);
 this.polygonItem.status = SItemStatus.Create;
 this.view.update();
```
### 5 当 EditPolygonItem 需要拖动时设置 moveable = true
``` js {4}
 // 编辑状态时的 LineItem
  this.polygonItem = new EditPolygonItem(null);
  this.polygonItem.status = SItemStatus.Create;
  this.polygonItem.moveable = true;
```
### 6 当 EditPolygonItem 绘制完成后的回调函数为 finishCreated
``` js {4}
 // 编辑状态时的 LineItem
  this.polygonItem = new EditPolygonItem(null);
  this.polygonItem.status = SItemStatus.Create;
  this.polygonItem.connect("finishCreated", this, this.finishCreated);
  this.polygonItem.moveable = true;
  methods:{
      finishCreated(){
      }
  }
```
## 交互要求
* 点击item 选中态时出现选择控制点（增加是否可操作控制点状态）；
* esc键：若大于等于三个顶点则为完成，否则为取消操作；
* Ctrl+鼠标点入边线为增加点；Ctrl+鼠标点到顶点为选择多个点，删除顶点用delete键（若剩余顶点小于三个则不能删除）；
* 鼠标左键选择单点可移动；
* 双击进入编辑态;自动闭合自行结束；
* 编辑态 ctrl+左键选择多个点可拖动；
* 绘制点时线与线不能交叉（放开鼠标左键后，如果出现交叉，则该点位回到原来位置，如果为创建状态，该点无法生成）；
* 选中某条边拖动；拖动中不可交叉；（补图，两种线得拖动方式）
* 当拖动连接线的定点连接该item锚点时；接近item会显示锚点
