多边形编辑类 EditPolygonItem 示例

目录

• 绘制示例
• 源代码
• 代码说明
  • 1 当 EditPolygonItem 为编辑状态时，需要将 EditPolygonItem 赋给 grabItem
  • 2 当 EditPolygonItem 为正常状态时，需要将 grabItem 置为 null
  • 3 当 EditPolygonItem 为试图垂直水平绘制时需要修改 verAndLeve 属性
  • 4 当 EditPolygonItem 修改属性但是画板尚未变化时需要刷新
  • 5 当 EditPolygonItem 需要拖动时设置 moveable = true
  • 6 当 EditPolygonItem 绘制完成后的回调函数为 finishCreated
• 交互要求

绘制示例

示例代码

<template>
  <div class="edit-line">
    <!-- 所有按钮 -->
    <div class="btn-list">
      <el-button
        :class="[cmdStatus=='create' ? 'heightLight' : '']"
        size="small"
        @click="create"
      >创建多边形</el-button>
      <el-tooltip class="item" effect="dark" content="双击 item 也可进入编辑状态" placement="top-start">
        <el-button
          :class="[cmdStatus=='edit' ? 'heightLight' : '']"
          size="small"
          @click="edit"
        >编辑多边形</el-button>
      </el-tooltip>

      <el-button
        :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
        size="small"
        @click="deleteItem"
      >删除</el-button>
      <el-tooltip class="item" effect="dark" content="长按 Shoft 配合左键也可触发该功能" placement="top-start">
        <el-button
          :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']"
          size="small"
          @click="eqDrawLine"
        >垂直水平绘制</el-button>
      </el-tooltip>
    </div>
    <div class="content">
      <div class="left">
        <canvas id="edit_polygon" width="700" height="460" tabindex="0" />
      </div>
      <div class="line-property">
        <el-card shadow="always">
          <div slot="header" class="clearfix">
            <span>属性修改</span>
          </div>
          <div class="always-item">
            <span>边框宽:</span>
            <el-input-number
              size="small"
              v-model="lineWidth"
              @change="changeLineWidth"
              :min="1"
              :max="50"
            ></el-input-number>
          </div>
          <div class="always-item">
            <span>线类型:</span>
            <el-select
              style="width:130px"
              size="small"
              v-model="lineType"
              @change="changeType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="always-item">
            <span>线颜色:</span>
            <el-color-picker v-model="lineColor" @change="changeColor" show-alpha></el-color-picker>
          </div>
          <div class="always-item">
            <span>填充色:</span>
            <el-color-picker v-model="fillColor" @change="changeFillColor" show-alpha></el-color-picker>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { SGraphScene, SGraphView, SLineStyle } from "@persagy-web/graph/";
