html5画布选择一个区域并缩放 [英] html5 Canvas Select an Area and Zoom
问题描述
我正在用JavaScript重新实现从SVG到画布的交互式热图.我想知道是否有人对如何允许某人选择一个区域并使用html5 canvas和js将该区域放大到该区域有任何想法.
I am in the midst of reimplementing an interactive heatmap from svg to canvas in javascript. I was wondering if anyone had any ideas for how allow someone to select an area and have it zoom into that area using html5 canvas and js.
非常感谢， 汤姆
推荐答案
免责声明:由于您未提供任何代码，因此我将在此处坚持使用策略:)
Disclaimer: Because you haven't provided any code I am going to stick to Strategy here :)
方法1:DIY
首先要决定的是您的分辨率或像元大小，以及缩放时单个像元会发生什么.
First thing you will have to decide is what your resolution or cell size in your case is and what happens to a individual cell when you zoom.
情况1:您的像元大小会增加，您只需将像元大小乘以缩放系数，然后裁剪超出用户选择范围的区域即可.
Case 1: Your cell size increases, and you just multiply the cellsize by the factor of zoom and clip the area that goes out of bounds of what user selected.
情况2:您希望将热图单元格设置为像素大小，在这种情况下，当您放大时，现在必须对每个先前的像素(或单元格)进行插值，并提高分辨率放大倍数.当然，您将不得不以更高的分辨率重新运行该区域的热图功能.
Case 2: You want your heatmap cells to be pixel sized in which case when you zoom in, now each of the previous pixel(or cell) will have to interpolated and you will increase the resolution by the factor of zoom. Of course you will have to re-run heat map function for that region with a greater resolution.
一旦您弄清了这两种策略之一，就可以很容易地在JavaScript上实现
Once you have one of the two strategy figured out, Implementation on JavaScript it actually quite simple.
-
您迷上了拖动事件.并让用户绘制一个矩形以向他们显示他们正在放大的参考区域.
You hook into drag-event. and let users draw a rectangle to show them the reference area they are zooming into.
然后，您将基于绘制的矩形与原始图像或容器的比率来计算缩放系数.这成为您的缩放系数
Then you calculate you zoom factor based on the ratio of the drawn rectangle, to the original image or the container. This becomes your zoom-factor
现在使用缩放倍数根据Case1或Case2生成新图像，具体取决于您使用的是
Now using the zoom factor you generate a new image, based on Case1 or Case2 depending on which you go with
最后，将现有图像替换为旧图像.
Finally you replace existing image with old one.
中提琴！放大！
方法2:使用库！
使用很棒的库，例如 OpenLayers 3 ，然后将热图加载到其中.这是在OpenLayers 3中完成的 Heatmap示例.免费！
Use a awesome library like OpenLayers 3, and just load your heatmap into it. Here's an Heatmap Example done in OpenLayers 3. Zoom pan now come for FREE!
希望这会有所帮助.
这篇关于html5画布选择一个区域并缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
