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行到div3等，

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

你有正确的想法，但你的问题是画布不会在负坐标处绘制。

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

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

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

因此，在您的示例中，将-3的data-x值映射到0-1000的屏幕范围可以执行此操作：

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

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

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

用画布从div绘制时间轴到div

1 个答案: