import { Constructor } from '@angular/material/core/common-behaviors/constructor'; import * as PIXI from 'pixi.js'; import { Point, Rectangle, Graphics, Container } from 'pixi.js'; import { WorkingAreaComponent } from '../working-area.component'; import { PaintMode } from './paintModel'; /** * 安信形状 */ export class AxShape extends Graphics { assetData: any; pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png'); workingArea: WorkingAreaComponent; // 允许选择 allowSelect = true; // 允许编辑 allowEdit = true; // 是否显示名称 showName = true; // 边框 border: PIXI.Graphics = new PIXI.Graphics(); // 鼠标位置 mousePosition: PIXI.Point; // 鼠标拖动 mouseDragging: boolean; constructor(assetData: any, workingArea: WorkingAreaComponent) { super(); this.border.visible = false; this.addChild(this.border); this.assetData = assetData; this.workingArea = workingArea; this.workingArea.backgroundImage.addChild(this); this.zIndex = 200; this.interactive = true; // this.buttonMode = true; this .on('pointerdown', event => { if (workingArea.getPaintMode() !== PaintMode.Pipeline) { event.stopPropagation(); if (this.allowSelect && event.data.button === 0) { this.workingArea.select(this); } if (this.allowEdit) { this.mouseDragging = true; this.mousePosition = event.data.getLocalPosition(this.workingArea.backgroundImage); } } }) .on('pointerup', event => { this.mouseDragging = false; }) .on('pointerupoutside', event => { this.mouseDragging = false; }) .on('pointermove', event => { if (this.mouseDragging) { // const newPosition = event.data.getLocalPosition(this.workingArea.backgroundImage); // const x = newPosition.x - this.x; // const y = newPosition.y - this.y; // this.workingArea.selection.all().forEach(item => { // item.x += x; // item.y += y; // item.assetData.Point = new PIXI.Point(item.x, item.y); // this.workingArea.canvasData.isChange = true; // }); const newPosition = event.data.getLocalPosition(this.workingArea.backgroundImage); const offsetX = newPosition.x - this.mousePosition.x; const offsetY = newPosition.y - this.mousePosition.y; this.workingArea.selection.all().forEach(item => { item.x += offsetX; item.y += offsetY; item.assetData.Point = new PIXI.Point(item.x, item.y); this.workingArea.canvasData.isChange = true; }); this.mousePosition = newPosition; } }) .on('rightclick', event => { this.border.visible = false; }); } redraw(): void { } refresh(): void { } public setItemScale(scale: number) { } public showBorder() { this.border.visible = true; } /** * 隐藏边框 */ public hideBorder() { this.border.visible = false; } /** * 设置点显示状态 * @param value 显示状态 */ public setPointVisiable(value: boolean) { } /** * * @param rect 画边框 */ public drawBorder(scale: number) { scale = this.assetData.FixedSize ? 1 : scale; this.border.clear(); const rect = this.getLocalBounds(); const p1 = new PIXI.Point(rect.left, rect.top); const p2 = new PIXI.Point(rect.right, rect.top); const p3 = new PIXI.Point(rect.right, rect.bottom); const p4 = new PIXI.Point(rect.left, rect.bottom); this.border.lineStyle(scale * 1, 0x00a8ff); const spaceLength = scale * 1; const lineLenght = rect.width + 0.5 + 0.5; const dashLength = scale * (lineLenght + spaceLength - Math.floor((rect.width + rect.height) / 2 / 4.1)) / Math.floor((rect.width + rect.height) / 2 / 4.1); this.drawDash(this.border, p1.x - 0.5 * scale, p1.y, p2.x + 0.5 * scale, p2.y, dashLength, spaceLength); this.drawDash(this.border, p2.x, p2.y - 0.5 * scale, p3.x, p3.y + 0.5 * scale, dashLength, spaceLength); this.drawDash(this.border, p3.x + 0.5 * scale, p3.y, p4.x - 0.5 * scale, p4.y, dashLength, spaceLength); this.drawDash(this.border, p4.x, p4.y + 0.5 * scale, p1.x, p1.y - 0.5 * scale, dashLength, spaceLength); this.border.lineStyle(0, 0x0000ff); // this.border.beginFill(0x00ff00,0.1); this.border.moveTo(p1.x, p1.y); this.border.lineTo(p2.x, p2.y); this.border.lineTo(p3.x, p4.y); this.border.lineTo(p4.x, p4.y); this.border.closePath(); // this.border.endFill(); } // 画虚线 drawDash(target, x1, y1, x2, y2, dashLength = 5, spaceLength = 1) { const x = x2 - x1; const y = y2 - y1; let hyp = Math.sqrt((x) * (x) + (y) * (y)); const units = hyp / (dashLength + spaceLength); const dashSpaceRatio = dashLength / (dashLength + spaceLength); const dashX = (x / units) * dashSpaceRatio; const spaceX = (x / units) - dashX; const dashY = (y / units) * dashSpaceRatio; const spaceY = (y / units) - dashY; target.moveTo(x1, y1); while (hyp > 0) { x1 += dashX; y1 += dashY; hyp -= dashLength; if (hyp < 0) { x1 = x2; y1 = y2; } target.lineTo(x1, y1); x1 += spaceX; y1 += spaceY; target.moveTo(x1, y1); 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); } }