Canvas draws graphics according to coordinate points

There is a need , You need to set the coordinates in according to the coordinate set returned in the background canvas Draw a picture in . because canvas Not much , Simply record and learn . The whole requirement realization is mainly divided into three parts

One . Front end proportional display a4 Paper size canvas canvas

1. A4 Paper size ：210×297mm Generally in ps Can be converted into different according to different resolutions px Company ：

1. When the resolution is 72 Pixels / inches ,A4 The length and width of paper pixels are 842×595
2. When the resolution is 120 Pixels / inches ,A4 The length and width of paper pixels are 2105×1487
3. When the resolution is 150 Pixels / inches ,A4 The length and width of paper pixels are 1754×1240
4. When the resolution is 300 Pixels / inches ,A4 The length and width of paper pixels are 3508×2479

2. Calculate scale

//calcRate Method , Based on width 
calcRate(){
    
  let containerDom = this.$refs['canvas-container'] // obtain DOM
  const containerWith = containerDom.clientWidth || containerDom.offsetWidth // obtain DOM Width 
  // const rate = (containerWith / this.originWidth).toFixed() // Will round off , Accuracy has an impact 
  const rate = Math.floor(containerWith / this.originWidth *100) / 100 // Calculate the scale to two decimal places 
  this.rate = rate
}

3. Calculate canvas size

computed:{
    
    rateWidth(){
    
      return this.originWidth * this.rate //originWidth Is the original width 
    },
    rateHeight(){
    
      return this.originHeight * this.rate //originWidth Is the original height 
    }
  }

4.canvas Elements

<canvas ref="canvas" :width="rateWidth" :height="rateHeight"></canvas>

Two . Processing point set data

Background return data processing

//[
// [{x:xxx,y:xxx},{x:xxx,y:xxx},{x:xxx,y:xxx},{x:xxx,y:xxx}...],
// [{x:xxx,y:xxx},{x:xxx,y:xxx},{x:xxx,y:xxx},{x:xxx,y:xxx}...],
// [{x:xxx,y:xxx},{x:xxx,y:xxx},{x:xxx,y:xxx},{x:xxx,y:xxx}...]
//]
getDots(){
    
  Api.get_dots()
  .then(res=>{
    
    if(res.errCode ==0){
    
      let dots = res.data
      dots.forEach(item=>{
    
        item.forEach(it=>{
    
          it.x = it.x * this.rate // You need to scale the size proportionally to ensure the correct position 
          it.y = it.y * this.rate // You need to scale the size proportionally to ensure the correct position 
        })
      })
      this.dots = dots
      this.$nextTick(()=>{
    
        this.initCanvas()
      })
    }else{
    
      console.log(res.msg)
    }
  })
  .catch(err=>{
    
    console.log(err)
  })
}

3、 ... and . Drawing graphics

//  initialization canvas object , Began to draw . There are two drawing forms , One is that many points form a line , The other is to connect dots into lines . If there are enough points, you can draw a small circle directly , The connection method is adopted here 
initCanvas(){
    
  let canvasDom = this.$refs['canvas']
  let ctx = canvasDom.getContext("2d")
  this.dots.forEach(item=>{
    
    for(let i=0; i < item.length; i++){
    
      if(i == item.length-1) return  // Notice the end of loop condition 
      ctx.beginPath();
      ctx.moveTo(item[i].x,item[i].y);
      ctx.lineWidth = 2
      ctx.lineTo(item[i+1].x,item[i+1].y)
      ctx.stroke();
    }
  })
}

effect ：

Complete code ：

<template>
  <div class="canvas" ref="canvas-container">
    <canvas ref="canvas" :width="rateWidth" :height="rateHeight">
    </canvas>
  </div>
</template>

<script>
import * as Api from './indexApi'
//rate  Conversion ratio ( Take width as the conversion standard )
//originWidth  Original width 
//originHeight  Original high 
//rateWidth  Scale conversion width 
//rateHeight  Scale conversion high 
export default {
    
  data(){
    
    return{
    
      rate: 1,
      originWidth: 2480, //300 The resolution of the 
      originHeight: 3508, //300 The resolution of the 
      dots:[],
    }
  },
  computed:{
    
    rateWidth(){
    
      return this.originWidth * this.rate
    },
    rateHeight(){
    
      return this.originHeight * this.rate
    }
  },
  mounted(){
    
    this.getDots()
    this.calcRate()
  },
  methods:{
    
    getDots(){
    
      Api.get_dots()
      .then(res=>{
    
        if(res.errCode ==0){
    
          let dots = res.data
          dots.forEach(item=>{
    
            item.forEach(it=>{
    
              it.x = it.x * this.rate
              it.y = it.y * this.rate
            })
          })
          this.dots = dots
          this.$nextTick(()=>{
    
            this.initCanvas()
          })
        }else{
    
          console.log(res.msg)
        }
      })
      .catch(err=>{
    
        console.log(err)
      })
    },
    calcRate(){
    
      let containerDom = this.$refs['canvas-container']
      const containerWith = containerDom.clientWidth || containerDom.offsetWidth
      const rate = Math.floor(containerWith / this.originWidth *100) / 100
      this.rate = rate
    },
    initCanvas(){
    
      let canvasDom = this.$refs['canvas']
      let ctx = canvasDom.getContext("2d")
      this.dots.forEach(item=>{
    
        for(let i=0; i < item.length; i++){
    
          if(i == item.length-1) return 
          ctx.beginPath();
          ctx.moveTo(item[i].x,item[i].y);
          ctx.lineWidth = 2
          ctx.lineTo(item[i+1].x,item[i+1].y)
          ctx.stroke();
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.canvas{
    
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  canvas{
    
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}
</style>