今天分享一个算法,根据提供的两个点生成一段曲线,对我们生成动画运动轨迹还是有很大的帮助
/**
*
* @param {Array} point1
* @param {Array} point2
* @param {number} count
* @param {number} angle
* @returns
*/
function getCurveByTwoPoints(point1, point2, count, angle = 60) {
if (!point1 || !point2) {
return null
}
const B1 = function (x) {
return 1 - 2 * x + x * x
}
const B2 = function (x) {
return 2 * x - 2 * x * x
}
const B3 = function (x) {
return x * x
}
const curveCoordinates = []
var count = count || 40 // 曲线是由一些小的线段组成的,这个表示这个曲线所有到的折线的个数
var t, h, h2, lat3, lng3, j, t2 // t 为两点连线相对于横坐标的夹角
var i = 0
var inc = 0
if (typeof point2 == 'undefined') {
if (typeof curveCoordinates != 'undefined') {
curveCoordinates = []
}
return
}
var lat1 = parseFloat(point1[1])
var lat2 = parseFloat(point2[1])
var lng1 = parseFloat(point1[0])
var lng2 = parseFloat(point2[0])
// 计算曲线角度的方法
j = 0
t2 = 0
// 纬度相同
if (lat2 == lat1) {
t = 0
h = lng1 - lng2
// 经度相同
} else if (lng2 == lng1) {
t = Math.PI / 2
h = lat1 - lat2
} else {
t = Math.atan((lat2 - lat1) / (lng2 - lng1))
h = (lat2 - lat1) / Math.sin(t)
}
if (t2 == 0) {
t2 = t + (Math.PI / 180) * angle // 为曲线的初始斜率
}
h2 = h / 2 // 两点之间的距离
lng3 = h2 * Math.cos(t2) + lng1
lat3 = h2 * Math.sign(t2) + lat1
for (i = 0; i < count + 1; i++) {
var x = lng1 * B1(inc) + lng3 * B2(inc) + lng2 * B3(inc)
var y = lat1 * B1(inc) + lat3 * B2(inc) + lat2 * B3(inc)
curveCoordinates.push([x, y])
inc = inc + 1 / count
}
return curveCoordinates
}
- point 点1 数组格式,表示一个坐标
- point 点2 数组格式,表示一个坐标
- count 曲线描点数,越大曲线越平滑
- angle 自定义配置曲线切线角度