html5 Canvas Select 区域和缩放

Question

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

放大该区域有任何想法

非常感谢， 汤姆

Answer 1

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

方法一：DIY

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

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

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

一旦您弄清楚了这两种策略中的一种，JavaScript 上的实施实际上非常简单。

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

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

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

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

5. 中提琴！缩放!!

方法二：使用库！

使用像 OpenLayers 3, and just load your heatmap into it. Here's an Heatmap Example 这样在 OpenLayers 3 中完成的很棒的库。现在免费提供缩放平移！

希望这对您有所帮助。