From 03f6a5aa1c411354b90cbe4f42c7687ae7af23da 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, 3 Mar 2021 09:47:29 +0800 Subject: [PATCH] 1.4.1rc --- src/app/working-area/model/axImageShape.ts | 272 +++++++++++++++--- .../working-area/working-area.component.ts | 2 +- 2 files changed, 229 insertions(+), 45 deletions(-) diff --git a/src/app/working-area/model/axImageShape.ts b/src/app/working-area/model/axImageShape.ts index 44a1729..ddb7ccf 100644 --- a/src/app/working-area/model/axImageShape.ts +++ b/src/app/working-area/model/axImageShape.ts @@ -51,6 +51,16 @@ export class AxImageShape extends AxShape { upRight: PIXI.Sprite; downLeft: 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) { super(assetData, workingArea); this.angle = -this.workingArea.backgroundImage.angle; @@ -74,8 +84,162 @@ export class AxImageShape extends AxShape { this.addChild(this.image); this.addChild(this.selectionBox); - // 是否拖动 - var pointerDrag = false; + // up + 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 this.upLeft = new PIXI.Sprite(this.pointTexture); this.upLeft.cursor = 'nwse-resize'; @@ -83,7 +247,7 @@ export class AxImageShape extends AxShape { this.addChild(this.upLeft); this.upLeft.interactive = true; this.upLeft.on('pointerdown', event => { - pointerDrag = true; + 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)); event.stopPropagation(); @@ -91,7 +255,7 @@ export class AxImageShape extends AxShape { this.upLeft.on('pointermove', event => { // 移动时调整形状大小，然后重绘边框 // 检查右下角距离鼠标的位置， - if (pointerDrag) { + if (this.upLeftDrag) { var pos = this.toLocal(event.data.global); var dX = Math.abs(pos.x - this.image.x); var dY = Math.abs(pos.y - this.image.y); @@ -104,15 +268,15 @@ export class AxImageShape extends AxShape { }); this.upLeft.on('pointerup', event => { - if (pointerDrag) { - pointerDrag = false; + 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.upLeft.on('pointerupoutside', event => { - if (pointerDrag) { - pointerDrag = false; + 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)); } @@ -125,7 +289,7 @@ export class AxImageShape extends AxShape { this.addChild(this.upRight); this.upRight.interactive = true; this.upRight.on('pointerdown', event => { - pointerDrag = true; + 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)); event.stopPropagation(); @@ -133,7 +297,7 @@ export class AxImageShape extends AxShape { this.upRight.on('pointermove', event => { // 移动时调整形状大小，然后重绘边框 // 检查右下角距离鼠标的位置， - if (pointerDrag) { + if (this.upRightDrag) { var pos = this.toLocal(event.data.global); var dX = Math.abs(pos.x - this.image.x); var dY = Math.abs(pos.y - this.image.y); @@ -146,15 +310,15 @@ export class AxImageShape extends AxShape { }); this.upRight.on('pointerup', event => { - if (pointerDrag) { - pointerDrag = false; + 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.upRight.on('pointerupoutside', event => { - if (pointerDrag) { - pointerDrag = false; + 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)); } @@ -167,7 +331,7 @@ export class AxImageShape extends AxShape { this.addChild(this.downLeft); this.downLeft.interactive = true; this.downLeft.on('pointerdown', event => { - pointerDrag = true; + 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)); event.stopPropagation(); @@ -175,7 +339,7 @@ export class AxImageShape extends AxShape { this.downLeft.on('pointermove', event => { // 移动时调整形状大小，然后重绘边框 // 检查右下角距离鼠标的位置， - if (pointerDrag) { + if (this.downLeftDrag) { var pos = this.toLocal(event.data.global); var dX = Math.abs(pos.x - this.image.x); var dY = Math.abs(pos.y - this.image.y); @@ -188,15 +352,15 @@ export class AxImageShape extends AxShape { }); this.downLeft.on('pointerup', event => { - if (pointerDrag) { - pointerDrag = false; + 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.downLeft.on('pointerupoutside', event => { - if (pointerDrag) { - pointerDrag = false; + 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)); } @@ -209,7 +373,7 @@ export class AxImageShape extends AxShape { this.addChild(this.downRight); this.downRight.interactive = true; this.downRight.on('pointerdown', event => { - pointerDrag = true; + 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)); event.stopPropagation(); @@ -217,7 +381,7 @@ export class AxImageShape extends AxShape { this.downRight.on('pointermove', event => { // 移动时调整形状大小，然后重绘边框 // 检查右下角距离鼠标的位置， - if (pointerDrag) { + if (this.downRightDrag) { var pos = this.toLocal(event.data.global); var dX = Math.abs(pos.x - this.image.x); var dY = Math.abs(pos.y - this.image.y); @@ -230,15 +394,15 @@ export class AxImageShape extends AxShape { }); this.downRight.on('pointerup', event => { - if (pointerDrag) { - pointerDrag = false; + 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.downRight.on('pointerupoutside', event => { - if (pointerDrag) { - pointerDrag = false; + 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)); } @@ -247,32 +411,26 @@ export class AxImageShape extends AxShape { //// 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) { if (this.assetData.GameMode === mode) { this.text.visible = value; } } - // // 显示连接点 - // public showConnectionPoint(b: boolean) { - // this.connectPoint.visible = b; - // } /** * 设置点显示状态 * @param value 显示状态 */ public setPointVisiable(value: boolean) { 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; @@ -281,6 +439,10 @@ export class AxImageShape extends AxShape { this.downLeft.y = rect.bottom; this.downRight.x = rect.right; 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.upRight.visible = value; this.downLeft.visible = value; @@ -296,6 +458,14 @@ export class AxImageShape extends AxShape { 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; @@ -315,6 +485,10 @@ export class AxImageShape extends AxShape { this.upRight.scale.set(scale); this.downLeft.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' + 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; } } else if (this.image.anchor.x == 0.5) { - this.text.x = this.image.x; - this.text.y = this.image.y - this.image.height / 2; + 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; diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index f3b4165..60b6c20 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -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'; /** * 数据初始化 */