import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
import { SPoint ,SColor} from "@persagy-web/draw/";
//注： 开发者引入 EditPolygonItem 包为： import {EditPolygonItem} from "@persagy-web/edit/";
import { EditPolygonItem } from "./../../../../../guides/edit/items/src/EditPolygonItem";
import { hexify } from "./../../../../public/until/rgbaUtil";
export default {
  name: "editpolygon",
  data() {
    return {
      scene: null,       //场景
      view: null,        //view实例
      isCreated: false,  //是否创建完成
      cmdStatus: "",     //选中状态
      polygonItem: null, //存放创建的Item
      lineWidth: 1,      //border线宽
      lineColor: "",     //border线颜色
      fillColor:"",      //填充色
      lineType: "",      //border线类型
      options: [
        {
          value: "Solid",
          label: "实线"
        },
        {
          value: "Dashed",
          label: "虚线"
        },
        {
          value: "Dotted",
          label: "点"
        }
      ]
    };
  },
  mounted() {
    this.view = new SGraphView("edit_polygon");
    this.scene = new SGraphScene();
    this.view.scene = this.scene;
  },
  methods: {
    create() {
      this.cmdStatus = "create";
      this.scene.root.children = [];
      this.polygonItem = new EditPolygonItem(null);
      this.polygonItem.status = SItemStatus.Create;
      this.polygonItem.connect("finishCreated", this, this.finishCreated);
      this.scene.addItem(this.polygonItem);
      this.scene.grabItem = this.polygonItem;
      this.view.update();
    },
    deleteItem() {
      this.cmdStatus = "";
      this.scene.removeItem(this.polygonItem);
      this.polygonItem = null;
      this.view.update();
    },
    edit() {
      if (this.polygonItem) {
        if (this.polygonItem.status == SItemStatus.Normal) {
          this.scene.grabItem = this.polygonItem;
          this.polygonItem.status = SItemStatus.Edit;
          // this.polygonItem.verAndLeve = false;
          this.cmdStatus = "edit";
        } else {
          this.polygonItem.status = SItemStatus.Normal;
          this.scene.grabItem = null;
          this.cmdStatus = "";
        }
      }
    },
    eqDrawLine() {
      this.cmdStatus = "eqDrawLine";
      this.scene.root.children = [];
      this.polygonItem = new EditPolygonItem(null, []);
      this.polygonItem.verAndLeve = true;
      this.polygonItem.status = SItemStatus.Create;
      this.polygonItem.connect("finishCreated", this, this.finishCreated);
      this.polygonItem.moveable = true;
      this.scene.addItem(this.polygonItem);
      this.scene.grabItem = this.polygonItem;
      this.view.update();
    },
    // 改变线宽属性
    changeLineWidth(val) {
      if (this.polygonItem) {
        this.lineWidth = val;
        this.polygonItem.lineWidth = val;
      }
    },
    // 改变颜色
    changeColor(val) {
      if (this.polygonItem) {
        this.lineColor = hexify(val);
        this.polygonItem.strokeColor = new SColor(this.lineColor);
      }
    },
     // 改变填充颜色
    changeFillColor(val) {
      if (this.polygonItem) {
        this.fillColor = hexify(val);
        this.polygonItem.fillColor = new SColor(this.lineColor);
      }
    },
    //改变线得类型
    changeType(val) {
      if (this.polygonItem) {
        this.polygonItem.lineStyle = SLineStyle[val];
      }
    },
    // 完成创建后的回调
    finishCreated() {
      this.cmdStatus = "";
    }
  },
  watch: {
    polygonItem(val) {
      if (val) {
        this.lineWidth = val.lineWidth; // 线宽
        this.lineStyle = val.lineStyle; // 线条样式
        this.lineColor = val.strokeColor.value; // 线条填充色
        this.fillColor = val.fillColor.value; // 线条填充色
        this.lineType = this.options[val.lineStyle].value;
      } else {
        this.lineWidth = 0;
      }
    }
  }
};
</script>

<style scoped lang="less">
.edit-line {
  width: 100%;
  height: 500px;
  .content {
    display: flex;
    justify-content: flex-start;
    .left {
      margin-right: 20px;
    }
    .line-property {
      width: 300px;
      margin-top: 20px;
      .always {
        width: 100%;
        height: 100%;
      }
      .always-item {
        display: flex;
        margin-top: 10px;
        justify-content: space-between;
      }
    }
  }
  .heightLight {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
}
</style>

源代码

查看代码

import {
    SGraphItem,
    SGraphPointListDelete,
    SGraphPointListInsert,
    SGraphPointListUpdate,
    SLineStyle
} from "@persagy-web/graph/lib";
import { SKeyCode, SMouseEvent, SUndoStack } from "@persagy-web/base/";
import {
    SColor,
    SLine,
    SLineCapStyle,
    SPainter,
    SPoint,
    SPolygonUtil,
    SRect
} from "@persagy-web/draw";
import { SItemStatus } from "@persagy-web/big";
import { SMathUtil } from "@persagy-web/big/lib/utils/SMathUtil";

/**
 * 编辑多边形
 *
 * @author  韩耀龙
 */
export class EditPolygonItem extends SGraphItem {
    /** X坐标最小值  */
    private minX = Number.MAX_SAFE_INTEGER;
    /** X坐标最大值  */
    private maxX = Number.MIN_SAFE_INTEGER;
    /** Y坐标最小值  */
    private minY = Number.MAX_SAFE_INTEGER;
    /** Y坐标最大值  */
    private maxY = Number.MIN_SAFE_INTEGER;

    /** 轮廓线坐标  */
    private pointList: SPoint[] = [];
    // 获取当前状态
    get getPointList(): SPoint[] {
        return this.pointList;
    }
    // 编辑当前状态
    set setPointList(arr: SPoint[]) {
        this.pointList = arr;
        this.update();
    }
    /** 是否垂直水平绘制   */
    private _verAndLeve: Boolean = false;
    get verAndLeve(): Boolean {
        return this._verAndLeve;
    }
    set verAndLeve(bool: Boolean) {
        this._verAndLeve = bool;
        this.update();
    }
    // 当前状态
    protected _status: number = SItemStatus.Normal;
    // 获取当前状态
    get status(): SItemStatus {
        return this._status;
    }
    // 编辑当前状态
    set status(value: SItemStatus) {
        this._status = value;
        this.undoStack.clear();
        this.update();
    }

    /** 边框颜色 */
    _strokeColor: SColor = new SColor("#0091FF");
    /**  画笔颜色 */
    get strokeColor(): SColor {
        return this._strokeColor;
    }
    set strokeColor(v: SColor) {
        this._strokeColor = v;
        this.update();
    }

    /** 填充颜色 */
    _fillColor: SColor = new SColor("#1EE887");
    get fillColor(): SColor {
        return this._fillColor;
    }
    set fillColor(v: SColor) {
        this._fillColor = v;
        this.update();
    }

    /** 边框样式 */
    _lineStyle: SLineStyle = SLineStyle.Solid;
    get lineStyle(): SLineStyle {
        return this._lineStyle;
    }
    set lineStyle(v: SLineStyle) {
        this._lineStyle = v;
        this.update();
    }

    /** 边框的宽 只可输入像素宽*/
    _lineWidth: number = 4;
    get lineWidth(): number {
        return this._lineWidth;
    }
    set lineWidth(v: number) {
        this._lineWidth = v;
        this.update();
    }

    /** 是否闭合    */
    closeFlag: boolean = false;
    /** 鼠标移动点  */
    private lastPoint: SPoint | null = null;
    /** 当前鼠标获取顶点对应索引 */
    private curIndex: number = -1;
    /** 当前鼠标获取顶点对应坐标 */
    private curPoint: null | SPoint = null;
    /** 灵敏像素 */
    private len: number = 10;
    /** 场景像素 内部将灵敏像素换算为场景实际距离  */
    private scenceLen: number = 15;
    /** 场景像素  */
    private isAlt: boolean = false;
    /** undoredo堆栈 */
    protected undoStack: SUndoStack = new SUndoStack();

    /**
     * 构造函数
     *
     * @param parent    指向父对象
     */
    constructor(parent: SGraphItem | null) {
        super(parent);
    }

    //////////////////
    //  以下为对pointList 数组的操作方法

    /**
     * 储存新的多边形顶点
     *
     * @param x   点位得x坐标
     * @param y   点位得y坐标
     * @param i   储存所在索引
     * @return SPoint。添加的顶点
     */
    insertPoint(x: number, y: number, i: number | null = null): SPoint {
        const point = new SPoint(x, y);
        if (i == null) {
            this.pointList.push(point);
        } else {
            this.pointList.splice(i, 0, point);
        }
        this.update();
        return point;
    }

    /**
     * 删除点位
     *
     * @param i   删除点所在的索引
     * @return    SPoint|null。索引不在数组范围则返回null
     */
    deletePoint(i: number | null = null): SPoint | null {
        let point = null;
        if (i != null) {
            if (i >= this.pointList.length || i < 0) {
                point = null;
            } else {
                point = new SPoint(this.pointList[i].x, this.pointList[i].y);
                this.pointList.splice(i, 1);
            }
        } else {
            if (this.pointList.length) {
                point = this.pointList[this.pointList.length - 1];
                this.pointList.pop();
            } else {
                point = null;
            }
        }
        this.curIndex = -1;
        this.curPoint = null;
        this.update();
        return point;
    }

    /**
     * 多边形顶点的移动位置
     *
     * @param x   点位得x坐标
     * @param y   点位得y坐标
     * @param i   点位得i坐标
     * @return    移动对应得点。如果索引无法找到移动顶点，则返回null
     */
    movePoint(x: number, y: number, i: number): SPoint | null {
        let point = null;
        if (i >= this.pointList.length || i < 0) {
            return null;
        }
        if (this.pointList.length) {
            this.pointList[i].x = x;
            this.pointList[i].y = y;
        }
        point = this.pointList[i];
        return point;
    }

    /**
     * 打印出多边形数组
     *
     * @return  顶点数组
     */
    PrintPointList(): SPoint[] {
        return this.pointList;
    }

    ////////////
    //  以下为三种状态下的绘制多边形方法

    /**
     * 展示状态 --绘制多边形数组
     *
     * @param painter      绘制类
     * @param pointList    绘制多边形数组
     */
    protected drawShowPolygon(painter: SPainter, pointList: SPoint[]): void {
        painter.save();
        painter.pen.lineCapStyle = SLineCapStyle.Square;
        painter.pen.color = this.strokeColor;
        painter.brush.color = this.fillColor;
        painter.pen.lineWidth = painter.toPx(this.lineWidth);
        if (this.lineStyle == SLineStyle.Dashed) {
            painter.pen.lineDash = [
                painter.toPx(this.lineWidth * 3),
                painter.toPx(this.lineWidth * 7)
            ];
        } else if (this.lineStyle == SLineStyle.Dotted) {
            painter.pen.lineDash = [
                painter.toPx(this.lineWidth),
                painter.toPx(this.lineWidth)
            ];
        }
        if (this.selected) {
            painter.shadow.shadowBlur = 10;
            painter.shadow.shadowColor = new SColor(`#00000033`);
            painter.shadow.shadowOffsetX = 5;
            painter.shadow.shadowOffsetY = 5;
        } else {
            painter.shadow.shadowColor = SColor.Transparent;
        }
        painter.drawPolygon([...pointList]);
        painter.restore();
    }

    /**
     * 创建状态 --绘制多边形数组
     *
     * @param painter      绘制类
     * @param pointList    绘制多边形数组
     */
    protected drawCreatePolygon(painter: SPainter, pointList: SPoint[]): void {
        painter.pen.lineCapStyle = SLineCapStyle.Square;
        painter.pen.color = this.strokeColor;
        painter.pen.lineWidth = painter.toPx(this.lineWidth);
        if (this.lastPoint && pointList.length) {
            painter.drawLine(
                pointList[pointList.length - 1].x,
                pointList[pointList.length - 1].y,
                this.lastPoint.x,
                this.lastPoint.y
            );
        }
        painter.drawPolyline(pointList);
        painter.pen.color = SColor.Transparent;
        painter.brush.color = new SColor(this.fillColor.value);
        painter.pen.lineWidth = painter.toPx(this.lineWidth);

        if (this.lastPoint) {
            painter.drawPolygon([...pointList, this.lastPoint]);
            // 绘制顶点块
            painter.pen.color = SColor.Black;
            painter.brush.color = SColor.White;
            pointList.forEach(item => {
                painter.drawCircle(item.x, item.y, painter.toPx(this.len / 2));
            });
            // 如果最后一个点在第一个点的灵敏度范围内,第一个点填充变红
            if (this.pointList.length) {
                if (
                    SMathUtil.pointDistance(
                        this.lastPoint.x,
                        this.lastPoint.y,
                        this.pointList[0].x,
                        this.pointList[0].y
                    ) < this.scenceLen
                ) {
                    // 绘制第一个点的顶点块
                    painter.pen.color = SColor.Black;
                    painter.brush.color = SColor.Red;
                    painter.drawCircle(
                        this.pointList[0].x,
                        this.pointList[0].y,
                        painter.toPx(this.len / 2)
                    );
                }
            }
        } else {
            painter.drawPolygon(pointList);
        }
    }

    /**
     *
     * 编辑状态 --绘制多边形数组
     *
     * @param painter    绘制类
     * @param pointList    绘制多边形数组
     */
    protected drawEditPolygon(painter: SPainter, pointList: SPoint[]): void {
        // 展示多边形
        painter.pen.lineCapStyle = SLineCapStyle.Square;
        painter.pen.color = this.strokeColor;
        painter.pen.lineWidth = painter.toPx(this.lineWidth);
        painter.brush.color = new SColor(this.fillColor.value);
        painter.drawPolygon([...pointList]);
        // 绘制顶点块
        painter.pen.color = SColor.Black;
        painter.brush.color = SColor.White;
        pointList.forEach((item, index) => {
            painter.brush.color = SColor.White;
            if (index == this.curIndex) {
                painter.brush.color = new SColor("#2196f3");
            }
            painter.drawCircle(item.x, item.y, painter.toPx(this.len / 2));
        });
    }

    /**
     * 编辑状态操作多边形数组
     *
     * @param event    鼠标事件
     *
     *
     */
    protected editPolygonPoint(event: SMouseEvent): void {
        //  判断是否为删除状态 isAlt = true为删除状态
        if (this.isAlt) {
            // 1 判断是否点击在多边形顶点
            let lenIndex = -1; // 当前点击到的点位索引；
            let curenLen = this.scenceLen; // 当前的灵敏度
            this.pointList.forEach((item, index) => {
                let dis = SMathUtil.pointDistance(
                    event.x,
                    event.y,
                    item.x,
                    item.y
                );
                if (dis < curenLen) {
                    curenLen = dis;
                    lenIndex = index;
                }
            });
            // 若点击到，对该索引对应的点做删除
            if (lenIndex != -1) {
                if (this.pointList.length <= 3) {
                    return;
                }
                const delePoint = new SPoint(
                    this.pointList[lenIndex].x,
                    this.pointList[lenIndex].y
                );
                this.deletePoint(lenIndex);
                // 记录顶点操作记录压入堆栈
                this.recordAction(SGraphPointListDelete, [
                    this.pointList,
                    delePoint,
                    lenIndex
                ]);
            }
        } else {
            // 1 判断是否点击在多边形顶点
            this.curIndex = -1;
            this.curPoint = null;
            let lenIndex = -1; // 当前点击到的点位索引；
            let curenLen = this.scenceLen; // 当前的灵敏度
            this.pointList.forEach((item, index) => {
                let dis = SMathUtil.pointDistance(
                    event.x,
                    event.y,
                    item.x,
                    item.y
                );
                if (dis < curenLen) {
                    curenLen = dis;
                    lenIndex = index;
                }
            });
            this.curIndex = lenIndex;
            // 2判断是否点击在多边形得边上
            if (-1 == lenIndex) {
                let len = SMathUtil.pointToLine(
                    new SPoint(event.x, event.y),
                    new SLine(this.pointList[0], this.pointList[1])
                ),
                    index = 0;
                if (this.pointList.length > 2) {
                    for (let i = 1; i < this.pointList.length; i++) {
                        let dis = SMathUtil.pointToLine(
                            new SPoint(event.x, event.y),
                            new SLine(this.pointList[i], this.pointList[i + 1])
                        );
                        if (i + 1 == this.pointList.length) {
                            dis = SMathUtil.pointToLine(
                                new SPoint(event.x, event.y),
                                new SLine(this.pointList[i], this.pointList[0])
                            );
                        }
                        if (dis.MinDis < len.MinDis) {
                            len = dis;
                            index = i;
                        }
                    }
                }
                // 判断是否有点
                if (len.Point) {
                    // 点在了多边形的边上
                    if (len.MinDis <= this.scenceLen) {
                        this.pointList.splice(index + 1, 0, len.Point);
                        // 记录新增顶点操作记录压入堆栈
                        this.recordAction(SGraphPointListInsert, [
                            this.pointList,
                            len.Point,
                            index + 1
                        ]);
                    } else {
                        //没点在多边形边上也没点在多边形顶点上
                        super.onMouseDown(event);
                    }
                }
            } else {
                // 当捕捉到顶点后 ，记录当前点的xy坐标，用于undo、redo操作
                this.curPoint = new SPoint(
                    this.pointList[this.curIndex].x,
                    this.pointList[this.curIndex].y
                );
            }
            // 刷新视图
            this.update();
        }
    }

    /////////////////////
    // undo、redo相关操作

    /**
     * 记录相关动作并推入栈中
     * @param	SGraphCommand         相关命令类
     * @param	any                    对应传入参数
     */
    protected recordAction(SGraphCommand: any, any: any[]): void {
        // 记录相关命令并推入堆栈中
        const sgraphcommand = new SGraphCommand(this.scene, this, ...any);
        this.undoStack.push(sgraphcommand);
    }

    /**
     * 执行取消操作执行
     */
    undo(): void {
        if (this.status == SItemStatus.Normal) {
            return;
        }
        this.undoStack.undo();
    }

    /**
     * 执行重做操作执行
     */
    redo(): void {
        if (this.status == SItemStatus.Normal) {
            return;
        }
        this.undoStack.redo();
    }

    ///////////////////////////////
    // 以下为鼠标事件

    /**
     * 鼠标双击事件
     *
     * @param	event         事件参数
     * @return	boolean
     */
    onDoubleClick(event: SMouseEvent): boolean {
        // 如果位show状态 双击改对象则需改为编辑状态
        if (SItemStatus.Normal == this.status) {
            this.status = SItemStatus.Edit;
            this.grabItem(this);
        } else if (SItemStatus.Edit == this.status) {
            this.status = SItemStatus.Normal;
            this.releaseItem();
        }
        this.update();
        return true;
    } // Function onDoubleClick()

    /**
     * 键盘事件
     *
     * @param	event         事件参数
     * @return	boolean
     */

    onKeyDown(event: KeyboardEvent): boolean {
        if (this.status == SItemStatus.Normal) {
            return false;
        } else if (this.status == SItemStatus.Create) {
            if (event.code == "Enter") {
                // 当顶点大于二个时才又条件执行闭合操作并清空堆栈
                if (this.pointList.length > 2) {
                    this.status = SItemStatus.Normal;
                    //3 传递完成事件状态
                    this.$emit("finishCreated");
                    //1 grabItem 置为null
                    this.releaseItem();
                }
            }
        } else if (this.status == SItemStatus.Edit) {
            if (event.key == "Alt") {
                this.isAlt = true;
            }
        }
        this.update();
        return true;
    } // Function onKeyDown()

    /**
     * 键盘键抬起事件
     *
     * @param	event         事件参数
     * @return	boolean
     */
    onKeyUp(event: KeyboardEvent): void {
        if (this.status == SItemStatus.Edit) {
            if (event.key == "Alt") {
                this.isAlt = false;
            } else if (event.keyCode == SKeyCode.Delete) {
                // 当多边形的顶点大于三个允许删除点
                if (this.pointList.length > 3) {
                    this.deletePoint(this.curIndex);
                }
            }
        }
        this.update();
    } // Function onKeyUp()

    /**
     * 鼠标按下事件
     *
     * @param	event         事件参数
     * @return	boolean
     */
    onMouseDown(event: SMouseEvent): boolean {
        if (event.shiftKey || this.verAndLeve) {
            event = this.compare(event);
        }
        // 如果状态为编辑状态则添加点
        if (this.status == SItemStatus.Create) {
            // 新增顶点
            let len = -1;
            if (this.pointList.length) {
                len = SMathUtil.pointDistance(
                    event.x,
                    event.y,
                    this.pointList[0].x,
                    this.pointList[0].y
                );
            }
            if (this.pointList.length > 2 && len > 0 && len < this.scenceLen) {
                this.status = SItemStatus.Normal;
                //3 传递完成事件状态
                this.$emit("finishCreated");
                //1 grabItem 置为null
                this.releaseItem();
            } else {
                this.insertPoint(event.x, event.y);
                // 记录新增顶点操作记录压入堆栈
                let pos = new SPoint(event.x, event.y);
                this.recordAction(SGraphPointListInsert, [this.pointList, pos]);
            }
        } else if (this.status == SItemStatus.Edit) {
            // 对多边形数组做编辑操作
            this.editPolygonPoint(event);
        } else {
            return super.onMouseDown(event);
        }
        return true;
    } // Function onMouseDown()

    /**
     * 鼠标移入事件
     *
     * @param	event         事件参数
     * @return	boolean
     */
    onMouseEnter(event: SMouseEvent): boolean {
        return true;
    } // Function onMouseEnter()

    /**
     * 鼠标移出事件
     *
     * @param	event         事件参数
     * @return	boolean
     */

    onMouseLeave(event: SMouseEvent): boolean {
        return true;
    } // Function onMouseLeave()

    /**
     * 鼠标移动事件
     *
     * @param	event         事件参数
     * @return	boolean
     */

    onMouseMove(event: SMouseEvent): boolean {
        if (event.shiftKey || this.verAndLeve) {
            event = this.compare(event);
        }
        if (this.status == SItemStatus.Create) {
            this.lastPoint = new SPoint();
            this.lastPoint.x = event.x;
            this.lastPoint.y = event.y;
            this.update();
        } else if (this.status == SItemStatus.Edit) {
            if (event.buttons == 1) {
                if (-1 != this.curIndex) {
                    this.pointList[this.curIndex].x = event.x;
                    this.pointList[this.curIndex].y = event.y;
                }
            }
            this.update();
        } else {
            return super.onMouseMove(event);
        }
        return true;
    } // Function onMouseMove()

    /**
     * shift垂直水平创建或编辑
     *
     * @param   event   事件
     * */
    compare(event: SMouseEvent): SMouseEvent {
        if (this.pointList.length) {
            let last = new SPoint(event.x, event.y);
            if (this.status == SItemStatus.Create) {
                last = this.pointList[this.pointList.length - 1];
            } else if (this.status == SItemStatus.Edit) {
                if (this.curIndex > 1) {
                    last = this.pointList[this.curIndex - 1];
                }
            }
            const dx = Math.abs(event.x - last.x);
            const dy = Math.abs(event.y - last.y);
            if (dy > dx) {
                event.x = last.x;
            } else {
                event.y = last.y;
            }
        }
        return event;
    } // Function compare()

    /**
     * 鼠标抬起事件
     *
     * @param	event         事件参数
     * @return	boolean
     */
    onMouseUp(event: SMouseEvent): boolean {
        if (this.status == SItemStatus.Edit) {
            if (-1 != this.curIndex) {
                const pos = new SPoint(
                    this.pointList[this.curIndex].x,
                    this.pointList[this.curIndex].y
                );
                this.recordAction(SGraphPointListUpdate, [
                    this.pointList,
                    this.curPoint,
                    pos,
                    this.curIndex
                ]);
            }
        } else if (this.status == SItemStatus.Normal) {
            this.moveToOrigin(this.x, this.y);
            return super.onMouseUp(event);
        }
        return true;
    } // Function onMouseUp()

    /**
     * 移动后处理所有坐标,并肩原点置为场景原点
     *
     * @param   x   x坐标
     * @param   y   y坐标
     * */
    moveToOrigin(x: number, y: number): void {
        super.moveToOrigin(x, y);
        this.pointList = this.pointList.map(t => {
            t.x = t.x + x;
            t.y = t.y + y;
            return t;
        });
        this.x = 0;
        this.y = 0;
    } // Function moveToOrigin()

    /**
     * 适配事件
     *
     * @param	event         事件参数
     * @return	boolean
     */
    onResize(event: SMouseEvent): boolean {
        return true;
    } // Function onResize()

    /**
     * 取消操作
     *
     */
    cancelOperate(): void {
        // 当状态为展示状态
        if (this.status == SItemStatus.Create) {
            // 闭合多边形
            this.parent = null;
        } else if (this.status == SItemStatus.Edit) {
            // 编辑状态
            this.status = SItemStatus.Normal;
        }
        this.update();
    } // Function cancelOperate()

    /**
     * Item对象边界区域
     *
     * @return SRect
     */
    boundingRect(): SRect {
        if (this.pointList.length) {
            this.minX = this.pointList[0].x;
            this.maxX = this.pointList[0].x;
            this.minY = this.pointList[0].y;
            this.maxY = this.pointList[0].y;
            this.pointList.forEach(it => {
                let x = it.x,
                    y = it.y;
                if (x < this.minX) {
                    this.minX = x;
                }
                if (y < this.minY) {
                    this.minY = y;
                }
                if (x > this.maxX) {
                    this.maxX = x;
                }
                if (y > this.maxY) {
                    this.maxY = y;
                }
            });
        }
        return new SRect(
            this.minX,
            this.minY,
            this.maxX - this.minX,
            this.maxY - this.minY
        );
    } // Function boundingRect()

    /**
     * 判断点是否在区域内
     *
     * @param x
     * @param y
     */
    contains(x: number, y: number): boolean {
        let arr = this.pointList;
        if (arr.length < 3 || !SPolygonUtil.pointIn(x, y, arr)) {
            return false;
        }
        return true;
    } // Function contains()

    /**
     * Item绘制操作
     *
     * @param   painter       painter对象
     */
    onDraw(painter: SPainter): void {
        this.scenceLen = painter.toPx(this.len);
        // 当状态为展示状态
        if (this.status == SItemStatus.Normal) {
            // 闭合多边形
            this.drawShowPolygon(painter, this.pointList);
        } else if (this.status == SItemStatus.Create) {
            // 创建状态
            this.drawCreatePolygon(painter, this.pointList);
        } else {
            // 编辑状态
            this.drawEditPolygon(painter, this.pointList);
        }
    } // Function onDraw()
}

代码说明

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

 // 编辑状态时的 LineItem
 this.polygonItem = new EditPolygonItem(null);
 this.polygonItem.status = SItemStatus.Create;
 this.scene.grabItem = this.polygonItem;

2 当 EditPolygonItem 为正常状态时，需要将 grabItem 置为 null

 // 正常状态时的 LineItem
 this.polygonItem = new EditPolygonItem(null);
 this.polygonItem.status = SItemStatus.Normal;
 this.scene.grabItem = null;

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

 // 编辑状态时的 LineItem
 this.polygonItem = new EditPolygonItem(null,);
 this.polygonItem.status = SItemStatus.Create;
 this.polygonItem.verAndLeve = true;
 this.scene.grabItem = this.polygonItem;

4 当 EditPolygonItem 修改属性但是画板尚未变化时需要刷新

 // 编辑状态时的 LineItem
 this.polygonItem = new EditPolygonItem(null);
 this.polygonItem.status = SItemStatus.Create;
 this.view.update();

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

 // 编辑状态时的 LineItem
  this.polygonItem = new EditPolygonItem(null);
  this.polygonItem.status = SItemStatus.Create;
  this.polygonItem.moveable = true;

6 当 EditPolygonItem 绘制完成后的回调函数为 finishCreated

 // 编辑状态时的 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会显示锚点