0

助けてください！わかりました、canvas を含む HTML5 ドキュメントがあります。Javascript は、キャンバス上にマップをレンダリングします。地図上には、市内の車の位置を示すトラッカーがあります。各トラッカー - 番号を含むテキスト ラベル付きのアイコンです。

車同士が非常に近くに配置されている場合があります。この場合、あるトラッカーのアイコンが別のトラッカーのラベルを過度に表示する可能性があります。上にアイコンがあるのは正常ですが、ラベルは常に表示されている必要があります。

上にあるトラッカーのラベルをグループ化するアルゴリズムが必要です。助けてください！どこから始めればいいのかわからない！

PS: これは、jQuery および jQuery UI (顧客の要件) を除くサードパーティ ライブラリなしで実行する必要があります。

4

1 に答える 1

0

これを行ったことはありませんが、これについての私の考えは次のとおりです。

次のような 3 台の車の配列があるとします。

var cars=[{name:"car1",x:100,y:101},{name:"car2",x:99,y:101},{name:"car3",x:90,y:111}];

最初に位置で並べ替えます。

cars.sort(sortfunction)

function sortfunction(a, b){
   return a.x - b.x + a.y - b.y
}

車を地図上に配置するときは、前の位置を見てください。近くにある場合は、ラベル クラスを追加します。

var label=0;
for(var i=0; i<cars.length; i++) {
  if(i>=1) {
    if(Math.abs(cars[i-1].x-cars[i].x+cars[i-1].y-cars[i].y)<10) {
      //Add your element with a label class $("<div class='car label"+label+"' style='...'>")
       console.log(cars[i-1].name+" is to near to "+cars[i].name);
      label++;
    }
    else {
      //Add your element normal $("<div class='car' style='...'>")
       label=0;   
    }
  }
}

ラベル クラスは label-element を配置する必要があります。

.label0 {
    /* position north */
}
.label1 {
    /* position west*/
}
.label2 {
    /* position east*/
}
/* can go on with nw, ne, se and sw if needed*/

これは、このアプローチを示すフィドルです。

于 2013-04-24T07:25:02.417 に答える