From 102f1c1ec7c0126c76cf6c1ddee865f85ede7263 Mon Sep 17 00:00:00 2001 From: cpfcls <1105965053@qq.com> Date: Tue, 12 Apr 2022 14:53:11 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E7=BB=98=E5=88=B6=E5=A4=9A=E8=BE=B9?= =?UTF-8?q?=E5=BD=A2=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../image-label2/image-label2.component.html | 2 - .../image-label2/image-label2.component.ts | 145 +++++++++++------- 2 files changed, 88 insertions(+), 59 deletions(-) diff --git a/src/app/system-management/image-label2/image-label2.component.html b/src/app/system-management/image-label2/image-label2.component.html index fd0032c..9011f94 100644 --- a/src/app/system-management/image-label2/image-label2.component.html +++ b/src/app/system-management/image-label2/image-label2.component.html @@ -2,8 +2,6 @@
- -
diff --git a/src/app/system-management/image-label2/image-label2.component.ts b/src/app/system-management/image-label2/image-label2.component.ts index 0c1e924..585b224 100644 --- a/src/app/system-management/image-label2/image-label2.component.ts +++ b/src/app/system-management/image-label2/image-label2.component.ts @@ -12,8 +12,7 @@ export class ImageLabel2Component implements OnInit { imgItem: any; canvasWidth: number = 0; canvasHeight: number = 0; - copyCanvas: any; - markType: boolean = true; //标注type + copyCanvas: any; //拷贝 canvas底图 //返回上一步路由 goback() { @@ -76,18 +75,6 @@ export class ImageLabel2Component implements OnInit { - //线段的点的集合 - points = []; - points2 = []; - //可拖动圆圈的点的集合 - circles = []; - circles2 = []; - //整体移动点位 - allpoints = []; - allpoints2 = []; - isDragging = false - //是否在绘制区域内 - isInOut = false //记录鼠标点击位置 downx = 0 downy = 0 @@ -95,34 +82,89 @@ export class ImageLabel2Component implements OnInit { //清空画布 clearCanvas() { this.points = []; - this.points2 = []; this.circles = []; - this.circles2 = []; this.allpoints = []; - this.allpoints2 = []; let canvas = document.getElementById('canvas') as any; let context = canvas.getContext('2d'); - context.clearRect(0, 0, canvas.width, canvas.height); + context.clearRect(0, 0, canvas.width, canvas.height); this.copyCanvas? context.putImageData(this.copyCanvas, 0, 0) : null; } //初始化 canvas画布 点击事件 initCanvasEvent(canvas) { let context = canvas.getContext('2d'); - // let html = document.documentElement - // let boxDiv = document.getElementsByClassName("canvasDialog")[0] - canvas.onmousedown = (e)=>{ - this.canvasClickEvent(e,canvas,context); + canvas.onmousedown = (e)=>{ //点击事件 + var clickX = e.pageX - canvas.offsetLeft; + var clickY = e.pageY - canvas.offsetTop; + console.log(clickX,clickY) + this.downx = clickX + this.downy = clickY + this.drawPolygon(clickX,clickY,canvas,context); } } - //canvas 点击事件 标注 - canvasClickEvent(e, canvas, context) { - var clickX = e.pageX - canvas.offsetLeft; - var clickY = e.pageY - canvas.offsetTop; - this.downx = clickX - this.downy = clickY + //canvas 绘制箭头 + drawArrow(fromX, fromY, toX, toY, theta, headlen, width, color, ctx) { + // fromX, fromY：起点坐标（也可以换成p1，只不过它是一个数组） + // toX, toY：终点坐标 (也可以换成p2，只不过它是一个数组) + // theta：三角斜边一直线夹角 + // headlen：三角斜边长度 + // width：箭头线宽度 + // color：箭头颜色 + + theta = typeof(theta) != 'undefined' ? theta : 30; + headlen = typeof(theta) != 'undefined' ? headlen : 10; + width = typeof(width) != 'undefined' ? width : 1; + color = typeof(color) != 'undefined' ? color : '#000'; + + // 计算各角度和对应的P2,P3坐标 + var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI, + angle1 = (angle + theta) * Math.PI / 180, + angle2 = (angle - theta) * Math.PI / 180, + topX = headlen * Math.cos(angle1), + topY = headlen * Math.sin(angle1), + botX = headlen * Math.cos(angle2), + botY = headlen * Math.sin(angle2); + ctx.save(); + ctx.beginPath(); + + var arrowX = fromX - topX, + arrowY = fromY - topY; + + ctx.moveTo(arrowX, arrowY); + ctx.moveTo(fromX, fromY); + ctx.lineTo(toX, toY); + arrowX = toX + topX; + arrowY = toY + topY; + ctx.moveTo(arrowX, arrowY); + ctx.lineTo(toX, toY); + arrowX = toX + botX; + arrowY = toY + botY; + ctx.lineTo(arrowX, arrowY); + ctx.strokeStyle = color; + ctx.lineWidth = width; + ctx.stroke(); + ctx.restore(); + } + + //canvas 绘制长方形 + drawOblong() { + + } + + //线段的点的集合 + points = []; + //可拖动圆圈的点的集合 + circles = []; + //整体移动点位 + allpoints = []; + isDragging = false; + //是否在绘制区域内 + isInOut = false; + + //canvas 绘制多边形 + drawPolygon(clickX, clickY, canvas, context) { if (this.isInt(clickX, clickY)) { this.isInOut = true return @@ -131,10 +173,9 @@ export class ImageLabel2Component implements OnInit { } let index - let beforeCircles = this.markType? this.circles: this.circles2 //判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码 - for (var i = 0; i < beforeCircles.length; i++) { - let circle = beforeCircles[i]; + for (var i = 0; i < this.circles.length; i++) { + let circle = this.circles[i]; //使用勾股定理计算这个点与圆心之间的距离 var distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)); @@ -148,26 +189,21 @@ export class ImageLabel2Component implements OnInit { } } //如果点击新的位置，则进入下面的代码，绘制点 - //context.clearRect(0, 0, canvas.width, canvas.height); + context.clearRect(0, 0, canvas.width, canvas.height); + this.copyCanvas? context.putImageData(this.copyCanvas, 0, 0) : null; //遍历数组画圆 var circle = { x: clickX, y: clickY, - radius: 10, + radius: 5, color: "blue", isSelected: false, //拖拽点的标记 }; - if (this.markType) { - this.circles.push(circle); - this.allpoints = JSON.parse(JSON.stringify(this.circles)) - this.circles[0].color = "green"; - } else { - this.circles2.push(circle); - this.allpoints2 = JSON.parse(JSON.stringify(this.circles2)) - this.circles2[0].color = "red"; - } - for (var i = 0; i < beforeCircles.length; i++) { - let circle = beforeCircles[i]; + this.circles.push(circle); + this.allpoints = JSON.parse(JSON.stringify(this.circles)) + this.circles[0].color = "green"; + for (var i = 0; i < this.circles.length; i++) { + let circle = this.circles[i]; // 绘制圆圈 context.globalAlpha = 0.85; context.beginPath(); @@ -182,36 +218,31 @@ export class ImageLabel2Component implements OnInit { x: clickX, y: clickY, }; - this.markType? this.points.push(point) : this.points2.push(point) + this.points.push(point) context.beginPath(); context.lineWidth = 3; //从起始点开始绘制 - let beforePoint = this.markType? this.points: this.points2 - context.moveTo(beforePoint[0].x, beforePoint[0].y); - for (var i = 0; i < beforePoint.length; i++) { - context.lineTo(beforePoint[i].x, beforePoint[i].y); + context.moveTo(this.points[0].x, this.points[0].y); + for (var i = 0; i < this.points.length; i++) { + context.lineTo(this.points[i].x, this.points[i].y); } context.closePath() - context.fillStyle = "rgb(2,100,30)"; - context.fill(); + //ontext.fillStyle = "rgb(2,100,30)"; + //context.fill(); context.strokeStyle = "#9d4dca"; context.stroke(); } //判断点位是否在图形区域内 isInt(x, y) { - if (this.markType && !this.points[2]) { - return - } - if (!this.markType && !this.points2[2]) { + if (!this.points[2]) { return } var pt = { x: x, y: y } - var poly = this.markType? this.points : this.points2; - return this.PointInPoly(pt, poly) + return this.PointInPoly(pt, this.points) } //射线法判断点位 From ce05ee260773be11a28611f4181cfbbc07f6e5c9 Mon Sep 17 00:00:00 2001 From: cpfcls <1105965053@qq.com> Date: Wed, 13 Apr 2022 11:47:08 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E6=A0=87=E7=BB=98=E7=9F=A9=E5=BD=A2?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../image-label2/image-label2.component.ts | 137 +++++++++++++++--- 1 file changed, 117 insertions(+), 20 deletions(-) diff --git a/src/app/system-management/image-label2/image-label2.component.ts b/src/app/system-management/image-label2/image-label2.component.ts index 585b224..065637f 100644 --- a/src/app/system-management/image-label2/image-label2.component.ts +++ b/src/app/system-management/image-label2/image-label2.component.ts @@ -75,15 +75,24 @@ export class ImageLabel2Component implements OnInit { + isDrawArrow: boolean = true; //绘制 箭头/矩形 //记录鼠标点击位置 - downx = 0 - downy = 0 + downx = 0; + downy = 0; //清空画布 clearCanvas() { + // 清空标绘箭头 + this.arrowPoints = []; + // 清空标绘箭头 + // 清空标绘矩形 + this.oblongPoints = []; + // 清空标绘矩形 + // 清空标绘多边形 this.points = []; this.circles = []; this.allpoints = []; + // 清空标绘多边形 let canvas = document.getElementById('canvas') as any; let context = canvas.getContext('2d'); @@ -94,14 +103,73 @@ export class ImageLabel2Component implements OnInit { //初始化 canvas画布 点击事件 initCanvasEvent(canvas) { let context = canvas.getContext('2d'); - canvas.onmousedown = (e)=>{ //点击事件 + canvas.onmousedown = (e)=>{ //鼠标按下事件 var clickX = e.pageX - canvas.offsetLeft; var clickY = e.pageY - canvas.offsetTop; - console.log(clickX,clickY) this.downx = clickX this.downy = clickY - this.drawPolygon(clickX,clickY,canvas,context); + //this.drawPolygon(clickX,clickY,canvas,context); //绘制多边形 + + //开始绘制 + context.beginPath(); + context.moveTo(clickX,clickY); + context.strokeStyle = "green"; + context.lineWidth = 3; + canvas.onmousemove = (ev)=>{ //鼠标移动事件 + var moveX = ev.pageX - canvas.offsetLeft; + var moveY = ev.pageY - canvas.offsetTop; + if (this.isDrawArrow) { //绘制 箭头 + context.lineTo(moveX,moveY); + context.stroke(); + } else { //绘制 矩形 + this.drawOblong(this.oblongPoints,context) + let element = this.getOblongInfo(this.downx,this.downy,moveX,moveY) + context.strokeRect(element.x,element.y,element.width,element.height); + } + } } + canvas.onmouseup = (e)=>{ //鼠标松开事件 + canvas.onmousemove = (ev)=>{ //鼠标移动事件 + return false; + } + var upX = e.pageX - canvas.offsetLeft; + var upY = e.pageY - canvas.offsetTop; + if (this.isDrawArrow) { //绘制 箭头 + let point = { + startX: this.downx, + startY: this.downy, + endX: upX, + endY: upY, + } + this.arrowPoints.push(point); + this.drawLine(this.arrowPoints,context) + } else { //绘制 矩形 + let point = this.getOblongInfo(this.downx,this.downy,upX,upY) + this.oblongPoints.push(point) + this.drawOblong(this.oblongPoints,context) + } + }; + + } + + arrowPoints = []; //箭头的点的集合 + + //canvas 绘制直线 + drawLine(pointsList, context) { + context.clearRect(0, 0, this.canvasWidth, this.canvasHeight); + this.copyCanvas? context.putImageData(this.copyCanvas, 0, 0) : null; + pointsList.forEach((item,index)=>{ + if ((index+1)%2 === 0) { + this.drawArrow(item.startX,item.startY,item.endX,item.endY,30,10,3,'green',context) + } else { + context.beginPath(); + context.moveTo(item.startX,item.startY); + context.strokeStyle = "green"; + context.lineWidth = 3; + context.lineTo(item.endX,item.endY); + context.stroke(); + } + }) } //canvas 绘制箭头 @@ -148,20 +216,49 @@ export class ImageLabel2Component implements OnInit { ctx.restore(); } - //canvas 绘制长方形 - drawOblong() { + oblongPoints = []; //矩形的点的集合 + //获取 矩形左上角点位/宽高 + getOblongInfo(startX,startY,endX,endY) { + let point = { + x: 0, + y: 0, + width: 0, + height: 0, + } + if (startX > endX) { + point.x = endX + point.width = startX - endX + } else { + point.x = startX + point.width = endX - startX + } + if (startY > endY) { + point.y = endY + point.height = startY - endY + } else { + point.y = startY + point.height = endY - startY + } + return point + } + + //canvas 绘制矩形 + drawOblong(oblongList, context) { + context.clearRect(0, 0, this.canvasWidth, this.canvasHeight); + this.copyCanvas? context.putImageData(this.copyCanvas, 0, 0) : null; + oblongList.forEach(element => { + context.strokeStyle = "green"; + context.lineWidth = 3; + context.strokeRect(element.x,element.y,element.width,element.height); + }); } - //线段的点的集合 - points = []; - //可拖动圆圈的点的集合 - circles = []; - //整体移动点位 - allpoints = []; - isDragging = false; - //是否在绘制区域内 - isInOut = false; + points = []; //线段的点的集合 + circles = []; //可拖动圆圈的点的集合 + allpoints = []; //整体移动点位 + isDragging = false; //是否可拖拽 + isInOut = false; //是否在绘制区域内 //canvas 绘制多边形 drawPolygon(clickX, clickY, canvas, context) { @@ -196,12 +293,12 @@ export class ImageLabel2Component implements OnInit { x: clickX, y: clickY, radius: 5, - color: "blue", + color: "white", isSelected: false, //拖拽点的标记 }; this.circles.push(circle); this.allpoints = JSON.parse(JSON.stringify(this.circles)) - this.circles[0].color = "green"; + this.circles[0].color = "white"; for (var i = 0; i < this.circles.length; i++) { let circle = this.circles[i]; // 绘制圆圈 @@ -209,7 +306,7 @@ export class ImageLabel2Component implements OnInit { context.beginPath(); context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2); context.fillStyle = circle.color; - context.strokeStyle = "black"; + context.strokeStyle = "red"; context.fill(); context.stroke(); } @@ -229,7 +326,7 @@ export class ImageLabel2Component implements OnInit { context.closePath() //ontext.fillStyle = "rgb(2,100,30)"; //context.fill(); - context.strokeStyle = "#9d4dca"; + context.strokeStyle = "green"; context.stroke(); } From a25b9c51f29ac99ae8a379f0f6cd22c1ef032b16 Mon Sep 17 00:00:00 2001 From: cpfcls <1105965053@qq.com> Date: Thu, 14 Apr 2022 10:19:31 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E6=A0=87=E7=BB=98=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E5=AE=8C=E6=95=B4=E6=93=8D=E4=BD=9C=E6=B5=81?= =?UTF-8?q?=E7=A8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../image-label2/image-label2.component.html | 10 ++- .../image-label2/image-label2.component.scss | 1 + .../image-label2/image-label2.component.ts | 62 +++++++++++++------ 3 files changed, 53 insertions(+), 20 deletions(-) diff --git a/src/app/system-management/image-label2/image-label2.component.html b/src/app/system-management/image-label2/image-label2.component.html index 9011f94..1cd5b6b 100644 --- a/src/app/system-management/image-label2/image-label2.component.html +++ b/src/app/system-management/image-label2/image-label2.component.html @@ -1,8 +1,14 @@
- - + + + + + + + +
diff --git a/src/app/system-management/image-label2/image-label2.component.scss b/src/app/system-management/image-label2/image-label2.component.scss index 9db4d42..4a7f5e2 100644 --- a/src/app/system-management/image-label2/image-label2.component.scss +++ b/src/app/system-management/image-label2/image-label2.component.scss @@ -24,6 +24,7 @@ button { margin-right: 6px; } + .leftTitle{ line-height: 32px; padding: 0 20px; } } .imgbox, diff --git a/src/app/system-management/image-label2/image-label2.component.ts b/src/app/system-management/image-label2/image-label2.component.ts index 065637f..fdd9424 100644 --- a/src/app/system-management/image-label2/image-label2.component.ts +++ b/src/app/system-management/image-label2/image-label2.component.ts @@ -29,6 +29,18 @@ export class ImageLabel2Component implements OnInit { }, 0) } + //保存 + save() { + if (this.markType === 1) { + console.log("多边形",this.points) + } else if (this.markType === 3) { + console.log("箭头",this.arrowPoints) + console.log("矩形",this.oblongPoints) + } else if (this.markType === 4) { + console.log("箭头",this.arrowPoints) + } + } + //初始化背景图 initBackgroundImg() { let canvas = document.getElementById('canvas') as any; @@ -75,13 +87,19 @@ export class ImageLabel2Component implements OnInit { - isDrawArrow: boolean = true; //绘制 箭头/矩形 + markType: number = 3; //1=进出口,3=卸油区,4=便利店, + isDrawArrow: boolean = true; //绘制type 箭头/矩形 + oilUnloadingArea: boolean = true; //卸油区type 泄油管区域/静电接地仪 //记录鼠标点击位置 downx = 0; downy = 0; //清空画布 clearCanvas() { + let istrue = confirm("清除属于不可逆操作,你是否继续?"); + if (!istrue) { + return + } // 清空标绘箭头 this.arrowPoints = []; // 清空标绘箭头 @@ -100,7 +118,7 @@ export class ImageLabel2Component implements OnInit { this.copyCanvas? context.putImageData(this.copyCanvas, 0, 0) : null; } - //初始化 canvas画布 点击事件 + //初始化 canvas画布 监听事件 initCanvasEvent(canvas) { let context = canvas.getContext('2d'); canvas.onmousedown = (e)=>{ //鼠标按下事件 @@ -108,30 +126,37 @@ export class ImageLabel2Component implements OnInit { var clickY = e.pageY - canvas.offsetTop; this.downx = clickX this.downy = clickY - //this.drawPolygon(clickX,clickY,canvas,context); //绘制多边形 - //开始绘制 - context.beginPath(); - context.moveTo(clickX,clickY); - context.strokeStyle = "green"; - context.lineWidth = 3; - canvas.onmousemove = (ev)=>{ //鼠标移动事件 - var moveX = ev.pageX - canvas.offsetLeft; - var moveY = ev.pageY - canvas.offsetTop; - if (this.isDrawArrow) { //绘制 箭头 - context.lineTo(moveX,moveY); - context.stroke(); - } else { //绘制 矩形 - this.drawOblong(this.oblongPoints,context) - let element = this.getOblongInfo(this.downx,this.downy,moveX,moveY) - context.strokeRect(element.x,element.y,element.width,element.height); + if (this.markType === 1) { //进出口 + this.drawPolygon(clickX,clickY,canvas,context); //绘制多边形 + } else if (this.markType === 3 || this.markType === 4) { //卸油区/便利店 + //开始绘制 + context.beginPath(); + context.moveTo(clickX,clickY); + context.strokeStyle = "green"; + context.lineWidth = 3; + canvas.onmousemove = (ev)=>{ //鼠标移动事件 + var moveX = ev.pageX - canvas.offsetLeft; + var moveY = ev.pageY - canvas.offsetTop; + if (this.isDrawArrow) { //绘制 箭头 + context.lineTo(moveX,moveY); + context.stroke(); + } else { //绘制 矩形 + this.drawOblong(this.oblongPoints,context) + let element = this.getOblongInfo(this.downx,this.downy,moveX,moveY) + context.strokeRect(element.x,element.y,element.width,element.height); + } } } } + canvas.onmouseup = (e)=>{ //鼠标松开事件 canvas.onmousemove = (ev)=>{ //鼠标移动事件 return false; } + if (this.markType != 3 && this.markType != 4) { + return + } var upX = e.pageX - canvas.offsetLeft; var upY = e.pageY - canvas.offsetTop; if (this.isDrawArrow) { //绘制 箭头 @@ -225,6 +250,7 @@ export class ImageLabel2Component implements OnInit { y: 0, width: 0, height: 0, + oilUnloadingArea: this.oilUnloadingArea, } if (startX > endX) { point.x = endX From 3073311e88e20afbdb8c21fda85e2975fd0666af Mon Sep 17 00:00:00 2001 From: cpfcls <1105965053@qq.com> Date: Thu, 14 Apr 2022 11:09:35 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E4=B8=A4=E7=A7=8D?= =?UTF-8?q?=E7=BB=98=E5=88=B6=E5=8A=9F=E8=83=BD=E6=95=B0=E6=8D=AE=E5=8A=A0?= =?UTF-8?q?=E8=BD=BD=E4=B8=8D=E6=AD=A3=E7=A1=AEbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../image-label2/image-label2.component.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/app/system-management/image-label2/image-label2.component.ts b/src/app/system-management/image-label2/image-label2.component.ts index fdd9424..d9f498e 100644 --- a/src/app/system-management/image-label2/image-label2.component.ts +++ b/src/app/system-management/image-label2/image-label2.component.ts @@ -143,6 +143,7 @@ export class ImageLabel2Component implements OnInit { context.stroke(); } else { //绘制 矩形 this.drawOblong(this.oblongPoints,context) + context.strokeStyle = this.oilUnloadingArea? "green" : "red"; let element = this.getOblongInfo(this.downx,this.downy,moveX,moveY) context.strokeRect(element.x,element.y,element.width,element.height); } @@ -180,9 +181,16 @@ export class ImageLabel2Component implements OnInit { arrowPoints = []; //箭头的点的集合 //canvas 绘制直线 - drawLine(pointsList, context) { + drawLine(pointsList, context, isRepeat: boolean = false) { context.clearRect(0, 0, this.canvasWidth, this.canvasHeight); this.copyCanvas? context.putImageData(this.copyCanvas, 0, 0) : null; + if (this.markType === 3 && !isRepeat) { //同时绘制 矩形 + this.oblongPoints.forEach(element => { + context.strokeStyle = element.oilUnloadingArea? "green" : "red"; + context.lineWidth = 3; + context.strokeRect(element.x,element.y,element.width,element.height); + }); + } pointsList.forEach((item,index)=>{ if ((index+1)%2 === 0) { this.drawArrow(item.startX,item.startY,item.endX,item.endY,30,10,3,'green',context) @@ -273,8 +281,11 @@ export class ImageLabel2Component implements OnInit { drawOblong(oblongList, context) { context.clearRect(0, 0, this.canvasWidth, this.canvasHeight); this.copyCanvas? context.putImageData(this.copyCanvas, 0, 0) : null; + if (this.markType === 3) { //同时绘制 直线箭头 + this.drawLine(this.arrowPoints,context,true) + } oblongList.forEach(element => { - context.strokeStyle = "green"; + context.strokeStyle = element.oilUnloadingArea? "green" : "red"; context.lineWidth = 3; context.strokeRect(element.x,element.y,element.width,element.height); });