shaojiahao
/
AX.Angular9DataCollection
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

1.4.1rc

develop
徐振升 4 years ago
parent
c117574835
commit
03f6a5aa1c
2 changed files with 229 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 270
      src/app/working-area/model/axImageShape.ts
  2. 2
      src/app/working-area/working-area.component.ts

270
src/app/working-area/model/axImageShape.ts
Unescape View File

@ -51,6 +51,16 @@ export class AxImageShape extends AxShape {
upRight: PIXI.Sprite; upRight: PIXI.Sprite;
downLeft: PIXI.Sprite; downLeft: PIXI.Sprite;
downRight: PIXI.Sprite; downRight: PIXI.Sprite;
upDrag: boolean = false;
downDrag: boolean = false;
leftDrag: boolean = false;
rightDrag: boolean = false;
upLeftDrag: boolean = false;
upRightDrag: boolean = false;
downLeftDrag: boolean = false;
downRightDrag: boolean = false;
constructor(assetData: any, workingArea: WorkingAreaComponent) { constructor(assetData: any, workingArea: WorkingAreaComponent) {
super(assetData, workingArea); super(assetData, workingArea);
this.angle = -this.workingArea.backgroundImage.angle; this.angle = -this.workingArea.backgroundImage.angle;
@ -74,8 +84,162 @@ export class AxImageShape extends AxShape {
this.addChild(this.image); this.addChild(this.image);
this.addChild(this.selectionBox); this.addChild(this.selectionBox);
// 是否拖动 // up
var pointerDrag = false; this.up = new PIXI.Sprite(this.pointTexture);
this.up.cursor = 'ns-resize';
this.up.anchor.set(0.5);
this.addChild(this.up);
this.up.interactive = true;
this.up.on('pointerdown', event => {
this.upDrag = true;
this.image.anchor.set(0.5, 1);
this.image.position.set(this.image.position.x, this.image.position.y + (this.image.height / 2));
event.stopPropagation();
});
this.up.on('pointermove', event => {
// 移动时调整形状大小，然后重绘边框
// 检查右下角距离鼠标的位置，
if (this.upDrag) {
var pos = this.toLocal(event.data.global);
var dY = Math.abs(pos.y - this.image.y);
this.assetData.Height = Math.abs(dY);
this.refresh();
AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData);
}
});
this.up.on('pointerup', event => {
if (this.upDrag) {
this.upDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x, this.image.position.y - (this.image.height / 2));
}
});
this.up.on('pointerupoutside', event => {
if (this.upDrag) {
this.upDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x, this.image.position.y - (this.image.height / 2));
}
});
this.up.visible = false;
// down
this.down = new PIXI.Sprite(this.pointTexture);
this.down.cursor = 'ns-resize';
this.down.anchor.set(0.5);
this.addChild(this.down);
this.down.interactive = true;
this.down.on('pointerdown', event => {
this.downDrag = true;
this.image.anchor.set(0.5, 0);
this.image.position.set(this.image.position.x, this.image.position.y - (this.image.height / 2));
event.stopPropagation();
});
this.down.on('pointermove', event => {
// 移动时调整形状大小，然后重绘边框
// 检查右下角距离鼠标的位置，
if (this.downDrag) {
var pos = this.toLocal(event.data.global);
var dY = Math.abs(pos.y - this.image.y);
this.assetData.Height = Math.abs(dY);
this.refresh();
AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData);
}
});
this.down.on('pointerup', event => {
if (this.downDrag) {
this.downDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x, this.image.position.y + (this.image.height / 2));
}
});
this.down.on('pointerupoutside', event => {
if (this.downDrag) {
this.downDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x, this.image.position.y + (this.image.height / 2));
}
});
this.down.visible = false;
// left
this.left = new PIXI.Sprite(this.pointTexture);
this.left.cursor = 'ew-resize';
this.left.anchor.set(0.5);
this.addChild(this.left);
this.left.interactive = true;
this.left.on('pointerdown', event => {
this.leftDrag = true;
this.image.anchor.set(1, 0.5);
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y);
event.stopPropagation();
});
this.left.on('pointermove', event => {
// 移动时调整形状大小，然后重绘边框
// 检查右下角距离鼠标的位置，
if (this.leftDrag) {
var pos = this.toLocal(event.data.global);
var dX = Math.abs(pos.x - this.image.x);
this.assetData.Width = Math.abs(dX);
this.refresh();
AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData);
}
});
this.left.on('pointerup', event => {
if (this.leftDrag) {
this.leftDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y);
}
});
this.left.on('pointerupoutside', event => {
if (this.leftDrag) {
this.leftDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y);
}
});
this.left.visible = false;
// right
this.right = new PIXI.Sprite(this.pointTexture);
this.right.cursor = 'ew-resize';
this.right.anchor.set(0.5);
this.addChild(this.right);
this.right.interactive = true;
this.right.on('pointerdown', event => {
this.rightDrag = true;
this.image.anchor.set(0, 0.5);
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y);
event.stopPropagation();
});
this.right.on('pointermove', event => {
// 移动时调整形状大小，然后重绘边框
// 检查右下角距离鼠标的位置，
if (this.rightDrag) {
var pos = this.toLocal(event.data.global);
var dX = Math.abs(pos.x - this.image.x);
this.assetData.Width = Math.abs(dX);
this.refresh();
AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData);
}
});
this.right.on('pointerup', event => {
if (this.rightDrag) {
this.rightDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y);
}
});
this.right.on('pointerupoutside', event => {
if (this.rightDrag) {
this.rightDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x + (this.image.width / 2));
}
});
this.right.visible = false;
// up-left // up-left
this.upLeft = new PIXI.Sprite(this.pointTexture); this.upLeft = new PIXI.Sprite(this.pointTexture);
this.upLeft.cursor = 'nwse-resize'; this.upLeft.cursor = 'nwse-resize';
@ -83,7 +247,7 @@ export class AxImageShape extends AxShape {
this.addChild(this.upLeft); this.addChild(this.upLeft);
this.upLeft.interactive = true; this.upLeft.interactive = true;
this.upLeft.on('pointerdown', event => { this.upLeft.on('pointerdown', event => {
pointerDrag = true; this.upLeftDrag = true;
this.image.anchor.set(1); this.image.anchor.set(1);
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2));
event.stopPropagation(); event.stopPropagation();
@ -91,7 +255,7 @@ export class AxImageShape extends AxShape {
this.upLeft.on('pointermove', event => { this.upLeft.on('pointermove', event => {
// 移动时调整形状大小，然后重绘边框 // 移动时调整形状大小，然后重绘边框
// 检查右下角距离鼠标的位置， // 检查右下角距离鼠标的位置，
if (pointerDrag) { if (this.upLeftDrag) {
var pos = this.toLocal(event.data.global); var pos = this.toLocal(event.data.global);
var dX = Math.abs(pos.x - this.image.x); var dX = Math.abs(pos.x - this.image.x);
var dY = Math.abs(pos.y - this.image.y); var dY = Math.abs(pos.y - this.image.y);
@ -104,15 +268,15 @@ export class AxImageShape extends AxShape {
}); });
this.upLeft.on('pointerup', event => { this.upLeft.on('pointerup', event => {
if (pointerDrag) { if (this.upLeftDrag) {
pointerDrag = false; this.upLeftDrag = false;
this.image.anchor.set(0.5); this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2));
} }
}); });
this.upLeft.on('pointerupoutside', event => { this.upLeft.on('pointerupoutside', event => {
if (pointerDrag) { if (this.upLeftDrag) {
pointerDrag = false; this.upLeftDrag = false;
this.image.anchor.set(0.5); this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2));
} }
@ -125,7 +289,7 @@ export class AxImageShape extends AxShape {
this.addChild(this.upRight); this.addChild(this.upRight);
this.upRight.interactive = true; this.upRight.interactive = true;
this.upRight.on('pointerdown', event => { this.upRight.on('pointerdown', event => {
pointerDrag = true; this.upRightDrag = true;
this.image.anchor.set(0, 1); this.image.anchor.set(0, 1);
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2));
event.stopPropagation(); event.stopPropagation();
@ -133,7 +297,7 @@ export class AxImageShape extends AxShape {
this.upRight.on('pointermove', event => { this.upRight.on('pointermove', event => {
// 移动时调整形状大小，然后重绘边框 // 移动时调整形状大小，然后重绘边框
// 检查右下角距离鼠标的位置， // 检查右下角距离鼠标的位置，
if (pointerDrag) { if (this.upRightDrag) {
var pos = this.toLocal(event.data.global); var pos = this.toLocal(event.data.global);
var dX = Math.abs(pos.x - this.image.x); var dX = Math.abs(pos.x - this.image.x);
var dY = Math.abs(pos.y - this.image.y); var dY = Math.abs(pos.y - this.image.y);
@ -146,15 +310,15 @@ export class AxImageShape extends AxShape {
}); });
this.upRight.on('pointerup', event => { this.upRight.on('pointerup', event => {
if (pointerDrag) { if (this.upRightDrag) {
pointerDrag = false; this.upRightDrag = false;
this.image.anchor.set(0.5); this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2));
} }
}); });
this.upRight.on('pointerupoutside', event => { this.upRight.on('pointerupoutside', event => {
if (pointerDrag) { if (this.upRightDrag) {
pointerDrag = false; this.upRightDrag = false;
this.image.anchor.set(0.5); this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2));
} }
@ -167,7 +331,7 @@ export class AxImageShape extends AxShape {
this.addChild(this.downLeft); this.addChild(this.downLeft);
this.downLeft.interactive = true; this.downLeft.interactive = true;
this.downLeft.on('pointerdown', event => { this.downLeft.on('pointerdown', event => {
pointerDrag = true; this.downLeftDrag = true;
this.image.anchor.set(1, 0); this.image.anchor.set(1, 0);
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2));
event.stopPropagation(); event.stopPropagation();
@ -175,7 +339,7 @@ export class AxImageShape extends AxShape {
this.downLeft.on('pointermove', event => { this.downLeft.on('pointermove', event => {
// 移动时调整形状大小，然后重绘边框 // 移动时调整形状大小，然后重绘边框
// 检查右下角距离鼠标的位置， // 检查右下角距离鼠标的位置，
if (pointerDrag) { if (this.downLeftDrag) {
var pos = this.toLocal(event.data.global); var pos = this.toLocal(event.data.global);
var dX = Math.abs(pos.x - this.image.x); var dX = Math.abs(pos.x - this.image.x);
var dY = Math.abs(pos.y - this.image.y); var dY = Math.abs(pos.y - this.image.y);
@ -188,15 +352,15 @@ export class AxImageShape extends AxShape {
}); });
this.downLeft.on('pointerup', event => { this.downLeft.on('pointerup', event => {
if (pointerDrag) { if (this.downLeftDrag) {
pointerDrag = false; this.downLeftDrag = false;
this.image.anchor.set(0.5); this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2));
} }
}); });
this.downLeft.on('pointerupoutside', event => { this.downLeft.on('pointerupoutside', event => {
if (pointerDrag) { if (this.downLeftDrag) {
pointerDrag = false; this.downLeftDrag = false;
this.image.anchor.set(0.5); this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2));
} }
@ -209,7 +373,7 @@ export class AxImageShape extends AxShape {
this.addChild(this.downRight); this.addChild(this.downRight);
this.downRight.interactive = true; this.downRight.interactive = true;
this.downRight.on('pointerdown', event => { this.downRight.on('pointerdown', event => {
pointerDrag = true; this.downRightDrag = true;
this.image.anchor.set(0, 0); this.image.anchor.set(0, 0);
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2));
event.stopPropagation(); event.stopPropagation();
@ -217,7 +381,7 @@ export class AxImageShape extends AxShape {
this.downRight.on('pointermove', event => { this.downRight.on('pointermove', event => {
// 移动时调整形状大小，然后重绘边框 // 移动时调整形状大小，然后重绘边框
// 检查右下角距离鼠标的位置， // 检查右下角距离鼠标的位置，
if (pointerDrag) { if (this.downRightDrag) {
var pos = this.toLocal(event.data.global); var pos = this.toLocal(event.data.global);
var dX = Math.abs(pos.x - this.image.x); var dX = Math.abs(pos.x - this.image.x);
var dY = Math.abs(pos.y - this.image.y); var dY = Math.abs(pos.y - this.image.y);
@ -230,15 +394,15 @@ export class AxImageShape extends AxShape {
}); });
this.downRight.on('pointerup', event => { this.downRight.on('pointerup', event => {
if (pointerDrag) { if (this.downRightDrag) {
pointerDrag = false; this.downRightDrag = false;
this.image.anchor.set(0.5); this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2));
} }
}); });
this.downRight.on('pointerupoutside', event => { this.downRight.on('pointerupoutside', event => {
if (pointerDrag) { if (this.downRightDrag) {
pointerDrag = false; this.downRightDrag = false;
this.image.anchor.set(0.5); this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2));
} }
@ -247,32 +411,26 @@ export class AxImageShape extends AxShape {
//// ////
this.setItemScale(1 / this.workingArea.backgroundImage.scale.x); this.setItemScale(1 / this.workingArea.backgroundImage.scale.x);
} }
// // 设置选择框
// public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) {
// if (b) {
// this.selectionBox.lineStyle(2, 0x00EB00, 1);
// this.selectionBox.position = sprite.position;
// this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height);
// } else {
// this.selectionBox.clear();
// }
// }
// 设置名称 // 设置名称
public setNameVisible(value: boolean, mode: GameMode) { public setNameVisible(value: boolean, mode: GameMode) {
if (this.assetData.GameMode === mode) { if (this.assetData.GameMode === mode) {
this.text.visible = value; this.text.visible = value;
} }
} }
// // 显示连接点
// public showConnectionPoint(b: boolean) {
// this.connectPoint.visible = b;
// }
/** /**
* 设置点显示状态 * 设置点显示状态
* @param value 显示状态 * @param value 显示状态
*/ */
public setPointVisiable(value: boolean) { public setPointVisiable(value: boolean) {
const rect = this.getLocalBounds(); const rect = this.getLocalBounds();
this.up.x = rect.right - rect.width / 2;
this.up.y = rect.top;
this.down.x = rect.right - rect.width / 2;
this.down.y = rect.bottom;
this.left.x = rect.left;
this.left.y = rect.bottom - rect.height / 2;
this.right.x = rect.right;
this.right.y = rect.bottom - rect.height / 2;
this.upLeft.x = rect.left; this.upLeft.x = rect.left;
this.upLeft.y = rect.top; this.upLeft.y = rect.top;
this.upRight.x = rect.right; this.upRight.x = rect.right;
@ -281,6 +439,10 @@ export class AxImageShape extends AxShape {
this.downLeft.y = rect.bottom; this.downLeft.y = rect.bottom;
this.downRight.x = rect.right; this.downRight.x = rect.right;
this.downRight.y = rect.bottom; this.downRight.y = rect.bottom;
this.up.visible = value;
this.down.visible = value;
this.left.visible = value;
this.right.visible = value;
this.upLeft.visible = value; this.upLeft.visible = value;
this.upRight.visible = value; this.upRight.visible = value;
this.downLeft.visible = value; this.downLeft.visible = value;
@ -296,6 +458,14 @@ export class AxImageShape extends AxShape {
super.drawBorder(scale); super.drawBorder(scale);
const rect = this.getLocalBounds(); const rect = this.getLocalBounds();
this.up.x = rect.right - rect.width / 2;
this.up.y = rect.top;
this.down.x = rect.right - rect.width / 2;
this.down.y = rect.bottom;
this.left.x = rect.left;
this.left.y = rect.bottom - rect.height / 2;
this.right.x = rect.right;
this.right.y = rect.bottom - rect.height / 2;
this.upLeft.x = rect.left; this.upLeft.x = rect.left;
this.upLeft.y = rect.top; this.upLeft.y = rect.top;
this.upRight.x = rect.right; this.upRight.x = rect.right;
@ -315,6 +485,10 @@ export class AxImageShape extends AxShape {
this.upRight.scale.set(scale); this.upRight.scale.set(scale);
this.downLeft.scale.set(scale); this.downLeft.scale.set(scale);
this.downRight.scale.set(scale); this.downRight.scale.set(scale);
this.up.scale.set(scale);
this.down.scale.set(scale);
this.left.scale.set(scale);
this.right.scale.set(scale);
} }
} }
// 刷新 // 刷新
@ -326,26 +500,36 @@ export class AxImageShape extends AxShape {
+ '\r\n' + '\r\n'
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
if (this.image.anchor.x == 0) { if (this.image.anchor.x == 0) {
if (this.image.anchor.y == 0) { if (this.image.anchor.y == 0) {
this.text.x = this.image.x + this.image.width / 2; this.text.x = this.image.x + this.image.width / 2;
this.text.y = this.image.y; this.text.y = this.image.y;
} else if (this.image.anchor.y == 0.5) { } else if (this.image.anchor.y == 0.5) {
this.text.x = this.image.x + this.image.width / 2;
this.text.y = this.image.y - this.image.height / 2;
} else if (this.image.anchor.y == 1) { } else if (this.image.anchor.y == 1) {
this.text.x = this.image.x + this.image.width / 2; this.text.x = this.image.x + this.image.width / 2;
this.text.y = this.image.y - this.image.height; this.text.y = this.image.y - this.image.height;
} }
} else if (this.image.anchor.x == 0.5) { } else if (this.image.anchor.x == 0.5) {
if (this.image.anchor.y == 0) {
this.text.x = this.image.x; this.text.x = this.image.x;
this.text.y = this.image.y - this.image.height / 2; this.text.y = this.image.y;
} else if (this.image.anchor.y == 0.5) {
} else if (this.image.anchor.y == 1) {
this.text.x = this.image.x;
this.text.y = this.image.y - this.image.height;
}
} else if (this.image.anchor.x == 1) { } else if (this.image.anchor.x == 1) {
if (this.image.anchor.y == 0) { if (this.image.anchor.y == 0) {
this.text.x = this.image.x - this.image.width / 2; this.text.x = this.image.x - this.image.width / 2;
this.text.y = this.image.y; this.text.y = this.image.y;
} else if (this.image.anchor.y == 0.5) { } else if (this.image.anchor.y == 0.5) {
this.text.x = this.image.x - this.image.width / 2;
this.text.y = this.image.y - this.image.height / 2;
} else if (this.image.anchor.y == 1) { } else if (this.image.anchor.y == 1) {
this.text.x = this.image.x - this.image.width / 2; this.text.x = this.image.x - this.image.width / 2;
this.text.y = this.image.y - this.image.height; this.text.y = this.image.y - this.image.height;

2
src/app/working-area/working-area.component.ts
Unescape View File

@ -166,7 +166,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* 重大调整-主版本号增加 * 重大调整-主版本号增加
* 日期变更-日期版本号增加 * 日期变更-日期版本号增加
*/ */
public VERSION = '1.4.0.20210302_rc'; public VERSION = '1.4.1.20210303_rc';
/** /**
* 数据初始化 * 数据初始化
*/ */

Write Preview
Loading…
Cancel
Save