diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..d1b793d --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // 使用 IntelliSense 了解相关属性。 + // 悬停以查看现有属性的描述。 + // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:4000", + "webRoot": "${workspaceFolder}" + } + ] +} \ 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 92943d3..77adb12 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -402,7 +402,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV Id: Guid.NewGuid().ToString(), ImageUrl: this.canvasData.selectTemplateData.imageUrl, InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, - MultiPoint: this.paintPoints, + MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)), Point: new PIXI.Point(0, 0), Name: this.canvasData.selectTemplateData.name, PropertyInfos: propertyList, @@ -671,7 +671,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV Id: Guid.NewGuid().ToString(), ImageUrl: this.canvasData.selectTemplateData.imageUrl, InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, - MultiPoint: this.paintPoints, + MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)), Point: new PIXI.Point(0, 0), Name: this.canvasData.selectTemplateData.name, PropertyInfos: propertyList, @@ -1066,12 +1066,10 @@ export class PolygonIcon extends PIXI.Container { this.polygonLineGraphics.drawPolygon(this.getPoints()); this.polygonLineGraphics.closePath(); this.addChild(this.polygonLineGraphics); - // 名称 - // const text = new PIXI.Text(this.assetData.Name, { - // fontFamily: 'Arial', fontSize: 18, fill: 0xffffff, align: 'center' - // }); + this.text.anchor.set(0.5); - this.text.y -= this.assetData.Height; + // this.text.position = this.getCenterOfGravityPoint(this.pointsData); + console.log(this.polygonLineGraphics._bounds); this.polygonLineGraphics.addChild(this.text); // 添加圆点事件 this.pointsGraphics.forEach((item, index, array) => { @@ -1167,6 +1165,32 @@ export class PolygonIcon extends PIXI.Container { item.visible = value; }); } + + public getCenterOfGravityPoint(points) { + let sumX = 0; + let sumY = 0; + let sumArea = 0; + let area = 0; + let p1 = points[1]; + for (let i = 2; i < points.length; i++) { + const p2 = points[i]; + area = this.Area(points[0], p1, p2); + sumArea += area; + sumX += (points[0][0] + p1[0] + p2[0]) * area; + sumY += (points[0][1] + p1[1] + p2[1]) * area; + p1 = p2; + } + const pointX = sumX / sumArea / 3; + const pointY = sumY / sumArea / 3; + console.log(pointX); + console.log(pointY); + return new PIXI.Point(pointX, pointY); + } + Area(p0, p1, p2) { + let area = 0.0; + area = p0[0] * p1[1] + p1[0] * p2[1] + p2[0] * p0[1] - p1[0] * p0[1] - p2[0] * p1[1] - p0[0] * p2[1]; + return area / 2; + } /** * 获取点集合 */