From 25c450cf2f196b24776e52c14f3a834cc2cb038f Mon Sep 17 00:00:00 2001 From: cpfcls <1105965053@qq.com> Date: Thu, 17 Mar 2022 17:38:42 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E4=B8=BB=E6=9C=BA=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E6=95=B0=E6=8D=AE=EF=BC=8C=E5=88=9D=E6=AD=A5=E5=AE=8C?= =?UTF-8?q?=E6=88=90=E5=9B=BE=E7=89=87=E6=A0=87=E6=B3=A8=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../image-label/image-label.component.html | 6 +- .../image-label/image-label.component.scss | 11 +- .../image-label/image-label.component.ts | 163 +++++++++++++++++- .../image-list/image-list.component.ts | 1 + .../plotting-image.component.scss | 1 - .../plotting-image.component.ts | 113 ++++++++++++ 6 files changed, 286 insertions(+), 9 deletions(-) diff --git a/src/app/system-management/image-label/image-label.component.html b/src/app/system-management/image-label/image-label.component.html index 550feef..8bfe138 100644 --- a/src/app/system-management/image-label/image-label.component.html +++ b/src/app/system-management/image-label/image-label.component.html @@ -1,9 +1,11 @@ -
+
- +
+
+
diff --git a/src/app/system-management/image-label/image-label.component.scss b/src/app/system-management/image-label/image-label.component.scss index 627f256..f69cdda 100644 --- a/src/app/system-management/image-label/image-label.component.scss +++ b/src/app/system-management/image-label/image-label.component.scss @@ -15,10 +15,11 @@ .imgbox { width: 100%; height:500px; - overflow: auto; - - img { - width: 1920px; - height: 1080px; + overflow: hidden; + canvas{ overflow: hidden; } + .content,center{ + width: 100%; + height: 100%; + overflow: hidden; } } diff --git a/src/app/system-management/image-label/image-label.component.ts b/src/app/system-management/image-label/image-label.component.ts index 45fc1e8..4328bc0 100644 --- a/src/app/system-management/image-label/image-label.component.ts +++ b/src/app/system-management/image-label/image-label.component.ts @@ -9,15 +9,176 @@ export class ImageLabelComponent implements OnInit { constructor() { } - imgItem: any + imgItem: any; + canvasWidth: number = 0; + canvasHeight: number = 0; ngOnInit(): void { } + + ngAfterContentInit(): void { + this.initBackgroundImg() + } + + //初始化背景图 + initBackgroundImg() { + let canvas = document.getElementById('canvas') as any; + canvas.oncontextmenu = () =>{ return false; }; + let that = this + let ctx + // 检测canvas支持性 + if (canvas.getContext) { + ctx = canvas.getContext('2d'); // 返回一个对象，该对象提供了用在画布上绘图的方法和属性 + } else { + document.write("你的浏览器不支持canvas,请升级你的浏览器!"); + return; + } + + // 读取可视区域 宽高 + let center = (document.getElementById('canvasCenter') as any).getBoundingClientRect(); + + // 图片加载完后，将其显示在canvas中 + var img = new Image(); + img.src = that.imgItem.url? that.imgItem.url : "../../../assets/images/bgImg.png"; + img.onload = () => { + // 等比例缩放图片 + var scale = 1; + if (img.width > center.width || img.height > center.height) { + if (img.width > img.height) { + scale = center.width / img.width; + }else { + scale = center.height / img.height; + } + } + that.canvasWidth = img.width * scale; + that.canvasHeight = img.height * scale; // 计算等比缩小后图片 + window.setTimeout(()=>{ // 加载图片 + ctx.drawImage(img, 0, 0, that.canvasWidth, that.canvasHeight); + that.initCanvasEvent(canvas) + }, 0) + } + } + + //线段的点的集合 + points = []; + //可拖动圆圈的点的集合 + circles = []; + //整体移动点位 + allpoints = [] + isDragging = false + //是否在绘制区域内 + isInOut = false + //记录鼠标点击位置 + downx = 0 + downy = 0 + + //初始化 canvas画布 点击事件 + initCanvasEvent(canvas) { + let context = canvas.getContext('2d'); + let html = document.documentElement + let boxDiv = document.getElementsByClassName("canvasDialog")[0] + canvas.onmousedown = (e)=>{ + var clickX = e.pageX - canvas.offsetLeft - ((html.clientWidth - boxDiv.clientWidth) / 2); + var clickY = e.pageY - canvas.offsetTop - ((html.clientHeight - boxDiv.clientHeight) / 2); + this.downx = clickX + this.downy = clickY + if (this.isInt(clickX, clickY)) { + this.isInOut = true + return + } else { + this.isInOut = false + } + + let index + //判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码 + 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)); + + // 如果是其他的点，则设置可以拖动 + if (distanceFromCenter <= circle.radius) { + // 清除之前选择的圆圈 + index = i; + this.isDragging = true; + //停止搜索 + return; + } + } + //如果点击新的位置，则进入下面的代码，绘制点 + //context.clearRect(0, 0, canvas.width, canvas.height); + //遍历数组画圆 + var circle = { + x: clickX, + y: clickY, + radius: 10, + color: "blue", + isSelected: false, //拖拽点的标记 + }; + 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(); + context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2); + context.fillStyle = circle.color; + context.strokeStyle = "black"; + context.fill(); + context.stroke(); + } + // 画线 + var point = { + x: clickX, + y: clickY, + }; + this.points.push(point); + context.beginPath(); + context.lineWidth = 3; + //从起始点开始绘制 + 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(); + context.strokeStyle = "#9d4dca"; + context.stroke(); + } + } + + //判断点位是否在图形区域内 + isInt(x, y) { + if (!this.points[2]) { + return + } + var pt = { + x: x, + y: y + } + var poly = this.points + return this.PointInPoly(pt, poly) + } + + //射线法判断点位 + PointInPoly(pt, poly) { + for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) + ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y)) + && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x) + && (c = !c); + return c; + } + + //cneter height heightCount() { let style: any = {} let height = document.documentElement.clientHeight style.height = (height - 180) + 'px'; return style } + } diff --git a/src/app/system-management/image-list/image-list.component.ts b/src/app/system-management/image-list/image-list.component.ts index 3a0cf51..bf5bedc 100644 --- a/src/app/system-management/image-list/image-list.component.ts +++ b/src/app/system-management/image-list/image-list.component.ts @@ -33,6 +33,7 @@ export class ImageListComponent implements OnInit { nzComponentParams: { imgItem: item, }, + nzClassName: "canvasDialog", nzWidth: width - 100, nzCentered: true, nzOnOk: () => new Promise(resolve => { diff --git a/src/app/system-management/plotting-image/plotting-image.component.scss b/src/app/system-management/plotting-image/plotting-image.component.scss index 83029d3..088368b 100644 --- a/src/app/system-management/plotting-image/plotting-image.component.scss +++ b/src/app/system-management/plotting-image/plotting-image.component.scss @@ -2,7 +2,6 @@ width: 100%; height: 100%; overflow: hidden; - position: relative; } .center{ width: 100%; height: 100%; } \ No newline at end of file diff --git a/src/app/system-management/plotting-image/plotting-image.component.ts b/src/app/system-management/plotting-image/plotting-image.component.ts index 3a264f5..2f54d6f 100644 --- a/src/app/system-management/plotting-image/plotting-image.component.ts +++ b/src/app/system-management/plotting-image/plotting-image.component.ts @@ -51,8 +51,121 @@ export class PlottingImageComponent implements OnInit { this.canvasHeight = img.height * scale; // 计算等比缩小后图片 window.setTimeout(()=>{ // 加载图片 ctx.drawImage(img, 0, 0, this.canvasWidth, this.canvasHeight); + this.initCanvasEvent(canvas) }, 0) } } + //线段的点的集合 + points = []; + //可拖动圆圈的点的集合 + circles = []; + //整体移动点位 + allpoints = [] + isDragging = false + //是否在绘制区域内 + isInOut = false + //记录鼠标点击位置 + downx = 0 + downy = 0 + + //初始化 canvas画布 点击事件 + initCanvasEvent(canvas) { + let context = canvas.getContext('2d'); + canvas.onmousedown = (e)=>{ + console.log(e.pageX,e.pageY) + var clickX = e.pageX - canvas.offsetLeft; + var clickY = e.pageY - canvas.offsetTop; + this.downx = clickX + this.downy = clickY + if (this.isInt(clickX, clickY)) { + this.isInOut = true + return + } else { + this.isInOut = false + } + + let index + //判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码 + 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)); + + // 如果是其他的点，则设置可以拖动 + if (distanceFromCenter <= circle.radius) { + // 清除之前选择的圆圈 + index = i; + this.isDragging = true; + //停止搜索 + return; + } + } + //如果点击新的位置，则进入下面的代码，绘制点 + //context.clearRect(0, 0, canvas.width, canvas.height); + //遍历数组画圆 + var circle = { + x: clickX, + y: clickY, + radius: 10, + color: "blue", + isSelected: false, //拖拽点的标记 + }; + 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(); + context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2); + context.fillStyle = circle.color; + context.strokeStyle = "black"; + context.fill(); + context.stroke(); + } + // 画线 + var point = { + x: clickX, + y: clickY, + }; + this.points.push(point); + context.beginPath(); + context.lineWidth = 3; + //从起始点开始绘制 + 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(); + context.strokeStyle = "#9d4dca"; + context.stroke(); + } + } + + //判断点位是否在图形区域内 + isInt(x, y) { + if (!this.points[2]) { + return + } + var pt = { + x: x, + y: y + } + var poly = this.points + return this.PointInPoly(pt, poly) + } + + //射线法判断点位 + PointInPoly(pt, poly) { + for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) + ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y)) + && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x) + && (c = !c); + return c; + } + }