From f7cbb9965210d867856627baad1e5d2cdbacff08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=8C=AF=E5=8D=87?= <359059686@qq.com> Date: Wed, 11 Aug 2021 09:14:24 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=20=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E5=A4=A7=E5=B0=8F=E4=BC=9A=E4=B8=80=E8=B5=B7?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=81=8F=E7=A7=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/working-area/model/axImageShape.ts | 204 +++++++++++++-------- 1 file changed, 127 insertions(+), 77 deletions(-) diff --git a/src/app/working-area/model/axImageShape.ts b/src/app/working-area/model/axImageShape.ts index 8a757f1..4cdf6b9 100644 --- a/src/app/working-area/model/axImageShape.ts +++ b/src/app/working-area/model/axImageShape.ts @@ -93,7 +93,9 @@ export class AxImageShape extends AxShape { 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)); + this.position.set(this.x, this.y + this.image.height * 0.5); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); event.stopPropagation(); }); this.up.on('pointermove', event => { @@ -104,6 +106,7 @@ export class AxImageShape extends AxShape { var dY = Math.abs(pos.y - this.image.y); this.assetData.Height = Math.abs(dY); this.refresh(); + this.text.y = this.image.y - this.image.height / 2; AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); } @@ -112,14 +115,18 @@ export class AxImageShape extends AxShape { 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.position.set(this.position.x, this.position.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); 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.position.set(this.position.x, this.position.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.up.visible = false; @@ -132,7 +139,9 @@ export class AxImageShape extends AxShape { 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)); + this.position.set(this.x, this.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); event.stopPropagation(); }); this.down.on('pointermove', event => { @@ -151,14 +160,18 @@ export class AxImageShape extends AxShape { 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.position.set(this.x, this.y + (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); 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.position.set(this.x, this.y + (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.down.visible = false; @@ -171,7 +184,9 @@ export class AxImageShape extends AxShape { 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); + this.position.set(this.position.x + (this.image.width / 2), this.position.y); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); event.stopPropagation(); }); this.left.on('pointermove', event => { @@ -190,14 +205,18 @@ export class AxImageShape extends AxShape { 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.position.set(this.position.x - (this.image.width / 2), this.position.y); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); 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.position.set(this.position.x - (this.image.width / 2), this.position.y); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.left.visible = false; @@ -210,7 +229,9 @@ export class AxImageShape extends AxShape { 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); + this.position.set(this.position.x - (this.image.width / 2), this.position.y); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); event.stopPropagation(); }); this.right.on('pointermove', event => { @@ -229,14 +250,18 @@ export class AxImageShape extends AxShape { 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.position.set(this.position.x + (this.image.width / 2), this.position.y); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); 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.image.position.y); + this.position.set(this.position.x + (this.image.width / 2), this.position.y); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.right.visible = false; @@ -249,7 +274,9 @@ export class AxImageShape extends AxShape { this.upLeft.on('pointerdown', event => { this.upLeftDrag = true; 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.position.set(this.position.x + (this.image.width / 2), this.position.y + (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); event.stopPropagation(); }); this.upLeft.on('pointermove', event => { @@ -271,14 +298,18 @@ export class AxImageShape extends AxShape { if (this.upLeftDrag) { this.upLeftDrag = false; 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.position.set(this.position.x - (this.image.width / 2), this.position.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.upLeft.on('pointerupoutside', event => { if (this.upLeftDrag) { this.upLeftDrag = false; 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.position.set(this.position.x - (this.image.width / 2), this.position.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.upLeft.visible = false; @@ -291,7 +322,9 @@ export class AxImageShape extends AxShape { this.upRight.on('pointerdown', event => { this.upRightDrag = true; 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.position.set(this.position.x - (this.image.width / 2), this.position.y + (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); event.stopPropagation(); }); this.upRight.on('pointermove', event => { @@ -313,14 +346,18 @@ export class AxImageShape extends AxShape { if (this.upRightDrag) { this.upRightDrag = false; 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.position.set(this.position.x + (this.image.width / 2), this.position.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.upRight.on('pointerupoutside', event => { if (this.upRightDrag) { this.upRightDrag = false; 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.position.set(this.position.x + (this.image.width / 2), this.position.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.upRight.visible = false; @@ -333,7 +370,9 @@ export class AxImageShape extends AxShape { this.downLeft.on('pointerdown', event => { this.downLeftDrag = true; 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.position.set(this.position.x + (this.image.width / 2), this.position.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); event.stopPropagation(); }); this.downLeft.on('pointermove', event => { @@ -355,14 +394,18 @@ export class AxImageShape extends AxShape { if (this.downLeftDrag) { this.downLeftDrag = false; 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.position.set(this.position.x - (this.image.width / 2), this.position.y + (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.downLeft.on('pointerupoutside', event => { if (this.downLeftDrag) { this.downLeftDrag = false; 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.position.set(this.position.x - (this.image.width / 2), this.position.y + (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.downLeft.visible = false; @@ -375,7 +418,9 @@ export class AxImageShape extends AxShape { this.downRight.on('pointerdown', event => { this.downRightDrag = true; 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.position.set(this.position.x - (this.image.width / 2), this.position.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); event.stopPropagation(); }); this.downRight.on('pointermove', event => { @@ -397,14 +442,18 @@ export class AxImageShape extends AxShape { if (this.downRightDrag) { this.downRightDrag = false; 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.position.set(this.position.x + (this.image.width / 2), this.position.y + (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.downRight.on('pointerupoutside', event => { if (this.downRightDrag) { this.downRightDrag = false; 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.position.set(this.position.x + (this.image.width / 2), this.position.y + (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.downRight.visible = false; @@ -422,7 +471,8 @@ export class AxImageShape extends AxShape { * @param value 显示状态 */ public setPointVisiable(value: boolean) { - const rect = this.getLocalBounds(); + const rect1 = this.image.getLocalBounds(); + const rect = new Rectangle(rect1.x * this.image.scale.x, rect1.y * this.image.scale.y, rect1.width * this.image.scale.x, rect1.height * this.image.scale.y); this.up.x = rect.right - rect.width / 2; this.up.y = rect.top; this.down.x = rect.right - rect.width / 2; @@ -452,28 +502,28 @@ export class AxImageShape extends AxShape { * * @param scale 绘制边框 */ - public drawBorder(scale: number) { + public drawBorder() { const visible = this.upLeft.visible; this.setPointVisiable(false); + const scale = this.assetData.FixedSize ? 1 : 1 / this.workingArea.backgroundImage.scale.x; + this.border.clear(); + const rect1 = this.image.getLocalBounds(); + const rect = new Rectangle(rect1.x * this.image.scale.x, rect1.y * this.image.scale.y, rect1.width * this.image.scale.x, rect1.height * this.image.scale.y); + const p1 = new PIXI.Point(rect.left, rect.top); + const p2 = new PIXI.Point(rect.right, rect.top); + const p3 = new PIXI.Point(rect.right, rect.bottom); + const p4 = new PIXI.Point(rect.left, rect.bottom); + + this.border.lineStyle(scale * 1, 0x00a8ff); + + const spaceLength = scale * 1; + const lineLenght = rect.width + 0.5 + 0.5; + const dashLength = scale * (lineLenght + spaceLength - Math.floor((rect.width + rect.height) / 2 / 4.1)) / Math.floor((rect.width + rect.height) / 2 / 4.1); + this.drawDash(this.border, p1.x - 0.5 * scale, p1.y, p2.x + 0.5 * scale, p2.y, dashLength, spaceLength); + this.drawDash(this.border, p2.x, p2.y - 0.5 * scale, p3.x, p3.y + 0.5 * scale, dashLength, spaceLength); + this.drawDash(this.border, p3.x + 0.5 * scale, p3.y, p4.x - 0.5 * scale, p4.y, dashLength, spaceLength); + this.drawDash(this.border, p4.x, p4.y + 0.5 * scale, p1.x, p1.y - 0.5 * scale, dashLength, spaceLength); - super.drawBorder(scale); - 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.y = rect.top; - this.upRight.x = rect.right; - this.upRight.y = rect.top; - this.downLeft.x = rect.left; - this.downLeft.y = rect.bottom; - this.downRight.x = rect.right; - this.downRight.y = rect.bottom; this.setPointVisiable(visible); } public setItemScale(scale: number) { @@ -501,41 +551,41 @@ export class AxImageShape extends AxShape { + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; - if (this.image.anchor.x == 0) { - if (this.image.anchor.y == 0) { - this.text.x = this.image.x + this.image.width / 2; - this.text.y = this.image.y; - } 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) { - this.text.x = this.image.x + this.image.width / 2; - this.text.y = this.image.y - this.image.height; - } + // if (this.image.anchor.x == 0) { + // if (this.image.anchor.y == 0) { + // this.text.x = this.image.x + this.image.width / 2; + // this.text.y = this.image.y; + // } 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) { + // this.text.x = this.image.x + this.image.width / 2; + // this.text.y = this.image.y - this.image.height; + // } - } else if (this.image.anchor.x == 0.5) { - if (this.image.anchor.y == 0) { - this.text.x = this.image.x; - this.text.y = this.image.y; - } else if (this.image.anchor.y == 0.5) { + // } else if (this.image.anchor.x == 0.5) { + // if (this.image.anchor.y == 0) { + // this.text.x = this.image.x; + // 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) { - if (this.image.anchor.y == 0) { - this.text.x = this.image.x - this.image.width / 2; - this.text.y = this.image.y; - } 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) { - this.text.x = this.image.x - this.image.width / 2; - this.text.y = this.image.y - this.image.height; - } - } + // } 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) { + // if (this.image.anchor.y == 0) { + // this.text.x = this.image.x - this.image.width / 2; + // this.text.y = this.image.y; + // } 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) { + // this.text.x = this.image.x - this.image.width / 2; + // this.text.y = this.image.y - this.image.height; + // } + // } this.angle = -this.workingArea.backgroundImage.angle; - this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); + this.drawBorder(); } }