|
@@ -32,6 +32,9 @@ import {
|
|
|
} from "@saga-web/draw";
|
|
|
import { PolygonData } from "./type/PolygonData";
|
|
|
import { Point } from "./type/Point";
|
|
|
+import { SRelationState } from "@saga-web/big/lib/enums/SRelationState"
|
|
|
+import { SMathUtil } from "@saga-web/big/lib/utils/SMathUtil";
|
|
|
+
|
|
|
/**
|
|
|
* 编辑多边形
|
|
|
*
|
|
@@ -51,7 +54,7 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
/** 是否闭合 */
|
|
|
closeFlag: boolean = false;
|
|
|
// 当前状态 1:show 2 创建中,3 编辑中
|
|
|
- _status: number = 2;
|
|
|
+ _status: number = SRelationState.Normal;
|
|
|
// 获取当前状态
|
|
|
get getStatus(): number {
|
|
|
return this._status;
|
|
@@ -70,7 +73,12 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
borderLine: number = 4;
|
|
|
/** 鼠标移动点 */
|
|
|
private lastPoint = new SPoint();
|
|
|
-
|
|
|
+ /** 当前鼠标获取顶点对应索引 */
|
|
|
+ private curIndex: number = -1;
|
|
|
+ /** 灵敏像素 */
|
|
|
+ private len: number = 15;
|
|
|
+ /** 场景像素 */
|
|
|
+ private scenceLen: number = 15;
|
|
|
/**
|
|
|
* 构造函数
|
|
|
*
|
|
@@ -80,7 +88,8 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
|
|
|
constructor(parent: SGraphyItem | null, data: PolygonData | null) {
|
|
|
super(parent);
|
|
|
- this.data = data
|
|
|
+ this.data = data;
|
|
|
+
|
|
|
if (data && data.PointList) {
|
|
|
this._xyzListToSPointList(data.PointList);
|
|
|
};
|
|
@@ -241,21 +250,22 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
|
|
|
|
|
|
/**
|
|
|
-* 构造函数 创建多边形
|
|
|
-*
|
|
|
-*/
|
|
|
- protected editPolygon(painter: SPainter, pointList: SPoint[], point: SPoint) {
|
|
|
+ * 构造函数 创建多边形
|
|
|
+ *
|
|
|
+ */
|
|
|
+
|
|
|
+ protected editPolygon(painter: SPainter, pointList: SPoint[]) {
|
|
|
// 展示多边形
|
|
|
this.showPolygon(painter, pointList);
|
|
|
// 绘制顶点块
|
|
|
-
|
|
|
-
|
|
|
+ pointList.forEach((item, index) => {
|
|
|
+ painter.drawCircle(item.x, item.y, painter.toPx(8))
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-
|
|
|
////////////以下为鼠标事件
|
|
|
|
|
|
/**
|
|
@@ -266,18 +276,34 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
*/
|
|
|
|
|
|
onDoubleClick(event: SMouseEvent): boolean {
|
|
|
+ // 如果位show状态 双击改对象则需改为编辑状态
|
|
|
+ if (this._status == 1) {
|
|
|
+ this._status = 3;
|
|
|
+ this.update()
|
|
|
+ }
|
|
|
return true;
|
|
|
} // Function onDoubleClick()
|
|
|
|
|
|
+
|
|
|
/**
|
|
|
- * 键盘事件
|
|
|
- *
|
|
|
- * @param event 事件参数
|
|
|
- * @return boolean
|
|
|
- */
|
|
|
+ * 键盘事件
|
|
|
+ *
|
|
|
+ * @param event 事件参数
|
|
|
+ * @return boolean
|
|
|
+ */
|
|
|
onKeyDown(event: KeyboardEvent): boolean {
|
|
|
- if (this._status == 2 && event.code == 'Enter') {
|
|
|
- this._status = 1
|
|
|
+ if (this._status == 1) {
|
|
|
+ return false;
|
|
|
+ } else if (this._status == 2) {
|
|
|
+ if (event.code == 'Enter') {
|
|
|
+ this._status = 1
|
|
|
+ }
|
|
|
+ } else if (this._status == 3) {
|
|
|
+ // if (event.code == 'Enter') {
|
|
|
+ // this._status = 1
|
|
|
+ // }
|
|
|
+ } else {
|
|
|
+
|
|
|
}
|
|
|
this.update()
|
|
|
return true;
|
|
@@ -289,12 +315,64 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
* @return boolean
|
|
|
*/
|
|
|
onMouseDown(event: SMouseEvent): boolean {
|
|
|
+ // 如果状态为编辑状态则添加点
|
|
|
if (this._status == 2) {
|
|
|
+ // 新增顶点
|
|
|
this.reservePoint(event.x, event.y)
|
|
|
+ } else if (this._status == 3) {
|
|
|
+ // 1 判断是否点击在多边形顶点
|
|
|
+ // 敏感度
|
|
|
+ this.len = 15;
|
|
|
+ this.pointList.forEach((item, index) => {
|
|
|
+ let dis = SMathUtil.pointDistance(
|
|
|
+ event.x,
|
|
|
+ event.y,
|
|
|
+ item.x,
|
|
|
+ item.y
|
|
|
+ );
|
|
|
+ if (dis < this.len) {
|
|
|
+ this.len = dis;
|
|
|
+ this.curIndex = index;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 判断是否点击在多边形得边上
|
|
|
+ if (-1 == this.curIndex) {
|
|
|
+ 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 == this.pointList.length) {
|
|
|
+ console.log(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.update();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
return true;
|
|
|
} // Function onMouseDown()
|
|
|
+
|
|
|
+
|
|
|
/**
|
|
|
* 鼠标双击事件
|
|
|
*
|
|
@@ -317,11 +395,21 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
if (this._status == 2) {
|
|
|
this.lastPoint.x = event.x;
|
|
|
this.lastPoint.y = event.y;
|
|
|
+ } else if (this._status == 3) {
|
|
|
+ if (-1 != this.curIndex) {
|
|
|
+ console.log('onMouseMove')
|
|
|
+ this.pointList[this.curIndex].x = event.x;
|
|
|
+ this.pointList[this.curIndex].y = event.y;
|
|
|
+ }
|
|
|
}
|
|
|
this.update()
|
|
|
return true;
|
|
|
} // Function onMouseDown()
|
|
|
onMouseUp(event: SMouseEvent): boolean {
|
|
|
+ console.log('onMouseUp')
|
|
|
+ if (this._status == 3) {
|
|
|
+ this.curIndex = -1;
|
|
|
+ }
|
|
|
return true;
|
|
|
} // Function onMouseUp()
|
|
|
onResize(event: SMouseEvent): boolean {
|
|
@@ -329,14 +417,44 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
} // Function onMouseUp()
|
|
|
|
|
|
|
|
|
- ////////////////////////
|
|
|
|
|
|
/**
|
|
|
-* Item绘制操作
|
|
|
-*
|
|
|
-* @param painter painter对象
|
|
|
-*/
|
|
|
+ * 点击点是否在item范围内
|
|
|
+ *
|
|
|
+ */
|
|
|
+ // contains(x: number, y: number): boolean {
|
|
|
+ // console.log('PTL.MinDis < this.scenceLen')
|
|
|
+ // if (3 == this._status) {
|
|
|
+ // let p = new SPoint(x, y);
|
|
|
+ // // todo差缩放
|
|
|
+ // for (let i = 1; i < this.pointList.length; i++) {
|
|
|
+ // let PTL = SMathUtil.pointToLine(
|
|
|
+ // p,
|
|
|
+ // new SLine(
|
|
|
+ // this.pointList[i - 1].x,
|
|
|
+ // this.pointList[i - 1].y,
|
|
|
+ // this.pointList[i].x,
|
|
|
+ // this.pointList[i].y
|
|
|
+ // )
|
|
|
+ // );
|
|
|
+ // if (PTL.MinDis < this.scenceLen) {
|
|
|
+ // console.log('PTL.MinDis < this.scenceLen', PTL.MinDis, this.scenceLen)
|
|
|
+ // return true;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Item绘制操作
|
|
|
+ *
|
|
|
+ * @param painter painter对象
|
|
|
+ */
|
|
|
+
|
|
|
onDraw(painter: SPainter): void {
|
|
|
+ this.scenceLen = painter.toPx(this.len)
|
|
|
// 当状态为展示状态
|
|
|
if (this._status == 1) {
|
|
|
// 闭合多边形
|
|
@@ -346,7 +464,8 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
this.createPolygon(painter, this.pointList)
|
|
|
} else {
|
|
|
// 编辑状态
|
|
|
- // this.editPolygon(painter, this.pointList);
|
|
|
+ this.editPolygon(painter, this.pointList);
|
|
|
}
|
|
|
} // Function onDraw()
|
|
|
+
|
|
|
}
|