|
@@ -91,8 +91,10 @@ export class SGraphItem extends SObject {
|
|
|
this.pos.y = v;
|
|
|
this.update();
|
|
|
} // Set y
|
|
|
+
|
|
|
/** 缩放比例 */
|
|
|
scale: number = 1;
|
|
|
+ rolate: number = 0;
|
|
|
|
|
|
/** 是否可见 */
|
|
|
_visible: boolean = true;
|
|
@@ -170,6 +172,8 @@ export class SGraphItem extends SObject {
|
|
|
painter.save();
|
|
|
// item位移到指定位置绘制
|
|
|
painter.translate(item.x, item.y);
|
|
|
+ painter.scale(item.scale, item.scale);
|
|
|
+ painter.rotate(item.rolate);
|
|
|
|
|
|
// 如果不进行变形处理,则取消painter的变型操作
|
|
|
if (!item.isTransform) {
|
|
@@ -252,7 +256,7 @@ export class SGraphItem extends SObject {
|
|
|
* @return boolean
|
|
|
*/
|
|
|
contains(x: number, y: number): boolean {
|
|
|
- return this.boundingRect().contains(x - this.x, y - this.y);
|
|
|
+ return this.boundingRect().contains(x, y);
|
|
|
} // Function contains()
|
|
|
|
|
|
/**
|
|
@@ -279,15 +283,16 @@ export class SGraphItem extends SObject {
|
|
|
* @return 在item中的坐标
|
|
|
*/
|
|
|
mapFromScene(x: number, y: number): SPoint {
|
|
|
+ const m = new DOMMatrix();
|
|
|
let list = this.itemPath();
|
|
|
- let x0 = x;
|
|
|
- let y0 = y;
|
|
|
for (let item of list) {
|
|
|
- x0 = (x0 - item.x) / item.scale;
|
|
|
- y0 = (y0 - item.y) / item.scale;
|
|
|
+ m.translateSelf(item.x, item.y);
|
|
|
+ m.scaleSelf(item.scale, item.scale);
|
|
|
+ m.rotateSelf(item.rolate);
|
|
|
}
|
|
|
|
|
|
- return new SPoint(x0, y0);
|
|
|
+ const mp = new DOMPoint(x, y).matrixTransform(m.inverse());
|
|
|
+ return new SPoint(mp.x, mp.y);
|
|
|
} // Function mapFromScene()
|
|
|
|
|
|
/**
|
|
@@ -303,10 +308,16 @@ export class SGraphItem extends SObject {
|
|
|
return new SPoint(x, y);
|
|
|
}
|
|
|
|
|
|
- return this.parent.mapToScene(
|
|
|
- x * this.scale + this.x,
|
|
|
- y * this.scale + this.y
|
|
|
- );
|
|
|
+ const m = new DOMMatrix();
|
|
|
+ let list = this.itemPath();
|
|
|
+ for (let item of list) {
|
|
|
+ m.translateSelf(item.x, item.y);
|
|
|
+ m.scaleSelf(item.scale, item.scale);
|
|
|
+ m.rotateSelf(item.rolate);
|
|
|
+ }
|
|
|
+
|
|
|
+ const mp = new DOMPoint(x, y).matrixTransform(m);
|
|
|
+ return new SPoint(mp.x, mp.y);
|
|
|
} // Function mapToScene()
|
|
|
|
|
|
// =================================================================================================================
|
|
@@ -324,7 +335,7 @@ export class SGraphItem extends SObject {
|
|
|
continue;
|
|
|
}
|
|
|
let ce = SGraphItem.toChildMouseEvent(item, event);
|
|
|
- if (item.contains(event.x, event.y) && item.onClick(ce)) {
|
|
|
+ if (item.contains(ce.x, ce.y) && item.onClick(ce)) {
|
|
|
// 如果点在子项目上且子项目处理了事件
|
|
|
return true;
|
|
|
}
|
|
@@ -346,7 +357,7 @@ export class SGraphItem extends SObject {
|
|
|
continue;
|
|
|
}
|
|
|
let ce = SGraphItem.toChildMouseEvent(item, event);
|
|
|
- if (item.contains(event.x, event.y) && item.onDoubleClick(ce)) {
|
|
|
+ if (item.contains(ce.x, ce.y) && item.onDoubleClick(ce)) {
|
|
|
// 如果点在子项目上且子项目处理了事件
|
|
|
return true;
|
|
|
}
|
|
@@ -368,7 +379,7 @@ export class SGraphItem extends SObject {
|
|
|
continue;
|
|
|
}
|
|
|
let ce = SGraphItem.toChildMouseEvent(item, event);
|
|
|
- if (item.contains(event.x, event.y) && item.onMouseDown(ce)) {
|
|
|
+ if (item.contains(ce.x, ce.y) && item.onMouseDown(ce)) {
|
|
|
// 如果点在子项目上且子项目处理了事件
|
|
|
return true;
|
|
|
}
|
|
@@ -401,7 +412,7 @@ export class SGraphItem extends SObject {
|
|
|
continue;
|
|
|
}
|
|
|
let ce = SGraphItem.toChildMouseEvent(item, event);
|
|
|
- if (item.contains(event.x, event.y) && item.onMouseMove(ce)) {
|
|
|
+ if (item.contains(ce.x, ce.y) && item.onMouseMove(ce)) {
|
|
|
// 如果点在子项目上且子项目处理了事件
|
|
|
return true;
|
|
|
}
|
|
@@ -413,10 +424,11 @@ export class SGraphItem extends SObject {
|
|
|
this._isMoving
|
|
|
) {
|
|
|
let old = new SPoint(this.pos.x, this.pos.y);
|
|
|
- this.moveTo(
|
|
|
- this.pos.x + event.x - this._mouseDownPos.x,
|
|
|
- this.pos.y + event.y - this._mouseDownPos.y
|
|
|
+ const mp = this.toParentChange(
|
|
|
+ event.x - this._mouseDownPos.x,
|
|
|
+ event.y - this._mouseDownPos.y
|
|
|
);
|
|
|
+ this.moveTo(this.pos.x + mp.x, this.pos.y + mp.y);
|
|
|
this.$emit("onMove", old, this.pos);
|
|
|
}
|
|
|
|
|
@@ -448,7 +460,7 @@ export class SGraphItem extends SObject {
|
|
|
continue;
|
|
|
}
|
|
|
let ce = SGraphItem.toChildMouseEvent(item, event);
|
|
|
- if (item.contains(event.x, event.y) && item.onMouseUp(ce)) {
|
|
|
+ if (item.contains(ce.x, ce.y) && item.onMouseUp(ce)) {
|
|
|
// 如果点在子项目上且子项目处理了事件
|
|
|
return true;
|
|
|
}
|
|
@@ -491,7 +503,7 @@ export class SGraphItem extends SObject {
|
|
|
continue;
|
|
|
}
|
|
|
let ce = SGraphItem.toChildMouseEvent(item, event);
|
|
|
- if (item.contains(event.x, event.y) && item.onContextMenu(ce)) {
|
|
|
+ if (item.contains(ce.x, ce.y) && item.onContextMenu(ce)) {
|
|
|
// 如果点在子项目上且子项目处理了事件
|
|
|
return true;
|
|
|
}
|
|
@@ -559,8 +571,24 @@ export class SGraphItem extends SObject {
|
|
|
event: SMouseEvent
|
|
|
): SMouseEvent {
|
|
|
let ce = new SMouseEvent(event);
|
|
|
- ce.x = (event.x - child.x) / child.scale;
|
|
|
- ce.y = (event.y - child.y) / child.scale;
|
|
|
+ ce.matrix.translateSelf(child.x, child.y);
|
|
|
+ ce.matrix.scaleSelf(child.scale, child.scale);
|
|
|
+ ce.matrix.rotateSelf(0, 0, child.rolate);
|
|
|
+
|
|
|
+ if (!child.isTransform) {
|
|
|
+ let x0 = ce.matrix.e;
|
|
|
+ let y0 = ce.matrix.f;
|
|
|
+ ce.matrix = new DOMMatrix();
|
|
|
+ ce.matrix.translateSelf(x0, y0);
|
|
|
+ }
|
|
|
+
|
|
|
+ const mp = new DOMPoint(event.offsetX, event.offsetY).matrixTransform(
|
|
|
+ ce.matrix.inverse()
|
|
|
+ );
|
|
|
+
|
|
|
+ ce.x = mp.x;
|
|
|
+ ce.y = mp.y;
|
|
|
+
|
|
|
return ce;
|
|
|
} // Function toChildMouseEvent()
|
|
|
|
|
@@ -585,6 +613,22 @@ export class SGraphItem extends SObject {
|
|
|
} // Function grabItem
|
|
|
|
|
|
/**
|
|
|
+ * 计算点在父节点的位置
|
|
|
+ *
|
|
|
+ * @param x X轴
|
|
|
+ * @param y Y轴
|
|
|
+ * @return 在父节点的位置
|
|
|
+ */
|
|
|
+ private toParentChange(x: number, y: number): SPoint {
|
|
|
+ const m = new DOMMatrix();
|
|
|
+ m.scaleSelf(this.scale, this.scale);
|
|
|
+ m.rotateSelf(this.rolate);
|
|
|
+
|
|
|
+ const mp = new DOMPoint(x, y).matrixTransform(m);
|
|
|
+ return new SPoint(mp.x, mp.y);
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
* 判断是否处理事件
|
|
|
*
|
|
|
* @return true: 处理事件,否则不处理
|