一组字符串坐标，转换成二维数组坐标，找中心点坐标，两点间的距离，以及向量夹角

做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度

　　　　}

　　}

}

是不是挺有意思的，有特殊需求还可以利用函数，几何等找关键值，发现高中数学作用很大，另外物理公式同样可以效仿。