목록 사이에 화살표 그리기

Question

강조 표시된 두 개의 목록 항목 사이에 화살표를 동적으로 그리는 방법이 있습니까?

는 나는이 작업을 수행 할 것 "항목이"맴돌고 그래서 경우 (단, 직선 화살표) :

:

Item 1   Highlight 3 
Item 2-----\  Highlight 1 
Item 3  ----->Highlight 2 

이것은 내가 몇 분 전 여기 있어요 대답에서 코드입니다 Highlight item in two lists when mouseover

$(".list1 li, .list2 li").hover(function() { 
    var n = this.id.substr(2); 
    $("#qq" + n + ", #aa" + n).toggleClass("highlight"); 
}); 

jsfiddle : http://jsfiddle.net/e37Yg/1/

<ul class="list1"> 
    <li id="qq1">sdfsdv</li> 
    <li id="qq2">bnvnvb</li> 
    <li id="qq3">nmnutymnj7</li> 
    <li id="qq4">cvbc</li> 
    <li id="qq5">45tsgd</li> 
</ul> 

<ul class="list2"> 
    <li id="aa3">fgtbrtgb</li> 
    <li id="aa1">vbn xgbn</li> 
    <li id="aa5">vdgver</li> 
    <li id="aa4">asdasdv</li> 
    <li id="aa2">nvfbnfn</li> 
</ul> 

Answer 1

여기에서 2D 도면을 사용할 필요는 없습니다. 이것을 확인해보십시오 : http://jsfiddle.net/vjYuW/ 나는 위의 게시 된 바이올린을 포크하고 업데이트했습니다.

HTML :

...left list... 
<div id="segment1" class="hline"></div> 
<div id="segment2" class="vline"></div> 
<div id="segment3" class="hline"></div> 
...right list... 

CSS :

... formatting for ULs here, both have to be float:left... 

.highlight { background-color: red; } 

.hline {  
    display:block; 
    position:relative; 
    float:left; 
    height: 1px; 
    width: 7em; 
} 

.vline { 
    display:block; 
    position:relative; 
    float:left; 
    height: 1px; 
    width: 1px;  
} 

여기

는 필수 코드, 그것은 선을 그리는 폭 또는 높이 3 개 된 DIV 1 개 픽셀을 처리하는 것이다 자바 스크립트 :

$(".list1 li, .list2 li").hover(function() { 
    var n = this.id.substr(2); 
    var leftY = $('#qq' + n).position().top; 
    var rightY = $('#aa' + n).position().top; 
    var H = Math.abs(rightY-leftY); 
    if (H == 0) H = 1; 
    $('#segment1').css('top',leftY+'px'); 
    $('#segment3').css('top',rightY+'px'); 
    $('#segment2').css('top',Math.min(leftY,rightY)+'px'); 
    $('#segment2').css('height',H+'px'); 
    $("#qq" + n + ", #aa" + n + ",#segment1,#segment2,#segment3").toggleClass("highlight"); 
}); 

참고 : 당신은 아마 모든 브라우저를 지원하기 위해 그것을 조금 조정할 것 - 나는 IE6 & (주)

Answer 2

이런 식으로 생각하면 Vector Draw Library과 같은 타사 드로잉 라이브러리를 사용하는 것이 좋습니다.

링크에서 라이브러리를 다운로드하여 앱에 추가 할 수 있습니다. 그런 다음 :

귀하의 페이지에 포함 : 호버 기능에 라인을 제거하는 코드를 작성해야합니다

$(".list1 li, .list2 li").hover(function() { 
    var n = this.id.substr(2); 
    $("#qq" + n + ", #aa" + n).toggleClass("highlight"); 

    //canvas is your drawing div 
    var jg = new jsGraphics("canvas"); 
    jg.drawLine($("#qq" + n).offset().left + 30, $("#qq" + n).offset().top , $("#aa" + n).offset().left, $("#aa" + n).offset().top); 
    jg.paint(); 

참고 :

<script type="text/javascript" src="wz_jsgraphics.js"></script> 

이 그런 다음 호버 기능 추가 그렇지 않으면 그려 지기만하면됩니다. 또한 offset()을 사용하여 목록에서 항목의 위치를 ​​계산합니다. 이 방법이 효과적 일지는 모르겠지만 제대로 보이게하려면 약간 조정해야 할 수도 있습니다.

위의 코드는 작동하지만 완전하지는 않습니다. 호버의 두 번째 기능은 캔버스에서 clear()이라고 부를 수 있습니다. 여기서 캔버스는 두 목록을 묶는 둘러싸는 div입니다.

Answer 3

HTML5 canvas 요소를 사용하여이를 수행 할 수 있습니다.

이것이 최선의 방법인지 확실하지 않지만 주변을 들으며 this을 얻었습니다.

제가 한 것은 div에 목록을 동봉했습니다. div은 CSS로 스타일이 지정되어 상대적인 위치를 갖습니다. 이것은 jQuery로 포지션을 얻었을 때 그 위치와 관련된 위치를 제공합니다. 다음으로 목록 앞에 캔버스를 놓고 포인터 이벤트를 비활성화합니다. 나는 캔버스의 높이를리스트의 높이로 조정하기 위해 뭔가를 추가했다. 그런 다음 호버 용 다른 핸들러를 추가했습니다. 그 위에 마우스를 올리면 화살표가 그려지고, 밖으로 마우스를 가져 가면 캔버스가 지워집니다.

화살표 그리기는 매우 간단합니다. 먼저 항목의 위치를 ​​가져옵니다. 그런 다음 선을 그리고 화살표를 맞추기 위해 몇 가지 수학을 사용합니다. 위치를 얻는 것은 상당히 쉽습니다. 올바른 목록의 경우 position 방법을 사용할 수 있습니다. 왼쪽 목록의 경우 임시 번호 span을 만들고 목록 항목에 추가 한 다음 그 위치를 얻었습니다.

Answer 4

<script src='www.walterzorn.de/en/scripts/wz_jsgraphics.js'> </script> 

function drawLine(element1, element2) { 
    var jg = new jsGraphics("renderGraph"); 
    var ele1 = document.getElementById(element1); 
    var ele2 = document.getElementById(element2); 
    jg.setColor("#DDD"); 
    jg.setStroke(5); 
    jg.drawLine(ele1.offsetLeft + ele1.offsetWidth/2 , ele1.offsetTop + ele1.offsetHeight/2, ele2.offsetLeft + ele2.offsetWidth/2, ele2.offsetTop + ele2.offsetHeight/2); 
    jg.paint(); 
}