| | |
| | | arrow: [], |
| | | polygon: [] |
| | | }, |
| | | showProportion: 3.65, |
| | | showProportion: 3.2, |
| | | showProportionY: 3.58, |
| | | canvas: null, |
| | | ctx: null |
| | | }; |
| | |
| | | } |
| | | _this.ctx.strokeStyle = "yellow"; |
| | | _this.ctx.beginPath(); |
| | | _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion); |
| | | _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportionY); |
| | | for (let i = 1; i < v.location.length; i++) { |
| | | _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportion); |
| | | _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportionY); |
| | | } |
| | | _this.ctx.closePath(); |
| | | _this.ctx.stroke(); |
| | | _this.showRemarks( |
| | | v.location[v.location.length - 1].x / _this.showProportion, |
| | | v.location[v.location.length - 1].y / _this.showProportion, |
| | | v.location[v.location.length - 1].y / _this.showProportionY, |
| | | v.name |
| | | ); |
| | | _this.canvas.style.cursor = "default"; |
| | |
| | | // 将当前元素标红 |
| | | _this.ctx.strokeStyle = "red"; |
| | | _this.ctx.beginPath(); |
| | | _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion); |
| | | _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportionY); |
| | | for (let i = 1; i < v.location.length; i++) { |
| | | _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportion); |
| | | _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportionY); |
| | | } |
| | | _this.ctx.closePath(); |
| | | _this.ctx.stroke(); |
| | | _this.showRemarks( |
| | | v.location[v.location.length - 1].x / _this.showProportion, |
| | | v.location[v.location.length - 1].y / _this.showProportion, |
| | | v.location[v.location.length - 1].y / _this.showProportionY, |
| | | v.name |
| | | ); |
| | | _this.canvas.style.cursor = "pointer"; |
| | |
| | | this.$nextTick(()=>{ |
| | | this.canvas = this.$refs.areaCanvas; |
| | | this.ctx = this.canvas.getContext("2d"); |
| | | this.ctx.lineWidth = '1' |
| | | this.ctx.lineWidth = 1; |
| | | |
| | | this.initArea() |
| | | |
| | | }) |