diff --git a/debug.log b/debug.log index afb5003..242e65d 100644 --- a/debug.log +++ b/debug.log @@ -3,3 +3,4 @@ [1226/082525.401:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3) [0104/111348.201:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3) [0104/133113.885:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3) +[0105/083228.618:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3) diff --git a/src/app/working-area/model/axArrowConnector.ts b/src/app/working-area/model/axArrowConnector.ts index e334a69..68b2828 100644 --- a/src/app/working-area/model/axArrowConnector.ts +++ b/src/app/working-area/model/axArrowConnector.ts @@ -7,8 +7,6 @@ import { Sprite } from 'pixi.js'; * 杩炴帴绠ご */ export class AxArrowConnector extends AxShape { - - pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png') pointSprites: Array = new Array(); line: PIXI.Graphics; text: PIXI.Text; @@ -64,29 +62,30 @@ export class AxArrowConnector extends AxShape { }); this.pointSprites.forEach((value, index, array) => { value.interactive = true; - value.on('mousedown', event => { - event.stopPropagation(); - if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { - event.currentTarget.data = event.data; - event.currentTarget.alpha = 0.5; - event.currentTarget.dragging = true; - } - }) - .on('mouseup', event => { + value + .on('pointerdown', event => { + event.stopPropagation(); + if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { + event.currentTarget.data = event.data; + event.currentTarget.alpha = 0.5; + event.currentTarget.dragging = true; + } + }) + .on('pointerup', event => { if (event.currentTarget.dragging) { event.currentTarget.alpha = 1; event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mouseupoutside', event => { + .on('pointerupoutside', event => { if (event.currentTarget.dragging) { event.currentTarget.alpha = 1; event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mousemove', event => { + .on('pointermove', event => { if (event.currentTarget.dragging) { const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); event.currentTarget.x = newPosition.x; @@ -96,22 +95,30 @@ export class AxArrowConnector extends AxShape { this.assetData.MultiPoint[index].y = newPosition.y; this.workingArea.canvasData.isChange = true; this.refresh(); + this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); } }) .on('rightclick', event => { }); }) - this.setPointsVisible(false); + this.setPointVisiable(false); } /** * 璁剧疆鐐规樉绀虹姸鎬 * @param b true/false */ - public setPointsVisible(b:boolean) { + public setPointVisiable(b:boolean) { this.pointSprites.forEach(item => { item.visible = b; }) + } + // 璁剧疆缂╂斁 + public setItemScale(scale: number) { + this.text.scale.set(scale); + this.pointSprites.forEach(point => { + point.scale.set(scale); + }); } /** * 鍒锋柊褰㈢姸 @@ -122,8 +129,8 @@ export class AxArrowConnector extends AxShape { if (pts.length < 2) { return; } - this.text.position = pts[0]; - this.text.anchor.set(0.5, 1); + this.text.position = this.getLineCenter(pts[0], pts[1]); + this.text.anchor.set(0.5); this.text.text = this.assetData.Name + '\r\n' + this.assetData.PropertyInfos?.find(item => item.PropertyName === '鍚嶇О/缂栧彿')?.PropertyValue; diff --git a/src/app/working-area/model/axImageShape.ts b/src/app/working-area/model/axImageShape.ts index fbe1c71..bce7e50 100644 --- a/src/app/working-area/model/axImageShape.ts +++ b/src/app/working-area/model/axImageShape.ts @@ -13,7 +13,6 @@ import { AxArrowConnector } from './axArrowConnector'; * AxImageShape */ export class AxImageShape extends AxShape { - pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png') connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png'); style = new PIXI.TextStyle({ fontFamily: 'Arial', @@ -72,27 +71,30 @@ export class AxImageShape extends AxShape { this.addChild(this.selectionBox); //// - let rect = this.getLocalBounds(); // up-left this.upLeft = new PIXI.Sprite(this.pointTexture); this.upLeft.anchor.set(0.5); this.addChild(this.upLeft); this.upLeft.interactive = true; + this.upLeft.visible = false; // up-right this.upRight = new PIXI.Sprite(this.pointTexture); this.upRight.anchor.set(0.5); this.addChild(this.upRight); this.upRight.interactive = true; + this.upRight.visible = false; // down-left this.downLeft = new PIXI.Sprite(this.pointTexture); this.downLeft.anchor.set(0.5); this.addChild(this.downLeft); this.downLeft.interactive = true; + this.downLeft.visible = false; // down-right this.downRight = new PIXI.Sprite(this.pointTexture); this.downRight.anchor.set(0.5); this.addChild(this.downRight); this.downRight.interactive = true; + this.downRight.visible = false; //// @@ -106,16 +108,17 @@ export class AxImageShape extends AxShape { this.addChild(this.connectPoint); this.connectPoint.interactive = true; this.connectPoint - .on('mousedown', event => { + .on('pointerdown', event => { event.stopPropagation(); this.paintingPipeline(this.x, this.y); }) - .on('mouseover', event => { + .on('pointerover', event => { this.setSelectionBox(true, this.connectPoint); }) - .on('mouseout', event => { + .on('pointerout', event => { this.setSelectionBox(false); - }); + }); + this.showConnectionPoint(false); } } // 璁剧疆閫夋嫨妗 @@ -137,14 +140,56 @@ export class AxImageShape extends AxShape { // 鏄剧ず杩炴帴鐐 public showConnectionPoint(b: boolean) { this.connectPoint.visible = b; - // this.up.visible = b; - // this.down.visible = b; - // this.left.visible = b; - // this.right.visible = b; - // this.upLeft.visible = b; - // this.downLeft.visible = b; - // this.upRight.visible = b; - // this.downRight.visible = b; + } + /** + * 璁剧疆鐐规樉绀虹姸鎬 + * @param value 鏄剧ず鐘舵 + */ + public setPointVisiable(value: boolean) { + let rect = this.getLocalBounds(); + this.upLeft.x = rect.left; + this.upLeft.y = rect.top; + this.upRight.x = rect.right; + this.upRight.y = rect.top; + this.downLeft.x = rect.left; + this.downLeft.y = rect.bottom; + this.downRight.x = rect.right; + this.downRight.y = rect.bottom; + this.upLeft.visible = value; + this.upRight.visible = value; + this.downLeft.visible = value; + this.downRight.visible = value; + } + /** + * + * @param scale 缁樺埗杈规 + */ + public drawBorder(scale: number) { + let visible = this.upLeft.visible; + this.setPointVisiable(false); + + super.drawBorder(scale); + let rect = this.getLocalBounds(); + this.upLeft.x = rect.left; + this.upLeft.y = rect.top; + this.upRight.x = rect.right; + this.upRight.y = rect.top; + this.downLeft.x = rect.left; + this.downLeft.y = rect.bottom; + this.downRight.x = rect.right; + this.downRight.y = rect.bottom; + this.setPointVisiable(visible); + } + public setItemScale(scale: number) { + if (this.assetData.FixedSize) { + this.scale.set(scale); + } else { + this.text.scale.set(scale); + this.upLeft.scale.set(scale); + this.upRight.scale.set(scale); + this.downLeft.scale.set(scale); + this.downRight.scale.set(scale); + } } paintingPipeline(x: number, y: number) { if (this.assetData.CanConnect) { diff --git a/src/app/working-area/model/axShape.ts b/src/app/working-area/model/axShape.ts index f3e64e0..3023a7f 100644 --- a/src/app/working-area/model/axShape.ts +++ b/src/app/working-area/model/axShape.ts @@ -8,6 +8,7 @@ import { WorkingAreaComponent } from '../working-area.component'; */ export class AxShape extends Container { assetData: any; + pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png') workingArea: WorkingAreaComponent; // 鍙互琚Щ鍔ㄧ殑 moveable = true; @@ -131,7 +132,7 @@ export class AxShape extends Container { * @param rect 鐢昏竟妗 */ public drawBorder(scale: number) { - if (this.visible === false) { return;} + scale = this.assetData.FixedSize ? 1 : scale; this.border.clear(); const rect = this.getLocalBounds(); const p1 = new PIXI.Point(rect.left, rect.top); @@ -187,5 +188,34 @@ export class AxShape extends Container { hyp -= spaceLength; } target.moveTo(x2, y2); - } + } + // 璁＄畻澶氳竟褰㈤噸蹇 + public calculatePolygonGravityCenter(points: PIXI.Point[]) { + let area = 0.0; // 澶氳竟褰㈤潰绉 + let gravityLat = 0.0; // 閲嶅績鐐 latitude + let gravityLng = 0.0; // 閲嶅績鐐 longitude + points.forEach((item, index) => { + // 1 + const lat = item.x; + const lng = item.y; + const nextLat = points[(index + 1) % points.length].x; + const nextLng = points[(index + 1) % points.length].y; + // 2 + const tempArea = (nextLat * lng - nextLng * lat) / 2.0; + // 3 + area += tempArea; + // 4 + gravityLat += tempArea * (lat + nextLat) / 3; + gravityLng += tempArea * (lng + nextLng) / 3; + }); + // 5 + gravityLat = gravityLat / area; + gravityLng = gravityLng / area; + + return new PIXI.Point(gravityLat, gravityLng); + } + // 璁＄畻绾挎涓偣鍧愭爣 + public getLineCenter(point1:PIXI.Point,point2:PIXI.Point) { + return new PIXI.Point((point1.x+point2.x)/2,(point1.y+point2.y)/2) + } } diff --git a/src/app/working-area/model/multipointIcon.ts b/src/app/working-area/model/multipointIcon.ts index 6d3b6fe..2416956 100644 --- a/src/app/working-area/model/multipointIcon.ts +++ b/src/app/working-area/model/multipointIcon.ts @@ -8,7 +8,7 @@ import { AxShape } from './axShape'; */ export class MultipointIcon extends AxShape { public pointsData: PIXI.Point[]; - public pointsGraphics: PIXI.Graphics[] = []; + public pointsGraphics: PIXI.Sprite[] = []; public iconsTilingSprite: PIXI.TilingSprite[] = []; style = new PIXI.TextStyle({ fontFamily: 'Arial', @@ -42,6 +42,11 @@ export class MultipointIcon extends AxShape { this.x = this.assetData.Point.x; this.y = this.assetData.Point.y; this.workingArea.backgroundImage.addChild(this); + + this.text.anchor.set(0.5,0.5); + // this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]); + this.text.visible = this.showName; + this.addChild(this.text); // 鐢荤嚎鍥炬爣 for (let i = 0, count = this.pointsData.length - 1; i < count; i++) { const pointA = this.pointsData[i]; @@ -60,23 +65,16 @@ export class MultipointIcon extends AxShape { // icon.height = this.assetData.Thickness === 0 ? 32 : this.assetData.Thickness; this.iconsTilingSprite.push(icon); this.addChild(icon); - if (i === 0) { - this.text.anchor.set(0.5); - this.text.position = icon.position; - this.text.y -= this.assetData.Height; - this.text.visible = this.showName; - this.addChild(this.text); - } + this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]); } + this.sortableChildren = true; + this.text.zIndex = this.pointsData.length; // 鐢荤偣 this.pointsData.forEach((item, index, array) => { - const iconPoint = new PIXI.Graphics(); - iconPoint.lineStyle(1, 0xFFBD01, 1); - iconPoint.beginFill(0xFFFFFF, 1); - iconPoint.drawCircle(0, 0, 15); + const iconPoint = PIXI.Sprite.from(this.pointTexture); + iconPoint.anchor.set(0.5); iconPoint.x = item.x; iconPoint.y = item.y; - iconPoint.endFill(); iconPoint.visible = false; this.pointsGraphics.push(iconPoint); this.addChild(iconPoint); @@ -84,7 +82,7 @@ export class MultipointIcon extends AxShape { // 娣诲姞鍦嗙偣浜嬩欢 this.pointsGraphics.forEach((item, index, array) => { item.interactive = true; - item.on('mousedown', event => { + item.on('pointerdown', event => { event.stopPropagation(); if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { event.currentTarget.data = event.data; @@ -92,21 +90,21 @@ export class MultipointIcon extends AxShape { event.currentTarget.dragging = true; } }) - .on('mouseup', event => { + .on('pointerup', event => { if (event.currentTarget.dragging) { event.currentTarget.alpha = 1; event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mouseupoutside', event => { + .on('pointerupoutside', event => { if (event.currentTarget.dragging) { event.currentTarget.alpha = 1; event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mousemove', event => { + .on('pointermove', event => { if (event.currentTarget.dragging) { const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); event.currentTarget.x = newPosition.x; @@ -129,9 +127,6 @@ export class MultipointIcon extends AxShape { const distance = Math.sqrt(a * a + b * b); this.iconsTilingSprite[index].angle = angle; this.iconsTilingSprite[index].width = distance; - - this.text.position = this.iconsTilingSprite[index].position; - this.text.y -= this.assetData.Height; } else if (index < array.length - 1) {// 涓嶆槸绗竴涓偣锛屼篃涓嶆槸鏈鍚庝竴涓偣 this.iconsTilingSprite[index].x = newPosition.x; this.iconsTilingSprite[index].y = newPosition.y; @@ -165,61 +160,12 @@ export class MultipointIcon extends AxShape { this.iconsTilingSprite[index - 1].width = distanceC; } this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); + this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]); } }) .on('rightclick', event => { }); }); - // // 缂╂斁 - // this.workingArea.on('backgroundScale', data => { - // const scale = 1 / data; - // this.text.scale.set(scale); - // }); - // 娣诲姞閫変腑浜嬩欢 - // this.iconsTilingSprite.forEach((item, index, array) => { - // item.interactive = true; - // item.buttonMode = true; - // item.on('mousedown', event => { - // event.stopPropagation(); - // this.workingArea.selection.selectOne(this); - // if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { - // 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 => { - // if (event.currentTarget.parent.dragging) { - // event.currentTarget.parent.alpha = 1; - // event.currentTarget.parent.dragging = false; - // event.currentTarget.parent.data = null; - // } - // }) - // .on('mouseupoutside', event => { - // if (event.currentTarget.parent.dragging) { - // 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; - - // this.assetData.Point = new PIXI.Point(this.x, this.y); - // this.workingArea.canvasData.isChange = true; - // } - // }) - // .on('rightclick', event => { - - // }); - // }); } /** * 璁剧疆鐐规樉绀虹姸鎬 @@ -236,6 +182,13 @@ export class MultipointIcon extends AxShape { this.text.visible = value; } } + // 璁剧疆缂╂斁 + public setItemScale(scale: number) { + this.text.scale.set(scale); + this.pointsGraphics.forEach((item, index, array) => { + item.scale.set(scale); + }); + } // 鍒锋柊鏁版嵁 public refresh() { // console.log(this.assetData); diff --git a/src/app/working-area/model/polygonIcon.ts b/src/app/working-area/model/polygonIcon.ts index 056cb42..1bf4f42 100644 --- a/src/app/working-area/model/polygonIcon.ts +++ b/src/app/working-area/model/polygonIcon.ts @@ -9,9 +9,9 @@ import { AxShape } from './axShape'; */ export class PolygonIcon extends AxShape { public pointsData: PIXI.Point[]; - public pointsGraphics: PIXI.Graphics[] = []; + public pointsGraphics: PIXI.Sprite[] = []; public polygonGraphics: PIXI.Graphics = new PIXI.Graphics(); - public polygonLineGraphics: PIXI.Graphics = new PIXI.Graphics(); + // public polygonLineGraphics: PIXI.Graphics = new PIXI.Graphics(); style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 18, @@ -46,13 +46,14 @@ export class PolygonIcon extends AxShape { this.sortableChildren = true; // 鐢荤偣 this.pointsData.forEach((item, index, array) => { - const iconPoint = new PIXI.Graphics(); - iconPoint.lineStyle(1, 0xFFBD01, 1); - iconPoint.beginFill(0xFFFFFF, 1); - iconPoint.drawCircle(0, 0, 15); + const iconPoint = PIXI.Sprite.from(this.pointTexture); + // iconPoint.lineStyle(1, 0xFFBD01, 1); + // iconPoint.beginFill(0xFFFFFF, 1); + // iconPoint.drawCircle(0, 0, 15); + iconPoint.anchor.set(0.5); iconPoint.x = item.x; iconPoint.y = item.y; - iconPoint.endFill(); + // iconPoint.endFill(); iconPoint.visible = false; this.pointsGraphics.push(iconPoint); this.addChild(iconPoint); @@ -66,10 +67,10 @@ export class PolygonIcon extends AxShape { this.polygonGraphics.endFill(); this.addChild(this.polygonGraphics); // 鐢诲杈瑰舰 - this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1); - this.polygonLineGraphics.drawPolygon(this.getPoints()); - this.polygonLineGraphics.closePath(); - this.addChild(this.polygonLineGraphics); + // this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1); + // this.polygonLineGraphics.drawPolygon(this.getPoints()); + // this.polygonLineGraphics.closePath(); + // this.addChild(this.polygonLineGraphics); this.text.anchor.set(0.5); this.text.position = this.calculatePolygonGravityCenter(this.pointsData); @@ -81,7 +82,7 @@ export class PolygonIcon extends AxShape { item.interactive = true; item.buttonMode = true; item.zIndex = 1; - item.on('mousedown', event => { + item.on('pointerdown', event => { event.stopPropagation(); if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { event.currentTarget.data = event.data; @@ -89,21 +90,21 @@ export class PolygonIcon extends AxShape { event.currentTarget.dragging = true; } }) - .on('mouseup', event => { + .on('pointerup', event => { if (event.currentTarget.dragging) { event.currentTarget.alpha = 1; event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mouseupoutside', event => { + .on('pointerupoutside', event => { if (event.currentTarget.dragging) { event.currentTarget.alpha = 1; event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mousemove', event => { + .on('pointermove', event => { if (event.currentTarget.dragging) { const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); event.currentTarget.x = newPosition.x; @@ -117,13 +118,14 @@ export class PolygonIcon extends AxShape { this.polygonGraphics.beginFill(color, angle); this.polygonGraphics.drawPolygon(this.getPoints()); this.polygonGraphics.endFill(); - // 鐢诲杈瑰舰 - this.polygonLineGraphics.clear(); - this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1); - this.polygonLineGraphics.drawPolygon(this.getPoints()); - this.polygonLineGraphics.closePath(); + // // 鐢诲杈瑰舰 + // this.polygonLineGraphics.clear(); + // this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1); + // this.polygonLineGraphics.drawPolygon(this.getPoints()); + // this.polygonLineGraphics.closePath(); this.text.position = this.calculatePolygonGravityCenter(this.pointsData); + this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); } }) .on('rightclick', event => { @@ -134,7 +136,7 @@ export class PolygonIcon extends AxShape { this.workingArea.previewImage.visible = false; } }) - .on('mouseout', event => { + .on('pointerout', event => { event.stopPropagation(); if (this.workingArea.previewImage !== null && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) { @@ -142,64 +144,6 @@ export class PolygonIcon extends AxShape { } }); }); - // // 娣诲姞閫変腑浜嬩欢 - // this.polygonGraphics.interactive = true; - // this.polygonGraphics.buttonMode = true; - // this.polygonGraphics - // .on('mousedown', event => { - // event.stopPropagation(); - // this.workingArea.selection.selectOne(this); - // if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { - // 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 => { - // if (event.currentTarget.parent.dragging) { - // event.currentTarget.parent.alpha = 1; - // event.currentTarget.parent.dragging = false; - // event.currentTarget.parent.data = null; - // } - // }) - // .on('mouseupoutside', event => { - // if (event.currentTarget.parent.dragging) { - // 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; - - // this.assetData.Point = new PIXI.Point(this.x, this.y); - // this.workingArea.canvasData.isChange = true; - // } - // }) - // .on('rightclick', event => { - // // this.workingArea.selection.deselectAll(); - // }) - // .on('mouseover', event => { - // event.stopPropagation(); - // if (this.workingArea.previewImage !== null - // && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) { - // this.workingArea.previewImage.visible = false; - // } - // }) - // .on('mouseout', event => { - // event.stopPropagation(); - // if (this.workingArea.previewImage !== null - // && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) { - // this.workingArea.previewImage.visible = true; - // } - // }); } /** * 璁剧疆鐐规樉绀虹姸鎬 @@ -210,31 +154,14 @@ export class PolygonIcon extends AxShape { item.visible = value; }); } - - public calculatePolygonGravityCenter(points: PIXI.Point[]) { - let area = 0.0; // 澶氳竟褰㈤潰绉 - let gravityLat = 0.0; // 閲嶅績鐐 latitude - let gravityLng = 0.0; // 閲嶅績鐐 longitude - points.forEach((item, index) => { - // 1 - const lat = item.x; - const lng = item.y; - const nextLat = points[(index + 1) % points.length].x; - const nextLng = points[(index + 1) % points.length].y; - // 2 - const tempArea = (nextLat * lng - nextLng * lat) / 2.0; - // 3 - area += tempArea; - // 4 - gravityLat += tempArea * (lat + nextLat) / 3; - gravityLng += tempArea * (lng + nextLng) / 3; + // 璁剧疆缂╂斁 + public setItemScale(scale: number) { + this.text.scale.set(scale); + this.pointsGraphics.forEach(point => { + point.scale.set(scale); }); - // 5 - gravityLat = gravityLat / area; - gravityLng = gravityLng / area; - - return new PIXI.Point(gravityLat, gravityLng); } + /** * 鑾峰彇鐐归泦鍚 */ diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 8808298..19d830e 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -262,6 +262,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV if (this.circleShadow !== null && this.backgroundImage !== null) { this.circleShadow.position = this.backgroundImage.toLocal(this.mousePosition); this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position); + this.refreshPreviewPoint(); } /** * 鏄剧ず妗嗛 @@ -301,43 +302,31 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.on('deselect', shape => { if (shape instanceof AxShape) { shape.hideBorder(); - shape.setPointVisiable(this.allowEdit); + shape.setPointVisiable(false); } }); /** * 鏍规嵁鑳屾櫙缂╂斁浜嬩欢 */ this.on('backgroundScale', scale => { + const data = 1 / scale; this.backgroundImage?.children.forEach(item => { if (item instanceof AxImageShape) { - if (item.assetData.FixedSize) { - const data = 1 / scale; - item.scale.set(data); - } else { - const data = 1 / scale; - item.text.scale.set(data); - } + item.setItemScale(data); + item.drawBorder(data); } else if (item instanceof MultipointIcon) { - const data = 1 / scale; - item.text.scale.set(data); + item.setItemScale(data); + item.drawBorder(data); } else if (item instanceof PolygonIcon) { - const data = 1 / scale; - item.text.scale.set(data); - item.pointsGraphics.forEach(point => { - point.scale.set(data); - }); + item.setItemScale(data); + item.drawBorder(data); } else if (item instanceof AxPreviewImageShape) { - const data = 1 / scale; item.scale.set(data); } else if (item instanceof AxArrowConnector) { - const data = 1 / scale; - item.text.scale.set(data); - item.pointSprites.forEach(point => { - point.scale.set(data); - }); + item.setItemScale(data); + item.drawBorder(data); } }); - }); /** * 鍒涘缓鍥炬爣浜嬩欢锛堟暟鎹鐞嗭級 @@ -476,6 +465,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 鍒涘缓妤煎眰鍥惧舰 */ public createFloorShape(floorData: any) { + if (floorData === undefined || floorData === null) return; Object.keys(floorData).forEach((key) => { switch (floorData[key].InteractiveMode) { case 0: @@ -931,7 +921,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV */ private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) { this.previewLineSegment.clear(); - this.previewLineSegment.lineStyle(5, 0x00ff00, 1); + this.previewLineSegment.lineStyle(1/this.backgroundImage.scale.x, 0x00ff00, 1); this.previewLineSegment.moveTo(pointA.x, pointA.y); this.previewLineSegment.lineTo(pointB.x, pointB.y ); } @@ -940,12 +930,21 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * @param x 鍗婂緞 */ private createCircleShadow(): void { - this.circleShadow.beginFill(0xFFCC5A); - this.circleShadow.drawCircle(0, 0, 10); - this.circleShadow.endFill(); + // this.circleShadow.beginFill(0xFFCC5A); + // this.circleShadow.drawCircle(0, 0, 10); + // this.circleShadow.endFill(); this.circleShadow.visible = false; this.backgroundImage.addChild(this.circleShadow); } + /** + * 鍒锋柊棰勮鐐 + */ + private refreshPreviewPoint() { + this.circleShadow.clear(); + this.circleShadow.beginFill(0x00ff00); + this.circleShadow.drawCircle(0, 0, 5/this.backgroundImage.scale.x); + this.circleShadow.endFill(); + } showConnectionPoint(b: boolean) { this.backgroundImage?.children.forEach(item => { if (item instanceof AxImageShape) { @@ -1167,7 +1166,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV }); this.emit('backgroundScale', this.backgroundImage.scale.x); } - ////////////////////////////////////////////////////////////////////////閫氳繃///////////////////////////////////////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////閫氱敤///////////////////////////////////////////////////////////////////////////// /** * * @param id 鍥炬爣ID