| | |
|---|
| | | methods: { |
|---|
| | | // 初始化函数 |
|---|
| | | init() { |
|---|
| | | this.c = document.querySelector("#canvasDialog"); |
|---|
| | | //this.c = document.querySelector("#canvasDialog"); |
|---|
| | | this.c = this.$refs['canvasDialog']; |
|---|
| | | this.ctx = this.c.getContext("2d"); |
|---|
| | | this.drawCanvasInit(); |
|---|
| | | this.canvasData = JSON.parse(JSON.stringify(this.canvasDataToChild)); |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 删除元素 |
|---|
| | | del() { |
|---|
| | | debugger |
|---|
| | | let delEle = {}; |
|---|
| | | switch (this.delCursor.type) { |
|---|
| | | case "1": |
|---|
| | |
|---|
| | | break; |
|---|
| | | case "5": |
|---|
| | | delEle = this.canvasData.polygon[this.delCursor.index]; |
|---|
| | | this.canvasData.polygon.splice(this.delCursor.index+1, 1); |
|---|
| | | this.canvasData.polygon.splice(this.delCursor.index, 1); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | this.clickSelect(); |
|---|
| | |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | _this.canvasData.rect.forEach(function (v, i) { |
|---|
| | | |
|---|
| | | _this.ctx.strokeStyle = "yellow"; |
|---|
| | | _this.ctx.beginPath(); |
|---|
| | | _this.ctx.moveTo(v.location[0].x, v.location[0].y); |
|---|
| | |
|---|
| | | // console.log("撤销！",this.canvasData); |
|---|
| | | }, |
|---|
| | | disabledOthers(type) { |
|---|
| | | |
|---|
| | | console.log("当前type:", type) |
|---|
| | | switch (type) { |
|---|
| | | case "1": |
|---|
| | |
|---|
| | | console.log("禁用多边形：", this.disablePolygon) |
|---|
| | | }, |
|---|
| | | undisabled() { |
|---|
| | | |
|---|
| | | this.disableLine = false |
|---|
| | | this.disableRect = false |
|---|
| | | this.disableArrow = false |
|---|
| | |
|---|
| | | width = typeof width !== "undefined" ? width : 1; |
|---|
| | | // color = typeof color !== 'undefined' ? color : 'yellow' |
|---|
| | | // 计算各角度和对应的P2,P3坐标 |
|---|
| | | debugger |
|---|
| | | |
|---|
| | | let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI; |
|---|
| | | let angle1 = ((angle + theta) * Math.PI) / 180; |
|---|
| | | let angle2 = ((angle - theta) * Math.PI) / 180; |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 获取相对坐标(暂不用) |
|---|
| | | getLocation(x, y, c) { |
|---|
| | | |
|---|
| | | let bbox = c.getBoundingClientRect(); |
|---|
| | | return { |
|---|
| | | x: (x - bbox.left) * (c.width / bbox.width), |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 生成图形备注 |
|---|
| | | remarks(x, y, type) { |
|---|
| | | |
|---|
| | | this.ctx.moveTo(x, y - 20); |
|---|
| | | this.ctx.fillStyle = "green"; // 设置填充颜色为绿色 |
|---|
| | | this.ctx.font = '20px "微软雅黑"'; // 设置字体 |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 回显图形备注 |
|---|
| | | showRemarks(x, y, remarks, isHightlight) { |
|---|
| | | |
|---|
| | | this.ctx.moveTo(x, y - 20); |
|---|
| | | if (isHightlight) { |
|---|
| | | this.ctx.fillStyle = "#8ae22e"; // 设置填充颜色为绿色 |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 重现保存画面 |
|---|
| | | loadImage() { |
|---|
| | | |
|---|
| | | if (this.step > -1) { |
|---|
| | | let img = new Image(); |
|---|
| | | img.src = this.canvasHistory[this.step].src; |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 切换画线类型 |
|---|
| | | changeType(num) { |
|---|
| | | |
|---|
| | | if (num === '0') { |
|---|
| | | this.c.style.cursor = "pointer"; |
|---|
| | | } else { |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 绘制多边形方法 |
|---|
| | | drawPolygonUtil(points) { |
|---|
| | | |
|---|
| | | this.ctx.strokeStyle = "yellow"; |
|---|
| | | this.ctx.lineWidth = 2; |
|---|
| | | this.ctx.beginPath(); |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 画矩形移动函数 |
|---|
| | | drawRect(e) { |
|---|
| | | |
|---|
| | | if (this.flag) { |
|---|
| | | this.ctx.clearRect(0, 0, this.c.width, this.c.height); |
|---|
| | | this.loadImage(); |
|---|
| | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | twoPointDistance(p1, p2) { |
|---|
| | | |
|---|
| | | let dep = Math.sqrt(Math.pow((p1.x - p2.x), 2) + Math.pow((p1.y - p2.y), 2)); |
|---|
| | | return dep; |
|---|
| | | }, |
|---|
| | | // 画多边形移动函数 |
|---|
| | | drawPolygon(e) { |
|---|
| | | |
|---|
| | | if (this.flag) { |
|---|
| | | this.ctx.clearRect(0, 0, this.c.width, this.c.height); |
|---|
| | | this.loadImage(); |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 画直线抬起 |
|---|
| | | lineMouseUp(e) { |
|---|
| | | |
|---|
| | | if ( |
|---|
| | | Math.abs(this.originX - e.offsetX) < 5 && |
|---|
| | | Math.abs(this.originY - e.offsetY) < 5 |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 画矩形抬起 |
|---|
| | | rectMouseUp(e) { |
|---|
| | | |
|---|
| | | if ( |
|---|
| | | Math.abs(this.originX - e.offsetX) < 5 && |
|---|
| | | Math.abs(this.originY - e.offsetY) < 5 |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 画多边形结束时双击 |
|---|
| | | polygonDblclick(e) { |
|---|
| | | |
|---|
| | | this.flag = false; |
|---|
| | | this.points.pop(); // 双击之后多一个点的重复坐标，需要删除 |
|---|
| | | let Id |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 释放编辑状态 |
|---|
| | | freedEdit() { |
|---|
| | | |
|---|
| | | this.editObj = {} |
|---|
| | | }, |
|---|
| | | // 回显历史数据时计算一下回显的每种元素的数量以便生成图形注解时获得正确的开头 |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 生成uuid |
|---|
| | | getUuid() { |
|---|
| | | |
|---|
| | | let originStr = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"; |
|---|
| | | let originChar = "0123456789abcdef"; |
|---|
| | | let len = originChar.length; |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 判断一个点是否离一个图形的最小距离为n像素以内 |
|---|
| | | minDistance(x, y, locations, n) { |
|---|
| | | |
|---|
| | | let flag = false |
|---|
| | | for (let i = 0; i < locations.length; i++) { |
|---|
| | | if (i == locations.length - 1) { |
|---|
