html5画布选择一个区域和缩放

Question

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

非常感谢， 汤姆

Answer 1

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

方法1：DIY

首先要确定的是你的分辨率或单元格大小是什么，以及缩放时单个单元格会发生什么。

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

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

一旦你找到了两个策略中的一个，在JavaScript上实现它实际上非常简单。

1. 你挂钩了drag-event。并让用户绘制一个矩形，向他们展示他们放大的参考区域。

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

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

4. 最后，用旧图像替换现有图像。

5. 中提琴！变焦!!

方法2：使用图书馆！

使用像OpenLayers 3这样的精彩库，只需将热图加载到其中即可。这是在OpenLayers 3中完成的Heatmap Example。缩放平移现在免费提供！

希望这会有所帮助。