shaojiahao
/
TheCommandPlatform-Anxin
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[合并]

develop
陈鹏飞 4 years ago
parent
f844871bca dcb20d66aa
commit
8c4aeb352f
6 changed files with 269 additions and 96 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. 8
      package.json
  2. 357
      src/app/working-area/working-area.component.ts
  3. BIN
      src/assets/images/demo.jpg
  4. BIN
      src/assets/images/压缩空气泡沫消防车.png
  5. BIN
      src/assets/images/水罐消防车.png
  6. BIN
      src/assets/images/泡沫消防车.png

8
package.json
Unescape View File

@ -25,6 +25,7 @@
"@types/cesium": "^1.59.5",
"@types/swiper": "^5.3.0",
"angular-calendar": "^0.28.2",
"bson-objectid": "^1.3.1",
"cesium": "^1.64.0",
"date-fns": "^2.9.0",
"e-ngx-cesium": "^6.3.2",
@ -34,14 +35,13 @@
"ngx-countdown": "^9.0.1",
"ngx-echarts": "^4.2.2",
"ngx-perfect-scrollbar": "^8.0.0",
"pixi-filters": "^3.1.1",
"pixi.js": "^5.3.2",
"rxjs": "~6.5.4",
"swiper": "^5.3.7",
"tslib": "^1.10.0",
"viewerjs": "^1.6.2",
"zone.js": "~0.10.2",
"pixi-filters": "^3.1.1",
"pixi.js": "^5.3.2",
"bson-objectid": "^1.3.1"
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.1",

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

