|
|
|
@ -7,6 +7,8 @@ import { PropertyInfo } from './PropertyInfo'; |
|
|
|
import { AxShape } from './axShape'; |
|
|
|
import { AxShape } from './axShape'; |
|
|
|
import { Sprite, Point, Rectangle } from 'pixi.js'; |
|
|
|
import { Sprite, Point, Rectangle } from 'pixi.js'; |
|
|
|
import { AxArrowConnector } from './axArrowConnector'; |
|
|
|
import { AxArrowConnector } from './axArrowConnector'; |
|
|
|
|
|
|
|
import { AxMessageSystem } from './axMessageSystem'; |
|
|
|
|
|
|
|
import { EVENT_IMAGE_RESIZE } from './events'; |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
/** |
|
|
|
* 安信图片形状 |
|
|
|
* 安信图片形状 |
|
|
|
@ -72,12 +74,8 @@ export class AxImageShape extends AxShape { |
|
|
|
this.addChild(this.image); |
|
|
|
this.addChild(this.image); |
|
|
|
this.addChild(this.selectionBox); |
|
|
|
this.addChild(this.selectionBox); |
|
|
|
|
|
|
|
|
|
|
|
////
|
|
|
|
// 是否拖动
|
|
|
|
var leftUpPos = new Point(0, 0); |
|
|
|
var pointerDrag = false; |
|
|
|
var upLeftDrag = false; |
|
|
|
|
|
|
|
var leftDownPos = new Point(0, 0); |
|
|
|
|
|
|
|
var rightUpPos = new Point(0, 0); |
|
|
|
|
|
|
|
var rightDownPos = new Point(0, 0); |
|
|
|
|
|
|
|
// 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'; |
|
|
|
@ -85,40 +83,36 @@ 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; |
|
|
|
upLeftDrag = true; |
|
|
|
|
|
|
|
var imageRect = new Rectangle(this.image.x, this.image.y, this.image.width, this.image.height); |
|
|
|
|
|
|
|
console.log('图片的边界大小', imageRect); |
|
|
|
|
|
|
|
rightDownPos = new Point(imageRect.right, imageRect.bottom); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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(); |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.upLeft.on('pointermove', event => { |
|
|
|
this.upLeft.on('pointermove', event => { |
|
|
|
|
|
|
|
|
|
|
|
// 移动时调整形状大小，然后重绘边框
|
|
|
|
// 移动时调整形状大小，然后重绘边框
|
|
|
|
// 检查右下角距离鼠标的位置，
|
|
|
|
// 检查右下角距离鼠标的位置，
|
|
|
|
if (upLeftDrag) { |
|
|
|
if (pointerDrag) { |
|
|
|
leftUpPos = event.data.getLocalPosition(this.upLeft.parent); |
|
|
|
var pos = this.toLocal(event.data.global); |
|
|
|
console.log('鼠标点击位置的坐标', leftUpPos); |
|
|
|
var dX = Math.abs(pos.x - this.image.x); |
|
|
|
|
|
|
|
var dY = Math.abs(pos.y - this.image.y); |
|
|
|
this.assetData.Width = Math.abs(leftUpPos.x); |
|
|
|
var result = dX > dY ? dX : dY; |
|
|
|
this.assetData.Height = Math.abs(leftUpPos.x); |
|
|
|
this.assetData.Width = Math.abs(result); |
|
|
|
|
|
|
|
this.assetData.Height = Math.abs(result); |
|
|
|
this.refresh(); |
|
|
|
this.refresh(); |
|
|
|
|
|
|
|
AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
this.upLeft.on('pointerup', event => { |
|
|
|
this.upLeft.on('pointerup', event => { |
|
|
|
if (upLeftDrag) { |
|
|
|
if (pointerDrag) { |
|
|
|
upLeftDrag = false; |
|
|
|
pointerDrag = 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 (upLeftDrag) { |
|
|
|
if (pointerDrag) { |
|
|
|
upLeftDrag = false; |
|
|
|
pointerDrag = 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)); |
|
|
|
} |
|
|
|
} |
|
|
|
@ -130,6 +124,41 @@ export class AxImageShape extends AxShape { |
|
|
|
this.upRight.anchor.set(0.5); |
|
|
|
this.upRight.anchor.set(0.5); |
|
|
|
this.addChild(this.upRight); |
|
|
|
this.addChild(this.upRight); |
|
|
|
this.upRight.interactive = true; |
|
|
|
this.upRight.interactive = true; |
|
|
|
|
|
|
|
this.upRight.on('pointerdown', event => { |
|
|
|
|
|
|
|
pointerDrag = 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(); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
this.upRight.on('pointermove', event => { |
|
|
|
|
|
|
|
// 移动时调整形状大小，然后重绘边框
|
|
|
|
|
|
|
|
// 检查右下角距离鼠标的位置，
|
|
|
|
|
|
|
|
if (pointerDrag) { |
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
var result = dX > dY ? dX : dY; |
|
|
|
|
|
|
|
this.assetData.Width = Math.abs(result); |
|
|
|
|
|
|
|
this.assetData.Height = Math.abs(result); |
|
|
|
|
|
|
|
this.refresh(); |
|
|
|
|
|
|
|
AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
this.upRight.on('pointerup', event => { |
|
|
|
|
|
|
|
if (pointerDrag) { |
|
|
|
|
|
|
|
pointerDrag = 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; |
|
|
|
|
|
|
|
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.visible = false; |
|
|
|
this.upRight.visible = false; |
|
|
|
// down-left
|
|
|
|
// down-left
|
|
|
|
this.downLeft = new PIXI.Sprite(this.pointTexture); |
|
|
|
this.downLeft = new PIXI.Sprite(this.pointTexture); |
|
|
|
@ -137,6 +166,41 @@ export class AxImageShape extends AxShape { |
|
|
|
this.downLeft.anchor.set(0.5); |
|
|
|
this.downLeft.anchor.set(0.5); |
|
|
|
this.addChild(this.downLeft); |
|
|
|
this.addChild(this.downLeft); |
|
|
|
this.downLeft.interactive = true; |
|
|
|
this.downLeft.interactive = true; |
|
|
|
|
|
|
|
this.downLeft.on('pointerdown', event => { |
|
|
|
|
|
|
|
pointerDrag = 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(); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
this.downLeft.on('pointermove', event => { |
|
|
|
|
|
|
|
// 移动时调整形状大小，然后重绘边框
|
|
|
|
|
|
|
|
// 检查右下角距离鼠标的位置，
|
|
|
|
|
|
|
|
if (pointerDrag) { |
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
var result = dX > dY ? dX : dY; |
|
|
|
|
|
|
|
this.assetData.Width = Math.abs(result); |
|
|
|
|
|
|
|
this.assetData.Height = Math.abs(result); |
|
|
|
|
|
|
|
this.refresh(); |
|
|
|
|
|
|
|
AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
this.downLeft.on('pointerup', event => { |
|
|
|
|
|
|
|
if (pointerDrag) { |
|
|
|
|
|
|
|
pointerDrag = 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; |
|
|
|
|
|
|
|
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.visible = false; |
|
|
|
this.downLeft.visible = false; |
|
|
|
// down-right
|
|
|
|
// down-right
|
|
|
|
this.downRight = new PIXI.Sprite(this.pointTexture); |
|
|
|
this.downRight = new PIXI.Sprite(this.pointTexture); |
|
|
|
@ -144,32 +208,43 @@ export class AxImageShape extends AxShape { |
|
|
|
this.downRight.anchor.set(0.5); |
|
|
|
this.downRight.anchor.set(0.5); |
|
|
|
this.addChild(this.downRight); |
|
|
|
this.addChild(this.downRight); |
|
|
|
this.downRight.interactive = true; |
|
|
|
this.downRight.interactive = true; |
|
|
|
|
|
|
|
this.downRight.on('pointerdown', event => { |
|
|
|
|
|
|
|
pointerDrag = 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(); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
this.downRight.on('pointermove', event => { |
|
|
|
|
|
|
|
// 移动时调整形状大小，然后重绘边框
|
|
|
|
|
|
|
|
// 检查右下角距离鼠标的位置，
|
|
|
|
|
|
|
|
if (pointerDrag) { |
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
var result = dX > dY ? dX : dY; |
|
|
|
|
|
|
|
this.assetData.Width = Math.abs(result); |
|
|
|
|
|
|
|
this.assetData.Height = Math.abs(result); |
|
|
|
|
|
|
|
this.refresh(); |
|
|
|
|
|
|
|
AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
this.downRight.on('pointerup', event => { |
|
|
|
|
|
|
|
if (pointerDrag) { |
|
|
|
|
|
|
|
pointerDrag = 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; |
|
|
|
|
|
|
|
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.visible = false; |
|
|
|
this.downRight.visible = false; |
|
|
|
////
|
|
|
|
////
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// if (this.assetData.CanConnect) {
|
|
|
|
|
|
|
|
// // connectPoint
|
|
|
|
|
|
|
|
// this.connectPoint = new PIXI.Sprite(this.connectPointTexture);
|
|
|
|
|
|
|
|
// this.connectPoint.anchor.set(0.5);
|
|
|
|
|
|
|
|
// this.connectPoint.x = this.image.x;
|
|
|
|
|
|
|
|
// this.connectPoint.y = this.image.y;
|
|
|
|
|
|
|
|
// this.addChild(this.connectPoint);
|
|
|
|
|
|
|
|
// this.connectPoint.interactive = true;
|
|
|
|
|
|
|
|
// this.connectPoint
|
|
|
|
|
|
|
|
// .on('pointerdown', event => {
|
|
|
|
|
|
|
|
// event.stopPropagation();
|
|
|
|
|
|
|
|
// // this.paintingPipeline(this.x, this.y);
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
// .on('pointerover', event => {
|
|
|
|
|
|
|
|
// this.setSelectionBox(true, this.connectPoint);
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
// .on('pointerout', event => {
|
|
|
|
|
|
|
|
// this.setSelectionBox(false);
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
// // this.showConnectionPoint(false);
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
this.setItemScale(1 / this.workingArea.backgroundImage.scale.x); |
|
|
|
this.setItemScale(1 / this.workingArea.backgroundImage.scale.x); |
|
|
|
} |
|
|
|
} |
|
|
|
// // 设置选择框
|
|
|
|
// // 设置选择框
|
|
|
|
@ -250,8 +325,32 @@ export class AxImageShape extends AxShape { |
|
|
|
this.text.text = this.assetData.Name |
|
|
|
this.text.text = this.assetData.Name |
|
|
|
+ '\r\n' |
|
|
|
+ '\r\n' |
|
|
|
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; |
|
|
|
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; |
|
|
|
this.text.x = this.image.x; |
|
|
|
|
|
|
|
this.text.y = this.image.y - this.image.height / 2; |
|
|
|
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) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} 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; |
|
|
|
|
|
|
|
} 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) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} 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.angle = -this.workingArea.backgroundImage.angle; |
|
|
|
this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); |
|
|
|
this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); |
|
|
|
} |
|
|
|
} |
|
|
|
|
chenjingyu
4 years ago