有一需求,需要根据后台返回的坐标集在canvas中绘制图形。由于canvas使用不多,简单记录学习一下。整个需求实现主要分为三个部分
//calcRate方法,以宽为基准
calcRate(){
let containerDom = this.$refs['canvas-container'] //获取DOM
const containerWith = containerDom.clientWidth || containerDom.offsetWidth //获取DOM宽度
// const rate = (containerWith / this.originWidth).toFixed() //会四舍五入,精度有影响
const rate = Math.floor(containerWith / this.originWidth *100) / 100 //计算比例精确到两位小数
this.rate = rate
}
computed:{
rateWidth(){
return this.originWidth * this.rate //originWidth为原始宽度
},
rateHeight(){
return this.originHeight * this.rate //originWidth为原始高度
}
}
<canvas ref="canvas" :width="rateWidth" :height="rateHeight"></canvas>
//[
// [{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 //需要根据比例等比缩放大小保证位置正确
it.y = it.y * this.rate //需要根据比例等比缩放大小保证位置正确
})
})
this.dots = dots
this.$nextTick(()=>{
this.initCanvas()
})
}else{
console.log(res.msg)
}
})
.catch(err=>{
console.log(err)
})
}
// 初始化canvas对象,开始绘制。有两种绘图形式,一种是点多成线,另一种是连点成线。点足够多的话可以直接绘制小圆,这里采用的是连线法
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();
}
})
}
完整代码:
<template>
<div class="canvas" ref="canvas-container">
<canvas ref="canvas" :width="rateWidth" :height="rateHeight">
</canvas>
</div>
</template>
<script>
import * as Api from './indexApi'
//rate 换算比例(以宽为换算标准)
//originWidth 原始宽
//originHeight 原始高
//rateWidth 比例换算宽
//rateHeight 比例换算高
export default {
data(){
return{
rate: 1,
originWidth: 2480, //300分辨率
originHeight: 3508, //300分辨率
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>