Farbverlauf von mehreren Farben ins Transparente

  • C#
  • .NET (FX) 1.0–2.0

Es gibt 41 Antworten in diesem Thema. Der letzte Beitrag () ist von ErfinderDesRades.

    Farbverlauf von mehreren Farben ins Transparente

    Guten Morgen,

    ich habe vor, einen Farbverlauf mehrerer Farben zu zeichnen.
    Grundsätzlich nicht unbedingt schwer:

    C#-Quellcode

    1. LinearGradientBrush br = new LinearGradientBrush( this.ClientRectangle, Color.Black, Color.Black, 0, false );
    2. ColorBlend cb = new ColorBlend();
    3. cb.Positions = new[] { 0, 1 / 6f, 2 / 6f, 3 / 6f, 4 / 6f, 5 / 6f, 1 };
    4. cb.Colors = new[] { Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Blue, Color.Indigo, Color.Violet };
    5. br.InterpolationColors = cb;
    6. //br.RotateTransform( 45 );
    7. e.Graphics.FillRectangle( br, this.ClientRectangle );

    Das Ergebnis:



    Allerdings möchte ich, dass es nach oben hin transparent wird, woran ich momentan scheitere.
    Ein einfarbiger Verlauf ins Transparente geht auch noch:



    Was ich eigentlich möchte:



    Ist soetwas mit GDI möglich?
    Und wenn ja, wie?

    Danke für Eure Ansätze...

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „TRiViUM“ ()

    Ich glaube das es nicht direkt möglich ist. Weil der Farbverlauf auf einer Achse ist, auf deinem Bild von Links nach Rechts oder anders rum, man bräuchte also eine weitere Dimension. Was man aber machen kann, render in ein Image, dann mit LockBits Zeilenweise die Transparanz reinmachen. Danach das Image rendern.

    Wenn der Farbverlauf 100% horizontal oder vertical ist geht es einfach, sobald andere Winkel ins Spiel kommen, wird es allerdings ein wenig aufwendiger. Dann musst du wohl Pixel für Pixel rechnen um eine "Linie" zu haben, wo du die Transparenz anpasst.

    @TRiViUM Du kannst einfach ein Farb-Array berechnen, indem Du die x-Achse aus dem HSV-Farbraum holst und der y-Achse die Transparenz-Werte zuweist:
    Der HSV-Farbraum
    Falls Du diesen Code kopierst, achte auf die C&P-Bremse.
    Jede einzelne Zeile Deines Programms, die Du nicht explizit getestet hast, ist falsch :!:
    Ein guter .NET-Snippetkonverter (der ist verfügbar).
    Programmierfragen über PN / Konversation werden ignoriert!

    TRiViUM schrieb:

    Da ich mich nicht mit HSV auskenne
    Du bräuchtest dann nur die H-Komponente, 2. Spoiler in meinem Link.
    Du gehst mit nem H rein und bekommst die Color.

    Falls Du diesen Code kopierst, achte auf die C&P-Bremse.
    Jede einzelne Zeile Deines Programms, die Du nicht explizit getestet hast, ist falsch :!:
    Ein guter .NET-Snippetkonverter (der ist verfügbar).
    Programmierfragen über PN / Konversation werden ignoriert!

    Solange nur die Farben wie oben im Code genutzt werden schon, aber wenn z.B. Braun dargestellt werden soll, kommt man um Sättigung und Hellwert nicht drumrum.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Takafusa“ ()

    @Takafusa Stimmt, daran hatte ich noch gar nicht gedacht.
    Dieser Fall kann durchaus eintreten...

    Also hier mal mein Ergebnis, mit dem ich auch ganz zu frieden bin:


    Mein Vorhaben kurz erklärt:
    Ich möchte, wie bei dem AmbiLight von Phillips eine PictureBox platzieren, welche den Bildschirm darstellt.
    Drüber, drunter, links und rechts daneben befinden sich die von mir gezeichneten Bilder.

    Nun hab ich ein Bild geladen und festgestellt, dass der Verlauf zumindest optisch nicht korrekt positioniert wird:


    Da werden allerdings noch keine Positionen berechnet, die 3 Farben für den Verlauf wurden händisch hinzugefügt...

    Gibts eine Erklärung, weshalb das grün nicht mittig ist?

    Mein Code:
    Spoiler anzeigen

    C#-Quellcode

    1. using System.Drawing;
    2. using System.Windows.Forms;
    3. using System.Collections.ObjectModel;
    4. using System.ComponentModel;
    5. using AmbiFrame.Core;
    6. using System.Drawing.Drawing2D;
    8. namespace AmbiFrame.Ui.Controls
    9. {
    10. class AmbiFrameControl : Control
    11. {
    13. #region constructor
    14. public AmbiFrameControl()
    15. {
    17. SetStyle( ControlStyles.SupportsTransparentBackColor |
    18. ControlStyles.OptimizedDoubleBuffer |
    19. ControlStyles.UserPaint |
    20. ControlStyles.AllPaintingInWmPaint
    21. , true );
    23. BackColor = Color.Transparent;
    25. Size = new Size( 150, 50 );
    27. gradientColors = new ObservableCollection<Color>();
    28. gradientColors.CollectionChanged += GradientColors_CollectionChanged;
    30. gradientOrientation = Orientation.Horizontal;
    31. transparencySide = TransparencySides.None;
    33. //gradientColors.Add( Color.Red );
    34. //gradientColors.Add( Color.Orange );
    35. //gradientColors.Add( Color.Yellow );
    37. }
    38. #endregion
    40. #region enums
    42. public enum TransparencySides
    43. {
    44. None,
    45. Top,
    46. Bottom,
    47. Left,
    48. Right
    49. }
    51. #endregion
    53. #region properties
    55. private Orientation gradientOrientation;
    56. public Orientation GradientOrientation
    57. {
    58. get { return gradientOrientation; }
    59. set
    60. {
    61. gradientOrientation = value;
    62. Invalidate();
    63. }
    64. }
    66. private ObservableCollection<Color> gradientColors;
    67. [DesignerSerializationVisibility( DesignerSerializationVisibility.Content )]
    68. public ObservableCollection<Color> GradientColors
    69. {
    70. get { return gradientColors; }
    71. }
    73. private TransparencySides transparencySide;
    74. public TransparencySides TransparencySide
    75. {
    76. get { return transparencySide; }
    77. set
    78. {
    79. transparencySide = value;
    80. Invalidate();
    81. }
    82. }
    84. #endregion
    86. #region functions
    88. /// <summary>
    89. /// Maps a value to another range
    90. /// </summary>
    91. /// <param name="value">The value which be mapped.</param>
    92. /// <param name="fromSource">The minimum value of the source value.</param>
    93. /// <param name="toSource">The maximum value of the source value.</param>
    94. /// <param name="fromTarget">The minimum value of the mapped target value.</param>
    95. /// <param name="toTarget">The maximum value of the mapped target value.</param>
    96. /// <returns></returns>
    97. private float Map(float value, float fromSource, float toSource, float fromTarget, float toTarget)
    98. {
    99. return ( value - fromSource ) / ( toSource - fromSource ) * ( toTarget - fromTarget ) + fromTarget;
    100. }
    102. #endregion
    104. #region callbacks
    106. protected override void OnPaint(PaintEventArgs e)
    107. {
    109. base.OnPaint( e );
    110. Rectangle rect = new Rectangle( 0, 0, Width, Height );
    111. Bitmap bmp = new Bitmap( rect.Width, rect.Height, System.Drawing.Imaging.PixelFormat.Format32bppArgb );
    113. if (gradientColors.Count >= 2 && gradientColors[gradientColors.Count - 1] != Color.Empty)
    114. {
    116. #region gradient
    118. using (Graphics g = Graphics.FromImage( bmp ))
    119. {
    120. g.Clear( Color.Transparent );
    122. int angle = gradientOrientation == Orientation.Vertical ? 90 : 0;
    123. LinearGradientBrush br = new LinearGradientBrush( rect, Color.Transparent, Color.Transparent, angle, false );
    124. br.WrapMode = WrapMode.Tile;
    125. ColorBlend cb = new ColorBlend();
    126. float[] positions = new float[gradientColors.Count];
    127. Color[] colors = new Color[gradientColors.Count];
    129. for (int i = 0; i < gradientColors.Count; i++)
    130. {
    131. colors[i] = gradientColors[i];
    132. if (i == 0) positions[i] = 0;
    133. else if (i < gradientColors.Count - 1) positions[i] = i / (float)positions.Length;
    134. else if (i == gradientColors.Count - 1) positions[i] = 1;
    135. }
    137. cb.Positions = positions;
    138. cb.Colors = colors;
    139. br.InterpolationColors = cb;
    141. g.FillRectangle( br, rect );
    142. }
    144. #endregion
    146. #region transparency
    148. LockBitmap lockedBmp = new LockBitmap( bmp ); //https://www.codeproject.com/Tips/240428/Work-with-Bitmaps-Faster-in-Csharp-3
    149. lockedBmp.LockBits();
    150. if ( transparencySide == TransparencySides.Top )
    151. {
    152. int start = lockedBmp.Height -1;
    153. for (int x = 0; x < lockedBmp.Width; x++)
    154. {
    155. for (int y = start; y >= 0; y--)
    156. {
    157. byte currentTransparency = (byte)Map( y, start, 0, 255, 0 );
    158. Color pixel = lockedBmp.GetPixel( x, y );
    159. pixel = Color.FromArgb( currentTransparency, pixel.R, pixel.G, pixel.B );
    160. lockedBmp.SetPixel( x, y, pixel );
    161. }
    162. }
    163. }
    164. else if ( transparencySide == TransparencySides.Bottom )
    165. {
    166. int start = 0;
    167. for (int x = 0; x < lockedBmp.Width; x++)
    168. {
    169. for (int y = start; y < lockedBmp.Height; y++)
    170. {
    171. byte currentTransparency = (byte)Map( y, start, lockedBmp.Height, 255, 0 );
    172. Color pixel = lockedBmp.GetPixel( x, y );
    173. pixel = Color.FromArgb( currentTransparency, pixel.R, pixel.G, pixel.B );
    174. lockedBmp.SetPixel( x, y, pixel );
    175. }
    176. }
    177. }
    178. else if (transparencySide == TransparencySides.Left)
    179. {
    180. int start = lockedBmp.Width / 2;
    181. for (int x = start; x >= 0; x--)
    182. {
    183. for (int y = 0; y < lockedBmp.Height; y++)
    184. {
    185. byte currentTransparency = (byte)Map( x, 0, start, 0, 255 );
    186. Color pixel = lockedBmp.GetPixel( x, y );
    187. pixel = Color.FromArgb( currentTransparency, pixel.R, pixel.G, pixel.B );
    188. lockedBmp.SetPixel( x, y, pixel );
    189. }
    190. }
    191. }
    192. else if ( transparencySide == TransparencySides.Right)
    193. {
    194. int start = lockedBmp.Width / 2;
    195. for (int x = start; x < lockedBmp.Width; x++)
    196. {
    197. for (int y = 0; y < lockedBmp.Height; y++)
    198. {
    199. byte currentTransparency = (byte)Map( x, start, lockedBmp.Width, 255, 0 );
    200. Color pixel = lockedBmp.GetPixel( x, y );
    201. pixel = Color.FromArgb( currentTransparency, pixel.R, pixel.G, pixel.B );
    202. lockedBmp.SetPixel( x, y, pixel );
    203. }
    204. }
    205. }
    206. lockedBmp.UnlockBits();
    207. #endregion
    209. #region draw image
    211. e.Graphics.DrawImageUnscaled( bmp, rect );
    213. #endregion
    215. }
    217. }
    219. private void GradientColors_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    220. {
    221. if (gradientColors.Count >= 2 && gradientColors[gradientColors.Count - 1] != Color.Empty)
    222. Invalidate();
    223. }
    225. #endregion
    227. }
    228. }

    @TRiViUM Wie genau wird denn dieser Farbverlauf generiert?
    Falls Du diesen Code kopierst, achte auf die C&P-Bremse.
    Jede einzelne Zeile Deines Programms, die Du nicht explizit getestet hast, ist falsch :!:
    Ein guter .NET-Snippetkonverter (der ist verfügbar).
    Programmierfragen über PN / Konversation werden ignoriert!

    @RodFromGermany Folgendermaßen:

    C#-Quellcode

    1. ​ #region gradient
    3. using (Graphics g = Graphics.FromImage( bmp ))
    4. {
    5. g.Clear( Color.Transparent );
    7. int angle = gradientOrientation == Orientation.Vertical ? 90 : 0;
    8. LinearGradientBrush br = new LinearGradientBrush( rect, Color.Transparent, Color.Transparent, angle, false );
    9. br.WrapMode = WrapMode.Tile;
    10. ColorBlend cb = new ColorBlend();
    11. float[] positions = new float[gradientColors.Count];
    12. Color[] colors = new Color[gradientColors.Count];
    14. for (int i = 0; i < gradientColors.Count; i++)
    15. {
    16. colors[i] = gradientColors[i];
    17. if (i == 0) positions[i] = 0;
    18. else if (i < gradientColors.Count - 1) positions[i] = i / (float)positions.Length;
    19. else if (i == gradientColors.Count - 1) positions[i] = 1;
    20. }
    22. cb.Positions = positions;
    23. cb.Colors = colors;
    24. br.InterpolationColors = cb;
    26. g.FillRectangle( br, rect );
    27. }
    29. #endregion

    @TRiViUM Was steht denn in der Liste gradientColors? Das scheint mir der "Übeltäter" zu sein.
    Falls Du diesen Code kopierst, achte auf die C&P-Bremse.
    Jede einzelne Zeile Deines Programms, die Du nicht explizit getestet hast, ist falsch :!:
    Ein guter .NET-Snippetkonverter (der ist verfügbar).
    Programmierfragen über PN / Konversation werden ignoriert!

    @RodFromGermany Da stehen die 3 von mir festgelegten Farben drin:


    Bei gerader Anzahl an Farben scheinen die Positionen zu stimmen.
    Ist der "Übeltäter" evtl. doch die Berechnung?

    C#-Quellcode

    1. ​ for (int i = 0; i < gradientColors.Count; i++)
    2. {
    3. colors[i] = gradientColors[i];
    4. if (i == 0) positions[i] = 0;
    5. else if (i < gradientColors.Count - 1) positions[i] = i / (float)positions.Length;
    6. else if (i == gradientColors.Count - 1) positions[i] = 1;
    7. }

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „TRiViUM“ ()

    @TRiViUM Probier ma:

    C#-Quellcode

    1. else if (i < gradientColors.Count - 1) positions[i] = i / (float)(positions.Length - 1);
    Falls Du diesen Code kopierst, achte auf die C&P-Bremse.
    Jede einzelne Zeile Deines Programms, die Du nicht explizit getestet hast, ist falsch :!:
    Ein guter .NET-Snippetkonverter (der ist verfügbar).
    Programmierfragen über PN / Konversation werden ignoriert!

    kannst du vlt. ein lauffähiges uploaden?
    so vom draufgucken denke ich, man könnte noch ne Menge machen, aber ohne was lauffähiges natürlich nicht.

    zB sone Vereinfachung:

    C#-Quellcode

    1. for (int i = 0; i < gradientColors.Count; i++)
    2. {
    3. colors[i] = gradientColors[i];
    4. positions[i] = i / (float)(positions.Length - 1);
    5. }
    Aber wie gesagt: kanns nicht testen - und gibt noch mehr, genauer hinzugucken.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „ErfinderDesRades“ ()

    @ErfinderDesRades Hätte es eigentlich auch schon sein sollen.. :/
    Jetzt ist es aber lauffähig ^^


    ErfinderDesRades schrieb:

    zB sone Vereinfachung

    Stimmt, ist das selbe. Frage mich, warum ich meist den komplizierteren Weg nehme :whistling:
    Hab ich optimiert :thumbup:
    Dateien

Facebook
Telefonspende