做canvas绘制时会遇到计算很多，给一段字符串坐标去绘制图形，需要处理数据，处理成二维数组都比较好操作。
另外有时需要找到中心坐标，将关键数据筛选出来，可以利用排序方便筛选最大值最小值；
结合高中数学，两点间的距离公式计算距离，两向量的夹角公式计算夹角cosθ值，再转化为角度。
data(){
return {
heatArea: [
{area: '0,0 0,4.69 5.5,4.65 30.2,4.69 30.2,0 20,0 5,0 0,0', rangeId: 0},
{area: '30.2,0 30.2,4.65 42,4.65 50.2,4.69 60.2,4.69 60.2,0 38,0 30.2,0', rangeId: 1},
{area: '60.2,0 60.2,4.69 75,4.65 82.2,4.69 82.2,0 80,0 75,0 60.2,0', rangeId: 2},
{area: '82.2,0 82.2,4.65 88.5,4.65 100.2,4.69 100,0 87,0 85,0 82.2,0', rangeId: 3},
],
}
}
methods: {
// 处理点集合区域的中心点坐标
centralPoint () {
this.heatArea.forEach((item, index) => {
let arrArea = item.area.split(' ')
let arr= [] // 拿到二维数组点坐标集合
arrArea.forEach(value => {
arr.push(value.split(','))
})
let arrX = []
let arrY = []
arr.forEach(val => {
arrX.push(val[0])
arrY.push(val[1])
})
arrX.sort((a,b) => {
return b - a
})
arrY.sort((a,b) => {
return b - a
})
let maxX = arrX[0]
let maxY = arrY[0]
let minX = arrX[arrX.length - 1]
let minY = arrY[arrX.length - 1]
let x = Number((maxX - minX) / 2) + Number(minX) // 中心点坐标x
let y = Number((maxY - minY) / 2) + Number(minY) // 中心点坐标y
this.centerPoint.push({x, y, maxX, maxY, minX, minY}) // 中心点坐标x,y,最大x，最大y，最小x，最小y
console.log(x,y,'中心点坐标xy',this.centerPoint);
})
},
createCanvas () {
// 省略非内容代码
for (let n = 0; n <= this.heatArea.length - 2; n++) {
let x1 = this.centerPoint[n].x
let x2 = this.centerPoint[n + 1].x
let y1 = this.centerPoint[n].y
let y2 = this.centerPoint[n + 1].y
// 两点之间的距离公式 √[(x1-x2)² + (y1-y2)²]
let distance = Math.sqrt(Math.pow((x1 - x2),2) + Math.pow((y1 - y2),2)) // 距离计算
// 向量夹角公式 vector cos0 = (x1x2+y1y2)/[√(x1²+y1²)*√(x2²+y2²)]
let vector = ((x1 * x2 + y1 * y2) / (Math.sqrt(Math.pow(x1,2) + Math.pow(y1,2)) * Math.sqrt(Math.pow(x2,2) + Math.pow(y2,2)))).toFixed(6)
let angle = Math.cos(vector * 180 / Math.PI).toFixed(6) // 角度计算会因精度问题而偏差不到1度
}
}
}
是不是挺有意思的，有特殊需求还可以利用函数，几何等找关键值，发现高中数学作用很大，另外物理公式同样可以效仿。