我正在用JavaScript重新实现从SVG到画布的交互式热图。我想知道是否有人对如何允许某人选择区域并使用html5 canvas和js放大该区域有任何想法。
非常感谢，汤姆
免责声明：由于您未提供任何代码，因此在这里我将坚持使用策略:)
方法1：DIY
您必须决定的第一件事是您的情况下的分辨率或像元大小以及缩放时单个像元会发生什么。
情况1：您的像元大小增加了，您只需将像元大小乘以缩放系数，然后裁剪超出用户选择范围的区域即可。
情况2：您希望将热图单元的大小设为像素大小，在这种情况下，当您放大时，现在必须对每个先前的像素（或单元）进行插值，并且将缩放比例提高分辨率。当然，您将不得不以更高的分辨率重新运行该区域的热图功能。
一旦弄清楚了这两种策略中的一种，就可以在JavaScript上实现它实际上非常简单。
您迷上了拖动事件。并让用户绘制一个矩形以向他们显示他们正在放大的参考区域。
然后，您将根据绘制的矩形与原始图像或容器的比率来计算缩放系数。这成为您的缩放系数
现在，使用缩放系数，根据Case1或Case2生成新图像，具体取决于您使用的是哪种
最后，用旧的图像替换现有的图像。
中提琴！飞涨 ！！
方法2：使用库！
使用很棒的库，例如OpenLayers 3，然后将您的热图加载到其中。这是在OpenLayers 3中完成的一个热图示例。缩放平移现在免费提供！
希望这可以帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句