JavaScript如何按到原点(0,0)的距离对Canvas矩形坐标排序

问题原因 #

你之前的方案结果不符合预期，核心问题如下：

• 逐像素遍历的方案会因为矩形覆盖多个像素点重复触发输出，结果天生乱序，同时100x100的画布要循环10000次，效率极低
• 欧氏距离（√(x²+y²)）、对角矩形面积（x*y）的排序逻辑，和你预期的「x大y小的矩形排最后」的规则不匹配：比如{x:80,y:5}的欧氏距离约80.16、面积400，{x:1,y:70}的欧氏距离约70.01、面积70，两种计算方式都会把后者排到更前，和你的预期不符。

正确实现方案 #

第一步：确定排序规则（匹配你的示例预期） #

根据你提到的场景要求，用x坐标升序为第一优先级、y坐标升序为第二优先级的规则即可，排序结果完全可控，同一场景下输出100%一致。如果你的预期规则不同，只需要修改排序逻辑里的比较规则即可。

第二步：代码实现 #

var rectangles = [
     {x: 10, y: 10},
     {x: 40, y: 50},
     {x: 1, y: 70},
     {x: 80, y: 5},
     {x: 30, y: 60}
];

// 按规则排序，不修改原数组
const sortedRectangles = [...rectangles].sort((a, b) => {
  // 第一优先级：x从小到大
  if (a.x !== b.x) {
    return a.x - b.x;
  }
  // 第二优先级：y从小到大
  return a.y - b.y;
});

// 按序号输出，可直接替换为Canvas绘制标注的逻辑
sortedRectangles.forEach((rect, index) => {
  console.log(`Rectangle${index + 1}`, rect);
});

输出结果验证 #

上述代码的排序输出顺序为：

1. {x: 1, y: 70}
2. {x: 10, y: 10}
3. {x: 30, y: 60}
4. {x: 40, y: 50}
5. {x: 80, y: 5}
   完全符合你提到的「距离X轴近的x大矩形排最后」的要求。

其他排序规则修改方式 #

如果后续需要调整排序逻辑，直接修改sort方法内的比较规则即可：

• 欧氏距离排序：return Math.hypot(a.x, a.y) - Math.hypot(b.x, b.y)
• y坐标优先升序：先比较a.y和b.y，再比较a.x和b.x
• 曼哈顿距离（x+y）排序：return (a.x + a.y) - (b.x + b.y)

内容的提问来源于stack exchange，提问作者Ood