js旋转角度、坐标计算

js旋转角度、坐标计算

1. 计算绕某个点旋转theta角后的坐标

function rotate(p, center, theta) {
  var _x = (p.x - center.x) * Math.cos(theta) - (p.y - center.y) * Math.sin(theta) + center.x;
  var _y = (p.x - center.x) * Math.sin(theta) + (p.y - center.y) * Math.cos(theta) + center.y;
  return {x: _x, y: _y};
}

var ballA = { x: 10, y: 0 };
var center = { x: 0, y: 0 }
var rotatedBall = rotate(ballA, center, Math.PI / 3);
console.log(rotatedBall)
// {x: 5.000000000000001, y: 8.660254037844386}

2. 两个点在某个中心点形成的夹角

/**
 * 获得旋转夹角
 * @param {number} x1 旋转点1
 * @param {number} y1
 * @param {number} x2 旋转点2
 * @param {number} y2
 * @param {number} cx 中心点
 * @param {number} cy
 */
function getAngle(
    x1, y1,
    x2, y2,
    cx, cy
) {
    //2个点之间的角度获取
    let c1 = (Math.atan2(y1 - cy, x1 - cx) * 180) / Math.PI
    let c2 = (Math.atan2(y2 - cy, x2 - cx) * 180) / Math.PI
    let angle
    c1 = c1 <= -90 ? 360 + c1 : c1
    c2 = c2 <= -90 ? 360 + c2 : c2

    //夹角获取
    angle = Math.floor(c2 - c1)
    angle = angle < 0 ? angle + 360 : angle
    return angle
}


// output the result
getAngle(5,0, 0, 5, 0, 0)
// 90

应用场景

react-angle-picker： https://github.com/yangwch/react-angle-picker