From 0d317d3882a84e50d9dd34cd304a2be5c3319d01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=8C=AF=E5=8D=87?= <359059686@qq.com> Date: Fri, 27 Nov 2020 09:56:56 +0800 Subject: [PATCH] =?UTF-8?q?[=E4=BF=AE=E6=AD=A3]=20=E5=9C=A8=E7=AE=A1?= =?UTF-8?q?=E7=BA=BF=E7=BB=98=E5=88=B6=E8=BF=87=E7=A8=8B=E4=B8=AD=E7=82=B9?= =?UTF-8?q?=E5=87=BB=E5=8F=B3=E9=94=AE=E6=B2=A1=E6=9C=89=E6=AD=A3=E7=A1=AE?= =?UTF-8?q?=E7=9A=84=E9=94=80=E6=AF=81=E7=BB=98=E5=88=B6=E4=B8=AD=E7=9A=84?= =?UTF-8?q?=E7=AE=A1=E7=BA=BF=20[=E6=96=B0=E5=A2=9E]=20=E6=96=B0=E7=9A=84?= =?UTF-8?q?=E7=AE=A1=E7=BA=BF=E7=BB=98=E5=88=B6=E7=AE=97=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../working-area/working-area.component.ts | 269 +++++++++++++++--- 1 file changed, 237 insertions(+), 32 deletions(-) diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index bf31285..b6e535c 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -185,7 +185,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV && item.assetData.Type !== 3 && item.assetData.Type !== 4) { // 删除选中的图标 - let obj = this.backgroundImage.getChildByName(item.assetData.Id); + const obj = this.backgroundImage.getChildByName(item.assetData.Id); // this.backgroundImage.removeChild(obj); // 找到ll obj.destroy(); @@ -194,7 +194,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.emit('deleteIcon'); if (obj instanceof Pipeline) { obj.assetData.LinkedObjects.forEach(element => { - let index = element.assetData.Pipelines.indexOf(obj); + const index = element.assetData.Pipelines.indexOf(obj); if (index !== -1) { element.assetData.Pipelines.splice(index, 1); } @@ -310,7 +310,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // this.createEnterPaintEndButton(); // this.backgroundImage.addChild(this.paintingLine); this.on('select', obj => { - console.log(obj+"1111"); // tslint:disable-next-line: curly if (obj === null) return; this.moveIconToScreenCenter(obj); @@ -484,7 +483,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV */ public refresh(): void { console.log(this.canvasData.planSelectData); - + console.log(this.canvasData.getCarTypesAndCount()); this.destroyBackgroundImage(); @@ -1599,7 +1598,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.setPaintMode(PaintMode.Car); this.selectCar = this.carData.get(data.Id); // event.currentTarget.name = ''; - //event.currentTarget.visible = false; + // event.currentTarget.visible = false; this.selectedButton.visible = false; this.previewSinglePointIcon.texture = PIXI.Texture.from(data.ImageUrl); this.previewSinglePointIcon.visible = true; @@ -1632,7 +1631,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV carButton.setParent(this.app.stage); if (this.count >= 12) { this.count = 0; - this.clumn +=3; + this.clumn += 3; } carButton.position.set(this.clumn * 25, this.count * 65); this.count++; @@ -2111,6 +2110,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.paintingLine.clear(); this.paintMode = PaintMode.endPaint; break; + default: + break; } } /** @@ -2136,6 +2137,14 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } } }); + if (this.paintingPipeline !== null) { + // this.backgroundImage.removeChild(this.paintingPipeline); + // this.paintingPipeline = null; + this.paintingPipeline.destroy(); + this.paintingPipeline = null; + } + this.previewLineSegment.visible = false; + this.paintPoints.splice(0, this.paintPoints.length); break; case PaintMode.MoveCar: this.previewSinglePointIcon.visible = true; @@ -2321,12 +2330,13 @@ export class SinglePointIcon extends PIXI.Container { this.image.interactive = true; this.image .on('mousedown', event => { - console.log(this.assetData.Pipelines); + console.log(this.workingArea.getPaintMode()); event.stopPropagation(); this.workingArea.selection.selectOne(this); if (this.assetData.CanConnection && this.parent === this.workingArea.backgroundImage) { if (this.workingArea.getPaintMode() === PaintMode.Pipeline) { - if (this.workingArea.paintingPipeline === null) { + if (this.workingArea.paintingPipeline === null + || this.workingArea.paintingPipeline === undefined) { this.workingArea.previewLineSegment.visible = true; this.workingArea.currentClickPoint.position = new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); @@ -3021,33 +3031,228 @@ export class Pipeline extends PIXI.Container { * 刷新 */ public refresh() { - this.line.clear(); - this.line.lineStyle(5, 0x0000ff, 1); - for (let i = 0, count = this.assetData.MultiPoint.length; i < count; i++) { - const pointA = this.assetData.MultiPoint[i]; - if (i === 0) { - this.line.moveTo(pointA.x, pointA.y); - } else { - this.line.lineTo(pointA.x, pointA.y); - if (i === count - 1) { - const pointB = this.assetData.MultiPoint[i - 1]; - const angle = Math.atan2((pointA.y - pointB.y), (pointA.x - pointB.x)) * (180 / Math.PI) + 90; - this.line.beginFill(0x0000ff); - this.line.drawStar(pointA.x, pointA.y, 3, 5, 0, (Math.PI / 180 * angle)); + + const strokeWidth = 1; + const startWidth = 30 + strokeWidth; + const endWidth = 30 + strokeWidth; + const edgeWidth = 10; + const openEnded = false; + const markerStart = false; + const markerEnd = true; + const spacing = (openEnded) ? 0 : 0 + strokeWidth / 2; + const startSize = 30 + strokeWidth; + const endSize = 30 + strokeWidth; + const isRounded = true; + const pts = this.assetData.MultiPoint; + const c = this.line; + if (pts.length < 2) { return; } + const pe = pts[pts.length - 1]; + + let i0 = 1; + + while (i0 < pts.length - 1 && pts[i0].x === pts[0].x && pts[i0].y === pts[0].y) { + i0++; + } + + const dx = pts[i0].x - pts[0].x; + const dy = pts[i0].y - pts[0].y; + const dist = Math.sqrt(dx * dx + dy * dy); + + if (dist === 0) { + return; + } + + let nx = dx / dist; + let nx1 = nx; + let nx2 = nx; + let ny = dy / dist; + let ny2 = ny; + let ny1 = ny; + let orthx = edgeWidth * ny; + let orthy = -edgeWidth * nx; + + const fns = []; + c.clear(); + c.lineTextureStyle({ width: 1, color: 0x00000, join: PIXI.LINE_JOIN.ROUND }); + c.beginFill(0x0000ff); + const startNx = nx; + const startNy = ny; + + if (markerStart && !openEnded) { + this.paintMarker(c, pts[0].x, pts[0].y, nx, ny, startSize, startWidth, edgeWidth, spacing, true); } else { - this.line.drawCircle(pointA.x, pointA.y, 5); + const outStartX = pts[0].x + orthx / 2 + spacing * nx; + const outStartY = pts[0].y + orthy / 2 + spacing * ny; + const inEndX = pts[0].x - orthx / 2 + spacing * nx; + const inEndY = pts[0].y - orthy / 2 + spacing * ny; + + if (openEnded) { + c.moveTo(outStartX, outStartY); + fns.push( () => { + c.lineTo(inEndX, inEndY); + }); + } else { + c.moveTo(inEndX, inEndY); + c.lineTo(outStartX, outStartY); + } + } + let dx1 = 0; + let dy1 = 0; + let dist1 = 0; + + for (let i = 0; i < pts.length - 2; i++) { + const pos = this.relativeCcw(pts[i].x, pts[i].y, pts[i + 1].x, pts[i + 1].y, pts[i + 2].x, pts[i + 2].y); + + dx1 = pts[i + 2].x - pts[i + 1].x; + dy1 = pts[i + 2].y - pts[i + 1].y; + + dist1 = Math.sqrt(dx1 * dx1 + dy1 * dy1); + + if (dist1 !== 0) { + nx1 = dx1 / dist1; + ny1 = dy1 / dist1; + + const tmp1 = nx * nx1 + ny * ny1; + const tmp = Math.max(Math.sqrt((tmp1 + 1) / 2), 0.04); + + nx2 = (nx + nx1); + ny2 = (ny + ny1); + + const dist2 = Math.sqrt(nx2 * nx2 + ny2 * ny2); + + if (dist2 !== 0) { + nx2 = nx2 / dist2; + ny2 = ny2 / dist2; + + const strokeWidthFactor = Math.max(tmp, Math.min(1 / 200 + 0.04, 0.35)); + const angleFactor = (pos !== 0 && isRounded) ? Math.max(0.1, strokeWidthFactor) : Math.max(tmp, 0.06); + + const outX = pts[i + 1].x + ny2 * edgeWidth / 2 / angleFactor; + const outY = pts[i + 1].y - nx2 * edgeWidth / 2 / angleFactor; + const inX = pts[i + 1].x - ny2 * edgeWidth / 2 / angleFactor; + const inY = pts[i + 1].y + nx2 * edgeWidth / 2 / angleFactor; + + if (pos === 0 || !isRounded) { + c.lineTo(outX, outY); + + ((x, y) => { + fns.push(() => { + c.lineTo(x, y); + }); + })(inX, inY); + } else if (pos === -1) { + const c1x = inX + ny * edgeWidth; + const c1y = inY - nx * edgeWidth; + const c2x = inX + ny1 * edgeWidth; + const c2y = inY - nx1 * edgeWidth; + c.lineTo(c1x, c1y); + if (isRounded) { + c.quadraticCurveTo(outX, outY, c2x, c2y); // 圆角 + } else { + c.lineTo(outX, outY); + } + ((x, y) => { + fns.push(() => { + c.lineTo(x, y); + }); + })(inX, inY); + } else { + c.lineTo(outX, outY); + + ((x, y) => { + const c1x = outX - ny * edgeWidth; + const c1y = outY + nx * edgeWidth; + const c2x = outX - ny1 * edgeWidth; + const c2y = outY + nx1 * edgeWidth; + + fns.push(() => { + if (isRounded) { + c.quadraticCurveTo(x, y, c1x, c1y); + } else { + c.lineTo(x, y); + } + }); + fns.push(() => { + c.lineTo(c2x, c2y); + }); + })(inX, inY); + } + + nx = nx1; + ny = ny1; + } + } } + orthx = edgeWidth * ny1; + orthy = - edgeWidth * nx1; + + if (markerEnd && !openEnded) { + this.paintMarker(c, pe.x, pe.y, -nx, -ny, endSize, endWidth, edgeWidth, spacing, false); + } else { + c.lineTo(pe.x - spacing * nx1 + orthx / 2, pe.y - spacing * ny1 + orthy / 2); + + const inStartX = pe.x - spacing * nx1 - orthx / 2; + const inStartY = pe.y - spacing * ny1 - orthy / 2; + + if (!openEnded) { + c.lineTo(inStartX, inStartY); + } else { + c.moveTo(inStartX, inStartY); + + fns.splice(0, 0, () => { + c.moveTo(inStartX, inStartY); + }); + } + } + + for (let i = fns.length - 1; i >= 0; i--) { + fns[i](); + } + c.closePath(); + c.endFill(); + } + + paintMarker(c: PIXI.Graphics, ptX: number, ptY: number, nx: number, ny: number, + size: number, arrowWidth: number, edgeWidth: number, spacing: number, initialMove: boolean) { + const widthArrowRatio = edgeWidth / arrowWidth; + const orthx = edgeWidth * ny / 2; + const orthy = -edgeWidth * nx / 2; + + const spaceX = (spacing + size) * nx; + const spaceY = (spacing + size) * ny; + + if (initialMove) { + c.moveTo(ptX - orthx + spaceX, ptY - orthy + spaceY); + } else { + c.lineTo(ptX - orthx + spaceX, ptY - orthy + spaceY); } - } - this.line.endFill(); - // if (this.assetData.MultiPoint.length >= 2) { - // const pointA = this.assetData.MultiPoint[this.assetData.MultiPoint.length - 2]; - // const pointB = this.assetData.MultiPoint[this.assetData.MultiPoint.length - 1]; - // const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI) + 90; - // this.beginFill(0x0000ff); - // this.drawStar(pointB.x, pointB.y, 3, 5, 0, (Math.PI / 180 * angle)); - // this.endFill(); - // } + c.lineTo(ptX - orthx / widthArrowRatio + spaceX, ptY - orthy / widthArrowRatio + spaceY); + c.lineTo(ptX + spacing * nx, ptY + spacing * ny); + c.lineTo(ptX + orthx / widthArrowRatio + spaceX, ptY + orthy / widthArrowRatio + spaceY); + c.lineTo(ptX + orthx + spaceX, ptY + orthy + spaceY); + } + + relativeCcw(x1: number, y1: number, x2: number, y2: number, px: number, py: number) { + x2 -= x1; + y2 -= y1; + px -= x1; + py -= y1; + let ccw = px * y2 - py * x2; + + if (ccw === 0.0) { + ccw = px * x2 + py * y2; + + if (ccw > 0.0) { + px -= x2; + py -= y2; + ccw = px * x2 + py * y2; + + if (ccw < 0.0) { + ccw = 0.0; + } + } + } + return (ccw < 0.0) ? -1 : ((ccw > 0.0) ? 1 : 0); } } /**