欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

JavaScript實(shí)現(xiàn)二維坐標(biāo)點(diǎn)排序效果的方法-創(chuàng)新互聯(lián)

小編給大家分享一下JavaScript實(shí)現(xiàn)二維坐標(biāo)點(diǎn)排序效果的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在洛浦等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專(zhuān)注、極致的服務(wù)理念，為客戶(hù)提供網(wǎng)站制作、成都網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需定制網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),全網(wǎng)營(yíng)銷(xiāo)推廣,外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè),洛浦網(wǎng)站建設(shè)費(fèi)用合理。

今天給大家分享下最近web項(xiàng)目中出現(xiàn)的一個(gè)技術(shù)難點(diǎn)問(wèn)題——坐標(biāo)排序；

如下圖所示，要求在前端頁(yè)面上按順序?qū)⑾旅?個(gè)模塊的坐標(biāo)依次保存至數(shù)據(jù)庫(kù)

JavaScript實(shí)現(xiàn)二維坐標(biāo)點(diǎn)排序效果的方法

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

1、每個(gè)模塊分別為一個(gè)div

2、每個(gè)div可隨意拖動(dòng)（故拖動(dòng)之后的順序是錯(cuò)亂的）

3、每個(gè)div的坐標(biāo)（css絕對(duì)定位獲得的left、top屬性值）

現(xiàn)在已通過(guò)程序?qū)?個(gè)模塊div的坐標(biāo)信息用一個(gè)對(duì)象數(shù)組保存

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為每個(gè)模塊唯一標(biāo)志符（本實(shí)例用于提交數(shù)據(jù)庫(kù)）

一、排序思考

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

客戶(hù)及項(xiàng)目負(fù)責(zé)人沒(méi)有具體說(shuō)明規(guī)則，所以需要由技術(shù)人員按照技術(shù)方面的常規(guī)邏輯進(jìn)行分析。

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

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

根據(jù)上面得出的排序規(guī)則，我們需要分別對(duì)兩點(diǎn)的y、x坐標(biāo)分別比較，確定出排序

A、從上到下：坐標(biāo)y越小，越排在前面

B、從左到右：坐標(biāo)x越小，越排在前面

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

二、代碼實(shí)現(xiàn)

1、兩點(diǎn)比較

我們先定義兩個(gè)坐標(biāo)點(diǎn)，編寫(xiě)代碼進(jìn)行比較

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

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

//兩個(gè)坐標(biāo)比較大小
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;
   }
}

關(guān)鍵代碼：SetSortRule（p1,p2）

p1,p2分別為需要比較的兩點(diǎn)對(duì)象

這樣一來(lái)，我們對(duì)于兩個(gè)點(diǎn)的排序就可以實(shí)現(xiàn)了，接下來(lái)就是對(duì)上面對(duì)象數(shù)組中的5個(gè)點(diǎn)進(jìn)行排序。

2、多點(diǎn)比較

我們?cè)賮?lái)觀察下這5個(gè)點(diǎn)構(gòu)成的對(duì)象數(shù)組

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個(gè)點(diǎn)對(duì)象兩兩比較，這里就得用到冒泡排序法

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

 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為對(duì)象數(shù)組（此實(shí)例為p對(duì)象數(shù)組）
SetSortRule(arry[j],arry[j + 1])，為兩個(gè)點(diǎn)進(jìn)行比較

3、輸出效果

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

JavaScript實(shí)現(xiàn)二維坐標(biāo)點(diǎn)排序效果的方法

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);
  }

  //兩個(gè)坐標(biāo)比較大小
  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>

以上是“JavaScript實(shí)現(xiàn)二維坐標(biāo)點(diǎn)排序效果的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站chinadenli.net，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站名稱(chēng)：JavaScript實(shí)現(xiàn)二維坐標(biāo)點(diǎn)排序效果的方法-創(chuàng)新互聯(lián)
本文地址：http://chinadenli.net/article26/dphpjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站制作、ChatGPT、網(wǎng)站維護(hù)、服務(wù)器托管、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作