帆布标签和滚动问题

我一直工作在两种不同的方法来创建HTML5代码的图形的画布，让图示和图表的水平滚动。画布表示各种时间表。当我们水平滚动时，这个想法是以时间线的形式代表几年......例如：说出计算机的历史发展......我在图上参照xy坐标绘制点。这是目前手动。后来我打算基于sql查询做出它。那么当我滚动更多时，相应地显示未来几年/过去几年绘制的点数......给它持续的时间线感觉。帆布标签和滚动问题

我一直试图在HTML5 2种方法canvas..some已经使用SVG建议，Silverlight来尝试这一点，GDI + ....

方法1： -

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

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

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

然而，这种方法的问题是，我不知道如何绑定在该网格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(); 
    } 
}

另一个问题可能是，即使timeli ne（）在画布卷动时被调用，网格被静态绘制，在x = 65和x = 930 /之间，因此没有其他网格被绘制。

尽管使用这种方法（使用第一种方法证明是困难的）标记是可能的，但网格并不一致，一旦我滚出第一帧，网格消失......虽然绘制点在我们滚动时，未来仍然可见。

在我的第一个方法我用不断重演，我们滚动画布上的网格...但是标签变得难以与......和在2个办法，我的标签，但创建重复电网的那种风格变得困难。我遇到了很多障碍。不知何故，我需要结合这两种方法来创建解决方案。谁能帮忙？

如果有人也可以给我链接到超酷的帆布相关的理论材料。我会很感激。:)

更新第二方法和溶液： -

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

用这种方法在y轴标签保持恒定。背景网格正在复制。虽然这是我寻找的解决方案（它不是完美的），但任何修改都是非常受欢迎的。

来源

2013-01-19 Philo

虽然我的解决方案是不是很完美，但解决方案上可以找到： -

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

解决方案： - 创建单独的X-Y网格的功能。

grid = (function (dX, dY) { 
         var can = document.createElement("canvas"), 
          ctx = can.getContext('2d'); 
         can.width = dX; 
         can.height = dY; 
         // fill canvas color 
         ctx.fillStyle = 'black'; 
         ctx.fillRect(0, 0, dX, dY); 

         // x axis 
         ctx.strokeStyle = 'orange'; 
         ctx.moveTo(.5, 0.5); 
         ctx.lineTo(dX + .5, 0.5); 
         ctx.stroke(); 

         // y axis 
         ctx.moveTo(.5, .5); 
         ctx.lineTo(.5, dY + .5); 
         ctx.stroke(); 

         return ctx.createPattern(can, 'repeat'); 
        })(72, 50);

来源

2013-01-22 17:10:44 Philo

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

另一个是paperjs，但是这个主要适用于用户交互。

来源

2013-01-19 10:17:08

但这并不能解决我遇到的问题。此外，d3链接不起作用 – Philo

这里是更新后的链接。它似乎同时被改变了。我没有说它会解决你的问题，我只是想给一个好的数据可视化框架的参考。 –

gotchya。谢谢。仍然在寻找一些HTML5画布的参考。 – Philo

帆布标签和滚动问题

回答

相关问题