javascript - 使用 canvas 绘制从 div 到 div 的时间线

Question

我有以下 div 标记

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

而且我有很多这样的 div，根据它们的位置具有不同的 data-x 和 data-y 值。

我想在这里实现的是在 div 之间绘制类似时间线的东西，例如 div1 行到 div2 行到 div 3 等等，

我希望它自动完成所以我试图为它创建一个循环，但我的 javascript/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

你的想法是对的，但你的问题是 Canvas 不在负坐标处绘制。

因此，您必须将所有 data-x 和 data-y 映射到正坐标。

这是一个将负值映射为正值的函数:

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

因此，在您的示例中，将 -300 的数据 x 值映射到屏幕上的 0-1000 范围可以这样做:

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

您必须将您的 div 重新定位到映射的 x,y 坐标，您可以使用 CSS 执行此操作。

另一种方法是使用 SVG，它创建可以定位在负坐标处的实际 DOM 元素。