HTML5 大画布 - 移动和缩放包括背景在内的整个内容答案

【问题标题】：HTML5 large canvas - moving and zooming whole content including backgroundHTML5 大画布 - 移动和缩放包括背景在内的整个内容
【发布时间】：2012-03-15 16:14:03
【问题描述】：

我的最终目标是使用 html5 实现像 http://www.crystal.ch/abb/power_systems_landscape/ 这样的应用程序。

如你所见，我们可能需要一个大的 (2000*600) 画布，但我不确定。

谁能给我一些想法只是为了遵循上述链接的行为？

包括背景在内的整个画布内容可以使用 mousemove 和 mousedown 操作平滑地左右移动
包括背景在内的整个画布内容根据电源系统选择平滑左右移动
放大缩小
像加标志性圆圈一样的淡出效果

任何想法都将不胜感激。

【问题讨论】：

标签： javascript html css html5-canvas

【解决方案1】：

基本上你想要这样的东西

<div id='wrapper' style='position: overflow: hidden; relative; width: 500px; height: 300px;>
    <canvas id='canvas' width='2000' height='600'></canvas>
<div>

那么当你想要滚动时，你会做类似的事情

document.getElementById('wrapper').scrollTo(x, y);

缩放会是

document.getElementById('canvas').style.width = 2000 * zoom;
document.getElementById('canvas').style.height = 600 * zoom;

您可以使用 setInterval 以及不让滚动和缩放流畅的方法，但这绝对是在大画布上获得这些效果的最快方法，因为不涉及重绘。

【讨论】：

您好，感谢您的回答。根据我的测试，滚动概念是可以实现的。但对缩放感到困惑。改变画布的宽度和高度不会影响画布内的绘图内容。可能我们需要根据改变的宽度和高度重新绘制所有内容。无论如何，仍然在寻找隐藏“4. 像加标志性圆圈一样的淡出效果”
通过更改画布的 CSS 宽度/高度，您可以将其放大而无需重绘。对于小优点，最好的办法是在较大的画布上绝对放置一些 div 或小画布，您可以使用标准的 javascript/CSS 属性补间来实现淡入/淡出或展开/折叠效果。有很多关于这类东西的资源。
通过更改画布的 CSS 宽度/高度，溢出被剪裁，其余内容变得不可见。我的意思是不要放大它。问候褪色我想通过小画布而不是大画布的方式进行测试。谢谢

【解决方案2】：

如果您使用 2D canvas js，不使用缩放或移动 canvas 元素或任何其他 html 元素，我建议您最好在 draw 函数中编写算法。缩放是质量和速度的死亡，从放大到缩小都可能很复杂（不要忘记画布上的所有可见数据只是一个图像）。我设法上传了一张 13000 像素的图片和多人游戏头像，以展示绘制/更新函数中的所有算法。

如果您使用 2 个画布，您可以从代码大图像中裁剪，然后合成到可视地图。

如果图像宽度太大 > 3000 ps 必须除以较低级别（在 iOS 设备上，图像 ~> 3000px 变为负比例 - 图像变小）。

【讨论】：