JavaScript實現(xiàn)二維坐標點排序效果

更新時間：2017年07月18日 17:13:41 作者：唐一峰

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)二維坐標點排序效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

今天給大家分享下最近web項目中出現(xiàn)的一個技術難點問題——坐標排序；

如下圖所示，要求在前端頁面上按順序將下面5個模塊的坐標依次保存至數據庫

現(xiàn)在已知信息如下：

1、每個模塊分別為一個div

2、每個div可隨意拖動（故拖動之后的順序是錯亂的）

3、每個div的坐標（css絕對定位獲得的left、top屬性值）

現(xiàn)在已通過程序將5個模塊div的坐標信息用一個對象數組保存

var p = [
{ id: 184, x: 0, y: 0 },
{ id: 185, x: 320, y: 0 },
{ id: 186, x: 30, y: 60 },
{ id: 187, x: 150, y: 120 },
{ id: 188, x: 130, y: 80 },
{ id: 189, x: 100, y: 80 }
]

注：id為每個模塊唯一標志符（本實例用于提交數據庫）

一、排序思考

1、排序規(guī)則如何制定？

客戶及項目負責人沒有具體說明規(guī)則，所以需要由技術人員按照技術方面的常規(guī)邏輯進行分析。

按照我們理解，上面5個div的正常情況下的順序應該是：從上到下，從左到右

2、排序算法如何實現(xiàn)？

根據上面得出的排序規(guī)則，我們需要分別對兩點的y、x坐標分別比較，確定出排序

A、從上到下：坐標y越小，越排在前面

B、從左到右：坐標x越小，越排在前面

C、優(yōu)先級為y坐標，若y坐標相等，則x坐標越小，越排在前面

二、代碼實現(xiàn)

1、兩點比較

我們先定義兩個坐標點，編寫代碼進行比較

var p1 = { x: 350, y: 0 };
var p2 = { x: 320, y: 0 };

console.log(SetSortRule(p1, p2));

//兩個坐標比較大小
function SetSortRule(p1, p2) {
  if (p1.y > p2.y) {
     return true;
   }
  else if (p1.y == p2.y) {
     return (p1.x > p2.x);
   }
  else {
     return false;
   }
}

關鍵代碼：SetSortRule（p1,p2）

p1,p2分別為需要比較的兩點對象

這樣一來，我們對于兩個點的排序就可以實現(xiàn)了，接下來就是對上面對象數組中的5個點進行排序。

2、多點比較

我們再來觀察下這5個點構成的對象數組

var p = [
{ id: 184, x: 0, y: 0 },
{ id: 185, x: 320, y: 0 },
{ id: 186, x: 30, y: 60 },
{ id: 187, x: 150, y: 120 },
{ id: 188, x: 130, y: 80 },
{ id: 189, x: 100, y: 80 }
]

5個點對象兩兩比較，這里就得用到冒泡排序法

既然是冒泡排序，大家都應該挺熟悉的吧，這里就不再細講，直接上代碼

 function SetSortPoint(arry) {
      var len = arry.length;
      for (var i = 0; i < len - 1; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
          if (SetSortRule(arry[j],arry[j + 1])) {
            var tmp = arry[j];
            arry[j] = arry[j + 1];
            arry[j + 1] = tmp;
          }
        }
      }
      console.log(arry);
    }

arry為對象數組（此實例為p對象數組）
SetSortRule(arry[j],arry[j + 1])，為兩個點進行比較

3、輸出效果

最終輸出結果如下圖，這里我就用瀏覽器console一下了

4、完整代碼如下

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
</head>
<body>
 <script type="text/javascript">
  var p = [
   { id: 184, x: 0, y: 0 },
   { id: 185, x: 320, y: 0 },
   { id: 186, x: 30, y: 60 },
   { id: 187, x: 150, y: 120 },
   { id: 188, x: 130, y: 80 },
   { id: 189, x: 100, y: 80 }
  ]
  SetSortPoint(p);

  function SetSortPoint(arry) {
   var len = arry.length;
   for (var i = 0; i < len - 1; i++) {
    for (var j = 0; j < len - 1 - i; j++) {
     if (SetSortRule(arry[j], arry[j + 1])) {
      var tmp = arry[j];
      arry[j] = arry[j + 1];
      arry[j + 1] = tmp;
     }
    }
   }
   console.log(arry);
  }

  //兩個坐標比較大小
  function SetSortRule(p1, p2) {
   if (p1.y > p2.y) {
    return true;
   }
   else if (p1.y == p2.y) {
    return (p1.x > p2.x);
   }
   else {
    return false;
   }
  }
 </script>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: