# 线编辑类 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会显示锚点;