캔버스

Question

와 div에하는 사업부에서 타임 라인을 그리기 I

<div data-x="-1000" data-y="-1500"> 
// content 
</div> 
<div data-x="0" data-y="-1500"> 
// content 
</div> 

다음 사업부의 마크 업을 가지고 있고이 많은 다른 데이터-X 및 데이터 Y 값이 자신의 위치에 따라와 div를 가지고있다.

내가 여기 달성하고자하는 것은

내가이 그래서 내가 만들려고 노력하고 있어요 자동으로 수행 할 ,, 그래서 DIV2 라인에 div1 라인이 3 등 div에하는 div의 사이에 타임 라인 같은 것을 그릴 수있다 루프하지만 내 자바 스크립트/jquery 지식은 그렇게 좋지 않다. 누군가 좋은 방향으로 나를 가리킬 수 있을까요?

내가 가지고있는 지금

function drawTimeline() { 

    var divs = document.getElementsByTagName('div'); 
    var canvas = document.getElementById('timeline'); 

    // Make sure we don't execute when canvas isn't supported 
    if (canvas.getContext){ 

    // use getContext to use the canvas for drawing 
    var ctx = canvas.getContext('2d'); 
    var prevCoord = {}; 

    for (var i = -1; div = divs[++i];) { 
     if (div.dataset.x && div.dataset.y) { 
     var x = parseInt(div.dataset.x); 
     var y = parseInt(div.dataset.y); 
     if ({} !== prevCoord) { 

      ctx.beginPath(); 
      ctx.lineWidth="5"; 
      ctx.strokeStyle="purple"; // Purple path 
      ctx.moveTo(prevCoord.x, prevCoord.y); 
      ctx.lineTo(x, y); 
      ctx.closePath(); 
      ctx.stroke() 
     } 

      prevCoord.x = x; 
      prevCoord.y = y; 
     } 
    } 

    } else { 
    alert('You need Safari or Firefox 1.5+ to see this.'); 
    } 

} 

불행하게도 라인은 직선 라인과 그게 전부에요 .. 같은 사람이 나를 도울 수 해결되지이다?

Answer 1

올바른 생각은 있지만 캔버스가 음수 좌표로 그려지지 않는 것이 문제입니다.

따라서 모든 데이터 -x 및 데이터 -y를 양의 좌표로 매핑해야합니다. 이 작업을 수행 할 수 있습니다 0-1000의 화면 범위에 -300의 데이터 x 값을 매핑하기 위해 예에 따라서

function mapRange(value, sourceLow, sourceHigh, mappedLow, mappedHigh) { 
    return mappedLow + (mappedHigh - mappedLow) * (value - sourceLow)/(sourceHigh - sourceLow); 
} 

: 여기

는 양의 값으로 음수 값을 매핑하는 기능입니다

var x = mapRange(-300, -1500,0, 0,1000); // The mapped x is 466.66. 

CSS를 사용하여 매핑 할 수있는 x, y 좌표로 div의 위치를 ​​변경해야합니다.

대체 방법은 음의 좌표에 배치 할 수있는 실제 DOM 요소를 만드는 SVG를 사용하는 것입니다.