用HTML5 canvas侧边滚动

我有一个尺寸如下的画布：500x200。在这个画布内，我画了一些块（实际上是表格单元格）。关于我应该画多少块的信息，我通过AJAX获取，但每个单元格的大小是固定的 - 100x50。所以，我可以在画布内部只显示5个水平方向和4个垂直方向。但其他街区呢？如果脚本返回一个表30x30单元会怎么样。我如何滚动（鼠标首选）我的画布，以便用户可以其余的单元格（不缩小，只有滚动）。用HTML5 canvas侧边滚动

如果您需要更多信息，请告诉我，我会提供。谢谢。

来源

2011-08-25 Adoshev

什么细胞包含哪些内容？你确定要为此使用Canvas吗？除非你想使用CSS溢出和大画布，否则你必须自己实现滚动。 –

我有一个关于为什么我需要画布的原因的长长的故事，但我保证，这不能使用标准HTML表格完成。那么大帆布呢？如果我使用它会慢吗？将画布放入溢出的div声音很好。我需要测试这个，谢谢。 – Adoshev

完成此操作的最简单方法是实现鼠标平移。

在鼠标按下事件，开始平移和保存鼠标的位置

鼠标移动事件，翻译由当前鼠标的位置和原始位置之间的差异的情况下（ctx.translate(x,y)），然后重新绘制场景。

在鼠标上移事件中，停止平移。

有更难的方法。您可以在画布内部实现滚动条，就像Mozilla Bespin所做的一样（...它成为Mozilla Skywriter，然后与Ace合并并放弃所有Canvas使用）。他们使用的代码非常好。

或者你可以实现DOM滚动条用于你的画布，这在所有情况下都不是很容易得到。这涉及到添加几个虚拟div以便给出真实滚动条的外观和功能。我已经这样做了，但代码现在还没有发布。但那是没有理由的，你不能试一试，如果那就是你真正想要的。

来源

2011-08-25 13:58:47

谢谢你，我会尝试这个 – Adoshev

有趣的是，“Mozilla Skywriter项目，以前称为Bespin，已经被合并到另一个项目中，如果你正在寻找一个可以嵌入自己项目的可定制编辑器，看看Ace。“ （https://mozillalabs.com/en-US/skywriter/） – LeeGee

退房一个伟大的教程在：http://www.brighthub.com/hubfolio/matthew-casperson/blog/archive/2009/06/29/game-development-with-javascript-and-the-canvas-element.aspx

它会给你一个回答你的问题以及更多...

来源

2011-09-17 14:09:03 nadavkav

没有人的文章已被移动？ – Ron

似乎虽然它不再在BrightHub上，但马修已经把他的所有旧帖子都捆绑起来存放在档案中，如[http://matthewcasperson.blogspot.ca/2011/12/end-of-era html的]（http://matthewcasperson.blogspot.ca/2011/12/end-of-era.html） – Arunas

我与西蒙·萨里斯是这一点，但作为替代，您可以克隆画布，并将其替换为空白画布，然后将原始画布呈现为图像。我有一些MooTools的JS说是这样的，这是很好的为我用，通过因人而异：

var destinationCanvas = this.canvas.clone()l 
    destinationCanvas.cloneEvents(this.canvas, 'mousemove'); 
    var destCtx = destinationCanvas.getContext('2d'); 
    destCtx.drawImage(
     this.canvas, 
     (this.options.scrollPx)*-1, 
     0 
    ); 
    destinationCanvas.replaces(this.canvas); 
    this.canvas.destroy(); 
    this.canvas = destinationCanvas; 
    this.ctx  = destCtx; // this.canvas.getContext('2d');

来源

2012-09-17 18:58:12 LeeGee

用HTML5 canvas侧边滚动

回答

相关问题