shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

[优化]框选现在不再局限于背景图，而是整个可视区。

zhuzhou
徐振升 4 years ago
parent
dd8667c65a
commit
eb64b8e707
1 changed files with 133 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 207
      src/app/working-area/working-area.component.ts

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

@ -149,7 +149,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
public animationTime; public animationTime;
// 是否按下Ctrl键 // 是否按下Ctrl键
isCtrlKeyClicked = false; isCtrlKeyClicked = false;
isMove = false;
/** /**
* 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta * 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta
* Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。 * Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。
@ -157,7 +156,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。 * RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。
* Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。 * Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。
*/ */
public VERSION = '1.0.13.20210201_beta'; public VERSION = '1.0.14.20210202_beta';
/** /**
* 数据初始化 * 数据初始化
*/ */
@ -187,10 +186,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
public setMulitSelect(b: boolean) { public setMulitSelect(b: boolean) {
if (b) { if (b) {
this.isCtrlKeyClicked = true; this.isCtrlKeyClicked = true;
this.camera2D.plugins.pause('drag');
} else { } else {
this.isCtrlKeyClicked = false; this.isCtrlKeyClicked = false;
this.rectToolGraphics.visible = false; this.camera2D.drag();
this.rectToolGraphics.clear();
} }
} }
/** /**
@ -352,8 +351,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.app.stage.addChild(this.camera2D); this.app.stage.addChild(this.camera2D);
this.camera2D this.camera2D
.clamp( .clamp({
{
left: -10000, left: -10000,
right: 10000, right: 10000,
top: -10000, top: -10000,
@ -362,17 +360,85 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
.drag() .drag()
.pinch() .pinch()
.wheel() .wheel()
.clampZoom( .clampZoom({
{
minScale: 0.12, minScale: 0.12,
maxScale: 16, maxScale: 16,
} })
)
.decelerate(); .decelerate();
this.camera2D.on('wheel', event => { this.camera2D.on('wheel', event => {
this.updateCamera2D(); 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相机 * 更新2D相机
@ -423,28 +489,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position); this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position);
this.refreshPreviewPoint(); this.refreshPreviewPoint();
} }
/** // /**
* 显示框选 // * 显示框选
*/ // */
if (this.rectToolGraphics.visible === true) { // if (this.rectToolGraphics.visible === true) {
const init = this.initialScreenMousePos; // const init = this.initialScreenMousePos;
const final = this.finalScreenMousePos; // const final = this.finalScreenMousePos;
this.rectToolGraphics.clear(); // this.rectToolGraphics.clear();
this.rectToolGraphics.lineStyle(2, 0x00ff00, 1); // this.rectToolGraphics.lineStyle(2, 0x00ff00, 1);
this.rectToolGraphics.beginFill(0xccccf2, 0.25); // this.rectToolGraphics.beginFill(0xccccf2, 0.25);
if (final.x > init.x && final.y > init.y) { // if (final.x > init.x && final.y > init.y) {
this.rectToolGraphics.drawRect(init.x, init.y, 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) { // } 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); // 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) { // } 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); // 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) { // } 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.drawRect(final.x, final.y, init.x - final.x, init.y - final.y);
} // }
this.rectToolGraphics.endFill(); // this.rectToolGraphics.endFill();
} // }
}); });
/** /**
* 创建图标事件（数据处理） * 创建图标事件（数据处理）
@ -674,13 +740,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.backgroundImage this.backgroundImage
.on('pointerdown', event => { .on('pointerdown', event => {
if (event.data.button !== 0) { return; } if (event.data.button !== 0) { return; }
console.log(this.backgroundImage.toLocal(this.mousePosition)); // console.log(this.backgroundImage.toLocal(this.mousePosition));
if (!this.isMove && this.isCtrlKeyClicked === false) { if (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;
switch (this.paintMode) { switch (this.paintMode) {
case PaintMode.endPaint: case PaintMode.endPaint:
break; break;
@ -871,51 +932,49 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
// this.emit('backgroundScale', this.backgroundImage.scale.x); // this.emit('backgroundScale', this.backgroundImage.scale.x);
break; 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 => { .on('pointerup', event => {
this.isMove = false; // event.currentTarget.data = null;
event.currentTarget.data = null;
if (this.rectToolGraphics.visible === true) { // if (this.rectToolGraphics.visible === true) {
const shapes: AxShape[] = []; // const shapes: AxShape[] = [];
this.backgroundImage.children.forEach(item => { // this.backgroundImage.children.forEach(item => {
if ( item instanceof AxShape // if ( item instanceof AxShape
&& item instanceof AxPreviewImageShape === false) { // && item instanceof AxPreviewImageShape === false) {
// 判断2个矩形是否相交 // // 判断2个矩形是否相交
const rect1 = this.rectToolGraphics.getBounds(); // const rect1 = this.rectToolGraphics.getBounds();
const rect2 = item.getBounds(); // const rect2 = item.getBounds();
if (this.isOverlap(rect1, rect2)) { // if (this.isOverlap(rect1, rect2)) {
shapes.push(item); // shapes.push(item);
} // }
} // }
}); // });
this.rectToolGraphics.clear(); // this.rectToolGraphics.clear();
this.rectToolGraphics.visible = false; // this.rectToolGraphics.visible = false;
this.selectAll(shapes); // this.selectAll(shapes);
} // }
}) })
.on('pointerupoutside', event => { .on('pointerupoutside', event => {
if (this.isMove) { // if (this.isMove) {
this.isMove = false; // event.currentTarget.data = null;
event.currentTarget.data = null; // }
}
}) })
.on('pointermove', event => { .on('pointermove', event => {
if (this.isMove && this.isCtrlKeyClicked === false) { // if (this.isCtrlKeyClicked === false) {
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); // // const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x; // // event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x;
event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y; // // event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y;
} else if (this.isMove && this.isCtrlKeyClicked === true) { // } else if (this.isCtrlKeyClicked === true) {
if (this.rectToolGraphics.visible === true) { // if (this.rectToolGraphics.visible === true) {
this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); // this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
} // }
} // }
}) })
.on('rightclick', event => { .on('rightclick', event => {
event.stopPropagation(); event.stopPropagation();

Write Preview
Loading…
Cancel
Save