Question

我一直在研究使用html5代码创建图形画布的两种不同方法，允许图形的图形表示和水平滚动。画布代表各种时间轴。当我们横向滚动时，想法是以时间轴的格式表示几年......例如：说计算机的历史发展......我在图中参考xy坐标绘制点。这是目前手动。后来我打算根据SQL查询来制作它。然后当我滚动更多时，相应地显示在未来年份/过去年份中绘制的点数...给它一个连续的时间线感觉。

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

方法1： -

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

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

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

然而，这种方法的问题是我不知道如何在这个网格上绑定y轴标签，这样每个可滚动框架都有一个x轴和y轴的一致标签。

注意：您可以查看我的下一个方法，看看标签的含义。

方法2： -

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

第二种方法的问题，主要是在捕获鼠标滚动/拖动事件并尝试重绘画布元素的函数中： -

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();
  }
}

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

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

在我的第一种方法中，我使用一个网格，当我们在画布上滚动时不断重复...但是标签变得困难...而在第二种方法中，我标记，但是创建重复网格的样式变为难。我走到了路边。不知怎的，我需要结合两种方法来创建解决方案。有人可以帮忙吗？

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

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

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

使用此方法，y轴标签保持不变。背景网格正在复制。虽然这是我正在寻找的解决方案（它并不完美），但欢迎任何修改。

Answer 1

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

另一个是paperjs，但这个主要适合用户互动。

Answer 2

虽然我的解决方案还不完善，但解决方案可以在： -

找到

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);

画布标签和滚动问题

2 个答案: