2

我一直在研究两种不同的方法来创建带有 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 轴标签保持不变。背景网格正在复制。尽管这是我一直在寻找的解决方案（它并不完美），但欢迎进行任何修改。

4

2 回答 2

0

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

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

于 2013-01-19T10:17:08.987 回答
0

虽然我的解决方案还不完美，但可以在以下位置找到解决方案：-

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

解决方案：- 作为函数单独创建 xy 网格。

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-22T17:10:44.157 回答