Windows8.1画热度图 - 坑

想要的效果

如上是silverlight版本。原理是设定一个调色板，为256的渐变色（存在一个png文件中，宽度为256，高度为1），然后针对要处理的距离矩阵图形，取图片中每个像素的Alpha值作为索引，对应到调色板的颜色。每个像素处理之后，则形成上面的热度图。该图主要表达了一个数据分布的密度。

 

网络上有一个Gildor.HeatmapDemos工程，我主要参考了SL版本。要注意elipseRadius，如果过小，即每个圆彼此不相交，则看不到热度效果，所以代码设置初始值为100。（上图的数值初始化部分，对应代码如下）

private List<Point> plist = new List<Point>();
        private void drawHeatMap ()
        {
            plist.Clear();
            plist.Add(new Point(0.15*map.ActualWidth, 0.49*map.ActualHeight));
            plist.Add(new Point(0.20 * map.ActualWidth, 0.25 * map.ActualHeight));
            plist.Add(new Point(0.10 * map.ActualWidth, 0.15 * map.ActualHeight));
            plist.Add(new Point(0.12 * map.ActualWidth, 0.05 * map.ActualHeight));
            plist.Add(new Point(0.17 * map.ActualWidth, 0.34 * map.ActualHeight));
            plist.Add(new Point(0.17 * map.ActualWidth, 0.33 * map.ActualHeight));
            plist.Add(new Point(0.16 * map.ActualWidth, 0.33 * map.ActualHeight));
            
            heatMap.Source = _heatMapGen.GenerateHeatMap (
                plist,
                new Size (map.ActualWidth, map.ActualHeight));
        }

View Code