html5 Canvas 选择区域并缩放

Question

我正在用 JavaScript 重新实现从 svg 到 canvas 的交互式热图。我想知道是否有人对如何允许某人选择一个区域并使用 html5 画布和 js 放大该区域有任何想法。

非常感谢， 汤姆

Answer 1

免责声明：因为您没有提供任何代码，所以我将在这里坚持使用策略 :)

方法一：DIY

首先，您必须确定您的分辨率或单元格大小，以及缩放时单个单元格会发生什么情况。

案例 1： 您的单元格大小增加了，您只需将单元格大小乘以缩放系数并剪裁超出用户选择范围的区域。

案例 2： 您希望热图单元格为像素大小，在这种情况下，当您放大时，现在必须对之前的每个像素（或单元格）进行插值，您将提高分辨率通过缩放系数。当然，您必须以更高的分辨率重新运行该区域的热图功能。

一旦你弄清楚了这两种策略中的一种，在 JavaScript 上实现它实际上非常简单。

1. 你挂钩到拖动事件。并让用户绘制一个矩形来向他们展示他们正在放大的参考区域。

2. 然后根据绘制的矩形与原始图像或容器的比率来计算缩放系数。这将成为您的缩放因子

3. 现在使用缩放系数生成新图像，基于 Case1 或 Case2，具体取决于您使用的情况

4. 最后，您将现有图像替换为旧图像。

5. 维奥拉！放大！！

方法 2：使用库！

使用像 OpenLayers 3 这样很棒的库，然后将热图加载到其中。这是在 OpenLayers 3 中完成的Heatmap Example。缩放平移现在免费提供！

希望这会有所帮助。