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

适应缩放 

重置缩放
develop
徐振升 4 years ago
parent
3c9532120e
commit
e1f902a064
1 changed files with 56 additions and 101 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. 157
      src/app/working-area/working-area.component.ts

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

@ -36,6 +36,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
constructor(private eventManager: EventManager, public canvasData: CanvasShareDataService) {
super();
console.log('组件构造函数');
}
@ViewChild('content')
@ -162,6 +163,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* 数据初始化
*/
ngOnInit(): void {
console.log('组件OnInit');
PIXI.utils.skipHello();
this.sayHello();
this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => {
@ -175,6 +177,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
});
}
ngOnDestroy(): void {
console.log('组件OnDestroy');
this.selection.clear();
this.camera2D.destroy();
this.app.destroy();
@ -344,7 +347,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
worldHeight: 20000,
interaction: this.app.renderer.plugins.interaction,
});
this.camera2D.pivot.set(0.5);
this.camera2D.position = new PIXI.Point(0, 0);
this.app.stage.addChild(this.camera2D);
this.camera2D
@ -451,7 +455,43 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.grid2D.updateGrid();
this.resizeItem(1 / this.camera2D.scale.x);
}
/**
* 重置相机
*/
private resetCamera2D() {
this.camera2D.scale.set(1);
this.camera2D.x = (this.app.view.width - this.backgroundImage.width) / 2;
this.camera2D.y = (this.app.view.height - this.backgroundImage.height) / 2;
this.updateCamera2D();
}
/**
* 缩放适应
*/
public zoomFit() {
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;
const wScale = appWidth / imageWidth;
const hScale = appHeight / imageHeight;
let scale = wScale < hScale ? wScale : hScale;
if (scale < 0.12) {
scale = 0.12;
}
if (scale > 16) {
scale = 16;
}
this.camera2D.scale.set(scale);
if (wScale < hScale) {
this.camera2D.x = 470 / 2;
this.camera2D.y = (appHeight - (imageHeight * this.camera2D.scale.y)) / 2;
} else {
this.camera2D.x = 470 / 2 + (appWidth - (imageWidth * this.camera2D.scale.x)) / 2;
this.camera2D.y = 0;
}
this.updateCamera2D();
}
/**
* 创建2D网格
*/
@ -531,27 +571,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.canvasData.isChange = true;
this.updateCamera2D();
});
// ///
// 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;
/**
* 重置画布
*/
@ -699,23 +719,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
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.interactive = true;
this.backgroundImage.name = 'background';
// 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 scale = wScale < hScale
// ? wScale
// : hScale;
// this.backgroundImage.scale.set(scale);
this.backgroundImage.sortableChildren = true;
this.backgroundImage
.on('pointerdown', event => {
@ -919,47 +924,14 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
// }
})
.on('pointerup', event => {
// 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);
// }
})
.on('pointerupoutside', event => {
// if (this.isMove) {
// event.currentTarget.data = null;
// }
})
.on('pointermove', event => {
// 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();
// this.deselectAll();
// this.setPaintMode(PaintMode.endPaint);
// })
.on('pointerover', (event) => {
if (this.previewImage !== null
&& this.paintMode === PaintMode.singlePointIcon) {
@ -980,6 +952,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.backgroundImage.addChild(this.paintingLine);
}
/**
* 判断矩形一是否包含矩形二
* @param rect1 矩形一
* @param rect2 矩形二
*/
public isOverlap(rect1, rect2): boolean {
const l1 = { x: rect1.x, y: rect1.y };
const r1 = { x: rect1.x + rect1.width, y: rect1.y + rect1.height };
@ -1002,43 +979,21 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
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;
if (imageUrl === undefined || imageUrl === null || imageUrl === '') {
this.backgroundImage.texture = this.backgroundTexture;
} else {
this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl);
}
this.backgroundImage.x = this.backgroundImage.width/2;
this.backgroundImage.y = this.backgroundImage.height/2;
this.backgroundImage.x = this.backgroundImage.width / 2;
this.backgroundImage.y = this.backgroundImage.height / 2;
this.backgroundImage.angle = imageAngle;
// 等待图片加载完成
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;
const wScale = appWidth / imageWidth;
const hScale = appHeight / imageHeight;
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.visible = true;
this.backgroundImage.children.forEach((item) => {
if (item instanceof AxShape) {
item.refresh();
}
});
this.resetCamera2D();
// this.backgroundImage.children.forEach((item) => {
// if (item instanceof AxShape) {
// item.refresh();
// }
// });
}
/**
* 刷新

Write Preview
Loading…
Cancel
Save