Recent

Author Topic: Round Gradient Coloured Bars: Streak Line in Middle  (Read 269 times)

Boleeman

  • Hero Member
  • *****
  • Posts: 711
Round Gradient Coloured Bars: Streak Line in Middle
« on: November 10, 2024, 04:14:05 am »
Hi All.

I have been trying to make Round Gradient Coloured Bars but there seems to be a 3-pixel wide Streak Line in the middle of each bar.

Was after a Totally Rounded Bar Effect

There was a ColorFade program in VB6 that made perfectly rendered gradient bars, but using Lazarus the middle colour of each bar seems to have a thickish 3-pixel wide line.

I also attached below a png showing the vertical and diagonal output gradient lines for the Vb6 version.
Perhaps the middle section needs to be blurred using a TBgrabmp  to make a totally round gradient surface ?

Also had problems implementing the diagonal directions. Not sure if anyone can possibly help out ?

Below is the Vb6 code that I was referencing:
Code: Pascal  [Select][+][-]
  1. Option Explicit
  2.  
  3. Private mvarFadeStartColor As Long              'Start Color
  4. Private mvarFadeEndColor As Long                'End Color
  5.  
  6. Private fcsr As Long                            'Red Start
  7. Private fcsg As Long                            'Green Start
  8. Private fcsb As Long                            'Blue Start
  9.  
  10. Private fcer As Long                            'Red End
  11. Private fceg As Long                            'Green End
  12. Private fceb As Long                            'Blue End
  13.  
  14. Enum ColorFadeGradientConstants
  15.     HorizontalGradient = 0
  16.     VerticalGradient = 1
  17.     DiagUpperLeftGradient = 2
  18.     DiagUpperRightGradient = 3
  19.     DiagLowerLeftGradient = 4
  20.     DiagLowerRightGradient = 5
  21. End Enum
  22.  
  23. Public Function GetFadeColor(Optional fcFadePercent As Long = 50) As Long
  24.     GetFadeColor = DetermineFade(fcsr, fcsg, fcsb, fcer, fceg, fceb, fcFadePercent)
  25. End Function
  26.  
  27. Public Function GetFadeColor2(Optional fcFadePercent As Long = 50, Optional fcSegments As Long = 2) As Long
  28.     Dim fcs As Long, fcp As Long, s As Single, p As Single
  29.     Dim np As Long
  30.  
  31.     fcs = fcSegments                'Maybe I should of ByVal'd, but who cares?
  32.     If fcs > 100 Then fcs = 100     'More than 12 segments looks like crap
  33.    If fcs < 1 Then fcs = 1         '0 segments makes no fade here
  34.  
  35.     fcp = fcFadePercent             'Another byval waiting to happen
  36.    If fcp > 100 Then fcp = 100     'More than 100% could cause an error
  37.     If fcp < 1 Then fcp = 1         'Same with less than 1% for the simple
  38.  
  39.    s = CSng(100 / fcs)             'Get a fraction for percentage perposes.
  40.     p = CSng(Int(fcp / s) + 1)      'Determine the segment based on the percent
  41.  
  42.    If p = 1 Then
  43.         np = fcp * fcs
  44.    Else
  45.        np = (fcp - ((p - 1) * s)) * fcs
  46.    End If
  47.    
  48.    If (p / 2) = Int(p / 2) Then
  49.            GetFadeColor2 = DetermineFade(fcer, fceg, fceb, fcsr, fcsg, fcsb, np)                 ' Even Segment - End-Start
  50.     Else
  51.             GetFadeColor2 = DetermineFade(fcsr, fcsg, fcsb, fcer, fceg, fceb, np)                 ' Odd Segment - Start-End
  52.    End If
  53. End Function
  54.  
  55. Public Sub PaintObj(Obj As Object, Gradient As ColorFadeGradientConstants)
  56.    If (TypeOf Obj Is Form) Or (TypeOf Obj Is PictureBox) Then
  57.         PaintObject Obj, Gradient                       ' Only support forms and picture boxes
  58.     End If
  59. End Sub
  60.  
  61. Public Sub PaintObj2(Obj As Object, Gradient As ColorFadeGradientConstants, Optional CycleCount As Long = 1)
  62.     If (TypeOf Obj Is Form) Or (TypeOf Obj Is PictureBox) Then
  63.         PaintObject2 Obj, Gradient, CycleCount          ' Only support forms and picture boxes
  64.    End If  
  65. End Sub
  66.  
  67. Private Sub PaintObject(frm As Object, Gradient As ColorFadeGradientConstants)
  68.     Dim ScreenX As Long                                 'Screen width dimension
  69.     Dim ScreenY As Long                                 'Screen height dimension
  70.     Dim h As Long                                       'Object Height
  71.     Dim w As Long                                       'Object Width
  72.     Dim y As Long                                       'Current Y-Position
  73.     Dim x As Long                                       'Current X-Position
  74.     Dim a As Long                                       'Current Angle Offset Multiplier
  75.     Dim ax As Long                                      'Current Angle Offset
  76.     Dim x1 As Long, x2 As Long                          'Left and Right of the object
  77.     Dim y1 As Long, y2 As Long                          'Top and Bottom of the object
  78.     Dim i As Long                                       'Loop Counter
  79.     Dim j As Long                                       'Loop Counter
  80.     Dim c As Long                                       'Cycles or other value
  81.    
  82.     ScreenX = Screen.TwipsPerPixelX                     'Determine the horizontal screen dimension
  83.     ScreenY = Screen.TwipsPerPixelY                     'Determine the vertical screen dimension
  84.  
  85.     x1 = 0: x2 = (frm.Width / ScreenX)                  'Get the pixel width of the object
  86.     y1 = 0: y2 = (frm.Height / ScreenY)                 'Get the pixel height of the object
  87.     ax = (y2 / 2)
  88.  
  89.     Select Case Gradient
  90.         Case HorizontalGradient
  91.             For i = y1 To y2
  92.                 y = (i / y2) * 100
  93.                 frm.Line (x1 * ScreenX, i * ScreenY)-(x2 * ScreenX, i * ScreenY), Me.GetFadeColor(y)
  94.             Next i
  95.            
  96.         Case VerticalGradient
  97.             For i = x1 To x2
  98.                 x = (i / x2) * 100
  99.                 frm.Line (i * ScreenX, y1 * ScreenY)-(i * ScreenX, y2 * ScreenY), Me.GetFadeColor(x)
  100.             Next i
  101.            
  102.         Case DiagLowerLeftGradient
  103.             For i = x1 - ax To x2 + ax
  104.                 x = (i / x2) * 100
  105.                 frm.Line ((i - ax) * ScreenX, y1 * ScreenY)-((i + ax) * ScreenX, y2 * ScreenY), Me.GetFadeColor(x)
  106.             Next i
  107.        
  108.         Case DiagUpperLeftGradient
  109.             For i = x2 + ax To x1 - ax Step -1
  110.                 x = (i / x2) * 100
  111.                 frm.Line ((i + ax) * ScreenX, y1 * ScreenY)-((i - ax) * ScreenX, y2 * ScreenY), Me.GetFadeColor(x)
  112.             Next i
  113.            
  114.         Case DiagUpperRightGradient
  115.             For i = x1 - ax To x2 + ax
  116.                 x = 100 - ((i / x2) * 100)
  117.                 frm.Line ((i - ax) * ScreenX, y1 * ScreenY)-((i + ax) * ScreenX, y2 * ScreenY), Me.GetFadeColor(x)
  118.             Next i
  119.            
  120.         Case DiagLowerRightGradient
  121.             For i = x2 + ax To x1 - ax Step -1
  122.                 x = 100 - ((i / x2) * 100)
  123.                 frm.Line ((i + ax) * ScreenX, y1 * ScreenY)-((i - ax) * ScreenX, y2 * ScreenY), Me.GetFadeColor(x)
  124.             Next i
  125.            
  126.         Case Else
  127.             ' The gradient is not found!
  128.    End Select
  129. End Sub
  130.  
  131. Private Sub PaintObject2(frm As Object, Gradient As ColorFadeGradientConstants, Optional CycleCount As Long = 1)
  132.     Dim ScreenX As Long                                 'Screen dimension
  133.     Dim ScreenY As Long                                 'Screen dimension
  134.     Dim h As Long                                       'Object Height
  135.     Dim w As Long                                       'Object Width
  136.     Dim y As Long                                       'Current Y-Position
  137.     Dim x As Long                                       'Current X-Position
  138.     Dim a As Long                                       'Current Angle Offset Multiplier
  139.     Dim ax As Long                                      'Current Angle Offset
  140.        
  141.     Dim x1 As Long, x2 As Long                          'Left and Right of the object
  142.     Dim y1 As Long, y2 As Long                          'Top and Bottom of the object
  143.    
  144.     Dim i As Long                                       'Loop Counter
  145.     Dim j As Long                                       'Loop Counter
  146.     Dim c As Long                                       'Cycles or other value
  147.    
  148.     ScreenX = Screen.TwipsPerPixelX                     'Determine the horizontal screen dimension
  149.     ScreenY = Screen.TwipsPerPixelY                     'Determine the vertical screen dimension
  150.  
  151.     x1 = 0: x2 = (frm.Width / ScreenX)                  'Get the pixel width of the object
  152.     y1 = 0: y2 = (frm.Height / ScreenY)                 'Get the pixel height of the object
  153.              
  154.     c = CycleCount
  155.     If c < 1 Then c = 1                                 'Capping the cycle count for slower computers
  156.    If c > 12 Then c = 12
  157.     c = c * 2                                           'Double it for the rounded effect.
  158.    
  159.     Select Case Gradient
  160.         Case HorizontalGradient
  161.             x1 = 0: x2 = frm.Width
  162.             y1 = 1: y2 = Int(frm.Height / (ScreenY * 100)) + 1
  163.    
  164.             For j = y1 To y2
  165.                 For i = 1 To 100
  166.                     frm.Line (x1, y)-(x2, y), Me.GetFadeColor2(i, c)
  167.                     y = (((ScreenY * 100) * (j - 1)) + (i * ScreenY))
  168.                 Next i
  169.             Next j
  170.        
  171.         Case VerticalGradient
  172.             x1 = 1: x2 = Int(frm.Width / (ScreenX * 100)) + 1
  173.             y1 = 0: y2 = frm.Height
  174.    
  175.             For j = x1 To x2
  176.                 For i = 1 To 100
  177.                     frm.Line (x, y1)-(x, y2), Me.GetFadeColor2(i, c)
  178.                     x = (((ScreenX * 100) * (j - 1)) + (i * ScreenX))
  179.                 Next i
  180.             Next j
  181.        
  182.         Case DiagUpperRightGradient, DiagLowerLeftGradient
  183.             x1 = 1: x2 = Int(frm.Width / (ScreenX * 100)) + 1
  184.             y1 = 0: y2 = frm.Height
  185.            
  186.             ax = Int(((y2 / (ScreenY * 100)) + 1) / 2) + 1
  187.             a = (y2 / 2)
  188.            
  189.             For j = x1 - ax To x2 + ax
  190.                 For i = 1 To 100
  191.                     frm.Line (x - a, y1)-(x + a, y2), Me.GetFadeColor2(i, c)
  192.                     x = (((ScreenX * 100) * (j - 1)) + (i * ScreenX))
  193.                 Next i
  194.             Next j
  195.        
  196.         Case DiagUpperLeftGradient, DiagLowerRightGradient
  197.             x1 = 1: x2 = Int(frm.Width / (ScreenX * 100)) + 1
  198.             y1 = 0: y2 = frm.Height
  199.            
  200.             ax = Int(((y2 / (ScreenY * 100)) + 1) / 2) + 1
  201.             a = (y2 / 2)
  202.            
  203.             For j = x1 - ax To x2 + ax
  204.                 For i = 1 To 100
  205.                     frm.Line (x + a, y1)-(x - a, y2), Me.GetFadeColor2(i, c)
  206.                     x = (((ScreenX * 100) * (j - 1)) + (i * ScreenX))
  207.                 Next i
  208.             Next j
  209.     End Select
  210. End Sub
  211.  
  212. Public Property Let FadeEndColor(ByVal vData As Long)           'Sets the fade end color and the individual RGB values
  213.    mvarFadeEndColor = vData
  214.    Call DetermineRGB(vData, fcer, fceg, fceb)
  215. End Property
  216.  
  217. Public Property Get FadeEndColor() As Long                      'Returns the fade end color
  218.     FadeEndColor = mvarFadeEndColor
  219. End Property
  220.  
  221. Public Property Let FadeStartColor(ByVal vData As Long)         'Sets the fade end color and the individual RGB values
  222.    mvarFadeStartColor = vData
  223.    Call DetermineRGB(vData, fcsr, fcsg, fcsb)
  224. End Property
  225.  
  226. Public Property Get FadeStartColor() As Long
  227.     FadeStartColor = mvarFadeStartColor                         'Returns the fade start color.
  228. End Property
  229.  
  230. Private Sub DetermineRGB(varRGB As Long, varRed As Long, varGreen As Long, varBlue As Long)  
  231.     Dim rs$ 'String to hold the hex of the color
  232.    rs$ = Hex(varRGB)
  233.    
  234.    While Len(rs$) < 6
  235.        rs$ = "0" & rs$
  236.    Wend
  237.    
  238.    varRed = Val("&H" & Mid(rs$, 5, 2))
  239.    varGreen = Val("&H" & Mid(rs$, 3, 2))
  240.    varBlue = Val("&H" & Mid(rs$, 1, 2))
  241. End Sub
  242.  
  243. Private Function DetermineFade(R1 As Long, G1 As Long, B1 As Long, R2 As Long, G2 As Long, B2 As Long, Percent As Long) As Long
  244.        Dim fcr As Long     'Red
  245.         Dim fcg As Long     'Green
  246.        Dim fcb As Long     'Blue
  247.         Dim fcp As Long     'Percentage
  248.        
  249.        fcp = Percent
  250.        If fcp > 100 Then fcp = 100
  251.        If fcp < 0 Then fcp = 0
  252.                        
  253.         fcr = MidPoint(R1, R2, fcp)             'Interpolate
  254.         fcg = MidPoint(G1, G2, fcp)             'Interpolate
  255.         fcb = MidPoint(B1, B2, fcp)             'Interpolate
  256.         DetermineFade = RGB(fcr, fcg, fcb)      'Return a long number.
  257. End Function
  258.  
  259. Private Function MidPoint(x1 As Long, x2 As Long, p As Long) As Long       ' Interpolation to find a midpoint number based on percentage
  260.         If x1 > x2 Then
  261.             MidPoint = x1 - ((x1 - x2) * (p / 100))
  262.         Else
  263.             MidPoint = ((x2 - x1) * (p / 100)) + x1
  264.         End If
  265. End Function
« Last Edit: November 10, 2024, 07:46:50 am by Boleeman »

 

TinyPortal © 2005-2018