浅谈Heatmap

作者佚名技术来源 NET编程浏览发布时间 2012-05-23

sp; $color = $colors[$channel];

if ($color !== 255) {

$colors[$channel] = $color + ((255 - $color) * $opacity);

}

$pixel->setColor("rgb({$colors[''r'']},{$colors[''g'']},{$colors[''b'']})");

}

$iterator->syncIterator();

}

$plot_size = $plot_image->getImageGeometry();

foreach ($coordinates as $pair) {

$heatmap_image->compositeImage(

$plot_image,

Imagick::COMPOSITE_MULTIPLY,

$pair[0] - $plot_size[''width''] / 2,

$pair[1] - $plot_size[''height''] / 2

);

}

$color_image = new Imagick(''clut.png'');

$heatmap_image->clutImage($color_image);

$heatmap_image->writeImage(''heatmap.png'');

　　代码虽然很多，但并不复杂，其中用到了两个图片，分别是：plot.png和clut.png。实际应用时，有时候点击量会非常大，此时没有必要把所有的点击都渲染出来，而应该采取随机取样的策略，如果采用MongoDB持久化的话，可以参考：The Random Attribute。

　　备注：代码参考image-tempest。

　　最终展示

　　形象一点来说，其实就是通过CSS+Javascript把生成的图片盖在网页上，并调节图片透明度来达到合二为一的效果，篇幅所限，具体代码留给大家自己实现，例子效果可参考下图：

　　Heatmap

　　BTW：热点可能会随着时间改变，为了能对照某个时间的网页，可以使用CutyCapt截屏。顺手再贴一个相关的项目：smt2(simple mouse tracking)。

　　有关Heatmap的详细介绍，还可以参考

　　How to make heat maps

　　The definitive heatmap

　　收工!Heatmap虽然不是很复杂的技术，但涉及的方面却很繁杂，希望本文能帮到大家。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2 3

分享到：更多

你可能对下面的文章感兴趣

上一篇: Online的IDE，可以写PHP哦！下一篇: 完美实现GIF动画缩略图

关于浅谈Heatmap的所有评论

随机推荐