From fec839c26b1eab10a3235b725b09f3a8472cdd7d Mon Sep 17 00:00:00 2001 From: cpf <1105965053@qq.com> Date: Wed, 5 Aug 2020 08:46:37 +0800 Subject: [PATCH 1/5] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=20=E5=BC=B9=E5=87=BA?= =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=A0=8F=E9=A1=B5=E9=9D=A2=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/collection-tools/collection-tools.component.html | 8 ++++---- .../ui/collection-tools/collection-tools.component.scss | 2 -- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/app/ui/collection-tools/collection-tools.component.html b/src/app/ui/collection-tools/collection-tools.component.html index 24eac1a..04fd6dd 100644 --- a/src/app/ui/collection-tools/collection-tools.component.html +++ b/src/app/ui/collection-tools/collection-tools.component.html @@ -58,8 +58,9 @@
+ - +
@@ -108,8 +109,6 @@
- -
@@ -155,8 +154,9 @@
+ - + \ No newline at end of file diff --git a/src/app/ui/collection-tools/collection-tools.component.scss b/src/app/ui/collection-tools/collection-tools.component.scss index 25a13d6..94dc1f6 100644 --- a/src/app/ui/collection-tools/collection-tools.component.scss +++ b/src/app/ui/collection-tools/collection-tools.component.scss @@ -76,7 +76,6 @@ background-color: #fff; border-radius: 5px; position: absolute; - z-index: 999; height: 100%; top: 0; } @@ -104,7 +103,6 @@ } //左侧导航栏显示隐藏 .togglePanel { - z-index: -999; margin-left: -300px; transition: margin-left 0.5s; } From 4da5d0872cc45187318eadf98eef22348a77a2db Mon Sep 17 00:00:00 2001 From: cpf <1105965053@qq.com> Date: Wed, 5 Aug 2020 14:05:55 +0800 Subject: [PATCH 2/5] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=20=E5=B7=A6=E4=BE=A7?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=A0=8F=20=E9=A1=B5=E9=9D=A2=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../collection-tools.component.html | 26 ++++++++++--- .../collection-tools.component.scss | 2 +- src/app/ui/collection-tools/panel.scss | 39 +++++++++++++++---- 3 files changed, 54 insertions(+), 13 deletions(-) diff --git a/src/app/ui/collection-tools/collection-tools.component.html b/src/app/ui/collection-tools/collection-tools.component.html index 1bf20eb..dcf87bd 100644 --- a/src/app/ui/collection-tools/collection-tools.component.html +++ b/src/app/ui/collection-tools/collection-tools.component.html @@ -71,6 +71,8 @@
+ keyboard_arrow_up + keyboard_arrow_down
@@ -95,6 +109,8 @@
+ keyboard_arrow_up + keyboard_arrow_down
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, }