|
|
|
|
@ -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 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
