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

完善图例

develop
徐振升 4 years ago
parent
b6d49e2f39
commit
8c251246eb
6 changed files with 333 additions and 83 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. 8
      src/app/working-area/model/axArrowConnector.ts
  3. 250
      src/app/working-area/model/axLegend.ts
  4. 41
      src/app/working-area/model/axRectangleShape.ts
  5. 17
      src/app/working-area/model/axShape.ts
  6. 99
      src/app/working-area/working-area.component.ts

1
debug.log
Unescape View File

@ -11,3 +11,4 @@
[0109/083452.962:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
[0111/084621.230:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
[0111/102545.331:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
[0112/084413.518:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)

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

@ -9,7 +9,7 @@ import { GameMode } from './gameMode';
*/
export class AxArrowConnector extends AxShape {
pointSprites: Array<Sprite> = new Array<Sprite>();
line: PIXI.Graphics;
tempLine: PIXI.Graphics;
text: PIXI.Text;
style = new PIXI.TextStyle({
fontFamily: 'Arial',
@ -42,9 +42,9 @@ export class AxArrowConnector extends AxShape {
+ '\r\n'
+ this.assetData.PropertyInfos?.find((item: { PropertyName: string; }) =>
item.PropertyName === '名称/编号')?.PropertyValue, this.style);
this.line = new PIXI.Graphics();
this.tempLine = new PIXI.Graphics();
this.addChild(this.text);
this.addChild(this.line);
this.addChild(this.tempLine);
this.workingArea.backgroundImage.addChild(this);
this.refresh();
this.drawPoints();
@ -141,7 +141,7 @@ export class AxArrowConnector extends AxShape {
* 刷新形状
*/
public refresh(): void {
const c = this.line;
const c = this.tempLine;
const pts = this.assetData.MultiPoint;
if (pts.length < 2) {
return;

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

@ -1,4 +1,6 @@
import { Constructor } from '@angular/material/core/common-behaviors/constructor';
import { MatGridTileHeaderCssMatStyler } from '@angular/material/grid-list';
import { DefaultProxy } from 'cesium';
import { Sprite, Texture,Text, Graphics, Point } from 'pixi.js';
import { WorkingAreaComponent } from '../working-area.component';
import { AxShape } from './axShape';
@ -25,6 +27,10 @@ export class AxLegend extends AxShape {
super(assetData, workingArea);
this.angle = -this.workingArea.backgroundImage.angle;
this.name = this.assetData.Id;
this.pivot.set(this.assetData.PivotX, this.assetData.PivotY);
this.x = this.assetData.Point.x;
this.y = this.assetData.Point.y;
this.scale.set(this.assetData.Scale);
this.shapeMap = shapeMap;
this.refresh();
}
@ -109,7 +115,6 @@ export class AxLegend extends AxShape {
this.pen.endFill();
}
this.addChild(this.pen);
this.angle = -this.workingArea.backgroundImage.angle;
// 添加border
this.addChild(this.border);
// 添加控制点
@ -117,8 +122,6 @@ export class AxLegend extends AxShape {
this.upLeft.anchor.set(0.5);
this.upLeft.interactive = true;
this.upLeft.visible = false;
var posX = 0;
var w = this.width;
this.upLeft
.on('pointerdown', event => {
event.stopPropagation();
@ -128,11 +131,20 @@ export class AxLegend extends AxShape {
event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
var gPos = this.upLeft.getGlobalPosition(new Point(this.downRight.x, this.downRight.y));
var temp1 = this.workingArea.backgroundImage.toLocal(gPos);
var pointStart = this.position;
var pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.downRight.position));
const delX = pointEnd.x - pointStart.x;
const delY = pointEnd.y - pointStart.y;
this.pivot.set(this.downRight.x, this.downRight.y);
this.position.set(temp1.x,temp1.y);
this.position.x += delX;
this.position.y += delY;
this.assetData.PivotX = this.pivot.x;
this.assetData.PivotY = this.pivot.y;
this.assetData.Point = new Point(this.x, this.y);
})
.on('pointerup', event => {
if (event.currentTarget.dragging) {
@ -151,40 +163,234 @@ export class AxLegend extends AxShape {
.on('pointermove', event => {
if (event.currentTarget.dragging) {
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
// event.currentTarget.x = newPosition.x;
// event.currentTarget.y = newPosition.y;
var width = -(newPosition.x - event.currentTarget.dragPoint.x)
var height = -(newPosition.y - event.currentTarget.dragPoint.y);
if (width > 0) {
this.scale.x += 0.01;
this.scale.y += 0.01;
} else {
this.scale.x -= 0.01;
this.scale.y -= 0.01;
var startPos = this.position;
var endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition));
var width = (endPos.x - startPos.x);
var height = (endPos.y - startPos.y);
var scaleX = width / (this.width / this.scale.x);
var scaleY = height / (this.width / this.scale.x);
var angle = Math.abs(this.angle);
console.log(angle);
if (angle === 0) {
this.scale.set(-scaleX);
} else if (angle === 90) {
this.scale.set(scaleY);
} else if (angle === 180) {
this.scale.set(scaleX);
} else if (angle === 270) {
this.scale.set(-scaleY);
}
this.assetData.Scale = this.scale.x;
}
})
.on('rightclick', event => {
this.border.visible = false;
})
.on('pointerover', event => {
event.stopPropagation();
})
.on('pointerout', event => {
event.stopPropagation();
});
this.addChild(this.upRight);
this.upRight.anchor.set(0.5);
this.upRight.interactive = true;
this.upRight.visible = false;
this.upRight
.on('pointerdown', event => {
event.stopPropagation();
event.currentTarget.data = event.data;
event.currentTarget.alpha = 0.5;
event.currentTarget.dragging = true;
event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
var pointStart = this.position;
var pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.downLeft.position));
const delX = pointEnd.x - pointStart.x;
const delY = pointEnd.y - pointStart.y;
this.pivot.set(this.downLeft.x, this.downLeft.y);
this.position.x += delX;
this.position.y += delY;
this.assetData.PivotX = this.pivot.x;
this.assetData.PivotY = this.pivot.y;
this.assetData.Point = new Point(this.x, this.y);
})
.on('pointerup', event => {
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('pointerupoutside', event => {
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('pointermove', event => {
if (event.currentTarget.dragging) {
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
var startPos = this.position;
var endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition));
var width = (endPos.x - startPos.x);
var height = (endPos.y - startPos.y);
var scaleX = width / (this.width / this.scale.x);
var scaleY = height / (this.width / this.scale.x);
var angle = Math.abs(this.angle);
console.log(angle);
if (angle === 0) {
this.scale.set(scaleX);
} else if (angle === 90) {
this.scale.set(-scaleY);
} else if (angle === 180) {
this.scale.set(-scaleX);
} else if (angle === 270) {
this.scale.set(scaleY);
}
this.assetData.Scale = this.scale.x;
}
})
.on('rightclick', event => {
this.border.visible = false;
});
this.addChild(this.downLeft);
this.downLeft.anchor.set(0.5);
this.downLeft.interactive = true;
this.downLeft.visible = false;
this.downLeft
.on('pointerdown', event => {
event.stopPropagation();
event.currentTarget.data = event.data;
event.currentTarget.alpha = 0.5;
event.currentTarget.dragging = true;
event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
var pointStart = this.position;
var pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.upRight.position));
const delX = pointEnd.x - pointStart.x;
const delY = pointEnd.y - pointStart.y;
this.pivot.set(this.upRight.x, this.upRight.y);
this.position.x += delX;
this.position.y += delY;
this.assetData.PivotX = this.pivot.x;
this.assetData.PivotY = this.pivot.y;
this.assetData.Point = new Point(this.x, this.y);
})
.on('pointerup', event => {
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('pointerupoutside', event => {
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('pointermove', event => {
if (event.currentTarget.dragging) {
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
var startPos = this.position;
var endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition));
var width = (endPos.x - startPos.x);
var height = (endPos.y - startPos.y);
var scaleX = width / (this.width / this.scale.x);
var scaleY = height / (this.width / this.scale.x);
var angle = Math.abs(this.angle);
console.log(angle);
if (angle === 0) {
this.scale.set(-scaleX);
} else if (angle === 90) {
this.scale.set(scaleY);
} else if (angle === 180) {
this.scale.set(scaleX);
} else if (angle === 270) {
this.scale.set(-scaleY);
}
this.assetData.Scale = this.scale.x;
}
})
.on('rightclick', event => {
this.border.visible = false;
});
this.addChild(this.downRight);
this.downRight.anchor.set(0.5);
this.downRight.interactive = true;
this.downRight.visible = false;
this.downRight
.on('pointerdown', event => {
event.stopPropagation();
event.currentTarget.data = event.data;
event.currentTarget.alpha = 0.5;
event.currentTarget.dragging = true;
event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
var pointStart = this.position;
var pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.upLeft.position));
const delX = pointEnd.x - pointStart.x;
const delY = pointEnd.y - pointStart.y;
this.pivot.set(this.upLeft.x, this.upLeft.y);
this.position.x += delX;
this.position.y += delY;
this.assetData.PivotX = this.pivot.x;
this.assetData.PivotY = this.pivot.y;
this.assetData.Point = new Point(this.x, this.y);
})
.on('pointerup', event => {
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('pointerupoutside', event => {
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('pointermove', event => {
if (event.currentTarget.dragging) {
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
var startPos = this.position;
var endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition));
var width = (endPos.x - startPos.x);
var height = (endPos.y - startPos.y);
var scaleX = width / (this.width / this.scale.x);
var scaleY = height / (this.width / this.scale.x);
var angle = Math.abs(this.angle);
console.log(angle);
if (angle === 0) {
this.scale.set(scaleX);
} else if (angle === 90) {
this.scale.set(-scaleY);
} else if (angle === 180) {
this.scale.set(-scaleX);
} else if (angle === 270) {
this.scale.set(scaleY);
}
this.assetData.Scale = this.scale.x;
}
})
.on('rightclick', event => {
this.border.visible = false;
});
this.angle = -this.workingArea.backgroundImage.angle;
}
/**
* 设置点显示状态

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

@ -1,39 +1,20 @@
/**
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
import { Sprite } from "pixi.js";
import { Graphics } from "pixi.js";
/**
* Class: mxRectangleShape
*
* Extends <mxShape> to implement a rectangle shape.
* This shape is registered under <mxConstants.SHAPE_RECTANGLE>
* in <mxCellRenderer>.
*
* Constructor: mxRectangleShape
*
* Constructs a new rectangle shape.
*
* Parameters:
*
* bounds - <mxRectangle> that defines the bounds. This is stored in
* <mxShape.bounds>.
* fill - String that defines the fill color. This is stored in <fill>.
* stroke - String that defines the stroke color. This is stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
export class AxRectangleShape extends Graphics{
import { WorkingAreaComponent } from "../working-area.component";
import { AxShape } from "./axShape";
export class AxRectangleShape extends AxShape{
/**
*
*/
constructor(x:number,y:number,width:number,height:number) {
super();
this.beginFill(0x0000ff,0);
this.lineStyle(1, 0xff0000,0);
constructor(x:number,y:number,width:number,height:number,assetData: any, workingArea: WorkingAreaComponent) {
super(assetData,workingArea);
this.beginFill(0x0000ff,1);
this.lineStyle(1, 0xff0000,1);
this.drawRect(x, y, width, height);
this.endFill();
console.log(this.getLocalBounds());
}

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

@ -6,7 +6,7 @@ import { WorkingAreaComponent } from '../working-area.component';
/**
* 安信形状
*/
export class AxShape extends Container {
export class AxShape extends Graphics {
assetData: any;
pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png')
workingArea: WorkingAreaComponent;
@ -83,12 +83,6 @@ export class AxShape extends Container {
})
.on('rightclick', event => {
this.border.visible = false;
})
.on('pointerover', event => {
event.stopPropagation();
})
.on('pointerout', event => {
event.stopPropagation();
});
}
redraw(): void {
@ -102,11 +96,13 @@ export class AxShape extends Container {
}
public showBorder() {
this.border.visible = true;
}
/**
* 隐藏边框
*/
public hideBorder() {
this.border.clear();
this.border.visible = false;
}
/**
@ -140,14 +136,13 @@ export class AxShape extends Container {
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.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();
this.border.visible = true;
// this.border.endFill();
}
// 画虚线
drawDash(target, x1, y1, x2, y2,dashLength = 5, spaceLength = 1) {

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

@ -108,6 +108,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* 确认绘制按钮
*/
private enterPaintEndButton = PIXI.Sprite.from('assets/images/enterPaintButton.png');
/**
* 编辑点图片
*/
editorPointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png')
/**
* 框选工具图形
*/
@ -340,9 +345,17 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
/**
* 选中事件
*/
this.on('select', (axShape:AxShape)=> {
axShape.drawBorder(1/this.backgroundImage.scale.x);
axShape.setPointVisiable(this.allowEdit);
this.on('select', (axShape: AxShape) => {
// if (axShape instanceof AxRectangleShape) {
// let upLeft: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture);
// let upRight: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture);
// let downLeft: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture);
// let downRight: PIXI.Sprite = new PIXI.Sprite(this.editorPointTexture);
// } else {
axShape.showBorder();
axShape.drawBorder(1/this.backgroundImage.scale.x);
axShape.setPointVisiable(this.allowEdit);
// }
});
/**
* 取消选中事件
@ -359,6 +372,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息
// 添加楼层数据
this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id] = axShape.assetData;
console.log(this.canvasData.originaleveryStoreyData);
// 添加建筑数据
this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id] = axShape.assetData;
} else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案
@ -381,7 +395,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
// }
var temp = this.backgroundImage.getChildByName("图例") as AxLegend;
if ( temp !== undefined
&& temp !== null) {
&& temp !== null
&& axShape.assetData.Name !== "图例") {
var itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
temp.addItem(itemLegend);
}
@ -395,7 +410,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
// 删除图例对象
var temp = this.backgroundImage.getChildByName("图例") as AxLegend;
if ( temp !== undefined
&& temp !== null) {
&& temp !== null
&& axShape.assetData.Name !== "图例") {
var itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
temp.deleteItem(itemLegend);
}
@ -603,6 +619,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.backgroundImage
.on('pointerdown', event => {
if (event.data.button !== 0) return;
console.log(this.backgroundImage.toLocal(this.mousePosition));
if (!event.currentTarget.dragging && this.selection.isMultiselection === false) {
this.selection.deselectAll();
event.currentTarget.data = event.data;
@ -945,16 +962,53 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.createAxLegend();
// // 测试代码
// var rectShape = new AxRectangleShape(0, 0, 100, 100);
// this.backgroundImage.addChild(rectShape);
// const tempAssetData = {
// Id: "图例",//ObjectID.default.generate()
// Color: "#066EED80",
// PropertyInfos: [
// {
// Tag : '',
// Order : 0,
// Enabled : true,
// Visible : true,
// Required : false,
// RuleName : "",
// RuleValue : "",
// PhysicalUnit : "",
// PropertyName : "列",
// PropertyType : 2,
// PropertyValue : 2,
// },
// ]
// };
// var rectShape = new AxRectangleShape(0, 0, 100, 100,tempAssetData,this);
}
/**
* 创建安信图例
*/
public createAxLegend() {
const tempAssetData = {
Id: "图例",//ObjectID.default.generate()
Id: "图例",
Name:"图例",
Color: "#066EED80",
TemplateId: null,
FloorId: this.canvasData.selectStorey.id,
Angle: 0,
Enabled: null,
FillMode: null,
FireElementId: null,
FixedSize: null,
Height: 32,
Width: 32,
ImageUrl: null,
InteractiveMode: null,
MultiPoint: null,
Point: new PIXI.Point(0, 0),
Border: null,
DrawMode: null,
Thickness: null,
IsFromBuilding: null,
GameMode: this.canvasData.gameMode,
PropertyInfos: [
{
Tag : '',
@ -969,26 +1023,39 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
PropertyType : 2,
PropertyValue : 2,
},
]
],
Scale: 1,
PivotX: 0,
PivotY: 0,
};
let shapeMap: Map<string,Legend> = new Map<string,Legend>();
let data = null;
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(
if (item !== "图例") {
shapeMap.set(this.canvasData.originaleveryStoreyData.data[item].Name, new Legend(
this.canvasData.originaleveryStoreyData.data[item].Name,
this.canvasData.originaleveryStoreyData.data[item].ImageUrl,
1
));
} else {
data = this.canvasData.originaleveryStoreyData.data[item];
}
}
}
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;
if (data === null) {
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;
axLegend.assetData.Point = new PIXI.Point(axLegend.x, axLegend.y);
this.emit('createIcon', axLegend);
} else {
var axLegend = new AxLegend(data, this, shapeMap);
}
}
// /**
// * 清空画布

Write Preview
Loading…
Cancel
Save