diff --git a/src/app/ui/collection-tools/collection-tools.component.scss b/src/app/ui/collection-tools/collection-tools.component.scss
index 94dc1f6..1686bbb 100644
--- a/src/app/ui/collection-tools/collection-tools.component.scss
+++ b/src/app/ui/collection-tools/collection-tools.component.scss
@@ -2,7 +2,7 @@
.content {
width: 100%;
height: 93%;
- // overflow: hidden;
+ overflow: hidden;
box-sizing: border-box;
padding: 3px;
display: flex;
diff --git a/src/app/ui/collection-tools/panel.scss b/src/app/ui/collection-tools/panel.scss
index 37d5c60..55ccd4f 100644
--- a/src/app/ui/collection-tools/panel.scss
+++ b/src/app/ui/collection-tools/panel.scss
@@ -12,7 +12,7 @@
flex-direction: row;
align-items: center;
padding: 0 24px;
- border-radius: inherit;
+ border-radius: 5px;
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 15px;
font-weight: 400;
@@ -41,20 +41,44 @@
line-height: 36px;
box-sizing: border-box;
padding: 0 10px 0 25px;
- cursor:pointer;
.mat-icon {
font-size: 20px;
}
}
+.replaceBaseMap {
+ float: right;
+ margin-top: 8px;
+}
+.replaceBaseMap:hover {
+ color: #fff;
+}
+//hover时显示右边操作栏
+.sitePlanContent:hover {
+ #rightOperate {
+ display: block;
+ }
+}
//右边操作栏
#rightOperate{
- width: 100px;
+ width: 50px;
height: 100px;
position: absolute;
- top: -36px;
- right: -100px;
- z-index: 999;
- background-color: #999;
+ top: -32px;
+ right: -51px;
+ border-radius: 0 100px 100px 0;
+ background-color: #cdced1;
+ // #F0F4F7
+ display: none;
+ .functionButton {
+ height: 25%;
+ line-height: 25px;
+ }
+ .bigFunctionIcon {
+ font-size: 24px;
+ }
+ .functionIcon:hover {
+ color: #4DA5FA;
+ }
}
//素材库溢出隐藏
@@ -63,6 +87,7 @@
display: flex;
flex-direction: column;
overflow: hidden;
+ padding-bottom: 10px;
}
//素材库图片flex
#panelLibrary .text{
From f0ece01617fb20ac39fada863adfd231fa977d19 Mon Sep 17 00:00:00 2001
From: "DESKTOP-474NEJQ\\xzsjob" <359059686@qq.com>
Date: Thu, 6 Aug 2020 12:18:48 +0800
Subject: [PATCH 3/5] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=20=E5=AE=8C=E5=96=84?=
=?UTF-8?q?=E7=BC=A9=E6=94=BE=E5=8A=A8=E6=80=81=E9=94=9A=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../working-area/working-area.component.html | 24 +-
.../working-area/working-area.component.ts | 308 ++++++++++--------
2 files changed, 185 insertions(+), 147 deletions(-)
diff --git a/src/app/working-area/working-area.component.html b/src/app/working-area/working-area.component.html
index 3d643df..f28e42e 100644
--- a/src/app/working-area/working-area.component.html
+++ b/src/app/working-area/working-area.component.html
@@ -1,14 +1,14 @@
-
-
-
-
-
-
-
+
+
\ No newline at end of file
diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts
index cf4ee46..cf9205f 100644
--- a/src/app/working-area/working-area.component.ts
+++ b/src/app/working-area/working-area.component.ts
@@ -20,67 +20,73 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
loader = PIXI.Loader.shared;
// 根目录
backgroundImage: PIXI.Sprite;
- // 影子
- shadow = new PIXI.Sprite();
- // 影子圆形
- shadowCircle = new PIXI.Graphics();
+ // 单点图标影子
+ singlePointIconShadow = new PIXI.Sprite();
+ // 圆形y影子
+ circleShadow = new PIXI.Graphics();
+ // 线性影子
+ lineShadow = new PIXI.Graphics();
// 鼠标位置
- mousePosition;
- // 初始化
+ mousePosition: PIXI.Point;
+ /// 绘画模式
+ paintMode: PaintMode;
+
ngOnInit(): void {
}
- // 页面初始化之后
+
ngAfterViewInit(): void {
setTimeout(() => {
this.init();
}, 0);
}
- // 鼠标滑动事件
+
+ ///
+ /// 初始化
+ ///
+ init() {
+ this.createCanvas();
+ this.createBackgroundImage();
+ this.createSingleShadowIcon();
+ }
+ ///
+ /// 鼠标滑动事件
+ ///
mouseWheelHandel(event) {
const delX = this.mousePosition.x - this.backgroundImage.position.x;
const delY = this.mousePosition.y - this.backgroundImage.position.y;
- const scaleX = delX / this.backgroundImage.width;
- const scaleY = delY / this.backgroundImage.height;
+ 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;
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.anchor.x += scaleX;
- this.backgroundImage.anchor.y += scaleY;
+
this.backgroundImage.position.x += delX;
this.backgroundImage.position.y += delY;
- this.backgroundImage.children.forEach(item => {
- console.log(item.position);
- });
} else if (delta < 0) {
if (this.backgroundImage.scale.x <= 0.1) {
this.backgroundImage.scale.y = 0.1;
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.anchor.x += scaleX;
- this.backgroundImage.anchor.y += scaleY;
+
this.backgroundImage.position.x += delX;
this.backgroundImage.position.y += delY;
- this.backgroundImage.children.forEach(item => {
- console.log(item.position);
- });
}
}
- // 测试按钮
- init() {
- this.createCanvas();
- this.createBackgroundImage('https://qntemp3.bejson.com/upload/24797865631586900.jpg?imageView2/0/w/0/h/0/format/webp');
- this.createShadowIcon('https://qntemp3.bejson.com/upload/24797865631586900.jpg?imageView2/0/w/100/h/100/format/webp');
- this.setShadowVisible(false);
- }
- // 创建画布
+ ///
+ /// 创建画布
+ ///
createCanvas(): void {
this.app = new PIXI.Application({
width: this.content.nativeElement.clientWidth,
@@ -88,37 +94,22 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
antialias: true,
transparent: false,
resolution: 1,
- backgroundColor: 0x1099bb
+ backgroundColor: 0x1099bb// 0xffffff
});
+
this.content.nativeElement.appendChild(this.app.view);
+
this.app.ticker.add((delta) => {
this.mousePosition = this.app.renderer.plugins.interaction.mouse.global;
- this.shadow.position = this.mousePosition;
- this.shadowCircle.position = this.mousePosition;
+ this.singlePointIconShadow.position = this.backgroundImage.toLocal(this.mousePosition);
+ this.circleShadow.position = this.mousePosition;
});
}
-
- // setIcon() {
- // const defaultIcon = 'url(\'assets/images/avatar.jpg\'),auto';
- // this.app.renderer.plugins.interaction.cursorStyles.default = defaultIcon;
- // }
- // // 加载资源
- // LoadAsset(name: string, path: string) {
- // this.loader.onProgress.add(() => {
- // console.log(this.loader.progress);
- // }); // called once per loaded/errored file
- // this.loader.onError.add(() => { }); // called once per errored file
- // this.loader.onLoad.add(() => { }); // called once per loaded file
- // this.loader.onComplete.add(() => {
- // alert('aaaaaaaa');
- // }); // called once when the queued resources all load.
- // this.loader.add(name, path);
- // }
-
-
- // 创建单点图标
- createSprite(source: string, x: number, y: number, width: number, height: number, alpha: number): PIXI.Sprite {
- const sprite = PIXI.Sprite.from(source);
+ ///
+ /// 创建单点图标
+ ///
+ createSinglePointIcon(source: PIXI.Texture, x: number, y: number, width: number, height: number, alpha: number): PIXI.Sprite {
+ const sprite = new PIXI.Sprite(source);
sprite.x = x;
sprite.y = y;
sprite.width = width;
@@ -126,59 +117,64 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
sprite.alpha = alpha;
sprite.anchor.set(0.5);
sprite.interactive = true;
- sprite.buttonMode = true;
sprite
- .on('pointerdown', this.onDragStart)
- .on('pointerup', this.onDragEnd)
- .on('pointerupoutside', this.onDragEnd)
- .on('pointermove', this.onDragMove);
- this.app.stage.addChild(sprite);
- sprite.setParent(this.backgroundImage);
- return sprite;
- }
- // 拖动开始
- onDragStart(event) {
- event.currentTarget.data = event.data;
- event.currentTarget.alpha = 0.5;
- event.currentTarget.dragging = true;
- }
- // 拖动结束
- onDragEnd(event) {
- event.currentTarget.alpha = 1;
- event.currentTarget.dragging = false;
- event.currentTarget.data = null;
- }
- // 拖动移动
- onDragMove(event) {
- if (event.currentTarget.dragging) {
+ .on('mousedown', event => {
+ event.stopPropagation();
+ console.log(event);
+ event.currentTarget.data = event.data;
+ event.currentTarget.alpha = 0.5;
+ event.currentTarget.dragging = true;
+ })
+ .on('mouseup', event => {
+ event.currentTarget.alpha = 1;
+ event.currentTarget.dragging = false;
+ event.currentTarget.data = null;
+ })
+ .on('mouseupoutside', event => {
+ event.currentTarget.alpha = 1;
+ event.currentTarget.dragging = false;
+ event.currentTarget.data = null;
+ })
+ .on('mousemove', event => {
+ if (event.currentTarget.dragging) {
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
event.currentTarget.x = newPosition.x;
event.currentTarget.y = newPosition.y;
}
+ })
+ .on('rightclick', event => {
+ });
+ this.backgroundImage.addChild(sprite);
+ return sprite;
}
- // 加载精灵图
- SetupSprite(name: string) {
- const sprite = new PIXI.Sprite(
- this.loader.resources[name].texture
- );
+ ///
+ /// 画圆
+ ///
+ paintShadowCircle(x: number): void {
+ this.circleShadow.beginFill(0xFFCC5A);
+ this.circleShadow.drawCircle(0, 0, x);
+ this.app.stage.addChild(this.circleShadow);
}
- // 画圆
- DrawCircle(x: number): void {
- this.shadowCircle.beginFill(0xFFCC5A);
- this.shadowCircle.drawCircle(0, 0, x);
- this.app.stage.addChild(this.shadowCircle);
+ ///
+ /// 取消画圆
+ ///
+ cancelPaintShadowCircle(): void {
+ this.app.stage.removeChild(this.circleShadow);
}
- // 创建背景图
- createBackgroundImage(source: string): void {
- this.backgroundImage = PIXI.Sprite.from(source);
+ ///
+ /// 创建背景图
+ ///
+ createBackgroundImage(): void {
+ 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
- .on('pointerdown', event => {
- if (!event.currentTarget.dragging) {
+ .on('mousedown', event => {
+ if (!event.currentTarget.dragging && event.currentTarget.name === this.backgroundImage.name) {
event.currentTarget.data = event.data;
// this.oldGroup = this.parentGroup;
// this.parentGroup = dragGroup;
@@ -188,22 +184,35 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
event.currentTarget.dragPoint.x -= event.currentTarget.x;
event.currentTarget.dragPoint.y -= event.currentTarget.y;
+ // tslint:disable-next-line: max-line-length
+ // 点击背景创建图标
+ switch (this.paintMode) {
+ case PaintMode.None:
+ console.log(this.backgroundImage.toLocal(this.mousePosition));
+ break;
+ case PaintMode.SinglePointIcon:
+ const x = this.backgroundImage.toLocal(this.mousePosition).x;
+ const y = this.backgroundImage.toLocal(this.mousePosition).y;
+ this.createSinglePointIcon(this.singlePointIconShadow.texture, x, y, 32, 32, 1);
+ break;
+ case PaintMode.LineIcon:
+ break;
+ case PaintMode.PolygonIcon:
+ break;
+ }
}
})
- .on('pointerup', event => {
- if (event.currentTarget.dragging) {
+ .on('mouseup', event => {
+ if (event.currentTarget.dragging && event.currentTarget.name === this.backgroundImage.name) {
event.currentTarget.dragging = false;
// this.parentGroup = this.oldGroup;
// event.currentTarget.scale.x /= 1.1;
// event.currentTarget.scale.y /= 1.1;
event.currentTarget.data = null;
- console.log('创建图片');
- // tslint:disable-next-line: max-line-length
- this.createSprite('https://qntemp3.bejson.com/upload/72681686638249940.jpg?imageView2/0/w/100/h/100/format/webp', this.mousePosition.x, this.mousePosition.y, 64, 64, 1);
}
})
- .on('pointerupoutside', event => {
- if (event.currentTarget.dragging) {
+ .on('mouseupoutside', event => {
+ if (event.currentTarget.dragging && event.currentTarget.name === this.backgroundImage.name) {
event.currentTarget.dragging = false;
// this.parentGroup = this.oldGroup;
// event.currentTarget.scale.x /= 1.1;
@@ -211,53 +220,82 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
event.currentTarget.data = null;
}
})
- .on('pointermove', event => {
- if (event.currentTarget.dragging) {
+ .on('mousemove', event => {
+ if (event.currentTarget.dragging && event.currentTarget.name === this.backgroundImage.name) {
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;
}
+ }).on('rightclick', event => {
+ event.stopPropagation();
+ this.cancelPaint();
+
});
this.app.stage.addChild(this.backgroundImage);
}
-
- addShadow(obj) {
- const graphics = new PIXI.Graphics();
- // Circle
- graphics.lineStyle(0);
- graphics.beginFill(0xDE3249, 1);
- graphics.drawCircle(100, 250, 50);
- graphics.endFill();
- obj.addChild(graphics);
-}
- // 设置背景显示状态
- setBackgroundImageVisible(value: boolean): void {
- this.backgroundImage.visible = value;
- }
- // 替换背景图
- replaceBackgroundImage(source: string): void {
+ ///
+ /// 替换背景图
+ ///
+ changeBackgroundImage(source: string): void {
this.backgroundImage.texture = PIXI.Texture.from(source);
+ this.backgroundImage.visible = true;
}
- // 创建影子图标
- createShadowIcon(source: string): void {
- this.shadow = PIXI.Sprite.from(source);
- this.shadow.alpha = 0.5;
- this.shadow.anchor.set(0.5);
- this.app.stage.addChild(this.shadow);
+ ///
+ /// 创建单点影子图标
+ ///
+ createSingleShadowIcon(): void {
+ this.singlePointIconShadow = PIXI.Sprite.from('assets/images/noImg.png');
+ this.singlePointIconShadow.width = 32;
+ this.singlePointIconShadow.height = 32;
+ this.singlePointIconShadow.alpha = 0.5;
+ this.singlePointIconShadow.anchor.set(0.5);
+ this.singlePointIconShadow.visible = false;
+ this.backgroundImage.addChild(this.singlePointIconShadow);
}
- // 设置影子图标显示状态
- setShadowVisible(value: boolean): void {
- this.shadow.visible = value;
+ ///
+ /// 改变单点影子图标
+ ///
+ changeSingleShadowIcon(source: string): void {
+ this.singlePointIconShadow.texture = PIXI.Texture.from(source);
+ this.singlePointIconShadow.visible = true;
}
- // 替换影子图片
- replaceShadow(source: string): void {
- this.shadow.texture = PIXI.Texture.from(source);
+ ///
+ /// 开始绘画单点图标
+ ///
+ beginPaintSinglePointIcon(source: string): void {
+ this.cancelPaint();
+ this.paintMode = PaintMode.SinglePointIcon;
+ this.changeSingleShadowIcon(source);
}
- // 创建单点图标
- createSinglePointIcon(source: string): void {
- this.DrawCircle(5);
- // this.setShadowVisible(true);
- // this.addShadow(this.shadow);
- // this.replaceShadow(source);
+ beginPaintPolygonIcon(source: string): void {
+
}
+ ///
+ /// 取消绘画
+ ///
+ cancelPaint(): void {
+ switch (this.paintMode) {
+ case PaintMode.None:
+ break;
+ case PaintMode.SinglePointIcon:
+ this.paintMode = PaintMode.None;
+ this.singlePointIconShadow.visible = false;
+ break;
+ case PaintMode.LineIcon:
+ this.paintMode = PaintMode.None;
+ break;
+ case PaintMode.PolygonIcon:
+ this.paintMode = PaintMode.None;
+ break;
+ }
+ }
+}
+///
+/// 绘制模式
+///
+enum PaintMode {
+ None,
+ SinglePointIcon,
+ PolygonIcon,
+ LineIcon,
}
From c8d19789e898e838a49737185fb128d6c4f4f8af Mon Sep 17 00:00:00 2001
From: "DESKTOP-474NEJQ\\xzsjob" <359059686@qq.com>
Date: Thu, 6 Aug 2020 12:31:04 +0800
Subject: [PATCH 4/5] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=20=E5=AE=8C=E5=96=84?=
=?UTF-8?q?=E8=83=8C=E6=99=AF=E5=9B=BE=E6=9B=BF=E6=8D=A2=E8=AE=BF=E9=97=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../working-area/working-area.component.html | 15 +-----
.../working-area/working-area.component.ts | 54 ++++++++++---------
2 files changed, 30 insertions(+), 39 deletions(-)
diff --git a/src/app/working-area/working-area.component.html b/src/app/working-area/working-area.component.html
index f28e42e..b9f89da 100644
--- a/src/app/working-area/working-area.component.html
+++ b/src/app/working-area/working-area.component.html
@@ -1,14 +1 @@
-
-
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts
index cf9205f..4615c5a 100644
--- a/src/app/working-area/working-area.component.ts
+++ b/src/app/working-area/working-area.component.ts
@@ -44,7 +44,7 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
///
/// 初始化
///
- init() {
+ private init() {
this.createCanvas();
this.createBackgroundImage();
this.createSingleShadowIcon();
@@ -52,7 +52,7 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
///
/// 鼠标滑动事件
///
- mouseWheelHandel(event) {
+ protected 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);
@@ -87,7 +87,7 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
///
/// 创建画布
///
- createCanvas(): void {
+ private createCanvas(): void {
this.app = new PIXI.Application({
width: this.content.nativeElement.clientWidth,
height: this.content.nativeElement.clientHeight,
@@ -108,7 +108,7 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
///
/// 创建单点图标
///
- createSinglePointIcon(source: PIXI.Texture, x: number, y: number, width: number, height: number, alpha: number): PIXI.Sprite {
+ private createSinglePointIcon(source: PIXI.Texture, x: number, y: number, width: number, height: number, alpha: number): PIXI.Sprite {
const sprite = new PIXI.Sprite(source);
sprite.x = x;
sprite.y = y;
@@ -149,23 +149,9 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
return sprite;
}
///
- /// 画圆
- ///
- paintShadowCircle(x: number): void {
- this.circleShadow.beginFill(0xFFCC5A);
- this.circleShadow.drawCircle(0, 0, x);
- this.app.stage.addChild(this.circleShadow);
- }
- ///
- /// 取消画圆
- ///
- cancelPaintShadowCircle(): void {
- this.app.stage.removeChild(this.circleShadow);
- }
- ///
/// 创建背景图
///
- createBackgroundImage(): void {
+ private createBackgroundImage(): void {
this.backgroundImage = PIXI.Sprite.from('assets/images/noImg.png');
this.backgroundImage.anchor.set(0.5);
this.backgroundImage.x = this.app.view.width / 2;
@@ -235,15 +221,16 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
}
///
/// 替换背景图
+ /// 参数{source：string} 可以是一个url地址,也可以是本地assets下的一个图片路径
///
- changeBackgroundImage(source: string): void {
+ public changeBackgroundImage(source: string): void {
this.backgroundImage.texture = PIXI.Texture.from(source);
this.backgroundImage.visible = true;
}
///
/// 创建单点影子图标
///
- createSingleShadowIcon(): void {
+ private createSingleShadowIcon(): void {
this.singlePointIconShadow = PIXI.Sprite.from('assets/images/noImg.png');
this.singlePointIconShadow.width = 32;
this.singlePointIconShadow.height = 32;
@@ -255,25 +242,28 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
///
/// 改变单点影子图标
///
- changeSingleShadowIcon(source: string): void {
+ private changeSingleShadowIcon(source: string): void {
this.singlePointIconShadow.texture = PIXI.Texture.from(source);
this.singlePointIconShadow.visible = true;
}
///
/// 开始绘画单点图标
///
- beginPaintSinglePointIcon(source: string): void {
+ public beginPaintSinglePointIcon(source: string): void {
this.cancelPaint();
this.paintMode = PaintMode.SinglePointIcon;
this.changeSingleShadowIcon(source);
}
- beginPaintPolygonIcon(source: string): void {
+ // 开始绘画多边形
+ public beginPaintPolygonIcon(source: string): void {
+ this.cancelPaint();
+ this.paintMode = PaintMode.PolygonIcon;
}
///
/// 取消绘画
///
- cancelPaint(): void {
+ private cancelPaint(): void {
switch (this.paintMode) {
case PaintMode.None:
break;
@@ -289,6 +279,20 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
break;
}
}
+ ///
+ /// 画圆
+ ///
+ paintShadowCircle(x: number): void {
+ this.circleShadow.beginFill(0xFFCC5A);
+ this.circleShadow.drawCircle(0, 0, x);
+ this.app.stage.addChild(this.circleShadow);
+ }
+ ///
+ /// 取消画圆
+ ///
+ cancelPaintShadowCircle(): void {
+ this.app.stage.removeChild(this.circleShadow);
+ }
}
///
/// 绘制模式
From 9dab10ee34fa76c12bebaa102a4f6a6bf2c11703 Mon Sep 17 00:00:00 2001
From: "DESKTOP-474NEJQ\\xzsjob" <359059686@qq.com>
Date: Thu, 6 Aug 2020 17:35:45 +0800
Subject: [PATCH 5/5] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20=E5=A4=9A=E7=82=B9?=
=?UTF-8?q?=E8=BF=9E=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../working-area/working-area.component.ts | 124 ++++++++++++------
1 file changed, 81 insertions(+), 43 deletions(-)
diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts
index 4615c5a..cc9e81f 100644
--- a/src/app/working-area/working-area.component.ts
+++ b/src/app/working-area/working-area.component.ts
@@ -22,10 +22,10 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
backgroundImage: PIXI.Sprite;
// 单点图标影子
singlePointIconShadow = new PIXI.Sprite();
- // 圆形y影子
+ // 线图标影子
+ lineIconShadow = new PIXI.Graphics();
+ // 圆形影子
circleShadow = new PIXI.Graphics();
- // 线性影子
- lineShadow = new PIXI.Graphics();
// 鼠标位置
mousePosition: PIXI.Point;
/// 绘画模式
@@ -37,22 +37,13 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
ngAfterViewInit(): void {
setTimeout(() => {
- this.init();
+ this.createCanvas();
}, 0);
}
-
- ///
- /// 初始化
- ///
- private init() {
- this.createCanvas();
- this.createBackgroundImage();
- this.createSingleShadowIcon();
- }
///
/// 鼠标滑动事件
///
- protected mouseWheelHandel(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);
@@ -96,28 +87,36 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
resolution: 1,
backgroundColor: 0x1099bb// 0xffffff
});
-
this.content.nativeElement.appendChild(this.app.view);
+ this.createBackgroundImage();
+ this.createSinglePointIconShadow();
+ this.createLineIconShadow();
+
this.app.ticker.add((delta) => {
this.mousePosition = this.app.renderer.plugins.interaction.mouse.global;
- this.singlePointIconShadow.position = this.backgroundImage.toLocal(this.mousePosition);
+
+ this.singlePointIconShadow.position = this.mousePosition;
this.circleShadow.position = this.mousePosition;
+
+ // this.lineIconShadow.clear();
+ // this.lineIconShadow.lineStyle(1, 0xffd900, 1);
+ // this.lineIconShadow.lineTo(100, 100);
});
}
///
/// 创建单点图标
///
private createSinglePointIcon(source: PIXI.Texture, x: number, y: number, width: number, height: number, alpha: number): PIXI.Sprite {
- const sprite = new PIXI.Sprite(source);
- sprite.x = x;
- sprite.y = y;
- sprite.width = width;
- sprite.height = height;
- sprite.alpha = alpha;
- sprite.anchor.set(0.5);
- sprite.interactive = true;
- sprite
+ const singlePointIcon = new PIXI.Sprite(source);
+ singlePointIcon.x = x;
+ singlePointIcon.y = y;
+ singlePointIcon.width = width;
+ singlePointIcon.height = height;
+ singlePointIcon.alpha = alpha;
+ singlePointIcon.anchor.set(0.5);
+ singlePointIcon.interactive = true;
+ singlePointIcon
.on('mousedown', event => {
event.stopPropagation();
console.log(event);
@@ -145,8 +144,31 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
.on('rightclick', event => {
});
- this.backgroundImage.addChild(sprite);
- return sprite;
+ this.backgroundImage.addChild(singlePointIcon);
+ return singlePointIcon;
+ }
+ /// <>
+ /// 多点连线
+ /// <>
+ private createLineIcon(source: PIXI.Texture, x: number, y: number, points: PIXI.Point[]) {
+ const container = new PIXI.Container();
+ container.x = x;
+ container.y = y;
+ points.forEach(item => {
+ const icon = new PIXI.TilingSprite(source, 100, 64);
+ icon.anchor.set(0, 0.5);
+ icon.x = item.x;
+ icon.y = item.y;
+ container.addChild(icon);
+
+ const iconPoint = new PIXI.Graphics();
+ iconPoint.lineStyle(0);
+ iconPoint.beginFill(0xFFFF0B, 1);
+ iconPoint.drawCircle(item.x, item.y, 15);
+ iconPoint.endFill();
+ container.addChild(iconPoint);
+ });
+ this.backgroundImage.addChild(container);
}
///
/// 创建背景图
@@ -172,16 +194,17 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
event.currentTarget.dragPoint.y -= event.currentTarget.y;
// tslint:disable-next-line: max-line-length
// 点击背景创建图标
+ const pos = this.backgroundImage.toLocal(this.mousePosition);
switch (this.paintMode) {
- case PaintMode.None:
+ case PaintMode.PaintEnd:
console.log(this.backgroundImage.toLocal(this.mousePosition));
break;
case PaintMode.SinglePointIcon:
- const x = this.backgroundImage.toLocal(this.mousePosition).x;
- const y = this.backgroundImage.toLocal(this.mousePosition).y;
- this.createSinglePointIcon(this.singlePointIconShadow.texture, x, y, 32, 32, 1);
+ this.createSinglePointIcon(this.singlePointIconShadow.texture, pos.x, pos.y, 32, 32, 1);
break;
case PaintMode.LineIcon:
+ // tslint:disable-next-line: max-line-length
+ this.createLineIcon(this.singlePointIconShadow.texture, pos.x, pos.y, [new PIXI.Point(0, 0), new PIXI.Point(100, 0), new PIXI.Point(100, 100)]);
break;
case PaintMode.PolygonIcon:
break;
@@ -228,31 +251,37 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
this.backgroundImage.visible = true;
}
///
- /// 创建单点影子图标
+ /// 创建单点图标影子
///
- private createSingleShadowIcon(): void {
+ private createSinglePointIconShadow(): void {
this.singlePointIconShadow = PIXI.Sprite.from('assets/images/noImg.png');
this.singlePointIconShadow.width = 32;
this.singlePointIconShadow.height = 32;
this.singlePointIconShadow.alpha = 0.5;
this.singlePointIconShadow.anchor.set(0.5);
this.singlePointIconShadow.visible = false;
- this.backgroundImage.addChild(this.singlePointIconShadow);
+ this.app.stage.addChild(this.singlePointIconShadow);
}
///
- /// 改变单点影子图标
+ /// 改变单点图标影子
///
- private changeSingleShadowIcon(source: string): void {
+ private changeSinglePointIconShadow(source: string): void {
this.singlePointIconShadow.texture = PIXI.Texture.from(source);
this.singlePointIconShadow.visible = true;
}
+ /// <>
+ /// 创建线图标影子
+ /// <>
+ private createLineIconShadow() {
+ this.app.stage.addChild(this.lineIconShadow);
+ }
///
/// 开始绘画单点图标
///
public beginPaintSinglePointIcon(source: string): void {
this.cancelPaint();
this.paintMode = PaintMode.SinglePointIcon;
- this.changeSingleShadowIcon(source);
+ this.changeSinglePointIconShadow(source);
}
// 开始绘画多边形
public beginPaintPolygonIcon(source: string): void {
@@ -260,22 +289,30 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
this.paintMode = PaintMode.PolygonIcon;
}
+ // 开始绘画线
+ public beginPaintLineIcon(source: string): void {
+ this.cancelPaint();
+ this.paintMode = PaintMode.LineIcon;
+ this.changeSinglePointIconShadow(source);
+ // this.lineIconShadow.lineStyle(1, 0xffd900, 1);
+ }
///
/// 取消绘画
///
private cancelPaint(): void {
switch (this.paintMode) {
- case PaintMode.None:
+ case PaintMode.PaintEnd:
break;
case PaintMode.SinglePointIcon:
- this.paintMode = PaintMode.None;
+ this.paintMode = PaintMode.PaintEnd;
this.singlePointIconShadow.visible = false;
break;
case PaintMode.LineIcon:
- this.paintMode = PaintMode.None;
+ this.paintMode = PaintMode.PaintEnd;
+ this.singlePointIconShadow.visible = false;
break;
case PaintMode.PolygonIcon:
- this.paintMode = PaintMode.None;
+ this.paintMode = PaintMode.PaintEnd;
break;
}
}
@@ -298,8 +335,9 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
/// 绘制模式
///
enum PaintMode {
- None,
SinglePointIcon,
- PolygonIcon,
LineIcon,
+ PaintingLineIcon,
+ PolygonIcon,
+ PaintEnd,
}