Градиенты в стиле тепловой карты в .NET

Я пытаюсь создать тепловую карту с градиентами, которая выглядит примерно так: введите здесь описание изображения

На этом изображении показаны три точки, и градиенты хорошо сочетаются друг с другом.

Вот что я сейчас делаю в своей функции рисования:

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?


.net c# gradient system.drawing alphablending
person Jon Kump    schedule 23.05.2015    source источник
comment
Смотрите добавленные комментарии к вашему (интересному) коду и его проблемам..! Если у вас есть какие либо вопросы, пожалуйста спрашивайте!!   -  person TaW    schedule 24.05.2015

Ответы (1)


arrow_upward
29
arrow_downward

Да, это возможно с ‹ 100 строк кода рисования .NET и GDI+..:

введите здесь описание изображения

Вам нужно изменить следующие вещи в коде:

  • Вам нужно сделать точечные области прозрачными, чтобы их можно было добавить
  • Вам нужно использовать градиент в градациях серого, чтобы не создавать неправильные, возможно, мутные цвета.
  • Как следствие, вам необходимо переназначить цвета.

Подробности:

Вам нужны два градиента:

  • Оттенки серого идут от черного (255,0,0,0) до прозрачного черного (0,0,0,0). Вы можете влиять на гладкость, заставляя прозрачный конец исчезать быстрее или медленнее.

  • Цветовой градиент перечисляет цвета вашей тепловой карты.

Далее вам понадобится одно или несколько растровых изображений с размытыми серыми кругами. Если точечные области все одинаковые, подойдет одна.

Теперь вы можете рисовать растровые изображения на целевом растровом изображении. Обязательно установите Graphics.CompositingMode = CompositingMode.SourceOver;. В результате получится что-то вроде скриншота слева.

Наконец, вам нужно переназначить цвета:

Для этого вам нужно настроить ColorMaps:

  • создайте два списка цветов, один из которых проходит через оттенки серого за 256 шагов, а другой с таким же количеством шагов проходит через цвета вашей тепловой карты. Обратите внимание, что списки должны содержать одинаковое количество элементов; однако градиенты могут иметь столько или мало в ColorBlend.Colors, как вам нравится.

Списки цветов можно создать, заполнив пиксель 256x1 Bitmap LinearGradientBrush, который использует те же два соответствующих ColorBlends, а затем используя GetPixel для извлечения цветов.

После выполнения SetRemapTable мы можем, наконец, нарисовать тепловую карту, и вуаля, правый скриншот довольно похож, даже без каких-либо настроек, чтобы максимально приблизиться к вашей тепловой карте.

Ваш код

Вот несколько замечаний о недостатках в вашем коде:

  • Вам нужно перейти от полностью прозрачного. Ваши цвета начинаются с альфа-канала 64, что далеко от «почти прозрачного». Наши глаза очень чувствительны на этом конце шкалы!

Вот градиент оттенков серого, который я использовал, с фоном в виде шахматной доски в стиле Photoshop, чтобы вы могли видеть прозрачность:

введите здесь описание изображения

  • Другая проблема с вашими цветами заключается в том, что они начинаются с синего; им действительно нужно начинать с белого!

  • Самая фундаментальная проблема — это смешивание цветов. Для «тепловой карты» (или «карты профиля» или «карты смещения») нам нужно суммировать значения, а не смешивать их. Для этого цветовые каналы бесполезны. Цвета круглые, и они, естественно, не поддаются списку возрастающих значений. Если мы используем только альфа-канал, мы можем простым способом ограничить карту «картой яркости», которую мы затем можем раскрасить как угодно.

Обратите внимание, что я предположил, что центральные точки должны быть максимальными. Если это не так, вам нужно уменьшить их масштаб до более низкой альфы, чтобы добавление их не переполняло.

Также обратите внимание, что для действительно важных приложений, таких как медицинская или научная визуализация, вы должны пройти весь путь до расчета значений, поэтому у вас есть полный контроль над отображением!

person TaW    schedule 23.05.2015