|
|
|
|
@ -19,6 +19,8 @@ import { AxLegend, Legend } from './model/axLegend';
|
|
|
|
|
import { AxGrid } from './model/axGrid'; |
|
|
|
|
import { AxSelection } from './model/axSelection'; |
|
|
|
|
import { AxMessageSystem } from './model/axMessageSystem'; |
|
|
|
|
import { Grid2D } from './model/grid2D'; |
|
|
|
|
import { Viewport } from 'pixi-viewport'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@Component({ |
|
|
|
|
@ -44,7 +46,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
/** |
|
|
|
|
* pixijs 程序 |
|
|
|
|
*/ |
|
|
|
|
public app: PIXI.Application; |
|
|
|
|
public app: PIXI.Application = null; |
|
|
|
|
/** |
|
|
|
|
* 相机 |
|
|
|
|
*/ |
|
|
|
|
public camera2D: Viewport = null; |
|
|
|
|
/** |
|
|
|
|
* 网格 |
|
|
|
|
*/ |
|
|
|
|
public grid2D: Grid2D = null; |
|
|
|
|
/** |
|
|
|
|
* 资源加载器 |
|
|
|
|
*/ |
|
|
|
|
@ -137,13 +147,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
public animation; |
|
|
|
|
public animationIcon; |
|
|
|
|
public animationTime; |
|
|
|
|
/** |
|
|
|
|
* 网格 |
|
|
|
|
*/ |
|
|
|
|
public grid: AxGrid = null; |
|
|
|
|
// 是否按下Ctrl键
|
|
|
|
|
isCtrlKeyClicked = false; |
|
|
|
|
isMove = false; |
|
|
|
|
/** |
|
|
|
|
* 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta |
|
|
|
|
* Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。 |
|
|
|
|
@ -151,7 +156,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
* RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。 |
|
|
|
|
* Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。 |
|
|
|
|
*/ |
|
|
|
|
public VERSION = '1.0.13.20210126_beta'; |
|
|
|
|
public VERSION = '1.0.14.20210202_beta'; |
|
|
|
|
/** |
|
|
|
|
* 数据初始化 |
|
|
|
|
*/ |
|
|
|
|
@ -181,10 +186,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
public setMulitSelect(b: boolean) { |
|
|
|
|
if (b) { |
|
|
|
|
this.isCtrlKeyClicked = true; |
|
|
|
|
this.camera2D.plugins.pause('drag'); |
|
|
|
|
} else { |
|
|
|
|
this.isCtrlKeyClicked = false; |
|
|
|
|
this.rectToolGraphics.visible = false; |
|
|
|
|
this.rectToolGraphics.clear(); |
|
|
|
|
this.camera2D.drag(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
@ -258,44 +263,44 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* |
|
|
|
|
* @param event 鼠标滑动事件 |
|
|
|
|
*/ |
|
|
|
|
public mouseWheelHandel(event) { |
|
|
|
|
const delX = this.mousePosition.x - this.backgroundImage.position.x; |
|
|
|
|
const delY = this.mousePosition.y - this.backgroundImage.position.y; |
|
|
|
|
const pivot = this.backgroundImage.toLocal(this.mousePosition); |
|
|
|
|
const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); |
|
|
|
|
if (delta > 0) { |
|
|
|
|
if (this.backgroundImage.scale.x >= 32) { |
|
|
|
|
this.backgroundImage.scale.x = 32; |
|
|
|
|
this.backgroundImage.scale.y = 32; |
|
|
|
|
this.resizeItem(1 / this.backgroundImage.scale.x); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
this.backgroundImage.pivot.set(pivot.x, pivot.y); |
|
|
|
|
* @param event 鼠标滑动事件,改用ViewPort控制 |
|
|
|
|
*/ |
|
|
|
|
// public mouseWheelHandel(event) {
|
|
|
|
|
// const delX = this.mousePosition.x - this.backgroundImage.position.x;
|
|
|
|
|
// const delY = this.mousePosition.y - this.backgroundImage.position.y;
|
|
|
|
|
// const pivot = this.backgroundImage.toLocal(this.mousePosition);
|
|
|
|
|
// const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
|
|
|
|
|
// if (delta > 0) {
|
|
|
|
|
// if (this.backgroundImage.scale.x >= 32) {
|
|
|
|
|
// this.backgroundImage.scale.x = 32;
|
|
|
|
|
// this.backgroundImage.scale.y = 32;
|
|
|
|
|
// this.resizeItem(1 / this.backgroundImage.scale.x);
|
|
|
|
|
// return;
|
|
|
|
|
// }
|
|
|
|
|
// this.backgroundImage.pivot.set(pivot.x, pivot.y);
|
|
|
|
|
|
|
|
|
|
this.backgroundImage.scale.x += this.backgroundImage.scale.x * 0.1; |
|
|
|
|
this.backgroundImage.scale.y += this.backgroundImage.scale.y * 0.1; |
|
|
|
|
// this.backgroundImage.scale.x += this.backgroundImage.scale.x * 0.1;
|
|
|
|
|
// this.backgroundImage.scale.y += this.backgroundImage.scale.y * 0.1;
|
|
|
|
|
|
|
|
|
|
this.backgroundImage.position.x += delX; |
|
|
|
|
this.backgroundImage.position.y += delY; |
|
|
|
|
} else if (delta < 0) { |
|
|
|
|
if (this.backgroundImage.scale.x <= 0.1) { |
|
|
|
|
this.backgroundImage.scale.x = 0.1; |
|
|
|
|
this.backgroundImage.scale.y = 0.1; |
|
|
|
|
this.resizeItem(1 / this.backgroundImage.scale.x); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
this.backgroundImage.pivot.set(pivot.x, pivot.y); |
|
|
|
|
// this.backgroundImage.position.x += delX;
|
|
|
|
|
// this.backgroundImage.position.y += delY;
|
|
|
|
|
// } else if (delta < 0) {
|
|
|
|
|
// if (this.backgroundImage.scale.x <= 0.1) {
|
|
|
|
|
// this.backgroundImage.scale.x = 0.1;
|
|
|
|
|
// this.backgroundImage.scale.y = 0.1;
|
|
|
|
|
// this.resizeItem(1 / this.backgroundImage.scale.x);
|
|
|
|
|
// return;
|
|
|
|
|
// }
|
|
|
|
|
// this.backgroundImage.pivot.set(pivot.x, pivot.y);
|
|
|
|
|
|
|
|
|
|
this.backgroundImage.scale.x -= this.backgroundImage.scale.x * 0.1; |
|
|
|
|
this.backgroundImage.scale.y -= this.backgroundImage.scale.y * 0.1; |
|
|
|
|
// this.backgroundImage.scale.x -= this.backgroundImage.scale.x * 0.1;
|
|
|
|
|
// this.backgroundImage.scale.y -= this.backgroundImage.scale.y * 0.1;
|
|
|
|
|
|
|
|
|
|
this.backgroundImage.position.x += delX; |
|
|
|
|
this.backgroundImage.position.y += delY; |
|
|
|
|
} |
|
|
|
|
this.resizeItem(1 / this.backgroundImage.scale.x); |
|
|
|
|
} |
|
|
|
|
// this.backgroundImage.position.x += delX;
|
|
|
|
|
// this.backgroundImage.position.y += delY;
|
|
|
|
|
// }
|
|
|
|
|
// this.resizeItem(1 / this.backgroundImage.scale.x);
|
|
|
|
|
// }
|
|
|
|
|
// 重置图形缩放
|
|
|
|
|
public resizeItem(size: number) { |
|
|
|
|
this.backgroundImage.children.forEach(item => { |
|
|
|
|
@ -307,27 +312,149 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* |
|
|
|
|
* @param icon 移动到选中车辆到屏幕中心点 |
|
|
|
|
*/ |
|
|
|
|
public moveIconToScreenCenter(icon) { |
|
|
|
|
if (icon.parent === this.backgroundImage && ( |
|
|
|
|
icon.assetData.Type === 1 || |
|
|
|
|
icon.assetData.Type === 2 || |
|
|
|
|
icon.assetData.Type === 3 || |
|
|
|
|
icon.assetData.Type === 4 |
|
|
|
|
)) { |
|
|
|
|
this.backgroundImage.pivot.set(icon.x, icon.y); |
|
|
|
|
this.backgroundImage.position.set(771, 404); |
|
|
|
|
clearTimeout(this.animationTime); |
|
|
|
|
this.animation?.pause(); |
|
|
|
|
this.animationIcon?.scale.set(1); |
|
|
|
|
this.animation = this.animator.breathe(icon, 10, 10, 30, true, 0); |
|
|
|
|
this.animationIcon = icon; |
|
|
|
|
this.animationTime = setTimeout(() => { |
|
|
|
|
this.animation?.pause(); |
|
|
|
|
this.animationIcon?.scale.set(1); |
|
|
|
|
}, 5000); |
|
|
|
|
* @param icon 移动到选中车辆到屏幕中心点，改用Viewport控制 |
|
|
|
|
*/ |
|
|
|
|
// public moveIconToScreenCenter(icon) {
|
|
|
|
|
// if (icon.parent === this.backgroundImage && (
|
|
|
|
|
// icon.assetData.Type === 1 ||
|
|
|
|
|
// icon.assetData.Type === 2 ||
|
|
|
|
|
// icon.assetData.Type === 3 ||
|
|
|
|
|
// icon.assetData.Type === 4
|
|
|
|
|
// )) {
|
|
|
|
|
// this.backgroundImage.pivot.set(icon.x, icon.y);
|
|
|
|
|
// this.backgroundImage.position.set(771, 404);
|
|
|
|
|
// clearTimeout(this.animationTime);
|
|
|
|
|
// this.animation?.pause();
|
|
|
|
|
// this.animationIcon?.scale.set(1);
|
|
|
|
|
// this.animation = this.animator.breathe(icon, 10, 10, 30, true, 0);
|
|
|
|
|
// this.animationIcon = icon;
|
|
|
|
|
// this.animationTime = setTimeout(() => {
|
|
|
|
|
// this.animation?.pause();
|
|
|
|
|
// this.animationIcon?.scale.set(1);
|
|
|
|
|
// }, 5000);
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* 创建2D相机 |
|
|
|
|
*/ |
|
|
|
|
private createViewport(): void { |
|
|
|
|
this.camera2D = new Viewport({ |
|
|
|
|
screenWidth: this.app.view.width, |
|
|
|
|
screenHeight: this.app.view.height, |
|
|
|
|
worldWidth: 20000, |
|
|
|
|
worldHeight: 20000, |
|
|
|
|
interaction: this.app.renderer.plugins.interaction, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.app.stage.addChild(this.camera2D); |
|
|
|
|
|
|
|
|
|
this.camera2D |
|
|
|
|
.clamp({ |
|
|
|
|
left: -10000, |
|
|
|
|
right: 10000, |
|
|
|
|
top: -10000, |
|
|
|
|
bottom: 10000, |
|
|
|
|
}) |
|
|
|
|
.drag() |
|
|
|
|
.pinch() |
|
|
|
|
.wheel() |
|
|
|
|
.clampZoom({ |
|
|
|
|
minScale: 0.12, |
|
|
|
|
maxScale: 16, |
|
|
|
|
}) |
|
|
|
|
.decelerate(); |
|
|
|
|
|
|
|
|
|
this.camera2D.on('wheel', event => { |
|
|
|
|
this.updateCamera2D(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.camera2D.on('pointerdown', event => { |
|
|
|
|
if (this.isCtrlKeyClicked === true) { |
|
|
|
|
this.rectToolGraphics.visible = true; |
|
|
|
|
this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); |
|
|
|
|
this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.camera2D.on('pointerup', event => { |
|
|
|
|
if (this.isCtrlKeyClicked === true) { |
|
|
|
|
this.rectToolGraphics.visible = false; |
|
|
|
|
const shapes: AxShape[] = []; |
|
|
|
|
this.backgroundImage.children.forEach(item => { |
|
|
|
|
if ( item instanceof AxShape |
|
|
|
|
&& item instanceof AxPreviewImageShape === false) { |
|
|
|
|
// 判断2个矩形是否相交
|
|
|
|
|
const rect1 = this.rectToolGraphics.getBounds(); |
|
|
|
|
const rect2 = item.getBounds(); |
|
|
|
|
if (this.isOverlap(rect1, rect2)) { |
|
|
|
|
shapes.push(item); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.rectToolGraphics.clear(); |
|
|
|
|
this.selectAll(shapes); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.camera2D.on('pointerupoutside', event => { |
|
|
|
|
if (this.isCtrlKeyClicked === true) { |
|
|
|
|
this.rectToolGraphics.visible = false; |
|
|
|
|
const shapes: AxShape[] = []; |
|
|
|
|
this.backgroundImage.children.forEach(item => { |
|
|
|
|
if ( item instanceof AxShape |
|
|
|
|
&& item instanceof AxPreviewImageShape === false) { |
|
|
|
|
// 判断2个矩形是否相交
|
|
|
|
|
const rect1 = this.rectToolGraphics.getBounds(); |
|
|
|
|
const rect2 = item.getBounds(); |
|
|
|
|
if (this.isOverlap(rect1, rect2)) { |
|
|
|
|
shapes.push(item); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.rectToolGraphics.clear(); |
|
|
|
|
this.selectAll(shapes); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.camera2D.on('pointermove', event => { |
|
|
|
|
if (this.isCtrlKeyClicked === true |
|
|
|
|
&& this.rectToolGraphics.visible === true) { |
|
|
|
|
this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); |
|
|
|
|
|
|
|
|
|
const init = this.initialScreenMousePos; |
|
|
|
|
const final = this.finalScreenMousePos; |
|
|
|
|
|
|
|
|
|
this.rectToolGraphics.clear(); |
|
|
|
|
this.rectToolGraphics.lineStyle(2, 0x00ff00, 1); |
|
|
|
|
this.rectToolGraphics.beginFill(0xccccf2, 0.25); |
|
|
|
|
if (final.x > init.x && final.y > init.y) { |
|
|
|
|
this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y); |
|
|
|
|
} else if (final.x > init.x && final.y < init.y) { |
|
|
|
|
this.rectToolGraphics.drawRect(init.x, final.y, final.x - init.x, init.y - final.y); |
|
|
|
|
} else if (final.x < init.x && final.y > init.y) { |
|
|
|
|
this.rectToolGraphics.drawRect(final.x, init.y, init.x - final.x, final.y - init.y); |
|
|
|
|
} else if (final.x < init.x && final.y < init.y) { |
|
|
|
|
this.rectToolGraphics.drawRect(final.x, final.y, init.x - final.x, init.y - final.y); |
|
|
|
|
} |
|
|
|
|
this.rectToolGraphics.endFill(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 更新2D相机 |
|
|
|
|
*/ |
|
|
|
|
private updateCamera2D() { |
|
|
|
|
this.grid2D.updateGrid(); |
|
|
|
|
this.resizeItem(1 / this.camera2D.scale.x); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* 创建2D网格 |
|
|
|
|
*/ |
|
|
|
|
private createGrid2D(): void { |
|
|
|
|
this.grid2D = new Grid2D(this.camera2D, null); |
|
|
|
|
|
|
|
|
|
this.camera2D.addChild(this.grid2D); |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 创建画布 |
|
|
|
|
@ -344,20 +471,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
this.content.nativeElement.appendChild(this.app.view); |
|
|
|
|
this.app.view.style.border = '1px dashed blue'; |
|
|
|
|
this.animator = new Charm(PIXI); |
|
|
|
|
// 创建网格
|
|
|
|
|
this.grid = new AxGrid(this.app.view.width, null, { color: 0xffffff }, true, true); |
|
|
|
|
// this.grid.x = (this.app.view.width / 2) - (this.grid.gridWidth / 2);
|
|
|
|
|
// this.grid.y = (this.app.view.height / 2) - (this.grid.gridWidth / 2);
|
|
|
|
|
// this.grid.pivot.set(0.5);
|
|
|
|
|
this.grid.x = this.app.stage.x; |
|
|
|
|
this.grid.y = this.app.stage.y; |
|
|
|
|
this.app.stage.addChild(this.grid); |
|
|
|
|
this.grid.drawGrid(); |
|
|
|
|
this.grid.onMousemove = (evt, gridCoord) => { |
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
this.createViewport(); |
|
|
|
|
this.createGrid2D(); |
|
|
|
|
this.createBackgroundImage(); |
|
|
|
|
|
|
|
|
|
this.app.ticker.add((delta) => { |
|
|
|
|
this.animator.update(); |
|
|
|
|
this.mousePosition = this.app.renderer.plugins.interaction.mouse.global; |
|
|
|
|
@ -371,28 +489,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position); |
|
|
|
|
this.refreshPreviewPoint(); |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 显示框选 |
|
|
|
|
*/ |
|
|
|
|
if (this.rectToolGraphics.visible === true) { |
|
|
|
|
// /**
|
|
|
|
|
// * 显示框选
|
|
|
|
|
// */
|
|
|
|
|
// if (this.rectToolGraphics.visible === true) {
|
|
|
|
|
|
|
|
|
|
const init = this.initialScreenMousePos; |
|
|
|
|
const final = this.finalScreenMousePos; |
|
|
|
|
// const init = this.initialScreenMousePos;
|
|
|
|
|
// const final = this.finalScreenMousePos;
|
|
|
|
|
|
|
|
|
|
this.rectToolGraphics.clear(); |
|
|
|
|
this.rectToolGraphics.lineStyle(2, 0x00ff00, 1); |
|
|
|
|
this.rectToolGraphics.beginFill(0xccccf2, 0.25); |
|
|
|
|
if (final.x > init.x && final.y > init.y) { |
|
|
|
|
this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y); |
|
|
|
|
} else if (final.x > init.x && final.y < init.y) { |
|
|
|
|
this.rectToolGraphics.drawRect(init.x, final.y, final.x - init.x, init.y - final.y); |
|
|
|
|
} else if (final.x < init.x && final.y > init.y) { |
|
|
|
|
this.rectToolGraphics.drawRect(final.x, init.y, init.x - final.x, final.y - init.y); |
|
|
|
|
} else if (final.x < init.x && final.y < init.y) { |
|
|
|
|
this.rectToolGraphics.drawRect(final.x, final.y, init.x - final.x, init.y - final.y); |
|
|
|
|
} |
|
|
|
|
this.rectToolGraphics.endFill(); |
|
|
|
|
} |
|
|
|
|
// this.rectToolGraphics.clear();
|
|
|
|
|
// this.rectToolGraphics.lineStyle(2, 0x00ff00, 1);
|
|
|
|
|
// this.rectToolGraphics.beginFill(0xccccf2, 0.25);
|
|
|
|
|
// if (final.x > init.x && final.y > init.y) {
|
|
|
|
|
// this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y);
|
|
|
|
|
// } else if (final.x > init.x && final.y < init.y) {
|
|
|
|
|
// this.rectToolGraphics.drawRect(init.x, final.y, final.x - init.x, init.y - final.y);
|
|
|
|
|
// } else if (final.x < init.x && final.y > init.y) {
|
|
|
|
|
// this.rectToolGraphics.drawRect(final.x, init.y, init.x - final.x, final.y - init.y);
|
|
|
|
|
// } else if (final.x < init.x && final.y < init.y) {
|
|
|
|
|
// this.rectToolGraphics.drawRect(final.x, final.y, init.x - final.x, init.y - final.y);
|
|
|
|
|
// }
|
|
|
|
|
// this.rectToolGraphics.endFill();
|
|
|
|
|
// }
|
|
|
|
|
}); |
|
|
|
|
/** |
|
|
|
|
* 创建图标事件（数据处理） |
|
|
|
|
@ -432,7 +550,27 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
this.emit('canvasDataChanged'); |
|
|
|
|
this.canvasData.isChange = true; |
|
|
|
|
}); |
|
|
|
|
// ///
|
|
|
|
|
// this.app.renderer.plugins.interaction.on('pointerdown', (event) => {
|
|
|
|
|
// if (event.data.button !== 2) { return };
|
|
|
|
|
// this.dragFlag = true;
|
|
|
|
|
// this.startPoint = { x: event.data.global.x, y: event.data.global.y };
|
|
|
|
|
// });
|
|
|
|
|
// this.app.renderer.plugins.interaction.on('pointermove', (event) => {
|
|
|
|
|
// if (this.dragFlag) {
|
|
|
|
|
// const dx = event.data.global.x - this.startPoint.x;
|
|
|
|
|
// const dy = event.data.global.y - this.startPoint.y;
|
|
|
|
|
// this.app.stage.position.x += dx;
|
|
|
|
|
// this.app.stage.position.y += dy;
|
|
|
|
|
// this.startPoint = { x: event.data.global.x, y: event.data.global.y };
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// this.app.renderer.plugins.interaction.on('pointerup', (event) => {
|
|
|
|
|
// this.dragFlag = false;
|
|
|
|
|
// });
|
|
|
|
|
} |
|
|
|
|
// dragFlag;
|
|
|
|
|
// startPoint;
|
|
|
|
|
/** |
|
|
|
|
* 重置画布 |
|
|
|
|
*/ |
|
|
|
|
@ -602,13 +740,8 @@ 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 (!this.isMove && this.isCtrlKeyClicked === false) { |
|
|
|
|
event.currentTarget.data = event.data; |
|
|
|
|
this.isMove = true; |
|
|
|
|
event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); |
|
|
|
|
event.currentTarget.dragPoint.x -= event.currentTarget.x; |
|
|
|
|
event.currentTarget.dragPoint.y -= event.currentTarget.y; |
|
|
|
|
// console.log(this.backgroundImage.toLocal(this.mousePosition));
|
|
|
|
|
if (this.isCtrlKeyClicked === false) { |
|
|
|
|
switch (this.paintMode) { |
|
|
|
|
case PaintMode.endPaint: |
|
|
|
|
break; |
|
|
|
|
@ -799,51 +932,49 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
// this.emit('backgroundScale', this.backgroundImage.scale.x);
|
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
} else if (!this.isMove && this.isCtrlKeyClicked === true) { |
|
|
|
|
this.rectToolGraphics.visible = true; |
|
|
|
|
this.isMove = true; |
|
|
|
|
this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); |
|
|
|
|
this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); |
|
|
|
|
} |
|
|
|
|
// else if (this.isCtrlKeyClicked === true) {
|
|
|
|
|
// this.rectToolGraphics.visible = true;
|
|
|
|
|
// this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
|
|
|
|
|
// this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
|
|
|
|
|
// }
|
|
|
|
|
}) |
|
|
|
|
.on('pointerup', event => { |
|
|
|
|
this.isMove = false; |
|
|
|
|
event.currentTarget.data = null; |
|
|
|
|
// event.currentTarget.data = null;
|
|
|
|
|
|
|
|
|
|
if (this.rectToolGraphics.visible === true) { |
|
|
|
|
const shapes: AxShape[] = []; |
|
|
|
|
this.backgroundImage.children.forEach(item => { |
|
|
|
|
if ( item instanceof AxShape |
|
|
|
|
&& item instanceof AxPreviewImageShape === false) { |
|
|
|
|
// 判断2个矩形是否相交
|
|
|
|
|
const rect1 = this.rectToolGraphics.getBounds(); |
|
|
|
|
const rect2 = item.getBounds(); |
|
|
|
|
if (this.isOverlap(rect1, rect2)) { |
|
|
|
|
shapes.push(item); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.rectToolGraphics.clear(); |
|
|
|
|
this.rectToolGraphics.visible = false; |
|
|
|
|
this.selectAll(shapes); |
|
|
|
|
} |
|
|
|
|
// if (this.rectToolGraphics.visible === true) {
|
|
|
|
|
// const shapes: AxShape[] = [];
|
|
|
|
|
// this.backgroundImage.children.forEach(item => {
|
|
|
|
|
// if ( item instanceof AxShape
|
|
|
|
|
// && item instanceof AxPreviewImageShape === false) {
|
|
|
|
|
// // 判断2个矩形是否相交
|
|
|
|
|
// const rect1 = this.rectToolGraphics.getBounds();
|
|
|
|
|
// const rect2 = item.getBounds();
|
|
|
|
|
// if (this.isOverlap(rect1, rect2)) {
|
|
|
|
|
// shapes.push(item);
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// this.rectToolGraphics.clear();
|
|
|
|
|
// this.rectToolGraphics.visible = false;
|
|
|
|
|
// this.selectAll(shapes);
|
|
|
|
|
// }
|
|
|
|
|
}) |
|
|
|
|
.on('pointerupoutside', event => { |
|
|
|
|
if (this.isMove) { |
|
|
|
|
this.isMove = false; |
|
|
|
|
event.currentTarget.data = null; |
|
|
|
|
} |
|
|
|
|
// if (this.isMove) {
|
|
|
|
|
// event.currentTarget.data = null;
|
|
|
|
|
// }
|
|
|
|
|
}) |
|
|
|
|
.on('pointermove', event => { |
|
|
|
|
if (this.isMove && this.isCtrlKeyClicked === false) { |
|
|
|
|
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); |
|
|
|
|
event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x; |
|
|
|
|
event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y; |
|
|
|
|
} else if (this.isMove && this.isCtrlKeyClicked === true) { |
|
|
|
|
if (this.rectToolGraphics.visible === true) { |
|
|
|
|
this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// if (this.isCtrlKeyClicked === false) {
|
|
|
|
|
// // const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
|
|
|
|
|
// // event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x;
|
|
|
|
|
// // event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y;
|
|
|
|
|
// } else if (this.isCtrlKeyClicked === true) {
|
|
|
|
|
// if (this.rectToolGraphics.visible === true) {
|
|
|
|
|
// this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
}) |
|
|
|
|
.on('rightclick', event => { |
|
|
|
|
event.stopPropagation(); |
|
|
|
|
@ -862,7 +993,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
this.previewImage.visible = false; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.app.stage.addChild(this.backgroundImage); |
|
|
|
|
this.camera2D.addChild(this.backgroundImage); |
|
|
|
|
this.createPreviewImage(); |
|
|
|
|
this.createPreviewLineSegment(); |
|
|
|
|
this.createCircleShadow(); |
|
|
|
|
@ -887,19 +1018,22 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
/** |
|
|
|
|
* 刷新背景图 |
|
|
|
|
*/ |
|
|
|
|
public async refreshBackgroundImage(imageUrl: string, imageAngle: number): Promise<void> { |
|
|
|
|
public async refreshBackgroundImage(imageUrl: string = this.canvasData.selectStorey.imageUrl, imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise<void> { |
|
|
|
|
if (imageAngle === undefined || imageAngle === null) { |
|
|
|
|
imageAngle = 0; |
|
|
|
|
} |
|
|
|
|
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.x = this.app.view.width / 2;
|
|
|
|
|
// this.backgroundImage.y = this.app.view.height / 2;
|
|
|
|
|
if (imageUrl === undefined || imageUrl === null || imageUrl === '') { |
|
|
|
|
this.backgroundImage.texture = this.backgroundTexture; |
|
|
|
|
} else { |
|
|
|
|
this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); |
|
|
|
|
console.log(imageUrl); |
|
|
|
|
} |
|
|
|
|
this.backgroundImage.x = this.backgroundImage.width/2; |
|
|
|
|
this.backgroundImage.y = this.backgroundImage.height/2; |
|
|
|
|
this.backgroundImage.angle = imageAngle; |
|
|
|
|
// 等待图片加载完成
|
|
|
|
|
const imageWidth = this.backgroundImage.texture.width; |
|
|
|
|
@ -908,9 +1042,19 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
const appHeight = this.app.view.height; |
|
|
|
|
const wScale = appWidth / imageWidth; |
|
|
|
|
const hScale = appHeight / imageHeight; |
|
|
|
|
const scale = wScale < hScale ? wScale : hScale; |
|
|
|
|
let scale = wScale < hScale ? wScale : hScale; |
|
|
|
|
|
|
|
|
|
if (scale < 0.12) { |
|
|
|
|
scale = 0.12; |
|
|
|
|
} |
|
|
|
|
if (scale > 16) { |
|
|
|
|
scale = 16; |
|
|
|
|
} |
|
|
|
|
this.camera2D.scale.set(scale); |
|
|
|
|
this.camera2D.x = 235; |
|
|
|
|
this.camera2D.y = 0; |
|
|
|
|
// 设置图片缩放
|
|
|
|
|
this.backgroundImage.scale.set(scale); |
|
|
|
|
// this.backgroundImage.scale.set(scale);
|
|
|
|
|
// this.backgroundImage.visible = true;
|
|
|
|
|
this.backgroundImage.children.forEach((item) => { |
|
|
|
|
if (item instanceof AxShape) { |
|
|
|
|
@ -944,6 +1088,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
// 创建处置预案图形
|
|
|
|
|
this.createNodeShape(this.canvasData.selectPanelPoint.Data); |
|
|
|
|
this.createAxLegend(); |
|
|
|
|
|
|
|
|
|
this.updateCamera2D(); |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 加载无关联信息处置预案 |
|
|
|
|
@ -965,6 +1111,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
}); |
|
|
|
|
// 创建处置预案图形
|
|
|
|
|
this.createNodeShape(this.canvasData.selectPanelPoint.Data); |
|
|
|
|
|
|
|
|
|
this.updateCamera2D(); |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 创建安信图例 |
|
|
|
|
@ -1351,6 +1499,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
this.createNodeShape(this.canvasData.selectPanelPoint.Data); |
|
|
|
|
// 隐藏图标
|
|
|
|
|
this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false); |
|
|
|
|
|
|
|
|
|
this.updateCamera2D(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
@ -1378,6 +1528,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
this.createNodeShape(this.canvasData.selectPanelPoint.Data); |
|
|
|
|
// 隐藏图标
|
|
|
|
|
this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false); |
|
|
|
|
|
|
|
|
|
this.updateCamera2D(); |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 考官点击楼层-创建试卷 |
|
|
|
|
@ -1402,6 +1554,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
this.createNodeShape(this.canvasData.selectPanelPoint.Data); |
|
|
|
|
// 隐藏图标
|
|
|
|
|
this.setNameVisible(false, 0); |
|
|
|
|
|
|
|
|
|
this.updateCamera2D(); |
|
|
|
|
} |
|
|
|
|
//////////////////////////////////////////////////////////////////// 选择逻辑
|
|
|
|
|
/** |
|
|
|
|
|
chenjingyu
4 years ago