@ -1,4 +1,4 @@
import { Component, OnInit, ElementRef, ViewChild, AfterViewInit,Input } from '@angular/core';
import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input } from '@angular/core';
import * as PIXI from 'pixi.js';
import { EventEmitter } from 'events';
import { EventManager } from '@angular/platform-browser';
@ -22,9 +22,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
@ViewChild('content')
content: ElementRef;
//父组件
@Input( ) init:any;
//父组件
/**
* 父组件
*/
@Input( ) init: any;
/**
* pixijs 程序
*/
@ -85,7 +86,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* 拷贝素材数据
*/
public copyData: any[] = [];
/**
* 确认绘制按钮
*/
private enterPaintEndButton = PIXI.Sprite.from('assets/images/enterPaintButton.jpg');
/**
* 框选工具图形
@ -99,7 +102,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* 最终鼠标位置
*/
private finalScreenMousePos: PIXI.Point = new PIXI.Point();
// 根据ID 找到图标
/**
* 允许编辑
*/
public allowEdit = false;
// 根据ID 找到数据
@ -162,6 +168,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
});
setTimeout(() => {
this.createCanvas();
this.loadDemoScene();
}, 0);
}
@ -368,6 +375,41 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
}
});
}
/**
* 加载测试界面
*/
public loadDemoScene() {
this.backgroundImage.texture = PIXI.Texture.from('./assets/images/demo.jpg');
setTimeout(() => {
const assetData = {
TemplateId: null,
FloorId: null,
Angle: 0,
Color: 0,
Enabled: true,
FillMode: 0,
FireElementId: 0,
FixedSize: true,
Height: 32,
Width: 32,
Id: ObjectID.default.generate(),
ImageUrl: './assets/images/泡沫消防车.png',
InteractiveMode: 0,
MultiPoint: null,
Point: new PIXI.Point(5295 - (this.backgroundImage.texture.width / 2), 4067 - (this.backgroundImage.texture.height / 2)),
Name: '',
PropertyInfos: null,
Border: null,
DrawMode: null,
Thickness: 0,
IsFromBuilding: false,
GameMode: 0
};
const single = new SinglePointIcon(assetData, this);
}, 100);
// this.backgroundImage.anchor.set(0);
}
/**
*
* @param id 图标ID
@ -927,7 +969,7 @@ export class SinglePointIcon extends PIXI.Container {
private text = new PIXI.Text(this.assetData.Name
+ '\r\n'
+ this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
private image = PIXI.Sprite.from(this.assetData.ImageUrl);
constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
super();
@ -947,38 +989,36 @@ export class SinglePointIcon extends PIXI.Container {
this.image.anchor.set(0.5);
this.image.interactive = true;
this.image
.on('mousedown', event => {
event.stopPropagation();
console.log(this.assetData);
event.currentTarget.parent.data = event.data;
event.currentTarget.parent.alpha = 0.5;
event.currentTarget.parent.dragging = true;
this.workingArea.selection.selectOne(this);
.on('mousedown', event => {
event.stopPropagation();
this.workingArea.selection.selectOne(this);
if (this.workingArea.allowEdit) {
event.currentTarget.parent.data = event.data;
event.currentTarget.parent.alpha = 0.5;
event.currentTarget.parent.dragging = true;
}
})
.on('mouseup', event => {
event.currentTarget.parent.alpha = 1;
event.currentTarget.parent.dragging = false;
event.currentTarget.parent.data = null;
if (event.currentTarget.parent.dragging) {
event.currentTarget.parent.alpha = 1;
event.currentTarget.parent.dragging = false;
event.currentTarget.parent.data = null;
}
})
.on('mouseupoutside', event => {
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.y = newPosition.y;
// this.text.x = newPosition.x;
// this.text.y = newPosition.y - 32;
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.workingArea.canvasData.isChange = true;
// console.log(this.workingArea.canvasData.originaleveryStoreyData);
// console.log(this.workingArea.canvasData.originaleveryStoreyData.data[this.assetData.Id].Point);
}
})
.on('rightclick', event => {
@ -1015,7 +1055,7 @@ export class SinglePointIcon extends PIXI.Container {
this.image.angle = this.assetData.Angle;
this.text.text = this.assetData.Name
+ '\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;
}
@ -1046,7 +1086,7 @@ export class MultipointIcon extends PIXI.Container {
private text = new PIXI.Text(this.assetData.Name
+ '\r\n'
+ this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
/**
*
* @param texture 图片素材
@ -1101,19 +1141,25 @@ export class MultipointIcon extends PIXI.Container {
item.interactive = true;
item.on('mousedown', event => {
event.stopPropagation();
event.currentTarget.data = event.data;
event.currentTarget.alpha = 0.5;
event.currentTarget.dragging = true;
if (this.workingArea.allowEdit) {
event.currentTarget.data = event.data;
event.currentTarget.alpha = 0.5;
event.currentTarget.dragging = true;
}
})
.on('mouseup', event => {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('mouseupoutside', event => {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('mousemove', event => {
if (event.currentTarget.dragging) {
@ -1191,25 +1237,30 @@ export class MultipointIcon extends PIXI.Container {
item.interactive = true;
item.on('mousedown', event => {
event.stopPropagation();
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;
this.workingArea.selection.selectOne(this);
if (this.workingArea.allowEdit) {
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 => {
event.currentTarget.parent.alpha = 1;
event.currentTarget.parent.dragging = false;
event.currentTarget.parent.data = null;
if (event.currentTarget.parent.dragging) {
event.currentTarget.parent.alpha = 1;
event.currentTarget.parent.dragging = false;
event.currentTarget.parent.data = null;
}
})
.on('mouseupoutside', event => {
event.currentTarget.parent.alpha = 1;
event.currentTarget.parent.dragging = false;
event.currentTarget.parent.data = null;
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) {
@ -1219,11 +1270,10 @@ export class MultipointIcon extends PIXI.Container {
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.workingArea.canvasData.isChange = true;
// console.log(this.workingArea.canvasData.originaleveryStoreyData.data[this.assetData.Id].Point);
}
})
.on('rightclick', event => {
// this.workingArea.selection.deselectAll();
});
});
}
@ -1326,22 +1376,25 @@ export class PolygonIcon extends PIXI.Container {
item.zIndex = 1;
item.on('mousedown', event => {
event.stopPropagation();
event.currentTarget.data = event.data;
event.currentTarget.alpha = 0.5;
event.currentTarget.dragging = true;
// console.log(item.zIndex);
// console.log(this.polygonLineGraphics.zIndex);
if (this.workingArea.allowEdit) {
event.currentTarget.data = event.data;
event.currentTarget.alpha = 0.5;
event.currentTarget.dragging = true;
}
})
.on('mouseup', event => {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('mouseupoutside', event => {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('mousemove', event => {
if (event.currentTarget.dragging) {
@ -1371,41 +1424,47 @@ export class PolygonIcon extends PIXI.Container {
});
// 添加选中事件
this.polygonGraphics.interactive = true;
this.polygonGraphics.on('mousedown', event => {
this.polygonGraphics
.on('mousedown', event => {
event.stopPropagation();
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;
this.workingArea.selection.selectOne(this);
if (this.workingArea.allowEdit) {
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 => {
.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 => {
}
})
.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;
}
})
.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();
});
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.workingArea.canvasData.isChange = true;
}
})
.on('rightclick', event => {
// this.workingArea.selection.deselectAll();
});
// 缩放
this.workingArea.on('backgroundScale', data => {
const scale = 1 / data;
@ -1624,3 +1683,117 @@ export class PropertyInfo {
*/
public PropertyValue: string;
}
/**
* demo图标
*/
export class DemoIcon extends PIXI.Container {
style = new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 18,
fontStyle: 'normal',
fontWeight: 'bold',
fill: ['#000000'],
stroke: '#ffffff',
strokeThickness: 3,
dropShadow: true,
dropShadowColor: '#000000',
dropShadowBlur: 3,
dropShadowAngle: Math.PI / 6,
dropShadowDistance: 1,
wordWrap: false,
wordWrapWidth: 100,
});
private text = new PIXI.Text(this.assetData.Name
+ '\r\n'
+ this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
private image = PIXI.Sprite.from(this.assetData.ImageUrl);
constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
super();
this.workingArea.backgroundImage.addChild(this);
this.x = this.assetData.Point.x;
this.y = this.assetData.Point.y;
this.name = this.assetData.Id;
this.image.angle = this.assetData.Angle;
this.image.x = 0;
this.image.y = 0;
this.image.width = this.assetData.Width;
this.image.height = this.assetData.Height;
this.image.alpha = 1;
this.image.anchor.set(0.5);
this.image.interactive = true;
this.image
.on('mousedown', event => {
event.stopPropagation();
this.workingArea.selection.selectOne(this);
if (this.workingArea.allowEdit) {
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) {
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 => {
});
this.workingArea.on('backgroundScale', data => {
if (this.assetData.FixedSize) {
const scale = 1 / data;
this.scale.set(scale);
}
});
this.text.x = this.image.x;
this.text.y = this.image.y - this.image.height / 2;
this.text.anchor.set(0.5, 1);
this.addChild(this.text);
this.addChild(this.image);
}
// 设置名称
public setNameVisible(value: boolean, mode: GameMode) {
if (this.assetData.GameMode === mode) {
this.text.visible = value;
}
}
// 刷新
public refresh() {
this.image.width = this.assetData.Width;
this.image.height = this.assetData.Height;
this.image.angle = this.assetData.Angle;
this.text.text = this.assetData.Name
+ '\r\n'
+ this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
this.text.x = this.image.x;
this.text.y = this.image.y - this.image.height / 2;
}
}

BIN
src/assets/images/demo.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
src/assets/images/压缩空气泡沫消防车.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
src/assets/images/水罐消防车.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
src/assets/images/泡沫消防车.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

Write Preview
Loading…
Cancel
Save