shaojiahao
/
examSystem-Anxin
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

新的选中效果和编辑效果

master
徐振升 4 years ago
parent
99f15a9008
commit
7d0cdf6b37
7 changed files with 194 additions and 232 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. 41
      src/app/working-area/model/axArrowConnector.ts
  3. 73
      src/app/working-area/model/axImageShape.ts
  4. 34
      src/app/working-area/model/axShape.ts
  5. 93
      src/app/working-area/model/multipointIcon.ts
  6. 131
      src/app/working-area/model/polygonIcon.ts
  7. 53
      src/app/working-area/working-area.component.ts

1
debug.log
Unescape View File

@ -3,3 +3,4 @@
[1226/082525.401:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
[0104/111348.201:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
[0104/133113.885:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
[0105/083228.618:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)

41
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;
@ -64,29 +62,30 @@ export class AxArrowConnector extends AxShape {
});
this.pointSprites.forEach((value, index, array) => {
value.interactive = true;
value.on('mousedown', event => {
event.stopPropagation();
if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
event.currentTarget.data = event.data;
event.currentTarget.alpha = 0.5;
event.currentTarget.dragging = true;
}
})
.on('mouseup', event => {
value
.on('pointerdown', event => {
event.stopPropagation();
if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
event.currentTarget.data = event.data;
event.currentTarget.alpha = 0.5;
event.currentTarget.dragging = true;
}
})
.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;
@ -96,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);
});
}
/**
* 刷新形状
@ -122,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;

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

@ -13,7 +13,6 @@ import { AxArrowConnector } from './axArrowConnector';
* AxImageShape
*/
export class AxImageShape extends AxShape {
pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png')
connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png');
style = new PIXI.TextStyle({
fontFamily: 'Arial',
@ -72,27 +71,30 @@ export class AxImageShape extends AxShape {
this.addChild(this.selectionBox);
////
let rect = this.getLocalBounds();
// up-left
this.upLeft = new PIXI.Sprite(this.pointTexture);
this.upLeft.anchor.set(0.5);
this.addChild(this.upLeft);
this.upLeft.interactive = true;
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;
////
@ -106,16 +108,17 @@ 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);
});
});
this.showConnectionPoint(false);
}
}
// 设置选择框
@ -137,14 +140,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) {

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

@ -8,6 +8,7 @@ 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;
@ -131,7 +132,7 @@ export class AxShape extends Container {
* @param rect 画边框
*/
public drawBorder(scale: number) {
if (this.visible === false) { return;}
scale = this.assetData.FixedSize ? 1 : scale;
this.border.clear();
const rect = this.getLocalBounds();
const p1 = new PIXI.Point(rect.left, rect.top);
@ -187,5 +188,34 @@ export class AxShape extends Container {
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)
}
}

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,23 +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.text.visible = this.showName;
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);
@ -84,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;
@ -92,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;
@ -129,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;
@ -165,61 +160,12 @@ export class MultipointIcon extends AxShape {
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 => {
// });
// });
}
/**
* 设置点显示状态
@ -236,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);

131
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,10 +67,10 @@ 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);
@ -81,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;
@ -89,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;
@ -117,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 => {
@ -134,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) {
@ -142,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;
// }
// });
}
/**
* 设置点显示状态
@ -210,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);
}
/**
* 获取点集合
*/

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

@ -262,6 +262,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
if (this.circleShadow !== null && this.backgroundImage !== null) {
this.circleShadow.position = this.backgroundImage.toLocal(this.mousePosition);
this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position);
this.refreshPreviewPoint();
}
/**
* 显示框选
@ -301,43 +302,31 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.on('deselect', shape => {
if (shape instanceof AxShape) {
shape.hideBorder();
shape.setPointVisiable(this.allowEdit);
shape.setPointVisiable(false);
}
});
/**
* 根据背景缩放事件
*/
this.on('backgroundScale', scale => {
const data = 1 / 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);
}
item.setItemScale(data);
item.drawBorder(data);
} else if (item instanceof MultipointIcon) {
const data = 1 / scale;
item.text.scale.set(data);
item.setItemScale(data);
item.drawBorder(data);
} else if (item instanceof PolygonIcon) {
const data = 1 / scale;
item.text.scale.set(data);
item.pointsGraphics.forEach(point => {
point.scale.set(data);
});
item.setItemScale(data);
item.drawBorder(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);
});
item.setItemScale(data);
item.drawBorder(data);
}
});
});
/**
* 创建图标事件（数据处理）
@ -476,6 +465,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* 创建楼层图形
*/
public createFloorShape(floorData: any) {
if (floorData === undefined || floorData === null) return;
Object.keys(floorData).forEach((key) => {
switch (floorData[key].InteractiveMode) {
case 0:
@ -931,7 +921,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 );
}
@ -940,12 +930,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) {
@ -1167,7 +1166,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
});
this.emit('backgroundScale', this.backgroundImage.scale.x);
}
////////////////////////////////////////////////////////////////////////通过/////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////通用/////////////////////////////////////////////////////////////////////////////
/**
*
* @param id 图标ID

Write Preview
Loading…
Cancel
Save