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 a1ea0c9..0c1e924 100644 --- a/src/app/system-management/image-label2/image-label2.component.ts +++ b/src/app/system-management/image-label2/image-label2.component.ts @@ -54,10 +54,14 @@ export class ImageLabel2Component implements OnInit { // 等比例缩放图片 var scale = 1; if (img.width > center.clientWidth || img.height > center.clientHeight) { - if (img.width > img.height) { - scale = center.clientWidth / img.width; - }else { - scale = center.clientHeight / img.height; + let scaleOne = center.clientWidth / img.width; + let scaleTwo = center.clientHeight / img.height; + if (img.width * scaleOne <= center.clientWidth && img.height * scaleOne <= center.clientHeight) { + scale = scaleOne; + } else if (img.width * scaleTwo <= center.clientWidth && img.height * scaleTwo <= center.clientHeight) { + scale = scaleTwo; + } else { + scale = 0.3; } } that.canvasWidth = img.width * scale; @@ -109,89 +113,89 @@ export class ImageLabel2Component implements OnInit { // let html = document.documentElement // let boxDiv = document.getElementsByClassName("canvasDialog")[0] canvas.onmousedown = (e)=>{ - 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 - } + this.canvasClickEvent(e,canvas,context); + } + } - let index - let beforeCircles = this.markType? this.circles: this.circles2 - //判断当前点击点是否在已经绘制的圆圈上,如果是执行相关操作,并return,不进入画线的代码 - for (var i = 0; i < beforeCircles.length; i++) { - let circle = beforeCircles[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, //拖拽点的标记 - }; - 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]; - // 绘制圆圈 - 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(); + //canvas 点击事件 标注 + canvasClickEvent(e, canvas, context) { + 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 + let beforeCircles = this.markType? this.circles: this.circles2 + //判断当前点击点是否在已经绘制的圆圈上,如果是执行相关操作,并return,不进入画线的代码 + for (var i = 0; i < beforeCircles.length; i++) { + let circle = beforeCircles[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; } - // 画线 - var point = { - x: clickX, - y: clickY, - }; - this.markType? this.points.push(point) : this.points2.push(point) + } + //如果点击新的位置,则进入下面的代码,绘制点 + //context.clearRect(0, 0, canvas.width, canvas.height); + //遍历数组画圆 + var circle = { + x: clickX, + y: clickY, + radius: 10, + 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]; + // 绘制圆圈 + context.globalAlpha = 0.85; 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.closePath() - context.fillStyle = "rgb(2,100,30)"; + context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2); + context.fillStyle = circle.color; + context.strokeStyle = "black"; context.fill(); - context.strokeStyle = "#9d4dca"; context.stroke(); } - } - - //canvas 点击事件 标注 - canvasClickEvent(e) { - + // 画线 + var point = { + x: clickX, + y: clickY, + }; + this.markType? this.points.push(point) : this.points2.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.closePath() + context.fillStyle = "rgb(2,100,30)"; + context.fill(); + context.strokeStyle = "#9d4dca"; + context.stroke(); } //判断点位是否在图形区域内