|
|
|
|
@ -13,6 +13,8 @@ import { AxArrowConnector } from './axArrowConnector';
|
|
|
|
|
* AxImageShape |
|
|
|
|
*/ |
|
|
|
|
export class AxImageShape extends AxShape { |
|
|
|
|
pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png') |
|
|
|
|
connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png'); |
|
|
|
|
style = new PIXI.TextStyle({ |
|
|
|
|
fontFamily: 'Arial', |
|
|
|
|
fontSize: 18, |
|
|
|
|
@ -34,26 +36,19 @@ export class AxImageShape extends AxShape {
|
|
|
|
|
+ '\r\n' |
|
|
|
|
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* 选中圆点 |
|
|
|
|
*/ |
|
|
|
|
|
|
|
|
|
image: PIXI.Sprite; |
|
|
|
|
selectionBox = new PIXI.Graphics(); |
|
|
|
|
connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png'); |
|
|
|
|
connectPoint: Sprite; |
|
|
|
|
// 可移动的
|
|
|
|
|
|
|
|
|
|
// 可选中的
|
|
|
|
|
connectPoint: Sprite; |
|
|
|
|
|
|
|
|
|
// up: PIXI.Sprite;
|
|
|
|
|
// down: PIXI.Sprite;
|
|
|
|
|
// left: PIXI.Sprite;
|
|
|
|
|
// right: PIXI.Sprite;
|
|
|
|
|
// upLeft: PIXI.Sprite;
|
|
|
|
|
// upRight: PIXI.Sprite;
|
|
|
|
|
// downLeft: PIXI.Sprite;
|
|
|
|
|
// downRight: PIXI.Sprite;
|
|
|
|
|
up: PIXI.Sprite; |
|
|
|
|
down: PIXI.Sprite; |
|
|
|
|
left: PIXI.Sprite; |
|
|
|
|
right: PIXI.Sprite; |
|
|
|
|
upLeft: PIXI.Sprite; |
|
|
|
|
upRight: PIXI.Sprite; |
|
|
|
|
downLeft: PIXI.Sprite; |
|
|
|
|
downRight: PIXI.Sprite; |
|
|
|
|
constructor(assetData: any, workingArea: WorkingAreaComponent) { |
|
|
|
|
super(assetData, workingArea); |
|
|
|
|
this.x = this.assetData.Point.x; |
|
|
|
|
@ -68,74 +63,6 @@ export class AxImageShape extends AxShape {
|
|
|
|
|
this.image.height = this.assetData.Height; |
|
|
|
|
this.image.alpha = 1; |
|
|
|
|
this.image.anchor.set(0.5); |
|
|
|
|
// this.image.interactive = true;
|
|
|
|
|
// this.image.buttonMode = true;
|
|
|
|
|
// this.image
|
|
|
|
|
// .on('mousedown', event => {
|
|
|
|
|
// event.stopPropagation();
|
|
|
|
|
// this.workingArea.selection.selectOne(this);
|
|
|
|
|
// // this.paintingPipeline(this.x, this.y);
|
|
|
|
|
// // 如果链接对象不为空,禁止移动
|
|
|
|
|
// if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
|
|
|
|
|
// event.currentTarget.parent.data = event.data;
|
|
|
|
|
// event.currentTarget.parent.alpha = 0.5;
|
|
|
|
|
// event.currentTarget.parent.dragging = true;
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseup', event => {
|
|
|
|
|
// if (event.currentTarget.parent.dragging) {
|
|
|
|
|
// event.currentTarget.parent.alpha = 1;
|
|
|
|
|
// event.currentTarget.parent.dragging = false;
|
|
|
|
|
// event.currentTarget.parent.data = null;
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseupoutside', event => {
|
|
|
|
|
// if (event.currentTarget.parent.dragging) {
|
|
|
|
|
// event.currentTarget.parent.alpha = 1;
|
|
|
|
|
// event.currentTarget.parent.dragging = false;
|
|
|
|
|
// event.currentTarget.parent.data = null;
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// .on('mousemove', event => {
|
|
|
|
|
// if (event.currentTarget.parent.dragging) {
|
|
|
|
|
// // // 如果拖动过程中发现父对象不是背景图
|
|
|
|
|
// // if (this.parent !== this.workingArea.backgroundImage) {
|
|
|
|
|
// // this.setParent(this.workingArea.backgroundImage);
|
|
|
|
|
// // if (this.assetData.FixedSize) {
|
|
|
|
|
// // const scale = 1 / this.workingArea.backgroundImage.scale.x;
|
|
|
|
|
// // this.scale.set(scale);
|
|
|
|
|
// // }
|
|
|
|
|
// // }
|
|
|
|
|
// const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
|
|
|
|
|
// event.currentTarget.parent.x = newPosition.x;
|
|
|
|
|
// event.currentTarget.parent.y = newPosition.y;
|
|
|
|
|
// this.assetData.Point = new PIXI.Point(this.x, this.y);
|
|
|
|
|
// this.workingArea.canvasData.isChange = true;
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// .on('rightclick', event => {
|
|
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseover', event => {
|
|
|
|
|
// event.stopPropagation();
|
|
|
|
|
// if (this.workingArea.previewImage !== null
|
|
|
|
|
// && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
|
|
|
|
|
// this.workingArea.previewImage.visible = false;
|
|
|
|
|
// }
|
|
|
|
|
// // if (this.assetData.CanConnect) {
|
|
|
|
|
// // this.setSelectionBox(true, this.image);
|
|
|
|
|
// // }
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseout', event => {
|
|
|
|
|
// event.stopPropagation();
|
|
|
|
|
// if (this.workingArea.previewImage !== null
|
|
|
|
|
// && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
|
|
|
|
|
// this.workingArea.previewImage.visible = true;
|
|
|
|
|
// }
|
|
|
|
|
// // if (this.assetData.CanConnect) {
|
|
|
|
|
// // this.setSelectionBox(false);
|
|
|
|
|
// // }
|
|
|
|
|
// });
|
|
|
|
|
this.text.x = this.image.x; |
|
|
|
|
this.text.y = this.image.y - this.image.height / 2; |
|
|
|
|
this.text.anchor.set(0.5, 1); |
|
|
|
|
@ -144,6 +71,32 @@ export class AxImageShape extends AxShape {
|
|
|
|
|
this.addChild(this.image); |
|
|
|
|
this.addChild(this.selectionBox); |
|
|
|
|
|
|
|
|
|
////
|
|
|
|
|
let rect = this.getLocalBounds(); |
|
|
|
|
// up-left
|
|
|
|
|
this.upLeft = new PIXI.Sprite(this.pointTexture); |
|
|
|
|
this.upLeft.anchor.set(0.5); |
|
|
|
|
this.addChild(this.upLeft); |
|
|
|
|
this.upLeft.interactive = true; |
|
|
|
|
// up-right
|
|
|
|
|
this.upRight = new PIXI.Sprite(this.pointTexture); |
|
|
|
|
this.upRight.anchor.set(0.5); |
|
|
|
|
this.addChild(this.upRight); |
|
|
|
|
this.upRight.interactive = true; |
|
|
|
|
// down-left
|
|
|
|
|
this.downLeft = new PIXI.Sprite(this.pointTexture); |
|
|
|
|
this.downLeft.anchor.set(0.5); |
|
|
|
|
this.addChild(this.downLeft); |
|
|
|
|
this.downLeft.interactive = true; |
|
|
|
|
// down-right
|
|
|
|
|
this.downRight = new PIXI.Sprite(this.pointTexture); |
|
|
|
|
this.downRight.anchor.set(0.5); |
|
|
|
|
this.addChild(this.downRight); |
|
|
|
|
this.downRight.interactive = true; |
|
|
|
|
////
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (this.assetData.CanConnect) { |
|
|
|
|
// connectPoint
|
|
|
|
|
this.connectPoint = new PIXI.Sprite(this.connectPointTexture); |
|
|
|
|
@ -162,170 +115,7 @@ export class AxImageShape extends AxShape {
|
|
|
|
|
}) |
|
|
|
|
.on('mouseout', event => { |
|
|
|
|
this.setSelectionBox(false); |
|
|
|
|
}); |
|
|
|
|
// // up
|
|
|
|
|
// this.up = new PIXI.Sprite(this.selectedPointTexture);
|
|
|
|
|
// this.up.anchor.set(0.5);
|
|
|
|
|
// this.up.x = this.image.x;
|
|
|
|
|
// this.up.y = this.image.y - (this.image.height / 2);
|
|
|
|
|
// this.addChild(this.up);
|
|
|
|
|
// this.up.interactive = true;
|
|
|
|
|
// this.up
|
|
|
|
|
// .on('mousedown', event => {
|
|
|
|
|
// event.stopPropagation();
|
|
|
|
|
// const pt = this.toGlobal(new PIXI.Point(this.up.x, this.up.y));
|
|
|
|
|
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
|
|
|
|
|
// this.paintingPipeline(pt2.x, pt2.y);
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseover', event => {
|
|
|
|
|
// this.setSelectionBox(true, this.up);
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseout', event => {
|
|
|
|
|
// this.setSelectionBox(false);
|
|
|
|
|
// });
|
|
|
|
|
// // down
|
|
|
|
|
// this.down = new PIXI.Sprite(this.selectedPointTexture);
|
|
|
|
|
// this.down.anchor.set(0.5);
|
|
|
|
|
// this.down.x = this.image.x;
|
|
|
|
|
// this.down.y = this.image.y + (this.image.height / 2);
|
|
|
|
|
// this.addChild(this.down);
|
|
|
|
|
// this.down.interactive = true;
|
|
|
|
|
// this.down
|
|
|
|
|
// .on('mousedown', event => {
|
|
|
|
|
// event.stopPropagation();
|
|
|
|
|
// const pt = this.toGlobal(new PIXI.Point(this.down.x, this.down.y));
|
|
|
|
|
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
|
|
|
|
|
// this.paintingPipeline(pt2.x, pt2.y);
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseover', event => {
|
|
|
|
|
// this.setSelectionBox(true, this.down);
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseout', event => {
|
|
|
|
|
// this.setSelectionBox(false);
|
|
|
|
|
// });
|
|
|
|
|
// // left
|
|
|
|
|
// this.left = new PIXI.Sprite(this.selectedPointTexture);
|
|
|
|
|
// this.left.anchor.set(0.5);
|
|
|
|
|
// this.left.x = this.image.x - (this.image.width / 2);
|
|
|
|
|
// this.left.y = this.image.y;
|
|
|
|
|
// this.addChild(this.left);
|
|
|
|
|
// this.left.interactive = true;
|
|
|
|
|
// this.left
|
|
|
|
|
// .on('mousedown', event => {
|
|
|
|
|
// event.stopPropagation();
|
|
|
|
|
// const pt = this.toGlobal(new PIXI.Point(this.left.x, this.left.y));
|
|
|
|
|
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
|
|
|
|
|
// this.paintingPipeline(pt2.x, pt2.y);
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseover', event => {
|
|
|
|
|
// this.setSelectionBox(true, this.left);
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseout', event => {
|
|
|
|
|
// this.setSelectionBox(false);
|
|
|
|
|
// });
|
|
|
|
|
// // right
|
|
|
|
|
// this.right = new PIXI.Sprite(this.selectedPointTexture);
|
|
|
|
|
// this.right.anchor.set(0.5);
|
|
|
|
|
// this.right.x = this.image.x + (this.image.width / 2);
|
|
|
|
|
// this.right.y = this.image.y;
|
|
|
|
|
// this.addChild(this.right);
|
|
|
|
|
// this.right.interactive = true;
|
|
|
|
|
// this.right
|
|
|
|
|
// .on('mousedown', event => {
|
|
|
|
|
// event.stopPropagation();
|
|
|
|
|
// const pt = this.toGlobal(new PIXI.Point(this.right.x, this.right.y));
|
|
|
|
|
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
|
|
|
|
|
// this.paintingPipeline(pt2.x, pt2.y);
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseover', event => {
|
|
|
|
|
// this.setSelectionBox(true, this.right);
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseout', event => {
|
|
|
|
|
// this.setSelectionBox(false);
|
|
|
|
|
// });
|
|
|
|
|
// // up-left
|
|
|
|
|
// this.upLeft = new PIXI.Sprite(this.selectedPointTexture);
|
|
|
|
|
// this.upLeft.anchor.set(0.5);
|
|
|
|
|
// this.upLeft.x = this.image.x - (this.image.width / 2);
|
|
|
|
|
// this.upLeft.y = this.image.y - (this.image.height / 2);
|
|
|
|
|
// this.addChild(this.upLeft);
|
|
|
|
|
// this.upLeft.interactive = true;
|
|
|
|
|
// this.upLeft
|
|
|
|
|
// .on('mousedown', event => {
|
|
|
|
|
// event.stopPropagation();
|
|
|
|
|
// const pt = this.toGlobal(new PIXI.Point(this.upLeft.x, this.upLeft.y));
|
|
|
|
|
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
|
|
|
|
|
// this.paintingPipeline(pt2.x, pt2.y);
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseover', event => {
|
|
|
|
|
// this.setSelectionBox(true, this.upLeft);
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseout', event => {
|
|
|
|
|
// this.setSelectionBox(false);
|
|
|
|
|
// });
|
|
|
|
|
// // up-right
|
|
|
|
|
// this.upRight = new PIXI.Sprite(this.selectedPointTexture);
|
|
|
|
|
// this.upRight.anchor.set(0.5);
|
|
|
|
|
// this.upRight.x = this.image.x + (this.image.width / 2);
|
|
|
|
|
// this.upRight.y = this.image.y - (this.image.height / 2);
|
|
|
|
|
// this.addChild(this.upRight);
|
|
|
|
|
// this.upRight.interactive = true;
|
|
|
|
|
// this.upRight
|
|
|
|
|
// .on('mousedown', event => {
|
|
|
|
|
// event.stopPropagation();
|
|
|
|
|
// const pt = this.toGlobal(new PIXI.Point(this.upRight.x, this.upRight.y));
|
|
|
|
|
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
|
|
|
|
|
// this.paintingPipeline(pt2.x, pt2.y);
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseover', event => {
|
|
|
|
|
// this.setSelectionBox(true, this.upRight);
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseout', event => {
|
|
|
|
|
// this.setSelectionBox(false);
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
// // down-left
|
|
|
|
|
// this.downLeft = new PIXI.Sprite(this.selectedPointTexture);
|
|
|
|
|
// this.downLeft.anchor.set(0.5);
|
|
|
|
|
// this.downLeft.x = this.image.x - (this.image.width / 2);
|
|
|
|
|
// this.downLeft.y = this.image.y + (this.image.height / 2);
|
|
|
|
|
// this.addChild(this.downLeft);
|
|
|
|
|
// this.downLeft.interactive = true;
|
|
|
|
|
// this.downLeft
|
|
|
|
|
// .on('mousedown', event => {
|
|
|
|
|
// event.stopPropagation();
|
|
|
|
|
// const pt = this.toGlobal(new PIXI.Point(this.downLeft.x, this.downLeft.y));
|
|
|
|
|
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
|
|
|
|
|
// this.paintingPipeline(pt2.x, pt2.y);
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseover', event => {
|
|
|
|
|
// this.setSelectionBox(true, this.downLeft);
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseout', event => {
|
|
|
|
|
// this.setSelectionBox(false);
|
|
|
|
|
// });
|
|
|
|
|
// // down-right
|
|
|
|
|
// this.downRight = new PIXI.Sprite(this.selectedPointTexture);
|
|
|
|
|
// this.downRight.anchor.set(0.5);
|
|
|
|
|
// this.downRight.x = this.image.x + (this.image.width / 2);
|
|
|
|
|
// this.downRight.y = this.image.y + (this.image.height / 2);
|
|
|
|
|
// this.addChild(this.downRight);
|
|
|
|
|
// this.downRight.interactive = true;
|
|
|
|
|
// this.downRight
|
|
|
|
|
// .on('mousedown', event => {
|
|
|
|
|
// event.stopPropagation();
|
|
|
|
|
// const pt = this.toGlobal(new PIXI.Point(this.downRight.x, this.downRight.y));
|
|
|
|
|
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
|
|
|
|
|
// this.paintingPipeline(pt2.x, pt2.y);
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseover', event => {
|
|
|
|
|
// this.setSelectionBox(true, this.downRight);
|
|
|
|
|
// })
|
|
|
|
|
// .on('mouseout', event => {
|
|
|
|
|
// this.setSelectionBox(false);
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
this.showConnectionPoint(false); |
|
|
|
|
});
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// 设置选择框
|
|
|
|
|
@ -334,14 +124,6 @@ export class AxImageShape extends AxShape {
|
|
|
|
|
this.selectionBox.lineStyle(2, 0x00EB00, 1); |
|
|
|
|
this.selectionBox.position = sprite.position; |
|
|
|
|
this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height); |
|
|
|
|
// const p0 = new PIXI.Point(- sprite.width / 2, - sprite.height / 2);
|
|
|
|
|
// const pe = new PIXI.Point(sprite.width / 2, sprite.height / 2);
|
|
|
|
|
// const pw = new PIXI.Point(p0.x + sprite.width, p0.y);
|
|
|
|
|
// const ph = new PIXI.Point(p0.x, p0.y + sprite.height);
|
|
|
|
|
// this.drawDashedLine(this.selectionBox, p0, pw, 0x1234ff);
|
|
|
|
|
// this.drawDashedLine(this.selectionBox, p0, ph, 0x1234ff);
|
|
|
|
|
// this.drawDashedLine(this.selectionBox, pe, pw, 0x1234ff);
|
|
|
|
|
// this.drawDashedLine(this.selectionBox, pe, ph, 0x1234ff);
|
|
|
|
|
} else { |
|
|
|
|
this.selectionBox.clear(); |
|
|
|
|
} |
|
|
|
|
|
chenjingyu
4 years ago