From 5465518dfe7128a237cf97a53783c8446384f2cc Mon Sep 17 00:00:00 2001 From: "DESKTOP-474NEJQ\\xzsjob" <359059686@qq.com> Date: Fri, 7 Aug 2020 17:36:54 +0800 Subject: [PATCH 1/4] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20=E5=A4=9A=E7=82=B9?= =?UTF-8?q?=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../working-area/working-area.component.ts | 278 ++++++++++++++++-- 1 file changed, 256 insertions(+), 22 deletions(-) diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index cc9e81f..f54e3ca 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -15,21 +15,21 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit { content: ElementRef; // 画布程序 - app: PIXI.Application; + public app: PIXI.Application; // 加载器 - loader = PIXI.Loader.shared; + public loader = PIXI.Loader.shared; // 根目录 - backgroundImage: PIXI.Sprite; + public backgroundImage: PIXI.Sprite; // 单点图标影子 - singlePointIconShadow = new PIXI.Sprite(); + public singlePointIconShadow = new PIXI.Sprite(); // 线图标影子 - lineIconShadow = new PIXI.Graphics(); + public lineIconShadow = new PIXI.Graphics(); // 圆形影子 - circleShadow = new PIXI.Graphics(); + public circleShadow = new PIXI.Graphics(); // 鼠标位置 - mousePosition: PIXI.Point; + public mousePosition: PIXI.Point; /// 绘画模式 - paintMode: PaintMode; + public paintMode: PaintMode; ngOnInit(): void { @@ -136,9 +136,9 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit { }) .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; + const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); + event.currentTarget.x = newPosition.x; + event.currentTarget.y = newPosition.y; } }) .on('rightclick', event => { @@ -152,23 +152,103 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit { /// <> 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); - + container.name = '多点连线'; + // 画点 + points.forEach((item, index, array) => { const iconPoint = new PIXI.Graphics(); iconPoint.lineStyle(0); iconPoint.beginFill(0xFFFF0B, 1); - iconPoint.drawCircle(item.x, item.y, 15); + iconPoint.drawCircle(0, 0, 15); + iconPoint.x = item.x; + iconPoint.y = item.y; iconPoint.endFill(); container.addChild(iconPoint); }); + // 画线图标 + for (let i = 0, count = points.length - 1; i < count; i++) { + const pointA = points[i]; + const pointB = points[i + 1]; + + const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI); + const a = pointB.x - pointA.x; + const b = pointB.y - pointA.y; + const distance = Math.sqrt(a * a + b * b); + + const icon = new PIXI.TilingSprite(source, distance, 64); + icon.anchor.set(0, 0.5); + icon.x = pointA.x; + icon.y = pointA.y; + icon.angle = angle; + container.addChild(icon); + } this.backgroundImage.addChild(container); + // 添加事件 + container.children.forEach(item => { + if (item instanceof PIXI.Graphics) { + item.interactive = true; + item.on('mousedown', event => { + event.stopPropagation(); + 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 => { + }); + } else if (item instanceof PIXI.TilingSprite) { + item.interactive = true; + item.on('mousedown', event => { + event.stopPropagation(); + event.currentTarget.parent.data = event.data; + event.currentTarget.parent.alpha = 0.5; + event.currentTarget.parent.dragging = true; + + event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent); + event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x; + event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y; + }) + .on('mouseup', event => { + event.currentTarget.parent.alpha = 1; + event.currentTarget.parent.dragging = false; + event.currentTarget.parent.data = null; + }) + .on('mouseupoutside', event => { + event.currentTarget.parent.alpha = 1; + event.currentTarget.parent.dragging = false; + event.currentTarget.parent.data = null; + }) + .on('mousemove', event => { + if (event.currentTarget.parent.dragging) { + const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent); + event.currentTarget.parent.x = newPosition.x - event.currentTarget.parent.dragPoint.x; + event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y; + } + }) + .on('rightclick', event => { + }); + } + }); + } + // 测试创建 + private createLineIconTest(texture: PIXI.Texture, points: PIXI.Point[]) { + const icon = new MultipointIcon(texture, points); + this.backgroundImage.addChild(icon); } /// /// 创建背景图 @@ -204,7 +284,9 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit { 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)]); + // this.createLineIcon(this.singlePointIconShadow.texture, 0, 0, [new PIXI.Point(0, -100), new PIXI.Point(100, 0), new PIXI.Point(0, 100)]); + // tslint:disable-next-line: max-line-length + this.createLineIconTest(this.singlePointIconShadow.texture, [new PIXI.Point(0, -100), new PIXI.Point(100, 0), new PIXI.Point(0, 100), new PIXI.Point(-100, 0)]); break; case PaintMode.PolygonIcon: break; @@ -341,3 +423,155 @@ enum PaintMode { PolygonIcon, PaintEnd, } + +/// 多点图标 +class MultipointIcon extends PIXI.Container { + public pointsData: PIXI.Point[]; + public pointsGraphics: PIXI.Graphics[] = []; + public iconsTilingSprite: PIXI.TilingSprite[] = []; + /** + * 初始化 + */ + constructor(texture: PIXI.Texture, data: PIXI.Point[]) { + super(); + this.pointsData = data; + // 画点 + this.pointsData.forEach((item, index, array) => { + const iconPoint = new PIXI.Graphics(); + iconPoint.lineStyle(0); + iconPoint.beginFill(0xFFFF0B, 1); + iconPoint.drawCircle(0, 0, 50); + iconPoint.x = item.x; + iconPoint.y = item.y; + iconPoint.endFill(); + this.pointsGraphics.push(iconPoint); + this.addChild(iconPoint); + }); + // 画线图标 + for (let i = 0, count = this.pointsData.length - 1; i < count; i++) { + const pointA = this.pointsData[i]; + const pointB = this.pointsData[i + 1]; + + const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI); + const a = pointB.x - pointA.x; + const b = pointB.y - pointA.y; + const distance = Math.sqrt(a * a + b * b); + + const icon = new PIXI.TilingSprite(texture, distance, 64); + icon.anchor.set(0, 0.5); + icon.x = pointA.x; + icon.y = pointA.y; + icon.angle = angle; + this.iconsTilingSprite.push(icon); + this.addChild(icon); + } + // 添加圆点事件 + this.pointsGraphics.forEach((item, index, array) => { + item.interactive = true; + item.on('mousedown', event => { + event.stopPropagation(); + 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; + if (index === 0) {// 第一个点 + this.iconsTilingSprite[index].x = newPosition.x; + this.iconsTilingSprite[index].y = newPosition.y; + + const pointA = array[index]; + const pointB = array[index + 1]; + + const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI); + const a = pointB.x - pointA.x; + const b = pointB.y - pointA.y; + const distance = Math.sqrt(a * a + b * b); + this.iconsTilingSprite[index].angle = angle; + this.iconsTilingSprite[index].width = distance; + } else if (index < array.length - 1) {// 不是第一个点，也不是最后一个点 + this.iconsTilingSprite[index].x = newPosition.x; + this.iconsTilingSprite[index].y = newPosition.y; + + const pointA = array[index]; // 当前点 + const pointB = array[index + 1]; // 后一个点 + const pointC = array[index - 1]; // 前一个点 + + const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI); + const a = pointB.x - pointA.x; + const b = pointB.y - pointA.y; + const distance = Math.sqrt(a * a + b * b); + this.iconsTilingSprite[index].angle = angle; + this.iconsTilingSprite[index].width = distance; + + const angleC = Math.atan2((pointA.y - pointC.y), (pointA.x - pointC.x)) * (180 / Math.PI); + const aC = pointA.x - pointC.x; + const bC = pointA.y - pointC.y; + const distanceC = Math.sqrt(aC * aC + bC * bC); + this.iconsTilingSprite[index - 1].angle = angleC; + this.iconsTilingSprite[index - 1].width = distanceC; + } else if (index === array.length - 1) { // 最后一个点 + const pointA = array[index]; // 当前点 + const pointC = array[index - 1]; // 前一个点 + + const angleC = Math.atan2((pointA.y - pointC.y), (pointA.x - pointC.x)) * (180 / Math.PI); + const aC = pointA.x - pointC.x; + const bC = pointA.y - pointC.y; + const distanceC = Math.sqrt(aC * aC + bC * bC); + this.iconsTilingSprite[index - 1].angle = angleC; + this.iconsTilingSprite[index - 1].width = distanceC; + } + } + }) + .on('rightclick', event => { + }); + }); + // 添加选中事件 + this.iconsTilingSprite.forEach((item, index, array) => { + item.interactive = true; + item.on('mousedown', event => { + event.stopPropagation(); + event.currentTarget.parent.data = event.data; + event.currentTarget.parent.alpha = 0.5; + event.currentTarget.parent.dragging = true; + + event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent); + event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x; + event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y; + }) + .on('mouseup', event => { + event.currentTarget.parent.alpha = 1; + event.currentTarget.parent.dragging = false; + event.currentTarget.parent.data = null; + }) + .on('mouseupoutside', event => { + event.currentTarget.parent.alpha = 1; + event.currentTarget.parent.dragging = false; + event.currentTarget.parent.data = null; + }) + .on('mousemove', event => { + if (event.currentTarget.parent.dragging) { + const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent); + event.currentTarget.parent.x = newPosition.x - event.currentTarget.parent.dragPoint.x; + event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y; + } + }) + .on('rightclick', event => { + }); + }); + // + } +} From af1b91f59de5d8ab249e69c9b534bc894876bd3c Mon Sep 17 00:00:00 2001 From: "DESKTOP-474NEJQ\\xzsjob" <359059686@qq.com> Date: Sat, 8 Aug 2020 10:55:03 +0800 Subject: [PATCH 2/4] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E8=83=8C=E6=99=AF=E5=9B=BE=E8=A7=92=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../working-area/working-area.component.ts | 48 +++++++++++++------ 1 file changed, 33 insertions(+), 15 deletions(-) diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index f54e3ca..6e5f570 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -328,10 +328,17 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit { /// 替换背景图 /// 参数{source：string} 可以是一个url地址,也可以是本地assets下的一个图片路径 /// - public changeBackgroundImage(source: string): void { - this.backgroundImage.texture = PIXI.Texture.from(source); + public changeBackgroundImage(imageUri: string, imageAngle: number): void { + this.backgroundImage.texture = PIXI.Texture.from(imageUri); + this.backgroundImage.angle = imageAngle; this.backgroundImage.visible = true; } + /** + * 设置背景图角度 + */ + public setBackgroundAngle(imageAngle: number) { + this.backgroundImage.angle = imageAngle; + } /// /// 创建单点图标影子 /// @@ -435,18 +442,6 @@ class MultipointIcon extends PIXI.Container { constructor(texture: PIXI.Texture, data: PIXI.Point[]) { super(); this.pointsData = data; - // 画点 - this.pointsData.forEach((item, index, array) => { - const iconPoint = new PIXI.Graphics(); - iconPoint.lineStyle(0); - iconPoint.beginFill(0xFFFF0B, 1); - iconPoint.drawCircle(0, 0, 50); - iconPoint.x = item.x; - iconPoint.y = item.y; - iconPoint.endFill(); - this.pointsGraphics.push(iconPoint); - this.addChild(iconPoint); - }); // 画线图标 for (let i = 0, count = this.pointsData.length - 1; i < count; i++) { const pointA = this.pointsData[i]; @@ -465,6 +460,19 @@ class MultipointIcon extends PIXI.Container { this.iconsTilingSprite.push(icon); this.addChild(icon); } + // 画点 + this.pointsData.forEach((item, index, array) => { + const iconPoint = new PIXI.Graphics(); + iconPoint.lineStyle(0); + iconPoint.beginFill(0xFFFF0B, 1); + iconPoint.drawCircle(0, 0, 15); + iconPoint.x = item.x; + iconPoint.y = item.y; + iconPoint.endFill(); + iconPoint.visible = false; + this.pointsGraphics.push(iconPoint); + this.addChild(iconPoint); + }); // 添加圆点事件 this.pointsGraphics.forEach((item, index, array) => { item.interactive = true; @@ -551,6 +559,8 @@ class MultipointIcon extends PIXI.Container { event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent); event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x; event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y; + + this.setPointVisiable(true); }) .on('mouseup', event => { event.currentTarget.parent.alpha = 1; @@ -572,6 +582,14 @@ class MultipointIcon extends PIXI.Container { .on('rightclick', event => { }); }); - // + } + /** + * 设置原点显示状态 + * value: Boolean + */ + public setPointVisiable(value: boolean) { + this.pointsGraphics.forEach((item) => { + item.visible = value; + }); } } From b72a9c5510564cce860b2d3d0933f99471e3b2e4 Mon Sep 17 00:00:00 2001 From: "DESKTOP-474NEJQ\\xzsjob" <359059686@qq.com> Date: Sat, 8 Aug 2020 17:37:13 +0800 Subject: [PATCH 3/4] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=20=E6=96=87=E6=A1=A3?= =?UTF-8?q?=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../working-area/working-area.component.ts | 172 +++++++++++++----- 1 file changed, 122 insertions(+), 50 deletions(-) diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 6e5f570..a38df0b 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -104,9 +104,15 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit { // this.lineIconShadow.lineTo(100, 100); }); } - /// - /// 创建单点图标 - /// + /** + * 创建单点图标 + * @param source + * @param x + * @param y + * @param width + * @param height + * @param alpha + */ private createSinglePointIcon(source: PIXI.Texture, x: number, y: number, width: number, height: number, alpha: number): PIXI.Sprite { const singlePointIcon = new PIXI.Sprite(source); singlePointIcon.x = x; @@ -245,14 +251,18 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit { } }); } - // 测试创建 + /** + * 测试创建 + * @param texture 测试创建 + * @param points 点集合 + */ private createLineIconTest(texture: PIXI.Texture, points: PIXI.Point[]) { const icon = new MultipointIcon(texture, points); this.backgroundImage.addChild(icon); } - /// - /// 创建背景图 - /// + /** + * 创建背景图 + */ private createBackgroundImage(): void { this.backgroundImage = PIXI.Sprite.from('assets/images/noImg.png'); this.backgroundImage.anchor.set(0.5); @@ -324,10 +334,11 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit { }); this.app.stage.addChild(this.backgroundImage); } - /// - /// 替换背景图 - /// 参数{source：string} 可以是一个url地址,也可以是本地assets下的一个图片路径 - /// + /** + * 替换背景图 + * @param imageUri 可以是一个url地址,也可以是本地assets下的一个图片路径 + * @param imageAngle 图片旋转角度 + */ public changeBackgroundImage(imageUri: string, imageAngle: number): void { this.backgroundImage.texture = PIXI.Texture.from(imageUri); this.backgroundImage.angle = imageAngle; @@ -335,13 +346,14 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit { } /** * 设置背景图角度 + * @param imageAngle 角度值 */ public setBackgroundAngle(imageAngle: number) { this.backgroundImage.angle = imageAngle; } - /// - /// 创建单点图标影子 - /// + /** + * 创建单点图标影子 + */ private createSinglePointIconShadow(): void { this.singlePointIconShadow = PIXI.Sprite.from('assets/images/noImg.png'); this.singlePointIconShadow.width = 32; @@ -351,43 +363,50 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit { this.singlePointIconShadow.visible = false; this.app.stage.addChild(this.singlePointIconShadow); } - /// - /// 改变单点图标影子 - /// - private changeSinglePointIconShadow(source: string): void { - this.singlePointIconShadow.texture = PIXI.Texture.from(source); + /** + * 改变单点图标影子 + * @param uri 图片地址 + */ + private changeSinglePointIconShadow(uri: string): void { + this.singlePointIconShadow.texture = PIXI.Texture.from(uri); this.singlePointIconShadow.visible = true; } - /// <> - /// 创建线图标影子 - /// <> + /** + * 创建线图标影子 + */ private createLineIconShadow() { this.app.stage.addChild(this.lineIconShadow); } - /// - /// 开始绘画单点图标 - /// - public beginPaintSinglePointIcon(source: string): void { + /** + * 开始绘画单点图标 + * @param imageUri 图片路径 + */ + public beginPaintSinglePointIcon(imageUri: string): void { this.cancelPaint(); this.paintMode = PaintMode.SinglePointIcon; - this.changeSinglePointIconShadow(source); + this.changeSinglePointIconShadow(imageUri); } - // 开始绘画多边形 - public beginPaintPolygonIcon(source: string): void { + /** + * 开始绘画多边形 + */ + public beginPaintPolygonIcon(): void { this.cancelPaint(); this.paintMode = PaintMode.PolygonIcon; } - // 开始绘画线 - public beginPaintLineIcon(source: string): void { + /** + * 开始绘制多点图标 + * @param imageUri 图片路径 + */ + public beginPaintLineIcon(imageUri: string): void { this.cancelPaint(); this.paintMode = PaintMode.LineIcon; - this.changeSinglePointIconShadow(source); + this.changeSinglePointIconShadow(imageUri); // this.lineIconShadow.lineStyle(1, 0xffd900, 1); } - /// - /// 取消绘画 - /// + /** + * 取消绘画 + */ private cancelPaint(): void { switch (this.paintMode) { case PaintMode.PaintEnd: @@ -405,24 +424,25 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit { break; } } - /// - /// 画圆 - /// + /** + * 画圆 + * @param x 半径 + */ 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); } } -/// -/// 绘制模式 -/// +/** + * 绘制模式 + */ enum PaintMode { SinglePointIcon, LineIcon, @@ -431,17 +451,21 @@ enum PaintMode { PaintEnd, } -/// 多点图标 +/** + * 多点连线 + */ class MultipointIcon extends PIXI.Container { public pointsData: PIXI.Point[]; public pointsGraphics: PIXI.Graphics[] = []; public iconsTilingSprite: PIXI.TilingSprite[] = []; /** - * 初始化 + * + * @param texture 图片素材 + * @param points 点集合 */ - constructor(texture: PIXI.Texture, data: PIXI.Point[]) { + constructor(texture: PIXI.Texture, points: PIXI.Point[]) { super(); - this.pointsData = data; + this.pointsData = points; // 画线图标 for (let i = 0, count = this.pointsData.length - 1; i < count; i++) { const pointA = this.pointsData[i]; @@ -584,8 +608,8 @@ class MultipointIcon extends PIXI.Container { }); } /** - * 设置原点显示状态 - * value: Boolean + * 设置点显示状态 + * @param value 显示状态 */ public setPointVisiable(value: boolean) { this.pointsGraphics.forEach((item) => { @@ -593,3 +617,51 @@ class MultipointIcon extends PIXI.Container { }); } } + +interface IEventData { + // 事件唯一ID + uuid: number; + callback: (data: any) => void; +} + +/** + * 简单消息分发 + */ +export default class Event { + + public static eventUuid = 0; + + public static eventList: { [eventName: string]: IEventData[] } = {}; + + public static register(eventName: string, callback: (data: any) => void): number { + this.eventUuid = this.eventUuid + 1; + + if (this.eventList[eventName] === undefined) { + this.eventList[eventName] = []; + } + this.eventList[eventName][this.eventUuid] = { uuid: this.eventUuid, callback }; + + return this.eventUuid; + } + + public static unregister(eventName: string, tag: number) { + if (tag == null) { + this.eventList[eventName] = undefined; + } else { + if (this.eventList[eventName] !== undefined && this.eventList[eventName][tag] !== undefined) { + this.eventList[eventName][tag] = undefined; + } + } + } + + public static dispatch(eventName: string, data: any) { + const eventList: IEventData[] = this.eventList[eventName]; + if (eventList !== undefined) { + for (const key in eventList) { + if (eventList[key].callback !== undefined) { + eventList[key].callback(data); + } + } + } + } +} From 2068bb0954b825619446e20eca85cb96c3634f45 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Tue, 11 Aug 2020 09:52:29 +0800 Subject: [PATCH 4/4] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E5=8F=B3=E4=BE=A7?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E6=A0=8F=E5=9F=BA=E6=9C=AC=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=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 | 83 ++++-- .../collection-tools.component.scss | 48 +++- .../collection-tools.component.ts | 268 +++++++++++++++++- 3 files changed, 363 insertions(+), 36 deletions(-) diff --git a/src/app/ui/collection-tools/collection-tools.component.html b/src/app/ui/collection-tools/collection-tools.component.html index b0e2e44..525cc48 100644 --- a/src/app/ui/collection-tools/collection-tools.component.html +++ b/src/app/ui/collection-tools/collection-tools.component.html @@ -176,46 +176,95 @@

是否高亮

- + 选中高亮

{{item.PropertyName}}

- +

{{item.PropertyName}}

- +

{{item.PropertyName}}

- +
-
+

{{item.PropertyName}}

{{imagesArr.length ? imagesArr.length : 0}} / {{item.PropertyValue}} - -
添加
-
-
-
-
+ +
添加
+ + +
+
+
+
+ +
+
+ + delete +
- -
-
-
- + +
+

{{item.PropertyName}}

+ +
+ +
+

{{item.PropertyName}}

+ 是 + 否 +
+ +
+

{{item.PropertyName}}

+ +
+ +
+

{{item.PropertyName}}

+ +
+ +
@@ -227,8 +276,6 @@
- - diff --git a/src/app/ui/collection-tools/collection-tools.component.scss b/src/app/ui/collection-tools/collection-tools.component.scss index df34111..a3e3f08 100644 --- a/src/app/ui/collection-tools/collection-tools.component.scss +++ b/src/app/ui/collection-tools/collection-tools.component.scss @@ -164,6 +164,9 @@ margin:1px 0 3px 8px; font-size: 14px; } + span{ + font-size: 15px; + } input{ height: 18px; } @@ -186,14 +189,37 @@ .swiper-button-next{ right: 6px; } - .swiper-button-next:after{ - font-size: 20px; - } + // .swiper-button-next:after{ + // font-size: 20px; + // } .swiper-button-prev{ left: 6px; } - .swiper-button-prev:after{ - font-size: 20px; + // .swiper-button-prev:after{ + // font-size: 20px; + // } + .swiper-container{ + // --swiper-theme-color: #ff6600;/* 设置Swiper风格 */ + // --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */ + --swiper-navigation-size:20px;/* 设置按钮大小 */ + } + .hoverred:hover{ + color: rgb(187, 28, 28); + } + .selectDiv{ + height: 21px; + position: relative; + margin-bottom: 5px; + select{ + width: 98px; + height: 22px; + vertical-align: middle; + position: absolute; + right: 10px; + top: 1px; + border: 1px solid rgb(208, 211, 214); + border-radius: 2px; + } } } } @@ -209,4 +235,16 @@ div:focus { outline: none; +} +//没有图片时显示无图片背景图 +.noImgCss{ + background: url(../../../assets/images/noImg.png) no-repeat center center; + background-size: 88% 100%;/*按比例缩放*/ +} +.input{ + width: 18px; + height: 18px; + vertical-align: middle; + margin-left: 9px; + margin-right: 3px; } \ No newline at end of file diff --git a/src/app/ui/collection-tools/collection-tools.component.ts b/src/app/ui/collection-tools/collection-tools.component.ts index c1b2216..440c39c 100644 --- a/src/app/ui/collection-tools/collection-tools.component.ts +++ b/src/app/ui/collection-tools/collection-tools.component.ts @@ -15,7 +15,7 @@ import Swiper from 'swiper'; export class CollectionToolsComponent implements OnInit { constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { } - + mySwiper selected = 'option1' //图标大小选择框 basicInfo:boolean = true //基本信息名称显隐 wantToWork:boolean = true //想定作业名称显隐 @@ -66,9 +66,45 @@ export class CollectionToolsComponent implements OnInit { "RuleName": "", "RuleValue": "", "PhysicalUnit": "", - "PropertyName": "名称/编号", + "PropertyName": "单行文本", "PropertyType": 0, "PropertyValue": "99999" + },{ + "Tag": "", + "Order": 0, + "Enabled": true, + "Visible": true, + "Required": false, + "RuleName": "", + "RuleValue": "", + "PhysicalUnit": "", + "PropertyName": "多行文本", + "PropertyType": 1, + "PropertyValue": "99999" + },{ + "Tag": "", + "Order": 0, + "Enabled": true, + "Visible": true, + "Required": false, + "RuleName": "", + "RuleValue": "", + "PhysicalUnit": "", + "PropertyName": "数值", + "PropertyType": 2, + "PropertyValue": "666" + }, { + "Tag": "", + "Order": 0, + "Enabled": true, + "Visible": true, + "Required": false, + "RuleName": "", + "RuleValue": "", + "PhysicalUnit": "张", + "PropertyName": "布尔值", + "PropertyType": 6, + "PropertyValue": "1" }, { "Tag": "", "Order": 0, @@ -105,6 +141,66 @@ export class CollectionToolsComponent implements OnInit { "PropertyName": "图片", "PropertyType": 3, "PropertyValue": "/api/Objects/PlanPlatform/5e7c0ff1bb3cf106508afaed.png" + }, { + "Tag": null, + "Order": 0, + "Enabled": false, + "Visible": false, + "Required": false, + "RuleName": null, + "RuleValue": null, + "PhysicalUnit": null, + "PropertyName": "图片", + "PropertyType": 3, + "PropertyValue": "/api/Objects/PlanPlatform/5e7abccbefc8471c94ff19ff.png" + }, { + "Tag": null, + "Order": 0, + "Enabled": false, + "Visible": false, + "Required": false, + "RuleName": null, + "RuleValue": null, + "PhysicalUnit": null, + "PropertyName": "图片", + "PropertyType": 3, + "PropertyValue": "/api/Objects/PlanPlatform/5e7d68e5e72823213c55e4cf.png" + },{ + "Tag": null, + "Order": 0, + "Enabled": false, + "Visible": false, + "Required": false, + "RuleName": null, + "RuleValue": null, + "PhysicalUnit": null, + "PropertyName": "方向", + "PropertyType": 5, + "PropertyValue": "4" + },{ + "Tag": null, + "Order": 0, + "Enabled": false, + "Visible": false, + "Required": false, + "RuleName": null, + "RuleValue": null, + "PhysicalUnit": null, + "PropertyName": "供给区域", + "PropertyType": 7, + "PropertyValue": "4" + },{ + "Tag": null, + "Order": 0, + "Enabled": false, + "Visible": false, + "Required": false, + "RuleName": null, + "RuleValue": null, + "PhysicalUnit": null, + "PropertyName": "供给类型", + "PropertyType": 8, + "PropertyValue": "4" }], "IsFromBuilding": false, "InteractiveMode": 0 @@ -115,11 +211,17 @@ export class CollectionToolsComponent implements OnInit { sliderValue:number = 0//滑竿的值 isHighLight:boolean = false//是否高亮选择框 PropertyInfos = [] //去除图片链接真正用于循环的内容 + imagesArrNum //素材属性图片数量上限 imagesArr = [] //属性中的图片链接集合 - clickedIndex //点击图片的索引值 + clickedIndex //点击图片时的索引值 + //传入素材对象，设置右侧属性栏内容 + canvasAssetObj //传入的素材属性对象 + isImgNumCss = false //控制上传文件input显隐 + setAssetsProperty(obj){ let _this = this + this.canvasAssetObj = obj this.assetName = obj.Name this.assetWidth = obj.Width this.assetHeight = obj.Height @@ -131,14 +233,16 @@ export class CollectionToolsComponent implements OnInit { }else{ this.PropertyInfos.push(item) } + if(item.PropertyType == 4){ + this.imagesArrNum = item.PropertyValue + } }) //如果存在图片则加载轮播图 if(this.imagesArr.length){ - setTimeout(() => { - var mySwiper = new Swiper('.swiper-container',{ + this.mySwiper = new Swiper('.swiper-container',{ loop: false, - grabCursor: true, + // grabCursor: true, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', @@ -149,12 +253,15 @@ export class CollectionToolsComponent implements OnInit { _this.clickedIndex = this.clickedIndex }, } - - }); + }); }, 0); - } - + //判断此时图片数量是否达到上限 + if(this.imagesArr.length < this.imagesArrNum){//如果不超出 + this.isImgNumCss = true + }else{ + this.isImgNumCss = false + } } //素材宽度输入框改变 @@ -173,22 +280,159 @@ export class CollectionToolsComponent implements OnInit { assetHighLightIunput(){ } + //动态属性素材input框值改变 + assetInputChange(i,e){ + let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{ + return i.PropertyName == item.PropertyName + }) + this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value + } + //动态属性素材布尔值框改变radio + assetRadioChange(i,boolean){ + let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{ + return i.PropertyName == item.PropertyName + }) + this.canvasAssetObj.PropertyInfos[index].PropertyValue = boolean + } + //查看图片详情 lookImg(){ const dialogRef = this.dialog.open(ViewDetails, {//调用open方法打开对话框并且携带参数过去 data: {imagesArr:this.imagesArr,index:this.clickedIndex} }); + dialogRef.afterClosed().subscribe(data=>{ + + }); + } + + //上传素材图片 + selectFile(e){ + let imgFile = e.target.files[0] || null //上传的文件 + this.startUploading(imgFile) } + objectName:any //上传对象名 + startUploading (imgFile) { + let _this = this + let file = imgFile || null //获取上传的文件 + let fileSize = file.size || null //上传文件的总大小 + let shardSize = 5 * 1024 * 1024 //5MB一个分片 + let companyId = sessionStorage.getItem("companyId") + if (file && fileSize <= shardSize) { //上传文件<=5MB时 + let formData = new FormData() + formData.append("file",file) + this.http.post(`api/Objects/WebPlan2D/${companyId}`,formData).subscribe((data:any)=>{ + this.objectName = data.objectName + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('上传成功','确定',config) + + //在原始素材对象和需要循环图片的对象中分别push最新上传的图片 + let imgObj = { + "Tag": null, + "Order": 0, + "Enabled": false, + "Visible": false, + "Required": false, + "RuleName": null, + "RuleValue": null, + "PhysicalUnit": null, + "PropertyName": "图片", + "PropertyType": 3, + "PropertyValue": "/api/Objects/WebPlan2D/" + this.objectName + } + this.imagesArr.push(imgObj) + this.canvasAssetObj.PropertyInfos.push(imgObj) + setTimeout(() => { + this.mySwiper.update(); + this.mySwiper.slideTo(this.imagesArr.length - 1) + }, 0); + + //判断上传素材属性图片是否超出数量 超出数量则隐藏input框 + if(this.imagesArr.length < this.imagesArrNum){//不超出input才会显示 + this.isImgNumCss = true + }else{ + this.isImgNumCss = false + } + //此处需要把 this.canvasAssetObj这个传入对象 返回给canvas ↓↓↓↓↓↓↓↓↓↓ + + + }) + } else if (file && fileSize>shardSize) { //上传文件>5MB时,分块上传 + let config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('上传图片文件不允许大于5mb','确定',config); + } + } + //不能上传图片提示 + imgNumBeyond(){ + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('图片数量已达上限','确定',config); + } + //删除素材属性图片 + deleteImg(){ + if(this.imagesArr.length == 0){ + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('没有可删除的图片，请先上传','确定',config) + }else{ + //在素材原始对象中将删除的图片去掉 + this.canvasAssetObj.PropertyInfos = [...this.canvasAssetObj.PropertyInfos.filter((item)=>{ + return item.PropertyValue != this.imagesArr[this.mySwiper.activeIndex].PropertyValue + })] + //在图片循环数组中将图片去掉 + this.imagesArr.splice(this.mySwiper.activeIndex, 1); + //更新swiper视图 + setTimeout(() => { + this.mySwiper.update(); + }, 0); + //此处需要把 this.canvasAssetObj这个传入对象 返回给canvas ↓↓↓↓↓↓↓↓↓↓ + + + + + } + } + //动态属性方向select选择框 + direction(i,e){ + let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{ + return i.PropertyName == item.PropertyName + }) + this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value + } + //动态属性供给区域select选择框 + supplyArea(i,e){ + let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{ + return i.PropertyName == item.PropertyName + }) + this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value + } + //动态属性供给类型select选择框 + supplyType(i,e){ + let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{ + return i.PropertyName == item.PropertyName + }) + this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value + } ngOnInit(): void { this.getAllLibrary() this.getSitePlan() this.getAllBuildings() this.setAssetsProperty(this.proObject) //测试 - + function xxx(args) { + console.log(args) + } + xxx({ + name:"xxxx" + }) } //点击基本信息名称 @@ -587,7 +831,6 @@ export class EditBuilding { } //查看图片大图 -//查看图片大图和视频 @Component({ selector: 'viewdetails', templateUrl: './viewdetails.html', @@ -606,7 +849,6 @@ export class ViewDetails { setTimeout(() => { var mySwiper = new Swiper('.swiper-container',{ loop: false, - grabCursor: true, initialSlide :this.data.index,//默认索引 // 如果需要前进后退按钮 navigation: {