javascript - Canvas 标签和滚动问题

Question

我一直在研究两种不同的方法来使用 html5 代码创建图形 Canvas ，允许图形表示和图形的水平滚动。 Canvas 代表各种时间轴。当我们水平滚动时，我们的想法是以时间轴的格式表示几年……例如:说计算机的历史发展……我正在引用 xy 坐标在图表上绘制点。这是目前手动选择。稍后我打算基于 sql 查询来制作它。然后，当我滚动更多内容时， future 几年/过去几年中绘制的点会相应显示...给人一种连续时间轴的感觉。

我一直在尝试在 html5 canvas 中使用 2 种方法进行尝试。有些人建议使用 SVG、silverlight、GDI +....

方法 1:-

http://jsfiddle.net/7KaKf/1/

方法 - 创建一个网格，使用变量列表在网格上绘制点，在 Canvas 上单击鼠标 - 激活触发，拖动 Canvas 以水平滚动，再次单击 Canvas 并禁用滚动。

这种方法的优势 - 水平滚动就像一个魅力!!!

但是，这种方法的问题是我不确定如何在此网格上绑定(bind) y 轴标签，以便每个可滚动框架在 x 轴和 y 轴上都有一致的标签。

注意:您可以查看我的下一个方法以了解标签的含义。

方法 2:-

http://jsfiddle.net/WNpKE/10/

第二种方法的问题，主要类似于捕获鼠标滚动/拖动事件并尝试重新绘制 Canvas 元素的函数:-

window.onmousemove = function (e) {
  var evt = e || event;
  if (dragging) {
    var delta = evt.offsetX - lastX;
    translated += delta;

    //console.log(translated);

    ctx.restore();
    ctx.clearRect(0, 0, 930, 900);
    ctx.save();
    ctx.translate(translated, 0);
    lastX = evt.offsetX;
    timeline();
  }
}

另一个问题可能是，即使 timeline() 在 Canvas 滚动时被调用，网格是静态绘制的，在 x = 65 和 x = 930 之间/因此没有其他网格被绘制.

虽然用这种方法可以标记(事实证明第一种方法很困难)，但网格不一致，一旦我滚动出第一帧，网格就会消失....尽管绘制的点在当我们滚动时， future 仍然可见。

在我的第一种方法中，我使用了一个网格，当我们在 Canvas 上滚动时，它会不断重复自己......但是标签变得困难......在第二种方法中，我标记，但是创建重复网格的样式变得难的。我已经遇到了障碍。我需要以某种方式结合这两种方法来创建解决方案。谁能帮忙？

如果有人也可以给我链接到很酷的 Canvas 相关理论 Material 。我会很感激。 :)

更新了第二种方法和解决方案:-

http://jsfiddle.net/WNpKE/12/

通过这种方法，y 轴标签保持不变。背景网格正在复制。虽然这是我一直在寻找的解决方案(它并不完美)，但欢迎进行任何修改。

Answer 1

我认为你应该坚持使用 D3 库:http://d3js.org/ .它是数据可视化方面的绝对引用，即使它不是基于 Canvas ，但是有大量的例子，通过检查代码你可以学到很多东西。

另一个是 paperjs , 但这个主要适合用户交互。