线编辑类 ImageEditItem 示例

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

绘制示例

::: details 示例代码

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

:::

源代码

::: details 查看代码

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

:::

代码说明

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

``` js {4} // 编辑状态时的 LineItem this.lineItem = new EditLineItem(null, []); this.lineItem.status = SItemStatus.Create; this.scene.grabItem = this.lineItem;

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

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

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

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

交互要求

点击item 选中态时出现选择控制点（增加是否可操作控制点状态）；
选中态时出现选择控制点；通过拖动选择控制点对图例进行放大缩小得操作（有最大最小的宽高）；
当拖动连接线的定点连接该item锚点时；接近item会显示锚点；

editImage.md 1.6 KB 履歴 Raw