gradienti stile Heatmap in .NET

Question

Sto cercando di creare una mappa di calore con pendenze che sembrano simili a questo:

Questa immagine mostra tre punti e le pendenze si fondono bene insieme.

Qui è quello che sto facendo attualmente nella mia funzione di disegno:

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); 
    } 
} 

che crea un'immagine in questo modo per due punti di sovrapposizione:

Non si fondono. Come posso creare un effetto sfumatura sfumatura in un disegno .NET?

Answer 1

Sì, questo è possibile con < 100 righe di codice + disegno .NET e GDI ..:

avete bisogno di cambiare due cose nel codice:

• È necessario sfumare le aree punto su trasparente, quindi è possibile aggiungere loro
• È necessario utilizzare un gradiente in scala di grigi in modo da non creare sbagliate, colori forse fangosi
• Di conseguenza è necessario remap i colori.

Ecco i dettagli:

Hai bisogno di due gradienti:

• Quella scala di grigi va dal nero (255,0,0,0) a nero trasparente (0, 0,0,0). Puoi influenzare la levigatezza rendendo la dissolvenza trasparente più veloce o più lenta.

• Il gradiente di colore enumera i colori della mappa di calore.

Successivamente è necessario uno o più bitmap con cerchi grigi. Se le aree punto sono tutte uguali, lo si farà ..

Ora è possibile disegnare i bitmap sulla bitmap di destinazione. Assicurati di impostare il Graphics.CompositingMode = CompositingMode.SourceOver; Ciò si traduce in qualcosa di simile allo screenshot a sinistra.

Infine, è necessario Remap i colori:

Per questo è necessario per impostare le mappe di colore:

• creare due liste di colori, uno andando oltre i colori in scala di grigi a 256 punti, uno con il lo stesso numero di passaggi sui colori della mappa termica.Si noti che gli elenchi devono avere lo stesso numero di elementi; tuttavia, i gradienti possono avere ognuno o pochi nello ColorBlend.Colors come preferisci.

Le liste dei colori possono essere creati compilando un pixel 256x1 Bitmap con un LinearGradientBrush che utilizza la stessa due rispettive ColorBlends e quindi utilizzando GetPixel a tirare fuori i colori ..

Dopo aver fatto una SetRemapTable possiamo finalmente Disegna la mappa termica, e voilà, lo screenshot giusto è piuttosto simile, anche senza alcun ritocco per avvicinarsi alla tua heatmap.

Il codice

Ecco alcune osservazioni sui difetti nel codice:

• Hai bisogno di fade-in da completamente trasparente. I tuoi colori iniziano con un alfa di 64, che è lontano da da "quasi trasparente". I nostri occhi sono molto sensibili su questa estremità della scala!

Ecco il gradiente in scala di grigi che ho usato, con una scacchiera di sfondo photoshop in stile, in modo da vedere la trasparenza:

• Un altro problema con i tuoi colori è che cominciano con il blu; hanno davvero bisogno di iniziare con il bianco!

• Il problema fondamentale è la miscelazione dei colori. Per una 'mappa di calore', (o una 'mappa profilo' o una 'mappa di spostamento') abbiamo bisogno di sommare i valori, non mescolarli. Per questo i canali di colore sono inutili. I colori sono circolari e non si prestano naturalmente a un elenco di valori ascendenti. Se usiamo solo il canale alfa, possiamo in modo semplice limitare la mappa per una 'mappa luminosita', che possiamo poi il colore in qualsiasi modo ci piace ..

Si noti che ho assunto che la i punti devono essere massimi. Se non lo sono, è necessario scalare loro fino a un alfa inferiore ..

noti inoltre, che per le applicazioni veramente importanti, come medica o scientifica di imaging, si dovrebbe andare fino in fondo per il calcolo i valori, in modo da avere il pieno controllo della mappatura!