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

html5画布选择一个区域并缩放,html,canvas,zooming,heatmap,Html,Canvas,Zooming,Heatmap,我正在用javascript重新实现一个从svg到画布的交互式热图。我想知道是否有人对如何允许某人选择一个区域并使用HTML5Canvas和js将其放大到该区域有任何想法 非常感谢,, Tom免责声明:因为您还没有提供任何代码,所以我将在这里坚持以下策略:) 方法1:DIY 首先要确定的是,在您的情况下,分辨率或单元格大小是多少,以及缩放时单个单元格会发生什么情况 案例1:您的单元格大小增加,您只需将单元格大小乘以缩放因子,然后剪裁超出用户选择范围的区域 案例2:您希望热图单元的大小为像素大小,

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

非常感谢,, Tom

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

方法1:DIY

首先要确定的是,在您的情况下,分辨率或单元格大小是多少,以及缩放时单个单元格会发生什么情况

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

案例2:您希望热图单元的大小为像素大小,在这种情况下,放大时,现在必须对之前的每个像素(或单元)进行插值,并通过缩放因子提高分辨率。当然,您必须以更高的分辨率重新运行该区域的热图功能

一旦您找到了这两种策略中的一种,在JavaScript上的实现实际上相当简单

  • 您将钩住拖动事件。并让用户绘制一个矩形来显示他们正在放大的参考区域

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

  • 现在,使用缩放因子,根据案例1或案例2生成一个新图像,具体取决于您选择的案例

  • 最后,将现有图像替换为旧图像

  • 中提琴!缩放

  • 方法2:使用库

    使用一个很棒的类库,只需将你的热图载入其中。这里有一个在OpenLayers 3中完成的示例。缩放平移现在免费


    希望这有帮助

    谢谢你富有洞察力的回答。我试试这个,不客气!请询问您是否需要对上述任何内容进行更多澄清,或者您是否有任何具体的实施问题。祝你好运