---
title: 如何使用
---
图形绘制包括4种状态

- 绘制 绘制图形 
- 选中 平移图形
- 编辑 图形顶点编辑
- 完成态 绘制完成，点击进入选中太


### 绘制圆

 #### 绘制态

1. 点击，![l7-draw-cross](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*UnSAS6X_3AQAAAAAAAAAAABkARQnAQ)地图生成第一个点既圆心
2. 拖动，![l7-draw-move](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*eVVASaKz79UAAAAAAAAAAABkARQnAQ)拖动过程中根据当前点实时计算距离圆心的距离，生成当前圆
3. 拖动结束，绘制完成，进入选中状态

#### 选中态
  
  鼠标点击图形进入编辑态，鼠标点击图形外部，取消选中

1. 鼠标 mouseenter 图形鼠标 move
2. 拖到鼠标即可实现图形的平移
3. 鼠标点击图形进入编辑态，鼠标点击图形外部

#### 编辑态

鼠标点击图形外部，完成编辑

1. 鼠标滑入顶点，鼠标变成 move
1. 拖动顶点即可改变圆的半径

### 绘制多边形

 #### 绘制态
 1. 点击，![l7-draw-cross](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*UnSAS6X_3AQAAAAAAAAAAABkARQnAQ) 生成第一个点
 2. 连续点击，![l7-draw-cross](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*UnSAS6X_3AQAAAAAAAAAAABkARQnAQ) 依次生成多边形的点序列，点击过程中会始终显示第一个点和最后一个点
 3. 结束，双击地图结束，或者点击第一个点或最后一个点结束 ![l7-draw-pointer](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*3siqTqg0oX4AAAAAAAAAAABkARQnAQ)

 #### 选中态
  
  鼠标点击图形进入选中态，选中态可对图形平移，鼠标点击图形外部，取消选中

 #### 编辑态
  
  鼠标点击图形进入编辑态，编辑态会标注多边形顶点，和各个顶点的中心点
  鼠标点击图形外部，取消选中

  1. 添加顶点，点击中心点![l7-draw-pointer](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*3siqTqg0oX4AAAAAAAAAAABkARQnAQ)，为多边形新增一个顶点
  2. 移动顶点，拖动顶点可对顶点移动