JS：求圆周点坐标

马黑黑 · 发表于 2022-7-11 19:50

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

求圆周上任意一点的坐标，需要的已知条件有：

圆心坐标：x,y
半径：r
角度：a

当然，还有圆周率（PI）必不可少，所用到的数学知识还有相关的三角函数，余弦和正弦（初三知识），对应JS内置的余弦函数 cos() 和正弦函数 sin()。cos()和sin()都需要弧度参数（数学中说的是非直角对边或邻边与斜边之比），而弧度的计算公式是：

2*PI/360*a （a为已知角度）

上面弧度计算公式可以简化为：a*PI/180，用JS表达则为：a * Math.PI / 180。

得到已知角度的弧度后，根据三角形余弦、正弦原理，半径乘以弧度加上圆心坐标将分别得到该角度对应圆周上的点的x、y坐标。故此，设圆周上的任意一点为x1、y1，则：

x1 = x + r * cos(a * PI / 180)
y1 = y + r * sin(a * PI / 180)

根据以上推算的原理，我们封装一个函数，用以获取圆周上任意点的xy坐标。

function calcCirclePos({x,y,r,a}) {
let x1 = x + r * Math.cos((a * Math.PI) / 180);
let y1 = y + r * Math.sin((a * Math.PI) / 180);
return {x1,y1};
}

函数完全就是数学运算的演绎，不同的是用上了JS特定的 Math 数学方法，比如 Math.cos()、Math.sin、Math.PI，分别对应于 cos、sin和PI。calcCirclePos() 函数以对象为参数，放在花括号 {} 里，其中，x、y为圆心坐标值，r为半径，a为角度。函数将返回一个对象，该对象有两个属性，x1 和 y1。

关于对象，我们之前几乎没有系统介绍，这里简单说一说，然后再回到我们的主题。在JS里，一个对象可以这样表达：

let person = {
name: '张三',
age: 18,
qq: 123456,
phone: 33669988
}

person 是一个对象，该对象有诸多属性（还可以有方法），属性与属性值用小角冒号隔开。当我们想知道 person 的QQ号时，直接读取person的qq属性即可，记为 person.qq：

console.log(person.qq);

这将在控制台打印出 123456 这个QQ号（谁的QQ号呢？张三。qq和name都是person的属性）。

那么，回到我们的 calcCirclePos() 函数，它通过对已知条件(花括号对象传递过来的参数)的相关计算，将返回一个对象，对象的名称就是调用该函数的变量：

let pos = calcCirclePos({
x: 100,
y: 100,
r: 100,
a: 60
});

pos就是一个对象。上面说过，calcCirclePos() 函数所接受的参数也是对象，所以我们用花括号将圆形坐标x和y、半径r、角度a等传递给函数，叫函数为我们求出60度所对应的圆周上的点的xy坐标值，同时通过声明变量创建了一个对象 pos ，pos 对象则通过调用 calcCirclePos() 函数返回对象的属性和属性值，该对象属性有两个，x1 和 y1 即60度角对应圆周点的xy坐标：

console.log(pos.x1,pos.y1);

控制台显示：150 186.60254037844385，这是我们所需要的结果。

应用场景举例：在一个圆形元素中随机分布N多个小球（演示：二楼，代码三楼）。