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

新增 安信图例

develop
徐振升 4 years ago
parent
4390a14211
commit
5858df7fec
14 changed files with 869 additions and 830 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      debug.log
  2. 2
      proxy.config.json
  3. 6
      src/app/ui/collection-tools/collection-tools.component.ts
  4. 41
      src/app/working-area/model/arrows.ts
  5. 28
      src/app/working-area/model/axArrowConnector.ts
  6. 364
      src/app/working-area/model/axImageShape.ts
  7. 116
      src/app/working-area/model/axLegend.ts
  8. 9
      src/app/working-area/model/axPreviewImageShape.ts
  9. 157
      src/app/working-area/model/axShape.ts
  10. 3
      src/app/working-area/model/gameMode.ts
  11. 68
      src/app/working-area/model/legend.ts
  12. 93
      src/app/working-area/model/multipointIcon.ts
  13. 132
      src/app/working-area/model/polygonIcon.ts
  14. 651
      src/app/working-area/working-area.component.ts

1
debug.log
Unescape View File

@ -5,3 +5,4 @@
[1217/102235.409:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
[1217/162245.895:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
[1217/165122.912:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
[0104/090356.225:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)

2
proxy.config.json
Unescape View File

@ -1,6 +1,6 @@
{
"/api": {
"target": "http://121.37.20.190:8008",
"target": "http://39.106.78.171:8000",
"secure": false,
"changeOrigin": true
}

6
src/app/ui/collection-tools/collection-tools.component.ts
Unescape View File

@ -1016,13 +1016,13 @@ export class CollectionToolsComponent implements OnInit {
if (img.height > dadHeight && img.width > imgWidth) {
let width = imgWidth/img.width
let height = dadHeight/img.height
that.canvas.setBackgroundScale((width>height? height : width)-0.005)
// that.canvas.setBackgroundScale((width>height? height : width)-0.005)
return
} else if (img.height > dadHeight) {
that.canvas.setBackgroundScale((dadHeight/img.height)-0.005)
// that.canvas.setBackgroundScale((dadHeight/img.height)-0.005)
return
} else if (img.width > imgWidth) {
that.canvas.setBackgroundScale((imgWidth/img.width)-0.005)
// that.canvas.setBackgroundScale((imgWidth/img.width)-0.005)
return
}
};

41
src/app/working-area/model/arrows.ts
Unescape View File

@ -1,41 +0,0 @@
import { WorkingAreaComponent } from '../working-area.component';
import * as PIXI from 'pixi.js';
/**
* 箭头
* 创建一个只有2个点组成的箭头
*/
export class Arrows extends PIXI.Container {
public line: PIXI.Graphics = new PIXI.Graphics();
public ready = false;
constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
super();
this.workingArea.backgroundImage.addChild(this);
this.name = this.assetData.Id;
this.addChild(this.line);
this.refresh();
this.interactive = true;
this.on('mousedown', event => {
if (!this.ready) { return; }
event.stopPropagation();
this.workingArea.selection.selectOne(this);
});
}
/**
* 刷新
*/
public refresh() {
this.line.clear();
this.line.lineStyle(5, 0xff0000, 1);
this.line.moveTo(this.assetData.pointA.x, this.assetData.pointA.y);
this.line.lineTo(this.assetData.pointB.x, this.assetData.pointB.y);
const angle = Math.atan2((this.assetData.pointB.y - this.assetData.pointA.y), (this.assetData.pointB.x - this.assetData.pointA.x))
* (180 / Math.PI) + 90;
this.line.beginFill(0xff0000);
console.log(Math.PI / 180 / 1.6);
this.line.drawStar(this.assetData.pointB.x, this.assetData.pointB.y, 3, 10, 0, (Math.PI / 180 * angle));
this.line.endFill();
}
}

28
src/app/working-area/model/axArrowConnector.ts
Unescape View File

@ -7,8 +7,6 @@ import { Sprite } from 'pixi.js';
* 连接箭头
*/
export class AxArrowConnector extends AxShape {
pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png')
pointSprites: Array<Sprite> = new Array<Sprite>();
line: PIXI.Graphics;
text: PIXI.Text;
@ -51,6 +49,7 @@ export class AxArrowConnector extends AxShape {
this.drawPoints();
this.sortableChildren = true;
this.text.zIndex = this.children.length;
this.text.visible = this.showName;
}
public drawPoints() {
@ -63,7 +62,8 @@ export class AxArrowConnector extends AxShape {
});
this.pointSprites.forEach((value, index, array) => {
value.interactive = true;
value.on('mousedown', event => {
value
.on('pointerdown', event => {
event.stopPropagation();
if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
event.currentTarget.data = event.data;
@ -71,21 +71,21 @@ export class AxArrowConnector extends AxShape {
event.currentTarget.dragging = true;
}
})
.on('mouseup', event => {
.on('pointerup', event => {
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('mouseupoutside', event => {
.on('pointerupoutside', event => {
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('mousemove', event => {
.on('pointermove', event => {
if (event.currentTarget.dragging) {
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
event.currentTarget.x = newPosition.x;
@ -95,22 +95,30 @@ export class AxArrowConnector extends AxShape {
this.assetData.MultiPoint[index].y = newPosition.y;
this.workingArea.canvasData.isChange = true;
this.refresh();
this.drawBorder(1 / this.workingArea.backgroundImage.scale.x);
}
})
.on('rightclick', event => {
});
})
this.setPointsVisible(false);
this.setPointVisiable(false);
}
/**
* 设置点显示状态
* @param b true/false
*/
public setPointsVisible(b:boolean) {
public setPointVisiable(b:boolean) {
this.pointSprites.forEach(item => {
item.visible = b;
})
}
// 设置缩放
public setItemScale(scale: number) {
this.text.scale.set(scale);
this.pointSprites.forEach(point => {
point.scale.set(scale);
});
}
/**
* 刷新形状
@ -121,8 +129,8 @@ export class AxArrowConnector extends AxShape {
if (pts.length < 2) {
return;
}
this.text.position = pts[0];
this.text.anchor.set(0.5, 1);
this.text.position = this.getLineCenter(pts[0], pts[1]);
this.text.anchor.set(0.5);
this.text.text = this.assetData.Name
+ '\r\n'
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue;

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

@ -13,6 +13,7 @@ import { AxArrowConnector } from './axArrowConnector';
* AxImageShape
*/
export class AxImageShape extends AxShape {
connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png');
style = new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 18,
@ -34,26 +35,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,85 +62,43 @@ 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);
if (this.assetData.GameMode === 2) {
this.text.visible = false;
}
this.text.visible = this.showName;
this.addChild(this.text);
this.addChild(this.image);
this.addChild(this.selectionBox);
////
// up-left
this.upLeft = new PIXI.Sprite(this.pointTexture);
this.upLeft.anchor.set(0.5);
this.addChild(this.upLeft);
this.upLeft.interactive = true;
this.upLeft.visible = false;
// up-right
this.upRight = new PIXI.Sprite(this.pointTexture);
this.upRight.anchor.set(0.5);
this.addChild(this.upRight);
this.upRight.interactive = true;
this.upRight.visible = false;
// down-left
this.downLeft = new PIXI.Sprite(this.pointTexture);
this.downLeft.anchor.set(0.5);
this.addChild(this.downLeft);
this.downLeft.interactive = true;
this.downLeft.visible = false;
// down-right
this.downRight = new PIXI.Sprite(this.pointTexture);
this.downRight.anchor.set(0.5);
this.addChild(this.downRight);
this.downRight.interactive = true;
this.downRight.visible = false;
////
if (this.assetData.CanConnect) {
// connectPoint
this.connectPoint = new PIXI.Sprite(this.connectPointTexture);
@ -156,180 +108,19 @@ export class AxImageShape extends AxShape {
this.addChild(this.connectPoint);
this.connectPoint.interactive = true;
this.connectPoint
.on('mousedown', event => {
.on('pointerdown', event => {
event.stopPropagation();
this.paintingPipeline(this.x, this.y);
})
.on('mouseover', event => {
.on('pointerover', event => {
this.setSelectionBox(true, this.connectPoint);
})
.on('mouseout', event => {
.on('pointerout', 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);
}
this.setItemScale(1 / this.workingArea.backgroundImage.scale.x);
}
// 设置选择框
public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) {
@ -337,14 +128,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();
}
@ -358,14 +141,56 @@ export class AxImageShape extends AxShape {
// 显示连接点
public showConnectionPoint(b: boolean) {
this.connectPoint.visible = b;
// this.up.visible = b;
// this.down.visible = b;
// this.left.visible = b;
// this.right.visible = b;
// this.upLeft.visible = b;
// this.downLeft.visible = b;
// this.upRight.visible = b;
// this.downRight.visible = b;
}
/**
* 设置点显示状态
* @param value 显示状态
*/
public setPointVisiable(value: boolean) {
let rect = this.getLocalBounds();
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.upLeft.visible = value;
this.upRight.visible = value;
this.downLeft.visible = value;
this.downRight.visible = value;
}
/**
*
* @param scale 绘制边框
*/
public drawBorder(scale: number) {
let visible = this.upLeft.visible;
this.setPointVisiable(false);
super.drawBorder(scale);
let rect = this.getLocalBounds();
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) {
if (this.assetData.FixedSize) {
this.scale.set(scale);
} else {
this.text.scale.set(scale);
this.upLeft.scale.set(scale);
this.upRight.scale.set(scale);
this.downLeft.scale.set(scale);
this.downRight.scale.set(scale);
}
}
paintingPipeline(x: number, y: number) {
if (this.assetData.CanConnect) {
@ -407,6 +232,7 @@ export class AxImageShape extends AxShape {
IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding,
GameMode: this.workingArea.canvasData.gameMode,
LinkedObjects: new Array(this.assetData.Id),
Tag: this.workingArea.canvasData.selectTemplateData.tag
};
this.workingArea.paintingShape = new AxArrowConnector(tempData, this.workingArea,false,true);
this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id);

116
src/app/working-area/model/axLegend.ts
Unescape View File

@ -0,0 +1,116 @@
import { Constructor } from '@angular/material/core/common-behaviors/constructor';
import { Sprite, Texture,Text, Graphics, Point } from 'pixi.js';
import { WorkingAreaComponent } from '../working-area.component';
import { AxShape } from './axShape';
/**
* 安信图例形状
*/
export class AxLegend extends AxShape {
// 数据
public shapeMap: Map<string,Legend> = new Map<string,Legend>();
pen: Graphics = new Graphics();
/**
*
*/
constructor(assetData: any, workingArea: WorkingAreaComponent,shapeMap:Map<string,Legend>) {
super(assetData, workingArea);
this.name = this.assetData.Id;
this.shapeMap = shapeMap;
this.refresh();
}
// 添加数据
public addItem(item:Legend) {
if (this.shapeMap.has(item.Name)) {
this.shapeMap.get(item.Name).Count++;
} else {
this.shapeMap.set(item.Name, item);
}
this.refresh();
}
// 删除数据
public deleteItem(item: Legend) {
if (this.shapeMap.has(item.Name)) {
this.shapeMap.get(item.Name).Count--;
if (this.shapeMap.get(item.Name).Count === 0) {
this.shapeMap.delete(item.Name);
}
}
this.refresh();
}
// 刷新
refresh() {
this.removeChildren();
let index = 1;
let offset = 50;
let number = 2;
let width = 450;
let height = 100;
for (let i = 0; i < number; i++){
if (i >= this.shapeMap.size) break;
let x = width * i;
var textImage = new Text('图例',{
fontSize: 36,
fill: ['#0000ff'],
});
textImage.anchor.set(0.5)
textImage.x = x;
textImage.y = 0;
this.addChild(textImage);
var textName = new Text("名称"+' 【数量】',{
fontSize: 36,
fill: ['#0000ff'],
});
textName.anchor.set(0,0.5);
textName.x = x + 32 + offset;
textName.y = 0;
this.addChild(textName);
}
for (let item of this.shapeMap.values()) {
let x = index % number === 0 ? (number -1) * width : (index % number - 1) * width;
let y = Math.ceil(index / number) * height;
let image: Sprite = Sprite.from(item.ImageUrl);
image.width = 64;
image.height = 64;
image.anchor.set(0.5);
image.x = x;
image.y = y;
this.addChild(image);
var textName = new Text(item.Name+' 【'+item.Count.toString()+'】');
textName.anchor.set(0,0.5);
textName.x = x + image.width/2 + offset;
textName.y = y;
this.addChild(textName);
index++;
}
if (this.shapeMap.size > 0) {
let rect = this.getLocalBounds();
this.pen.clear();
this.pen.beginFill(0xffffff,0.01);
this.pen.lineStyle(5, 0x000000);
this.pen.moveTo(rect.left-offset, rect.top-offset);
this.pen.lineTo(rect.right+offset, rect.top-offset);
this.pen.lineTo(rect.right+offset, rect.bottom+offset);
this.pen.lineTo(rect.left - offset, rect.bottom + offset);
this.pen.closePath();
this.pen.endFill();
}
this.addChild(this.pen);
}
}
export class Legend{
public Name: string;
public ImageUrl: string;
public Count: number;
/**
*
*/
constructor(name:string,imageUrl:string,count:number) {
this.Name = name;
this.ImageUrl = imageUrl;
this.Count = count;
}
}

9
src/app/working-area/model/axPreviewImageShape.ts
Unescape View File

@ -24,4 +24,13 @@ export class AxPreviewImageShape extends AxShape {
setImageUrl(url: string) {
this.image.texture = Texture.from(url);
}
public setItemScale(scale: number) {
this.scale.set(scale);
}
/**
*
* @param rect 画边框
*/
public drawBorder(scale: number) {
}
}

157
src/app/working-area/model/axShape.ts
Unescape View File

@ -8,21 +8,31 @@ import { WorkingAreaComponent } from '../working-area.component';
*/
export class AxShape extends Container {
assetData: any;
pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png')
workingArea: WorkingAreaComponent;
// 可以被移动的
moveable = true;
// 可以被选中的
selectable = true;
// 允许编辑
allowEdit = true;
// 是否显示名称
showName = true;
// 边框
border: PIXI.Graphics = new PIXI.Graphics();
constructor(assetData: any, workingArea: WorkingAreaComponent) {
super();
this.border.visible = false;
this.addChild(this.border);
this.assetData = assetData;
this.workingArea = workingArea;
this.workingArea.backgroundImage.addChild(this);
this.zIndex = 200;
this.interactive = true;
this.buttonMode = true;
this.on('mousedown', event => {
console.log(this.assetData);
this
.on('pointerdown', event => {
event.stopPropagation();
if (this.selectable) {
this.workingArea.selection.selectOne(this);
@ -37,23 +47,34 @@ export class AxShape extends Container {
event.currentTarget.dragPoint.y -= event.currentTarget.y;
}
})
.on('mouseup', event => {
.on('pointerup', event => {
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('mouseupoutside', event => {
.on('pointerupoutside', event => {
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('mousemove', event => {
.on('pointermove', event => {
if (event.currentTarget.dragging) {
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
// const offsetX = newPosition.x - event.currentTarget.dragPoint.x;
// const offsetY = newPosition.y - event.currentTarget.dragPoint.y;
// const offset = this.workingArea.backgroundImage.toLocal(new Point(offsetX, offsetY));
// event.currentTarget.position += offset;
// // this.workingArea.selection.objects.forEach(shpae => {
// // shpae.x = newPosition.x - event.currentTarget.dragPoint.x;
// // shpae.y = newPosition.y - event.currentTarget.dragPoint.y;
// // shpae.assetData.Point = new PIXI.Point(this.x, this.y);
// // this.workingArea.canvasData.isChange = true;
// // })
event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x;
event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y;
this.assetData.Point = new PIXI.Point(this.x, this.y);
@ -61,12 +82,12 @@ export class AxShape extends Container {
}
})
.on('rightclick', event => {
this.border.visible = false;
})
.on('mouseover', event => {
.on('pointerover', event => {
event.stopPropagation();
})
.on('mouseout', event => {
.on('pointerout', event => {
event.stopPropagation();
});
}
@ -77,4 +98,124 @@ export class AxShape extends Container {
refresh(): void{
}
public setItemScale(scale: number) {
}
/**
* 显示边框
*/
public showBorder() {
if (this.assetData.FixedSize) {
this.drawBorder(1);
}
else {
this.drawBorder(1/this.workingArea.backgroundImage.scale.x);
}
this.border.visible = true;
}
/**
* 隐藏边框
*/
public hideBorder() {
this.border.clear();
this.border.visible = false;
}
/**
* 设置点显示状态
* @param value 显示状态
*/
public setPointVisiable(value: boolean) {
}
/**
*
* @param rect 画边框
*/
public drawBorder(scale: number) {
scale = this.assetData.FixedSize ? 1 : scale;
this.border.clear();
const rect = this.getLocalBounds();
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);
var spaceLength = scale * 1;
var lineLenght = rect.width + 0.5 + 0.5;
var 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);
this.border.lineStyle(0, 0x0000ff);
this.border.beginFill(0x00ff00,0.1);
this.border.moveTo(p1.x, p1.y);
this.border.lineTo(p2.x, p2.y);
this.border.lineTo(p3.x, p4.y);
this.border.lineTo(p4.x, p4.y);
this.border.closePath();
this.border.endFill();
}
// 画虚线
drawDash(target, x1, y1, x2, y2,dashLength = 5, spaceLength = 1) {
let x = x2 - x1;
let y = y2 - y1;
let hyp = Math.sqrt((x) * (x) + (y) * (y));
let units = hyp / (dashLength + spaceLength);
let dashSpaceRatio = dashLength / (dashLength + spaceLength);
let dashX = (x / units) * dashSpaceRatio;
let spaceX = (x / units) - dashX;
let dashY = (y / units) * dashSpaceRatio;
let spaceY = (y / units) - dashY;
target.moveTo(x1, y1);
while (hyp > 0) {
x1 += dashX;
y1 += dashY;
hyp -= dashLength;
if (hyp < 0) {
x1 = x2;
y1 = y2;
}
target.lineTo(x1, y1);
x1 += spaceX;
y1 += spaceY;
target.moveTo(x1, y1);
hyp -= spaceLength;
}
target.moveTo(x2, y2);
}
// 计算多边形重心
public calculatePolygonGravityCenter(points: PIXI.Point[]) {
let area = 0.0; // 多边形面积
let gravityLat = 0.0; // 重心点 latitude
let gravityLng = 0.0; // 重心点 longitude
points.forEach((item, index) => {
// 1
const lat = item.x;
const lng = item.y;
const nextLat = points[(index + 1) % points.length].x;
const nextLng = points[(index + 1) % points.length].y;
// 2
const tempArea = (nextLat * lng - nextLng * lat) / 2.0;
// 3
area += tempArea;
// 4
gravityLat += tempArea * (lat + nextLat) / 3;
gravityLng += tempArea * (lng + nextLng) / 3;
});
// 5
gravityLat = gravityLat / area;
gravityLng = gravityLng / area;
return new PIXI.Point(gravityLat, gravityLng);
}
// 计算线段中点坐标
public getLineCenter(point1:PIXI.Point,point2:PIXI.Point) {
return new PIXI.Point((point1.x+point2.x)/2,(point1.y+point2.y)/2)
}
}

3
src/app/working-area/model/gameMode.ts
Unescape View File

@ -3,5 +3,6 @@
*/
export enum GameMode {
BasicInformation,
Assignment
Assignment,
Examinee
}

68
src/app/working-area/model/legend.ts
Unescape View File

@ -1,68 +0,0 @@
import { Graphics, Sprite, Text } from "pixi.js";
import { WorkingAreaComponent } from "../working-area.component";
import { AxArrowConnector } from "./axArrowConnector";
import { AxImageShape } from "./axImageShape";
import { AxShape } from "./axShape";
import { MultipointIcon } from "./multipointIcon";
import { PolygonIcon } from "./polygonIcon";
export class Legend extends AxShape{
background: Graphics = null;
data:Map<string,string> = new Map<string,string>()
/**
*
*/
constructor(workingArea: WorkingAreaComponent) {
super(null, workingArea);
this.draw();
}
getData() {
this.workingArea.backgroundImage.children.forEach(item => {
if (item instanceof AxImageShape|| item instanceof AxArrowConnector || item instanceof PolygonIcon || item instanceof MultipointIcon) {
if (!this.data.has(item.assetData.Name)) {
this.data[item.assetData.Name] = item.assetData.ImageUrl;
}
}
})
}
draw() {
this.getData();
this.background = new Graphics();
this.background.lineStyle(1, 0xff0000);
this.background.beginFill(0xffffff);
this.background.drawRect(0, 0, 200, 300);
this.background.endFill();
this.background.x = -(this.parent.width/2/ this.parent.scale.x);
this.background.y = -(this.parent.height/2/ this.parent.scale.x);
this.addChild(this.background);
var showName: Text = new Text('图例');
showName.x = 0;
showName.y = 0;
this.background.addChild(showName);
var showDescrption: Text = new Text('说明')
showDescrption.x = 100;
showDescrption.y = 0;
this.background.addChild(showDescrption);
let index = 1;
this.data.forEach((value, key) => {
var image: Sprite = Sprite.from(value);
image.width = 32;
image.height = 32;
image.x = 0;
image.y = index * 32;
this.background.addChild(image);
var description = new Text(key);
description.x = 100;
description.y = index * 32;
this.background.addChild(description);
index++;
})
}
redraw() {
this.background.destroy();
this.draw();
}
}

93
src/app/working-area/model/multipointIcon.ts
Unescape View File

@ -8,7 +8,7 @@ import { AxShape } from './axShape';
*/
export class MultipointIcon extends AxShape {
public pointsData: PIXI.Point[];
public pointsGraphics: PIXI.Graphics[] = [];
public pointsGraphics: PIXI.Sprite[] = [];
public iconsTilingSprite: PIXI.TilingSprite[] = [];
style = new PIXI.TextStyle({
fontFamily: 'Arial',
@ -42,6 +42,11 @@ export class MultipointIcon extends AxShape {
this.x = this.assetData.Point.x;
this.y = this.assetData.Point.y;
this.workingArea.backgroundImage.addChild(this);
this.text.anchor.set(0.5,0.5);
// this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]);
this.text.visible = this.showName;
this.addChild(this.text);
// 画线图标
for (let i = 0, count = this.pointsData.length - 1; i < count; i++) {
const pointA = this.pointsData[i];
@ -60,22 +65,16 @@ export class MultipointIcon extends AxShape {
// icon.height = this.assetData.Thickness === 0 ? 32 : this.assetData.Thickness;
this.iconsTilingSprite.push(icon);
this.addChild(icon);
if (i === 0) {
this.text.anchor.set(0.5);
this.text.position = icon.position;
this.text.y -= this.assetData.Height;
this.addChild(this.text);
}
this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]);
}
this.sortableChildren = true;
this.text.zIndex = this.pointsData.length;
// 画点
this.pointsData.forEach((item, index, array) => {
const iconPoint = new PIXI.Graphics();
iconPoint.lineStyle(1, 0xFFBD01, 1);
iconPoint.beginFill(0xFFFFFF, 1);
iconPoint.drawCircle(0, 0, 15);
const iconPoint = PIXI.Sprite.from(this.pointTexture);
iconPoint.anchor.set(0.5);
iconPoint.x = item.x;
iconPoint.y = item.y;
iconPoint.endFill();
iconPoint.visible = false;
this.pointsGraphics.push(iconPoint);
this.addChild(iconPoint);
@ -83,7 +82,7 @@ export class MultipointIcon extends AxShape {
// 添加圆点事件
this.pointsGraphics.forEach((item, index, array) => {
item.interactive = true;
item.on('mousedown', event => {
item.on('pointerdown', event => {
event.stopPropagation();
if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
event.currentTarget.data = event.data;
@ -91,21 +90,21 @@ export class MultipointIcon extends AxShape {
event.currentTarget.dragging = true;
}
})
.on('mouseup', event => {
.on('pointerup', event => {
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('mouseupoutside', event => {
.on('pointerupoutside', event => {
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('mousemove', event => {
.on('pointermove', event => {
if (event.currentTarget.dragging) {
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
event.currentTarget.x = newPosition.x;
@ -128,9 +127,6 @@ export class MultipointIcon extends AxShape {
const distance = Math.sqrt(a * a + b * b);
this.iconsTilingSprite[index].angle = angle;
this.iconsTilingSprite[index].width = distance;
this.text.position = this.iconsTilingSprite[index].position;
this.text.y -= this.assetData.Height;
} else if (index < array.length - 1) {// 不是第一个点，也不是最后一个点
this.iconsTilingSprite[index].x = newPosition.x;
this.iconsTilingSprite[index].y = newPosition.y;
@ -163,61 +159,13 @@ export class MultipointIcon extends AxShape {
this.iconsTilingSprite[index - 1].angle = angleC;
this.iconsTilingSprite[index - 1].width = distanceC;
}
this.drawBorder(1 / this.workingArea.backgroundImage.scale.x);
this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]);
}
})
.on('rightclick', event => {
});
});
// // 缩放
// this.workingArea.on('backgroundScale', data => {
// const scale = 1 / data;
// this.text.scale.set(scale);
// });
// 添加选中事件
// this.iconsTilingSprite.forEach((item, index, array) => {
// item.interactive = true;
// item.buttonMode = true;
// item.on('mousedown', event => {
// event.stopPropagation();
// this.workingArea.selection.selectOne(this);
// 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;
// event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent);
// event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x;
// event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y;
// }
// })
// .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) {
// const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
// event.currentTarget.parent.x = newPosition.x - event.currentTarget.parent.dragPoint.x;
// event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y;
// this.assetData.Point = new PIXI.Point(this.x, this.y);
// this.workingArea.canvasData.isChange = true;
// }
// })
// .on('rightclick', event => {
// });
// });
}
/**
* 设置点显示状态
@ -234,6 +182,13 @@ export class MultipointIcon extends AxShape {
this.text.visible = value;
}
}
// 设置缩放
public setItemScale(scale: number) {
this.text.scale.set(scale);
this.pointsGraphics.forEach((item, index, array) => {
item.scale.set(scale);
});
}
// 刷新数据
public refresh() {
// console.log(this.assetData);

132
src/app/working-area/model/polygonIcon.ts
Unescape View File

@ -9,9 +9,9 @@ import { AxShape } from './axShape';
*/
export class PolygonIcon extends AxShape {
public pointsData: PIXI.Point[];
public pointsGraphics: PIXI.Graphics[] = [];
public pointsGraphics: PIXI.Sprite[] = [];
public polygonGraphics: PIXI.Graphics = new PIXI.Graphics();
public polygonLineGraphics: PIXI.Graphics = new PIXI.Graphics();
// public polygonLineGraphics: PIXI.Graphics = new PIXI.Graphics();
style = new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 18,
@ -46,13 +46,14 @@ export class PolygonIcon extends AxShape {
this.sortableChildren = true;
// 画点
this.pointsData.forEach((item, index, array) => {
const iconPoint = new PIXI.Graphics();
iconPoint.lineStyle(1, 0xFFBD01, 1);
iconPoint.beginFill(0xFFFFFF, 1);
iconPoint.drawCircle(0, 0, 15);
const iconPoint = PIXI.Sprite.from(this.pointTexture);
// iconPoint.lineStyle(1, 0xFFBD01, 1);
// iconPoint.beginFill(0xFFFFFF, 1);
// iconPoint.drawCircle(0, 0, 15);
iconPoint.anchor.set(0.5);
iconPoint.x = item.x;
iconPoint.y = item.y;
iconPoint.endFill();
// iconPoint.endFill();
iconPoint.visible = false;
this.pointsGraphics.push(iconPoint);
this.addChild(iconPoint);
@ -66,13 +67,14 @@ export class PolygonIcon extends AxShape {
this.polygonGraphics.endFill();
this.addChild(this.polygonGraphics);
// 画多边形
this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1);
this.polygonLineGraphics.drawPolygon(this.getPoints());
this.polygonLineGraphics.closePath();
this.addChild(this.polygonLineGraphics);
// this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1);
// this.polygonLineGraphics.drawPolygon(this.getPoints());
// this.polygonLineGraphics.closePath();
// this.addChild(this.polygonLineGraphics);
this.text.anchor.set(0.5);
this.text.position = this.calculatePolygonGravityCenter(this.pointsData);
this.text.visible = this.showName;
// console.log(this.calculatePolygonGravityCenter(this.pointsData));
this.polygonGraphics.addChild(this.text);
// 添加圆点事件
@ -80,7 +82,7 @@ export class PolygonIcon extends AxShape {
item.interactive = true;
item.buttonMode = true;
item.zIndex = 1;
item.on('mousedown', event => {
item.on('pointerdown', event => {
event.stopPropagation();
if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
event.currentTarget.data = event.data;
@ -88,21 +90,21 @@ export class PolygonIcon extends AxShape {
event.currentTarget.dragging = true;
}
})
.on('mouseup', event => {
.on('pointerup', event => {
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('mouseupoutside', event => {
.on('pointerupoutside', event => {
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('mousemove', event => {
.on('pointermove', event => {
if (event.currentTarget.dragging) {
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
event.currentTarget.x = newPosition.x;
@ -116,13 +118,14 @@ export class PolygonIcon extends AxShape {
this.polygonGraphics.beginFill(color, angle);
this.polygonGraphics.drawPolygon(this.getPoints());
this.polygonGraphics.endFill();
// 画多边形
this.polygonLineGraphics.clear();
this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1);
this.polygonLineGraphics.drawPolygon(this.getPoints());
this.polygonLineGraphics.closePath();
// // 画多边形
// this.polygonLineGraphics.clear();
// this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1);
// this.polygonLineGraphics.drawPolygon(this.getPoints());
// this.polygonLineGraphics.closePath();
this.text.position = this.calculatePolygonGravityCenter(this.pointsData);
this.drawBorder(1 / this.workingArea.backgroundImage.scale.x);
}
})
.on('rightclick', event => {
@ -133,7 +136,7 @@ export class PolygonIcon extends AxShape {
this.workingArea.previewImage.visible = false;
}
})
.on('mouseout', event => {
.on('pointerout', event => {
event.stopPropagation();
if (this.workingArea.previewImage !== null
&& this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
@ -141,64 +144,6 @@ export class PolygonIcon extends AxShape {
}
});
});
// // 添加选中事件
// this.polygonGraphics.interactive = true;
// this.polygonGraphics.buttonMode = true;
// this.polygonGraphics
// .on('mousedown', event => {
// event.stopPropagation();
// this.workingArea.selection.selectOne(this);
// 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;
// event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent);
// event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x;
// event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y;
// }
// })
// .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) {
// const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
// event.currentTarget.parent.x = newPosition.x - event.currentTarget.parent.dragPoint.x;
// event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y;
// this.assetData.Point = new PIXI.Point(this.x, this.y);
// this.workingArea.canvasData.isChange = true;
// }
// })
// .on('rightclick', event => {
// // this.workingArea.selection.deselectAll();
// })
// .on('mouseover', event => {
// event.stopPropagation();
// if (this.workingArea.previewImage !== null
// && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
// this.workingArea.previewImage.visible = false;
// }
// })
// .on('mouseout', event => {
// event.stopPropagation();
// if (this.workingArea.previewImage !== null
// && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
// this.workingArea.previewImage.visible = true;
// }
// });
}
/**
* 设置点显示状态
@ -209,31 +154,14 @@ export class PolygonIcon extends AxShape {
item.visible = value;
});
}
public calculatePolygonGravityCenter(points: PIXI.Point[]) {
let area = 0.0; // 多边形面积
let gravityLat = 0.0; // 重心点 latitude
let gravityLng = 0.0; // 重心点 longitude
points.forEach((item, index) => {
// 1
const lat = item.x;
const lng = item.y;
const nextLat = points[(index + 1) % points.length].x;
const nextLng = points[(index + 1) % points.length].y;
// 2
const tempArea = (nextLat * lng - nextLng * lat) / 2.0;
// 3
area += tempArea;
// 4
gravityLat += tempArea * (lat + nextLat) / 3;
gravityLng += tempArea * (lng + nextLng) / 3;
// 设置缩放
public setItemScale(scale: number) {
this.text.scale.set(scale);
this.pointsGraphics.forEach(point => {
point.scale.set(scale);
});
// 5
gravityLat = gravityLat / area;
gravityLng = gravityLng / area;
return new PIXI.Point(gravityLat, gravityLng);
}
/**
* 获取点集合
*/

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

@ -2,7 +2,7 @@ import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input } from '
import * as PIXI from 'pixi.js';
import { EventEmitter } from 'events';
import { EventManager } from '@angular/platform-browser';
import { OutlineFilter } from 'pixi-filters';
// import { OutlineFilter } from 'pixi-filters';
import { AssetData, CanvasShareDataService, DisposalNodeData, FloorNodeData } from '../canvas-share-data.service';
import * as ObjectID from 'bson-objectid';
import { Charm } from './charm';
@ -15,7 +15,8 @@ import { AxShape } from './model/axShape';
import { PropertyInfo } from './model/PropertyInfo';
import { AxPreviewImageShape } from './model/axPreviewImageShape';
import { AxArrowConnector } from './model/axArrowConnector';
import { Legend } from './model/legend';
import { AxLegend, Legend } from './model/axLegend';
import { NullTemplateVisitor } from '@angular/compiler';
@Component({
@ -97,7 +98,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
/**
* 绿色描边
*/
public outlineFilterGreen = new OutlineFilter(2, 0x00ff00);
// public outlineFilterGreen = new OutlineFilter(2, 0x00ff00);
/**
* 拷贝素材数据
*/
@ -135,10 +136,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
public carData: Map<string, any> = new Map<string, any>();
// 当前选择的车辆id
public selectCar: any = null;
// 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta
// Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。
// Beta版: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过多次测试来进一步消除，此版本主要的修改对像是软件的UI。
// RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。
// Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。
public VERSION = '1.0.0.20210107_beta';
/**
* 数据初始化
*/
ngOnInit(): void {
PIXI.utils.skipHello()
this.sayHello();
this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => {
if (event.keyCode === 17) {
this.selection.isMultiselection = true;
@ -152,40 +161,51 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
}
// 按Del键删除选中的图标
if (event.keyCode === 46) {
this.selection.objects.forEach(item => {
if (this.allowEdit
&& this.canvasData.gameMode === item.assetData.GameMode) {
switch (this.canvasData.gameMode) {
case 0:
// 删除楼层数据
delete this.canvasData.originaleveryStoreyData.data[item.assetData.Id];
// 删除建筑数据
delete this.canvasData.originalcompanyBuildingData.data[item.assetData.Id];
// 取消渲染
this.backgroundImage.removeChild(this.backgroundImage.getChildByName(item.assetData.Id));
// 数据更改
this.canvasData.isChange = true;
break;
case 1:
delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[item.assetData.Id];
delete this.canvasData.selectPanelPoint.Data.Increment[item.assetData.Id];
delete this.canvasData.selectPanelPoint.Data.Stock[item.assetData.Id];
this.backgroundImage.removeChild(this.backgroundImage.getChildByName(item.assetData.Id));
this.canvasData.isChange = true;
break;
this.deleteSelectedShape();
}
});
}
/**
* 删除选中的图标
*/
public deleteSelectedShape() {
this.selection.objects.forEach(item => {
this.deleteShape(item);
});
this.selection.deselectAll();
this.emit('deleteIcon');
}
});
/**
*
* @param obj 删除一个形状
*/
public deleteShape(shape) {
if (this.allowEdit && this.canvasData.gameMode === shape.assetData.GameMode) {
this.emit('deleteIcon',shape);
}
}
/**
* 打招呼
*/
sayHello() {
var _a;
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
var args = [
"\n %c 版本号 - " + this.VERSION + "\n",
'color: #ff66a5; background: #000000; padding:5px 0;',
];
(_a = window.console).log.apply(_a, args);
}
else if (window.console) {
window.console.log("\n %c 版本号 - " + this.VERSION + "\n");
}
}
/**
* 页面初始化
*/
ngAfterViewInit(): void {
setTimeout(() => {
this.createCanvas();
});
window.onresize = () => {
this.resetCanvas();
};
@ -203,7 +223,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
if (this.backgroundImage.scale.x >= 32) {
this.backgroundImage.scale.x = 32;
this.backgroundImage.scale.y = 32;
this.emit('backgroundScale', this.backgroundImage.scale.x);
this.resizeItem(1/this.backgroundImage.scale.x)
return;
}
this.backgroundImage.pivot.set(pivot.x, pivot.y);
@ -217,7 +237,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
if (this.backgroundImage.scale.x <= 0.1) {
this.backgroundImage.scale.x = 0.1;
this.backgroundImage.scale.y = 0.1;
this.emit('backgroundScale', this.backgroundImage.scale.x);
this.resizeItem(1/this.backgroundImage.scale.x)
return;
}
this.backgroundImage.pivot.set(pivot.x, pivot.y);
@ -228,7 +248,16 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.backgroundImage.position.x += delX;
this.backgroundImage.position.y += delY;
}
this.emit('backgroundScale', this.backgroundImage.scale.x);
this.resizeItem(1/this.backgroundImage.scale.x)
}
// 重置图形缩放
public resizeItem(size:number) {
this.backgroundImage.children.forEach(item => {
if (item instanceof AxShape) {
item.setItemScale(size);
item.drawBorder(size);
}
});
}
/**
*
@ -268,19 +297,21 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
backgroundColor: 0xE9FAFF
});
this.content.nativeElement.appendChild(this.app.view);
this.app.view.style.border = '1px dashed blue';
this.animator = new Charm(PIXI);
this.createBackgroundImage();
this.app.ticker.add((delta) => {
this.animator.update();
this.mousePosition = this.app.renderer.plugins.interaction.mouse.global;
// 预览图片
if (this.previewImage !== null) {
if (this.previewImage !== undefined && this.previewImage !== null) {
this.previewImage.position = this.backgroundImage.toLocal(this.mousePosition);
}
if (this.backgroundImage !== null) {
if (this.circleShadow !== undefined && this.circleShadow !== null) {
this.circleShadow.position = this.backgroundImage.toLocal(this.mousePosition);
this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position);
this.refreshPreviewPoint();
}
/**
* 显示框选
@ -308,101 +339,87 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
/**
* 选中事件
*/
this.on('select', obj => {
if (this.allowEdit) {
if (obj instanceof AxArrowConnector) {
obj.setPointsVisible(true);
}
else if (obj instanceof MultipointIcon) {
if (obj.assetData.GameMode === this.canvasData.gameMode) {
obj.setPointVisiable(true);
} else {
obj.filters = [this.outlineFilterGreen];
}
} else if (obj instanceof PolygonIcon) {
if (obj.assetData.GameMode === this.canvasData.gameMode) {
obj.setPointVisiable(true);
} else {
obj.filters = [this.outlineFilterGreen];
}
} else {
obj.filters = [this.outlineFilterGreen];
}
} else {
obj.filters = [this.outlineFilterGreen];
}
this.on('select', (axShape:AxShape)=> {
axShape.showBorder();
axShape.setPointVisiable(this.allowEdit);
});
/**
* 取消选中事件
*/
this.on('deselect', obj => {
if (this.allowEdit) {
if (obj instanceof AxArrowConnector) {
obj.setPointsVisible(false);
}
else if (obj instanceof MultipointIcon) {
obj.setPointVisiable(false);
} else if (obj instanceof PolygonIcon) {
obj.filters = [];
obj.setPointVisiable(false);
} else {
obj.filters = [];
}
} else {
obj.filters = [];
}
});
/**
* 根据背景缩放事件
*/
this.on('backgroundScale', scale => {
this.backgroundImage?.children.forEach(item => {
if (item instanceof AxImageShape) {
if (item.assetData.FixedSize) {
const data = 1 / scale;
item.scale.set(data);
} else {
const data = 1 / scale;
item.text.scale.set(data);
}
} else if (item instanceof MultipointIcon) {
const data = 1 / scale;
item.text.scale.set(data);
} else if (item instanceof PolygonIcon) {
const data = 1 / scale;
item.text.scale.set(data);
item.pointsGraphics.forEach(point => {
point.scale.set(data);
});
} else if (item instanceof AxPreviewImageShape) {
const data = 1 / scale;
item.scale.set(data);
}else if (item instanceof AxArrowConnector) {
const data = 1 / scale;
item.text.scale.set(data);
item.pointSprites.forEach(point => {
point.scale.set(data);
});
}
});
this.on('deselect', (axShape:AxShape)=> {
axShape.hideBorder();
axShape.setPointVisiable(false);
});
/**
* 创建图标事件
* 创建图标事件（数据处理）
*/
this.on('createIcon', obj => {
if (obj.assetData.GameMode === GameMode.BasicInformation) {
this.on('createIcon', (axShape:AxShape)=> {
if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息
// 添加楼层数据
this.canvasData.originaleveryStoreyData.data[obj.assetData.Id] = obj.assetData;
this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id] = axShape.assetData;
// 添加建筑数据
this.canvasData.originalcompanyBuildingData.data[obj.assetData.Id] = obj.assetData;
} else {
this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id] = axShape.assetData;
} else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案
if (this.canvasData.selectPanelPoint.Data === undefined
|| this.canvasData.selectPanelPoint.Data === null) {
this.canvasData.selectPanelPoint.Data = new FloorNodeData();
}
this.canvasData.selectPanelPoint.Data.Stock[obj.assetData.Id] = obj.assetData;
this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id] = axShape.assetData;
}
// else if (obj.assetData.GameMode === GameMode.Examinee) { // 考生考试
// if (obj.assetData.Tag === 1) {
// this.canvasData.examOriginaleveryStoreyData.data[obj.assetData.Id] = obj.assetData;
// } else {
// if (this.canvasData.selectPanelPoint.Data === undefined
// || this.canvasData.selectPanelPoint.Data === null) {
// this.canvasData.selectPanelPoint.Data = new FloorNodeData();
// }
// this.canvasData.selectPanelPoint.Data.Stock[obj.assetData.Id] = obj.assetData;
// }
// }
var temp = this.backgroundImage.getChildByName("图例") as AxLegend;
if ( temp !== undefined
&& temp !== null) {
var itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
temp.addItem(itemLegend);
}
this.canvasData.isChange = true;
});
/**
* 删除图标事件(数据处理)
*/
this.on('deleteIcon', (axShape:AxShape)=>{
// 删除图例对象
var temp = this.backgroundImage.getChildByName("图例") as AxLegend;
if ( temp !== undefined
&& temp !== null) {
var itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
temp.deleteItem(itemLegend);
}
if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息
// 删除楼层数据
delete this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id];
// 删除建筑数据
delete this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id];
} else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案
delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id];
delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id];
delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id];
}
// else if (assetData.GameMode === GameMode.Examinee) { // 考生考试
// if (assetData.Tag === 1) {
// // 删除楼层数据
// delete this.canvasData.examOriginaleveryStoreyData.data[assetData.Id];
// } else {
// delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[assetData.Id];
// delete this.canvasData.selectPanelPoint.Data.Increment[assetData.Id];
// delete this.canvasData.selectPanelPoint.Data.Stock[assetData.Id];
// }
// }
this.backgroundImage.removeChild(axShape);
this.canvasData.isChange = true;
});
}
@ -474,29 +491,22 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.selection.select(obj);
});
}
/**
* 刷新工作区
*/
public async refresh() {
this.setPaintMode(PaintMode.endPaint);
this.resetCanvas();
this.destroyBackgroundImage();
if (!this.canvasData.selectStorey.imageUrl) {
return;
}
await this.createBackgroundImage(this.canvasData.selectStorey.imageUrl);
this.createFloorShape();
if (this.canvasData.gameMode === GameMode.Assignment) {
this.createWorkNode();
}
this.emit('backgroundScale', this.backgroundImage.scale.x);
}
// /**
// * 创建背景图
// */
// public createBackground(imageUrl:string,imageAngle:number) {
// if (this.backgroundImage !== null) {
// this.backgroundImage.destroy();
// this.backgroundImage = null;
// }
// this.createBackgroundImage()
// this.refreshBackgroundImage(imageUrl,imageAngle);
// }
/**
* 创建楼层图形
*/
private createFloorShape() {
const floorData = this.canvasData.originaleveryStoreyData.data;
public createFloorShape(floorData: any) {
if (floorData === undefined || floorData === null) return;
Object.keys(floorData).forEach((key) => {
switch (floorData[key].InteractiveMode) {
case 0:
@ -511,22 +521,24 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
break;
case 3:
if (floorData[key].Name === '水带') {
const distance = new AxArrowConnector(floorData[key], this,false,true);
const distance = new AxArrowConnector(floorData[key], this, false, true);
} else if(floorData[key].Name === '距离'){
const distance = new AxArrowConnector(floorData[key], this,true,true);
const distance = new AxArrowConnector(floorData[key], this, true, true);
}else if(floorData[key].Name === '普通墙' || floorData[key].Name === '承重墙'){
const wall = new AxArrowConnector(floorData[key], this,false,false);
const wall = new AxArrowConnector(floorData[key], this, false, false);
}
break;
}
});
// this.emit('backgroundScale', this.backgroundImage.scale.x);
}
private createWorkNode() {
// 加载处置节点数据
const nodeData = this.canvasData.selectPanelPoint.Data;
/**
* 创建节点图形
*/
public createNodeShape(nodeData: any) {
if (nodeData !== undefined && nodeData !== null) {
Object.keys(nodeData).forEach((key) => {
if (nodeData[key] === undefined || nodeData[key] === null) { return;}
Object.keys(nodeData[key]).forEach((tempKey) => {
switch (nodeData[key][tempKey].InteractiveMode) {
case 0:
@ -546,55 +558,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
});
});
}
// this.emit('backgroundScale', this.backgroundImage.scale.x);
}
/**
*
* @param id 图标ID
* @param b 显示/隐藏
*/
public setIconVisible(ids: string[], b: boolean) {
ids.forEach(item => {
this.backgroundImage.getChildByName(item).visible = b;
});
}
// /**
// * 版本检查
// */
// public versionChecking(): void {
// const floorData = this.canvasData.originaleveryStoreyData;
// const buildingData = this.canvasData.originalcompanyBuildingData;
// const nodeData = this.canvasData.selectPanelPoint;
// if (floorData.version && floorData.version === '1.0') {
// floorData.version = '2.0';
// Object.keys(floorData.data).forEach(item => {
// floorData.data[item].Point.y *= -1;
// floorData.data[item].MultiPoint?.forEach(element => {
// element.y *= -1;
// });
// });
// }
// if (buildingData.version && buildingData.version === '1.0') {
// buildingData.version = '2.0';
// Object.keys(buildingData.data).forEach(item => {
// buildingData.data[item].Point.y *= -1;
// buildingData.data[item].MultiPoint?.forEach(element => {
// element.y *= -1;
// });
// });
// }
// if (nodeData.Version && nodeData.Version === '1.0') {
// nodeData.Version = '2.0';
// console.log(this.canvasData.selectPanelPoint.Version);
// Object.keys(nodeData.Data).forEach((key) => {
// Object.keys(nodeData.Data[key]).forEach((tempKey) => {
// nodeData.Data[key][tempKey].Point.y *= -1;
// nodeData.Data[key][tempKey].MultiPoint?.forEach(element => {
// element.y *= -1;
// });
// });
// });
// }
// }
/**
* 创建确认绘制结束按钮
*/
@ -606,7 +571,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.enterPaintEndButton.interactive = true;
this.enterPaintEndButton.buttonMode = true;
this.enterPaintEndButton
.on('mousedown', event => {
.on('pointerdown', event => {
event.stopPropagation();
this.enterPaint();
});
@ -617,33 +582,31 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
/**
* 创建背景图
*/
private async createBackgroundImage(imageUrl: string): Promise<void> {
const image = await PIXI.Texture.fromURL(imageUrl);
this.backgroundImage = new PIXI.Sprite(image);
public createBackgroundImage(){
this.backgroundImage = PIXI.Sprite.from('assets/images/noImg.png')
this.backgroundImage.anchor.set(0.5);
this.backgroundImage.x = this.app.view.width / 2;
this.backgroundImage.y = this.app.view.height / 2;
// this.backgroundImage.x = this.app.view.width / 2;
// this.backgroundImage.y = this.app.view.height / 2;
this.backgroundImage.interactive = true;
this.backgroundImage.name = 'background';
this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle;
// const left = this.init.element.nativeElement.querySelector('.functionalDomainLeft').clientWidth;
// const right = this.init.element.nativeElement.querySelector('.functionalDomainRight').clientWidth;
const imageWidth = this.backgroundImage.texture.width;
const imageHeight = this.backgroundImage.texture.height;
const appWidth = this.app.view.width - 470;
const appHeight = this.app.view.height;
// this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle;
// const imageWidth = 665;
// const imageHeight = 530;
// const appWidth = this.app.view.width - 470;
// const appHeight = this.app.view.height;
const wScale = appWidth / imageWidth;
const hScale = appHeight / imageHeight;
// const wScale = appWidth / imageWidth;
// const hScale = appHeight / imageHeight;
const scale = wScale < hScale
? wScale
: hScale;
this.backgroundImage.scale.set(scale);
// const scale = wScale < hScale
// ? wScale
// : hScale;
// this.backgroundImage.scale.set(scale);
this.backgroundImage.sortableChildren = true;
this.backgroundImage
.on('mousedown', event => {
.on('pointerdown', event => {
if (!event.currentTarget.dragging && this.selection.isMultiselection === false) {
this.selection.deselectAll();
event.currentTarget.data = event.data;
event.currentTarget.dragging = true;
event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
@ -651,7 +614,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
event.currentTarget.dragPoint.y -= event.currentTarget.y;
switch (this.paintMode) {
case PaintMode.endPaint:
console.log(this.backgroundImage.toLocal(this.mousePosition));
break;
case PaintMode.singlePointIcon:
const json = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos));
@ -685,11 +647,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
DrawMode : this.canvasData.selectTemplateData.drawMode,
Thickness : this.canvasData.selectTemplateData.thickness,
IsFromBuilding : this.canvasData.selectTemplateData.isFromBuilding,
GameMode : this.canvasData.gameMode
GameMode: this.canvasData.gameMode,
Tag: this.canvasData.selectTemplateData.tag
};
const singleIcon = new AxImageShape(assetData, this);
this.emit('createIcon', singleIcon);
this.emit('backgroundScale', this.backgroundImage.scale.x);
// this.emit('backgroundScale', this.backgroundImage.scale.x);
break;
case PaintMode.lineIcon:
this.previewLineSegment.visible = true;
@ -732,7 +695,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
DrawMode: this.canvasData.selectTemplateData.drawMode,
Thickness: this.canvasData.selectTemplateData.thickness,
IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding,
GameMode: this.canvasData.gameMode
GameMode: this.canvasData.gameMode,
Tag: this.canvasData.selectTemplateData.tag
};
// const assetData1 = {
// ImageUrl: this.canvasData.selectTemplateData.imageUrl,
@ -745,7 +709,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.paintingIcon = new MultipointIcon(assetData1, this);
// this.paintingIcon = new MultipointIcon(this.previewSinglePointIcon.texture, new PIXI.Point(0, 0), this.paintPoints, this,
// this.canvasData.selectTemplateData.name);
this.emit('backgroundScale', this.backgroundImage.scale.x);
// this.emit('backgroundScale', this.backgroundImage.scale.x);
break;
case PaintMode.polygonIcon:
this.previewLineSegment.visible = true;
@ -817,7 +781,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
DrawMode: this.canvasData.selectTemplateData.drawMode,
Thickness: this.canvasData.selectTemplateData.thickness,
IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding,
GameMode: this.canvasData.gameMode
GameMode: this.canvasData.gameMode,
Tag: this.canvasData.selectTemplateData.tag
};
if (this.canvasData.selectTemplateData.name === '距离') {
this.paintingShape = new AxArrowConnector(assetData2, this,true,true);
@ -829,7 +794,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.paintingShape.redraw();
}
}
this.emit('backgroundScale', this.backgroundImage.scale.x);
// this.emit('backgroundScale', this.backgroundImage.scale.x);
break;
}
} else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) {
@ -839,7 +804,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
}
})
.on('mouseup', event => {
.on('pointerup', event => {
if (event.currentTarget.dragging) {
event.currentTarget.dragging = false;
event.currentTarget.data = null;
@ -862,13 +827,13 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.rectToolGraphics.visible = false;
}
})
.on('mouseupoutside', event => {
.on('pointerupoutside', event => {
if (event.currentTarget.dragging) {
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('mousemove', event => {
.on('pointermove', event => {
if (event.currentTarget.dragging && this.selection.isMultiselection === false) {
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x;
@ -921,37 +886,123 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
/**
* 刷新背景图
*/
public refreshBackgroundImage(): void {
if (!this.canvasData.selectStorey.imageUrl) {
public async refreshBackgroundImage(imageUrl:string = this.canvasData.selectStorey.imageUrl,imageAngle:number = this.canvasData.selectStorey.imageAngle): Promise<void> {
if (!imageUrl) {
this.backgroundImage.visible = false;
} else {
// this.backgroundImage.texture = PIXI.Texture.from(this.canvasData.selectStorey.imageUrl);
// this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle;
// this.backgroundImage.visible = true;
this.refresh();
this.backgroundImage.visible = false;
this.backgroundImage.scale.set(1);
this.backgroundImage.pivot.set(0);
this.backgroundImage.x = this.app.view.width / 2;
this.backgroundImage.y = this.app.view.height / 2;
this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl);
this.backgroundImage.angle = imageAngle;
// 等待图片加载完成
let imageWidth = this.backgroundImage.texture.width;
let imageHeight = this.backgroundImage.texture.height;
let appWidth = this.app.view.width - 470;
let appHeight = this.app.view.height;
let wScale = appWidth / imageWidth;
let hScale = appHeight / imageHeight;
let scale = wScale < hScale ? wScale : hScale;
// 设置图片缩放
this.backgroundImage.scale.set(scale);
}
}
/**
* 清空画布
* 刷新
* @param imageUrl
* @param imageAngle
*/
public destroyBackgroundImage(): void {
this.app.stage.removeChild(this.backgroundImage);
public async refresh(imageUrl: string = this.canvasData.selectStorey.imageUrl, imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise<void> {
this.backgroundImage.visible = false;
this.backgroundImage.scale.set(1);
this.backgroundImage.pivot.set(0);
this.backgroundImage.x = this.app.view.width / 2;
this.backgroundImage.y = this.app.view.height / 2;
this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl);
this.backgroundImage.angle = imageAngle;
// 等待图片加载完成
let imageWidth = this.backgroundImage.texture.width;
let imageHeight = this.backgroundImage.texture.height;
let appWidth = this.app.view.width - 470;
let appHeight = this.app.view.height;
let wScale = appWidth / imageWidth;
let hScale = appHeight / imageHeight;
let scale = wScale < hScale ? wScale : hScale;
// 设置图片缩放
this.backgroundImage.scale.set(scale);
// 清空所有图形
this.selection.deselectAll();
let itemList = [];
this.backgroundImage.children.forEach(item => {
if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) {
itemList.push(item.name);
}
/**
* 设置背景图缩放
* @param scale 缩放系数
*/
public setBackgroundScale(scale: number): void {
this.backgroundImage?.scale.set(scale);
this.emit('backgroundScale', this.backgroundImage?.scale.x);
});
itemList.forEach(item => {
this.backgroundImage.getChildByName(item).destroy();
// let child = this.backgroundImage.getChildByName(item);
// this.backgroundImage.removeChild(child);
})
//加载当前数据
this.createFloorShape(this.canvasData.originaleveryStoreyData.data);
// 创建处置预案图形
this.createNodeShape(this.canvasData.selectPanelPoint.Data);
this.createAxLegend();
this.backgroundImage.visible = true;
}
/**
* 设置背景图角度
* @param imageAngle 角度值
* 创建安信图例
*/
public setBackgroundAngle(imageAngle: number) {
this.backgroundImage.angle = imageAngle;
public createAxLegend() {
const tempAssetData = {
Id: "图例",//ObjectID.default.generate()
Color: "#066EED80",
PropertyInfos:[]
};
let shapeMap: Map<string,Legend> = new Map<string,Legend>();
for (let item in this.canvasData.originaleveryStoreyData.data) {
if (shapeMap.has(this.canvasData.originaleveryStoreyData.data[item].Name)) {
shapeMap.get(this.canvasData.originaleveryStoreyData.data[item].Name).Count++;
} else {
shapeMap.set(this.canvasData.originaleveryStoreyData.data[item].Name, new Legend(
this.canvasData.originaleveryStoreyData.data[item].Name,
this.canvasData.originaleveryStoreyData.data[item].ImageUrl,
1
));
}
}
var axLegend = new AxLegend(tempAssetData, this, shapeMap);
var rect = this.backgroundImage.getLocalBounds();
var itemRect = axLegend.getLocalBounds();
axLegend.x = rect.right - itemRect.right;
axLegend.y = rect.bottom - itemRect.bottom;
}
// /**
// * 清空画布
// */
// public destroyBackgroundImage(): void {
// this.app.stage.removeChild(this.backgroundImage);
// this.backgroundImage = null;
// }
/**
// // * 设置背景图缩放
// // * @param scale 缩放系数
// // */
// public setBackgroundScale(scale: number): void {
// this.backgroundImage?.scale.set(scale);
// this.emit('backgroundScale', this.backgroundImage?.scale.x);
// }
// /**
// * 设置背景图角度
// * @param imageAngle 角度值
// */
// public setBackgroundAngle(imageAngle: number) {
// this.backgroundImage.angle = imageAngle;
// }
/**
* 创建预览单点图标
*/
@ -986,7 +1037,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
*/
private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) {
this.previewLineSegment.clear();
this.previewLineSegment.lineStyle(5, 0x00ff00, 1);
this.previewLineSegment.lineStyle(1/this.backgroundImage.scale.x, 0x00ff00, 1);
this.previewLineSegment.moveTo(pointA.x, pointA.y);
this.previewLineSegment.lineTo(pointB.x, pointB.y );
}
@ -995,12 +1046,21 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* @param x 半径
*/
private createCircleShadow(): void {
this.circleShadow.beginFill(0xFFCC5A);
this.circleShadow.drawCircle(0, 0, 10);
this.circleShadow.endFill();
// this.circleShadow.beginFill(0xFFCC5A);
// this.circleShadow.drawCircle(0, 0, 10);
// this.circleShadow.endFill();
this.circleShadow.visible = false;
this.backgroundImage.addChild(this.circleShadow);
}
/**
* 刷新预览点
*/
private refreshPreviewPoint() {
this.circleShadow.clear();
this.circleShadow.beginFill(0x00ff00);
this.circleShadow.drawCircle(0, 0, 5/this.backgroundImage.scale.x);
this.circleShadow.endFill();
}
showConnectionPoint(b: boolean) {
this.backgroundImage?.children.forEach(item => {
if (item instanceof AxImageShape) {
@ -1014,6 +1074,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* 开始绘制
*/
public beginPaint() {
console.log(this.canvasData.selectTemplateData);
this.selection.deselectAll();
this.setPaintMode(PaintMode.endPaint);
this.setPaintMode(this.canvasData.selectTemplateData.interactiveMode);
@ -1170,7 +1231,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
break;
}
this.paintPoints.splice(0, this.paintPoints.length);
this.emit('backgroundScale', this.backgroundImage.scale.x);
// this.emit('backgroundScale', this.backgroundImage.scale.x);
}
/**
* 复制
@ -1219,9 +1280,111 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
}
this.selection.select(this.backgroundImage.getChildByName(newData.Id));
});
this.emit('backgroundScale', this.backgroundImage.scale.x);
// this.emit('backgroundScale', this.backgroundImage.scale.x);
}
////////////////////////////////////////////////////////////////////////通用/////////////////////////////////////////////////////////////////////////////
/**
*
* @param id 图标ID
* @param b 显示/隐藏
*/
public setIconVisible(ids: string[], b: boolean) {
ids.forEach(item => {
this.backgroundImage.getChildByName(item).visible = b;
});
}
////////////////////////////////////////////////////////////////////////采集平台加载逻辑///////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////编制平台加载逻辑///////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////考试系统加载逻辑///////////////////////////////////////////////////////////////////////
/**
* 考生点击楼层
*/
public async onExamineeClickFloor() {
// this.backgroundImage.visible = false;
// this.backgroundImage.scale.set(1);
// this.backgroundImage.pivot.set(0);
// this.backgroundImage.x = this.app.view.width / 2;
// this.backgroundImage.y = this.app.view.height / 2;
// this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl);
// this.backgroundImage.angle = imageAngle;
// // 等待图片加载完成
// let imageWidth = this.backgroundImage.texture.width;
// let imageHeight = this.backgroundImage.texture.height;
// let appWidth = this.app.view.width - 470;
// let appHeight = this.app.view.height;
// let wScale = appWidth / imageWidth;
// let hScale = appHeight / imageHeight;
// let scale = wScale < hScale ? wScale : hScale;
// // 设置图片缩放
// this.backgroundImage.scale.set(scale);
// // 清空所有图形
// this.selection.deselectAll();
// let itemList = [];
// this.backgroundImage.children.forEach(item => {
// if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) {
// itemList.push(item.name);
// }
// });
// itemList.forEach(item => {
// this.backgroundImage.getChildByName(item).destroy();
// })
// // 创建楼层图形
// this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data);
// // 创建楼层图形
// this.createFloorShape(this.canvasData.originaleveryStoreyData.data);
// // 创建处置预案图形
// this.createNodeShape(this.canvasData.selectPanelPoint.Data);
// // 隐藏图标
// this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false);
// this.backgroundImage.visible = true;
}
/**
* 考官点击楼层
*/
public async onExaminerClickFloor() {
// this.backgroundImage.visible = false;
// this.backgroundImage.scale.set(1);
// this.backgroundImage.pivot.set(0);
// this.backgroundImage.x = this.app.view.width / 2;
// this.backgroundImage.y = this.app.view.height / 2;
// this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl);
// this.backgroundImage.angle = imageAngle;
// // 等待图片加载完成
// let imageWidth = this.backgroundImage.texture.width;
// let imageHeight = this.backgroundImage.texture.height;
// let appWidth = this.app.view.width - 470;
// let appHeight = this.app.view.height;
// let wScale = appWidth / imageWidth;
// let hScale = appHeight / imageHeight;
// let scale = wScale < hScale ? wScale : hScale;
// // 设置图片缩放
// this.backgroundImage.scale.set(scale);
// // 清空所有图形
// this.selection.deselectAll();
// let itemList = [];
// this.backgroundImage.children.forEach(item => {
// if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) {
// itemList.push(item.name);
// }
// });
// itemList.forEach(item => {
// this.backgroundImage.getChildByName(item).destroy();
// })
// // 创建楼层图形
// this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data);
// // 创建楼层图形
// this.createFloorShape(this.canvasData.originaleveryStoreyData.data);
// // 创建处置预案图形
// this.createNodeShape(this.canvasData.selectPanelPoint.Data);
// // 隐藏图标
// this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false);
// this.backgroundImage.visible = true;
}
}
/**

Write Preview
Loading…
Cancel
Save