最近因为项目的需要,要求对已有位图的特定区域重新渲染颜色,同时要求对该区域监听事件,以达到图片钻取的效果。如下所示,左图为一张普通的位图,右图是在左图的基础上,在页面上经过javascript动态改变后的效果(注意蓟县和宝坻区两个区域的颜色)
实现思路非常简单:
1、普通位图,要设置不同区域的事件,需要设置热区,即常用的图片锚点(DW和HTML MAP DESIGNER都可以)
2、根据热区(多边形),进行二次渲染
3、在页面上二次渲染,在此借助javascript画图,为避免挡住位图原本的主要信息,所画图形采用了透明的效果
接下来将不定期发布 javascript二次渲染图片的研究内容