ColorPicker mit Wheel

    • VB.NET
    • .NET (FX) 4.0

    Es gibt 26 Antworten in diesem Thema. Der letzte Beitrag () ist von J.Herbrich.

      ColorPicker mit Wheel

      Hallo,

      Da ich mit dem Custom-Colordialog nicht zufrieden war, habe ich mir die Grundlage für einen eigenen geschrieben, ein ColorWheel. Das ColorWheel basiert auf dem HSV Farbraum:
      Spoiler anzeigen

      Der Winkel (in Grad) gibt den Hue-Wert an (0-360). Das Verhältnis der Strecke vom Kreismittelpunkt zu Farbpunkt in Hinblick auf den Radius gibt die Sättigung (Saturation an, 0-1). Value ist quasi die Abstufung mit Schwarz. Häufig wird die Value ebenfalls als Prozentzahl (0-1) dargestellt, ich wollte diese allerdings absolut bestimmbar haben.

      Grundlage für das ColorWheel ist die Klasse HSVColor, die die Konvertierung der beiden Farbräume ineinander ermöglicht (RGB<->HSV):
      HSVColor.vb

      VB.NET-Quellcode

      1. <TypeConverter(GetType(ExpandableObjectConverter))> _
      2. Public Class HSVColor
      4. Public Property Hue As Double
      6. Public Property Saturation As Double
      8. Public Property Value As Double
      10. Public Sub New(ByVal hue As Double, ByVal saturation As Double, ByVal value As Double)
      11. _Hue = hue
      12. _Saturation = saturation
      13. _Value = value
      14. End Sub
      16. Public Sub FromARGBColor(ByVal col As Color)
      17. Dim maximum = max({col.R, col.G, col.B})
      18. Dim minimum = min({col.R, col.G, col.B})
      19. If maximum = minimum OrElse col.R = col.B AndAlso col.R = col.G AndAlso col.G = col.B Then
      20. Hue = 0
      21. ElseIf maximum = col.R Then
      22. Hue = 60 * ((col.G - col.B) / (maximum - minimum))
      23. ElseIf maximum = col.G Then
      24. Hue = 60 * (2 + (col.B - col.R) / (maximum - minimum))
      25. ElseIf maximum = col.B Then
      26. Hue = 60 * (4 + (col.R - col.G) / (maximum - minimum))
      27. End If
      28. If Hue < 0 Then Hue = Hue + 360
      29. If maximum = 0 OrElse (col.R = 0 AndAlso col.G = 0 AndAlso col.B = 0) Then
      30. Saturation = 0
      31. Else
      32. Saturation = (maximum - minimum) / maximum
      33. End If
      34. Value = maximum
      35. End Sub
      36. Public Function min(ByVal arg() As Double) As Double
      37. Dim lowest As Double = 255
      38. For Each ar As Double In arg
      39. If ar < lowest Then
      40. lowest = ar
      41. End If
      42. Next
      43. Return lowest
      44. End Function
      45. Public Function max(ByVal arg() As Double) As Double
      46. Dim highest As Double = 0
      47. For Each ar As Double In arg
      48. If ar > highest Then
      49. highest = ar
      50. End If
      51. Next
      52. Return highest
      53. End Function
      54. Public Function ToColor() As Color
      55. Dim hi As Integer = Convert.ToInt32(Math.Floor(Hue / 60))
      56. Dim f As Double = Hue / 60 - hi
      57. Dim p As Integer = Convert.ToInt32(Value * (1 - Saturation))
      58. Dim q As Integer = Convert.ToInt32(Value * (1 - Saturation * f))
      59. Dim t As Integer = Convert.ToInt32(Value * (1 - Saturation * (1 - f)))
      60. Dim val As Integer = Convert.ToInt32(Value)
      61. Select Case hi
      62. Case 0
      63. Return Color.FromArgb(val, t, p)
      64. Case 1
      65. Return Color.FromArgb(q, val, p)
      66. Case 2
      67. Return Color.FromArgb(p, val, t)
      68. Case 3
      69. Return Color.FromArgb(p, q, val)
      70. Case 4
      71. Return Color.FromArgb(t, p, val)
      72. Case 5
      73. Return Color.FromArgb(val, p, q)
      74. Case 6
      75. Return Color.FromArgb(val, t, p)
      76. End Select
      77. End Function
      78. Public Overrides Function ToString() As String
      79. Return String.Format("HSVColor [H={0}, S={1}, V={2}]", {Hue, Saturation, Value})
      81. End Function
      83. End Class
      84. Public Class HSVEventArgs
      86. Inherits EventArgs
      87. Private _HSVColor As HSVColor
      88. Public ReadOnly Property HSVColor As HSVColor
      89. Get
      90. Return _HSVColor
      91. End Get
      92. End Property
      93. Public Sub New(col As HSVColor)
      94. _HSVColor = col
      95. End Sub
      96. End Class


      ColorPicker.vb

      VB.NET-Quellcode

      1. Imports System.Drawing
      2. Imports System.ComponentModel
      3. Imports System.Windows.Forms
      4. Imports System.Drawing.Drawing2D
      6. <DefaultEvent("ColorChanged")>
      7. <ToolboxBitmap(GetType(ColorDialog))>
      8. Public Class Colorpicker
      9. Inherits UserControl
      10. Protected Overrides ReadOnly Property CreateParams() As CreateParams
      11. Get
      12. Dim cp As CreateParams = MyBase.CreateParams
      13. cp.ExStyle = cp.ExStyle Or &H20
      14. Return cp
      15. End Get
      16. End Property
      18. Public Event ColorChanged As EventHandler(Of HSVEventArgs)
      20. Sub New()
      21. MyBase.SetStyle(ControlStyles.SupportsTransparentBackColor, True)
      22. MyBase.SetStyle(ControlStyles.OptimizedDoubleBuffer, True)
      23. End Sub
      24. 'das rectangle das den kreis beinhaltet
      25. Dim ellipserectangle As New Rectangle(2, 2, 200, 200)
      26. 'das rectangle das den valueregler beinhaltet
      27. Dim valuerectangle As New Rectangle(250, 2, 20, 200)
      28. 'Mittelpunkt des Wheels
      29. Dim middlepoint As PointF = New PointF(Convert.ToInt32(ellipserectangle.X + ellipserectangle.Width / 2), Convert.ToInt32(ellipserectangle.Y + ellipserectangle.Height / 2))
      30. 'Momentaner Cursor Standort auf den Reglern
      31. Dim ellipsept As PointF = middlepoint
      32. Dim rectanglept As New PointF()
      33. 'das Makierende Rectangle auf den Reglern
      34. Dim ellipsepointerrectangle As New Rectangle()
      35. Dim rectanglepointrectangle As New Rectangle()
      37. Private _hsvcolor As New HSVColor(0, 0, 255)
      38. Public Property HSVColor As HSVColor
      40. Get
      41. Return _hsvcolor
      42. End Get
      43. Set(value As HSVColor)
      45. _hsvcolor = value
      46. Me.Invalidate(New Rectangle(Convert.ToInt32(ellipsept.X - 3), Convert.ToInt32(ellipsept.Y - 3), 7, 7))
      47. If HSVColor.Saturation > 0 Then
      48. Dim angle As Double = value.Hue * (Math.PI / 180)
      49. Dim r As Double = ellipserectangle.Width / 2 * HSVColor.Saturation
      50. Dim xkoor As Double = Math.Cos(angle) * r + middlepoint.X
      51. Dim ykoor As Double = Math.Sin(angle) * r + middlepoint.Y
      52. ellipsept = New Point(Convert.ToInt32(xkoor), Convert.ToInt32(ykoor))
      53. Else
      54. ellipsept = middlepoint
      55. End If
      57. ellipsepointerrectangle = New Rectangle(Convert.ToInt32(ellipsept.X - 3), Convert.ToInt32(ellipsept.Y - 3), 6, 6)
      58. Me.Invalidate(New Rectangle(Convert.ToInt32(ellipsept.X - 3), Convert.ToInt32(ellipsept.Y - 3), 7, 7))
      60. Dim mouseheight As Integer = Convert.ToInt32(((-1 * HSVColor.Value + 255) / 255) * valuerectangle.Height + valuerectangle.Y)
      61. Me.Invalidate(New Rectangle(Convert.ToInt32(rectanglept.X - 3), Convert.ToInt32(rectanglept.Y - 3), 7, 7))
      62. rectanglept = New Point(Convert.ToInt32(valuerectangle.X + valuerectangle.Width / 2), mouseheight)
      63. rectanglepointrectangle = New Rectangle(Convert.ToInt32(rectanglept.X - 3), Convert.ToInt32(rectanglept.Y - 3), 6, 6)
      65. Me.Invalidate(valuerectangle)
      67. RaiseEvent ColorChanged(Me, New HSVEventArgs(Me._hsvcolor))
      69. End Set
      70. End Property
      72. Protected Overrides Sub OnPaint(e As PaintEventArgs)
      73. MyBase.OnPaint(e)
      74. With e.Graphics
      75. .SmoothingMode = Drawing2D.SmoothingMode.HighSpeed
      76. .CompositingQuality = CompositingQuality.HighQuality
      77. .DrawEllipse(Pens.Gray, ellipserectangle)
      78. 'Hier das eigentliche Wheel mit Farbe je nach Winkel
      79. Dim hsv As New HSVColor(0, 1, 255)
      81. Dim angle As Double
      82. Dim outherpoint As PointF
      83. For u = 0 To 360 Step 1
      84. hsv.Hue = u
      85. angle = Math.PI / 180 * u
      86. outherpoint = New PointF(Convert.ToSingle(Math.Cos(angle) * (ellipserectangle.Width / 2) + middlepoint.X), Convert.ToSingle(Math.Sin(angle) * (ellipserectangle.Width / 2) + middlepoint.Y))
      87. Using lbg As New LinearGradientBrush(middlepoint, outherpoint, Color.White, hsv.ToColor)
      88. Dim pt As New GraphicsPath
      89. pt.AddPie(ellipserectangle, u, 1.5)
      90. .FillPath(lbg, pt)
      91. End Using
      92. Next
      93. 'Schwarzen Punkt in der Mitte entfernen
      94. .FillRectangle(Brushes.White, New Rectangle(Convert.ToInt32(middlepoint.X - 1), Convert.ToInt32(middlepoint.Y - 1), 2, 2))
      95. 'Hier wird der Regler für Value gezeichnet
      96. hsv.Hue = HSVColor.Hue
      97. hsv.Saturation = HSVColor.Saturation
      98. Dim uppercolor = hsv.ToColor
      99. hsv.Value = 0
      100. Using lgb As New LinearGradientBrush(valuerectangle, uppercolor, hsv.ToColor, LinearGradientMode.Vertical)
      101. .FillRectangle(lgb, valuerectangle)
      102. End Using
      103. .DrawRectangle(Pens.Black, ellipsepointerrectangle)
      104. .DrawRectangle(Pens.Black, rectanglepointrectangle)
      105. End With
      106. End Sub
      107. Private _Color As Color
      108. Public Property [Color] As Color
      109. Get
      110. _Color = HSVColor.ToColor
      111. Return _Color
      112. End Get
      113. Set(value As Color)
      114. _Color = value
      115. Dim hsv As New HSVColor(0, 0, 0)
      116. hsv.FromARGBColor(value)
      117. HSVColor = New HSVColor(hsv.Hue, hsv.Saturation, hsv.Value)
      118. End Set
      119. End Property
      121. Private Sub Colorpicker_MouseClick(sender As Object, e As MouseEventArgs) Handles Me.MouseClick
      122. Dim distance As Double = Math.Sqrt(Math.Pow(middlepoint.X - e.X, 2) + Math.Pow(middlepoint.Y - e.Y, 2))
      123. Dim radius As Double = ellipserectangle.Width / 2
      124. If radius > distance Then
      125. Dim Saturation As Double = distance / radius
      127. Dim angle = Math.Atan2(e.Y - middlepoint.Y, e.X - middlepoint.X) / Math.PI * 180
      128. If angle <= 0 Then angle = angle + 2 * 180
      129. _hsvcolor.Saturation = Saturation
      130. _hsvcolor.Hue = angle
      131. _hsvcolor.Value = 255
      132. HSVColor = New HSVColor(angle, Saturation, 255)
      134. ElseIf valuerectangle.Contains(e.Location) Then
      135. Dim val As Double = 255 - 255 * ((e.Y - valuerectangle.Y) / valuerectangle.Height)
      136. HSVColor = New HSVColor(_hsvcolor.Hue, _hsvcolor.Saturation, val)
      138. End If
      139. End Sub
      141. End Class

      Ich wünsche euch viel Spaß damit :) .
      Dateien

      8-) faxe1008 8-)

      Dieser Beitrag wurde bereits 6 mal editiert, zuletzt von „faxe1008“ ()

      @faxe1008 Option Strict On.
      und
      (-1 * x + y) ==> (y - x)
      und das Default-Rect würde ich so groß machen, dass der ganze Farbkreis dargestellt wird.
      ---

      VB.NET-Quellcode

      1. Public Function max(ByVal arg() As Double) As Double
      Initialisiere so:

      VB.NET-Quellcode

      1. Dim highest As Double = arg(0)
      min analog, auch wenn das sicher funktioniert.
      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!

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „RodFromGermany“ ()

      hmm - kein ColorPicker.ColorChanged-Event? Wie soll man das denn testen?

      Bemerkenswert auch zeile#143

      faxe1008 schrieb:

      VB.NET-Quellcode

      1. CurrentHue = CurrentHue


      Und in diesem Farbraum gibts keine abgedunkelten Farben?
      Ah ja - das Problem mit jedem Colorpicker-ansatz: ein Farbraum ist 3-dimensional.
      Und bei deim Picker fehlt iwie die Möglichkeit, darunter liegende Farbscheiben sichtbar zu machen.

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

      Ich werde das projekt nochmal überarbeiten und dann neu hochladen, bin es einfach noch von Java und C# gewöhnt dass der Compiler immer meckert, wenn was net passt.

      Jap dadurch spar ich mir an der Stelle Berechnungen, die ich dann einfach in der anderen Property rechnen lasse, das ist über eine Metode schöner, das stimmt.

      8-) faxe1008 8-)

      faxe1008 schrieb:

      Ich wünsche euch viel Spaß damit .


      Jo - dankeschön.
      Aber da musst Du noch mal ran.
      Bevor ich auch überhaupt den ColorChangeEvent suche, hätte ich gern eine bedienbare Oberfläche.
      Die Auswahlbereiche machen keinen Spaß und hakeln und die rechte Bar zappelt/flickert wie verrückt beim Verschieben der Auswahl.

      Aber vielen Dank fürs Teilen und zukünftige Verbesserungen!

      Hallo,
      bisher kannte ich das HSV-Modell gar nicht... aber ich finde es äußerst spannend...

      kurze Frage:
      Der Winkel (in Grad) gibt den Hue-Wert an (0-360).


      Kennst du die Hue Lampen von Philips? Falls ja, hat der Name der Hue Lampen (eher Leuchtmittel) was mit diesem System zu tun?

      Das weiß ich nicht, tut mir Leid.

      @all: Habe gestern den Code nochmal verschönert, mittlerweile laggt es auch nicht mehr so tierisch. Neue Version ist im Startpost oben :) . Jetzt ist es hoffentlich angenehm

      8-) faxe1008 8-)

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

      faxe1008 schrieb:

      Jetzt ist es hoffentlich angenehm
      Ich nöl mal noch ne Runde. ;)
      Gib der Klasse HSVColor eine überladene ToString()-Funktion,
      Dein Event entspricht nicht der .NET-Spezifikation.
      Mach Dir eine eigene EventArgs-Klasse, in die Du Deine HSVColor reinpacken kannst, deren Instanz übergib dann mit dem Event:

      VB.NET-Quellcode

      1. Public Class HsvEventArgs
      2. Inherits EventArgs
      4. Private _MyColor As HSVColor
      5. Public ReadOnly Property MyColor As HSVColor
      6. Get
      7. Return _MyColor
      8. End Get
      9. End Property
      11. Public Sub New(col As HSVColor)
      12. _MyColor = col
      13. End Sub
      14. End Class

      VB.NET-Quellcode

      1. Public Event ColorChanged As EventHandler(Of HsvEventArgs)

      VB.NET-Quellcode

      1. Dim mouseheight As Integer = Convert.ToInt32(((255 - HSVColor.Value) / 255) * valuerectangle.Height + valuerectangle.Y)
      2. ' ...
      3. RaiseEvent ColorChanged(Me, New HsvEventArgs(Me._hsvcolor))

      VB.NET-Quellcode

      1. Private Sub ColorPicker1_ColorChanged(sender As Object, e As HsvEventArgs) Handles ColorPicker1.ColorChanged
      2. Me.Label1.Text = e.MyColor.ToString
      3. End Sub

      VB.NET-Quellcode

      1. Public Overrides Function ToString() As String
      2. ' z.B.
      3. Return Me.ToColor().ToString()
      4. End Function

      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!

      Mir ist gerade ein Bug aufgefallen, den ich mir selbst überhaupt nicht erklären kann. Wenn ich die Color-Property im Propertygrid ändere und dafür eine Farbe rechts, also eher ein violett, verwende bekomme ich die Fehlermeldung "arithmetischer Überlauf". Im Folgenden das Bild zur Fehlermeldung in der HSVColor-Klasse:



      Der Fehler rühre daher, dass ich durch 0 teile, allerdings ist 255-0 ungleich 0 ... so weit ich weiß :D

      Weiß jemand von euch was das Problem daran sein könnte?

      8-) faxe1008 8-)

      faxe1008 schrieb:

      Fehlermeldung
      Algorithmisch hast Du hier die seltene Chance, den kompletten Wertebereich Deiner Daten einzeln abtesten zu können:

      VB.NET-Quellcode

      1. Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
      2. For a = 0 To 255
      3. For r = 0 To 255
      4. For g = 0 To 255
      5. For b = 0 To 255
      6. Dim col = Color.FromArgb(a, r, g, b)
      7. ' Deine Klasse testen
      8. Next
      9. Next
      10. Next
      11. Next
      12. End Sub
      Wenn Du die Schleifen mit Step 4 oder Step 8 durchlaufen lässt, solltest Du relativ schnell an die interessante Fehlerstelle kommen.
      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!

      Ich habe ihn mal kompiliert und in eine Test Anwendung eingebaut, nun sieht zwar ganz nett aus aber nicht so cool wie das Bild in der GRaphic. In ersten Post. Kann man den auch noch Cooden??

      Und warum nutzt du .net 4.5 wen 4.0 schon ausreichend ist, lieber immer die niedrigste Version von Framework benutzen aus gründen der Kompatiblität.

      LG, Herbrich

      J.Herbrich schrieb:

      Und warum nutzt du .net 4.5 wen 4.0 schon ausreichend ist, lieber immer die niedrigste Version von Framework benutzen aus gründen der Kompatiblität.

      Das ist nicht wahr, da das FW nicht 100% abwärtskompatibel ist. FW4.0 sollte aber drin sein.
      »There's no need to "teach" atheism. It's the natural result of education without indoctrination.« — Ricky Gervais

      J.Herbrich schrieb:

      Ich habe ihn mal kompiliert und in eine Test Anwendung eingebaut, nun sieht zwar ganz nett aus aber nicht so cool wie das Bild in der GRaphic. In ersten Post. Kann man den auch noch Cooden??


      Die 3D-Variante des Wheels wäre extrem Benutzer unfreundlich, da die Auswahl nur sehr ungenau wäre und das Wheel riesengroß sein müsste. Programmierbar wäre sie vermutlich schon

      J.Herbrich schrieb:

      Und warum nutzt du .net 4.5 wen 4.0 schon ausreichend ist, lieber immer die niedrigste Version von Framework benutzen aus gründen der Kompatiblität.


      Das sind meine Standarteinstellungen was das Kompilieren angeht - wenn irgendjemand wirklich Interesse am Control hat kann er sich die Projektdatei ansehen und einfach die Kompilierungseinstellungen ändern ;)

      8-) faxe1008 8-)

      faxe1008 schrieb:

      Die 3D-Variante des Wheels
      Mach V auf das Wheel, H und S über Mouse(x, y).
      Wenn das ganz geschickt programmmiert wird, kannst Du dynamisch die Kegelachse mit dem Mausrad koppeln.
      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!

      Ich würde gerne mal die 3D variante haben. Ich selber habe es unter 4.0 Compiliert, und ja die Standart einstellungen merkt man am Icon im Debug ordner, das zu ziemlich den veralteten vb6 design endspricht was ms wohl für VS2012 wieder hervorgekramt hat.

      LG, Herbrich

      Jennifer sagt: Standard*
      "Life isn't about winning the race. Life is about finishing the race and how many people we can help finish the race." ~Marc Mero

      Nun bin ich also auch soweit: Keine VB-Fragen per PM! Es gibt hier ein Forum, verdammt!

    Facebook
    Telefonspende