.NET中的热图样式渐变

Question

我正在尝试使用与此类似的渐变创建热图:

此图像显示三个点,渐变很好地融合在一起.

这是我目前在绘图功能中所做的事情:

public void DrawGradient(int x, int y, Graphics g) {
    using (var ellipsePath = new GraphicsPath()) {

    var bounds = new Rectangle(x, y, 100, 100);
    ellipsePath.AddEllipse(bounds);
    var brush = new PathGradientBrush(ellipsePath);
    Color[] colors = { 
           Color.FromArgb(64, 0, 0, 255), 
           Color.FromArgb(140, 0, 255, 0), 
           Color.FromArgb(216, 255, 255, 0), 
           Color.FromArgb(255, 255, 0, 0) 
       };
    float[] relativePositions = {0f,0.25f,0.5f, 1.0f};
    ColorBlend colorBlend = new ColorBlend();
    colorBlend.Colors = colors;
    colorBlend.Positions = relativePositions;
    brush.InterpolationColors = colorBlend;

    g.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceOver;
    g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
    g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
    g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.Half;
    g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBilinear;

    g.FillEllipse(brush, bounds);
  }
}

这为两个重叠点创建了这样的图像:

它没有混合.如何在.NET绘图中创建渐变混合效果？

Answer 1

是的,这可以用<100行.NET和GDI +绘图代码..:

您需要在代码中更改这些内容:

• 您需要将点区域淡化为透明,以便添加它们
• 您需要使用灰度渐变,这样您就不会创建错误的,可能是泥泞的颜色
• 因此,您需要重新映射颜色.

以下是详细信息:

你需要两个渐变:

• 灰度级从黑色(255,0,0,0)变为透明黑色(0,0,0,0).您可以通过使透明端淡出或更慢来影响平滑度.

• 颜色渐变枚举您的热图颜色.

接下来,您需要一个或多个灰色圆圈的位图.如果点区域都相同,那么就可以做到..

现在,您可以将位图绘制到目标位图上.确保Graphics.CompositingMode = CompositingMode.SourceOver;将此结果设置为左侧屏幕截图.

最后你需要重新映射颜色:

为此,您需要设置ColorMaps:

• 创建两个颜色列表,一个遍历256个步骤的灰度颜色,一个具有相同步数的热图颜色.请注意,列表必须具有相同数量的元素; 然而,渐变可以ColorBlend.Colors根据您的喜好分为多少.

可以通过填充256x1像素来创建颜色列表,使用相同的两个像素Bitmap,然后使用拉出颜色.LinearGradientBrushColorBlendsGetPixel

做完之后 SetRemapTable我们终于可以绘制热图了,瞧,正确的截图非常相似,即使没有任何调整也能真正贴近你的热图.

你的代码

以下是对代码中的缺陷的一些评论:

• 你需要从完全透明的淡入.你的颜色以64的alpha开头,远非 "几乎透明".我们的眼睛在这个规模的末端非常敏感!

这是我使用的灰度渐变,具有photoshop风格的棋盘背景,因此您可以看到透明度:

• 你的颜色的另一个问题是它们以蓝色开始; 他们真的需要从白色开始!

• 最根本的问题是颜色的混合.对于"热图",(或"轮廓图"或"置换图"),我们需要将值相加,而不是混合它们.为此,颜色通道是无用的.颜色是圆形的,它们自然不适合列出的升序值.如果我们仅使用alpha通道,我们可以通过简单的方式将地图限制为"亮度图",然后我们可以按照我们喜欢的任何方式进行着色.

请注意,我假设这些点是最大值.如果不是,则需要将它们缩小到较低的alpha值.

另请注意,对于非常重要的应用程序,如医学或科学成像,您应该一直计算值,这样您就可以完全控制映射!