JavaScript + Canvas에서 겹쳐진 객체를 그룹화하는 방법은 무엇입니까?

Question

제발, 나 좀 도와 줘! 좋아, 캔버스가있는 HTML5 문서가 있습니다. Javascript는 캔버스에지도를 렌더링합니다. 지도에는 도시의 자동차 위치를 보여주는 추적기가 있습니다. 각 추적기 - 숫자가 들어있는 텍스트 레이블이있는 아이콘입니다.

자동차가 서로 가까이에 배치 된 상황이있을 수 있습니다.이 경우 하나의 추적기 아이콘이 다른 자동차의 라벨을 지나치게 많이 표시 할 수 있습니다. 겹쳐진 아이콘이있는 것은 정상이지만 레이블은 항상보아야합니다.

오버 라이딩 추적기의 레이블을 그룹화하는 방법이 필요합니다. 도와주세요! 나는 어디서부터 시작해야할지 모르겠다!

추신 : 이것은 제 12 자 라이브러리 exept jQuery 및 jQuery UI (고객의 요구 사항)없이 수행되어야합니다.

Answer 1

는 이런 짓을하지,하지만 여기에 대한 내 생각이다 결코 :

의는이 같은 세 가지 자동차의 배열이 있다고 가정 해 봅시다 :

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

레이블 클래스 레이블 요소를 배치한다 :이 방법을 보여줍니다

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

Here is a fiddle합니다.