Javascript 顺时针方向的排序点

如果我有一个点列表，

[（x1，y1），（x2，y2），（x3，y3）…]

有什么方法可以按顺时针方向排列它们吗

---

顺时针方向是指相对于形状中心的顺时针方向。

首先，您必须找到由点定义的形状中心，因为旋转将相对于该点定义

然后，您必须计算点相对于中心和

x

轴的角度。 要计算角度，可以使用

Math.atan2（y-center.y，x-center.x）

然后使用

Array.sort

按角度对点进行排序

一旦点的顺序正确，您应该能够绘制一条连接点且自身不相交的线。我用画布做了一个演示。起点用正方形表示。我已经绘制了平移到点质心的

x/y

轴。我还添加了将点连接到质心的线，以具体化它们的角度

const width=250；
常数高度=250；
//随机点
const points=Array.from（{length:20}，（）=>
（{x:Math.random（）*宽度，y:Math.random（）*高度}）
);
//使用reduce获取中心（平均值）
常数中心=点。减少（（acc，{x，y}）=>{
acc.x+=x/点长度；
acc.y+=y/点长度；
返回acc；
}，{x:0，y:0}）；
//使用tan（angle）=y/x向每个点添加角度特性
常量角度=点。映射（{x，y}）=>{
返回{x，y，angle:Math.atan2（y-center.y，x-center.x）*180/Math.PI}；
});
//按角度对点进行排序
const pointsorted=angles.sort（（a，b）=>a.angle-b.angle）；
//画出来
const canvas=document.querySelector（'canvas'）；
画布宽度=宽度；
canvas.height=高度；
const ctx=canvas.getContext（“2d”）；
设lastPoint=pointsorted[0]；
ctx.fillRect（lastPoint.x，lastPoint.y，5,5）；
ctx.beginPath（）；
ctx.moveTo（0，中心y）；
ctx.lineTo（宽度，中心y）；
ctx.strokeStyle=‘黑色’；
ctx.stroke（）；
ctx.beginPath（）；
ctx.moveTo（中心x，0）；
ctx.lineTo（中心x，高度）；
ctx.strokeStyle=‘黑色’；
ctx.stroke（）；
forEach（{x，y}）=>{
ctx.beginPath（）；
移动到（lastPoint.x，lastPoint.y）；
ctx.lineTo（x，y）；
ctx.strokeStyle=‘红色’；
ctx.stroke（）；
ctx.fillRect（x，y，2，2）；
ctx.beginPath（）；
ctx.moveTo（center.x，center.y）；
ctx.lineTo（x，y）；
ctx.strokeStyle=‘灰色’；
ctx.stroke（）；
lastPoint={x，y}；
});
画布{
边框：1px纯黑；
}
是的，在编程中通常有很多方法——第一步通常是尝试编写一些代码。请发布您迄今为止所做的尝试。您可能需要更多地说明要点。例如，点列表可以形成一维直线，而不是二维形状。现在还不清楚在这种情况下顺时针是什么意思。也许你要找的是这样的：1）找到平均值x，y。2） 对于每个点，使用x-x中心、y-y中心并将值插入atan2以获得角度。3） 按角度对点进行排序。这不是有限制吗？如果我有点（1,1），它会给出与（-1，-1）相同的角度，因为当得到斜率时，斜率的负号会抵消。你的形状总是凸的吗？如果不是，那么你怎么知道哪些点被认为是相邻的呢？@trincot，我不认为凸性是一个问题，从你能计算出这组点的质心的那一刻起，你就可以从这个质心到每个点画线，并得到它们与x轴形成的角度。然后你可以从中对你的观点进行排序。