折线编辑类 EditPolylineItem 示例

::: details 目录 [[toc]] :::

绘制示例

::: details 示例代码

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

:::

源代码

::: details 查看代码

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

:::

代码说明

1 当 EditPolylineItem 为编辑状态时，需要将 EditPolylineItem 赋给 grabItem

``` js {4} // 编辑状态时的 LineItem this.polylineItem = new EditPolylineItem(null); this.polylineItem.status = SItemStatus.Create; this.scene.grabItem = this.polylineItem;

### 2 当 EditPolylineItem 为正常状态时，需要将 grabItem 置为 null
``` js {4}
 // 正常状态时的 LineItem
 this.polylineItem = new EditPolylineItem(null);
 this.polylineItem.status = SItemStatus.Normal;
 this.scene.grabItem = null;

3 当 EditPolylineItem 为试图垂直水平绘制时需要修改 verAndLeve 属性

``` js {3} // 编辑状态时的 LineItem this.polylineItem = new EditPolylineItem(null,); this.polylineItem.status = SItemStatus.Create; this.polylineItem.verAndLeve = true; this.scene.grabItem = this.polylineItem;

### 4 当 EditPolylineItem 修改属性但是画板尚未变化时需要刷新
``` js {4}
 // 编辑状态时的 LineItem
 this.polylineItem = new EditPolylineItem(null);
 this.polylineItem.status = SItemStatus.Create;
 this.view.update();

5 当 EditPolylineItem 需要拖动时设置 moveable = true

js {4} // 编辑状态时的 LineItem this.polylineItem = new EditPolylineItem(null); this.polylineItem.status = SItemStatus.Create; this.polylineItem.moveable = true;

交互要求

esc键：若大于等于两个个顶点则为完成，否则为取消操作；
Ctrl+鼠标点入边线为增加点；Ctrl+鼠标点到顶点为选择多个点，删除顶点用delete键（若剩余顶点小于两个个则不能删除）；
鼠标左键选择单点可移动；
双击进入编辑态；
选择多个点可拖动；
绘制点时线与线不能交叉（放开鼠标左键后，如果出现交叉，则该点位回到原来位置，如果为创建状态，该点无法生成）；
选中某条边拖动；拖动中不可交叉；（补图，两种线得拖动方式）

editPolyline.md 2.2 KB Historique Raw