Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

Gardient Panel

arash82arash82 Member Posts: 106
Hi,

How can I make a TShape or TPanle or TPaint or wathever to have a gardient color so they will look like the Windows XP TitleBar, or XP Toolbar (the gardeint color is changing from TopLeft to ButtomRight I think)?

Regards,
Arash

Comments

  • zibadianzibadian Member Posts: 6,349
    : Hi,
    :
    : How can I make a TShape or TPanle or TPaint or wathever to have a gardient color so they will look like the Windows XP TitleBar, or XP Toolbar (the gardeint color is changing from TopLeft to ButtomRight I think)?
    :
    : Regards,
    : Arash
    :
    This problem is basically a mathematical one. You need some code to calculate the Red-Green-Blue values based on the distance from the source. Here I have a simple but slow code, which shows two things: a gradient over 1 dimension, and a gradient over 2 dimensions. I haven't seen the XP-titlebars yet, so I don't have any clear idea of what they look like, or how they react to resizing.
    [code]
    procedure TForm1.PaintBox1Paint(Sender: TObject);
    var
    x, y: integer;
    Factor: real;
    begin
    with TPaintBox(Sender), TPaintBox(Sender).Canvas do begin
    { Factor := 256/Width; // Necessary to make the gradient fill entire width
    for x := 0 to Width - 1 do begin
    Pen.Color :=
    Round(X*Factor)*256*256 // Red
    +Round(X*Factor)*256 // Green
    +Round(X*Factor); // Blue
    MoveTo(X,0);
    LineTo(X,Height-1);
    end;}
    Factor := 256/Sqrt(Sqr(Width)+Sqr(Height)); // Necessary to make the gradient fill entire canvas
    for x := 0 to Width - 1 do
    for y := 0 to Height -1 do begin
    Pixels[X,Y] :=
    Round(Sqrt(Sqr(X)+Sqr(Y))*Factor)*256*256 // Red
    +Round(Sqrt(Sqr(X)+Sqr(Y))*Factor)*256 // Green
    +Round(Sqrt(Sqr(X)+Sqr(Y))*Factor); // Blue
    end;
    end;
    end;
    [/code]
    Another way of doing this, is to use a TImage and a pre-made bitmap. If it needs to be resized, use the Stretch property. I'm guessing windows itself uses this method.
  • arash82arash82 Member Posts: 106
    Thanks for the grate example, but unfortunately I am not quite sure I understand the code :(

    How do I change the starting and the ending color for instance?
  • zibadianzibadian Member Posts: 6,349
    : Thanks for the grate example, but unfortunately I am not quite sure I understand the code :(
    :
    : How do I change the starting and the ending color for instance?
    :
    A color is coded in the following way:
    1st byte: Windows code or 0 for a RGB color
    2nd byte: Red intensity
    3rd Byte: Green intensity
    4rd Byte: Blue intensity
    Once you know this and you are familiar with the addition of colors used in optics, you can easily determine the value of each byte to get a certain color.
    Here is a simple example. Suppose you want a gradient of light-blue to black. You can see that the code for light blue is $000000FF and black is $00000000. All you need to do now is to subtract a certain amount from the color per pixel, which is nothing more than some integer mathematics. In code (part of my previous post):
    [code]
    for x := 0 to Width - 1 do begin
    Pen.Color :=
    0*256*256 // Red
    +0*256 // Green
    +Round(X*Factor); // increase Blue
    MoveTo(X,0);
    LineTo(X,Height-1);
    end;
    [/code]
    This way you can also create a gradient from red or green to black.

    It becomes harder if you want to create a gradient from Green to Blue. Here you need to subtract from green while simultaneously adding to blue.
    [code]
    for x := 0 to Width - 1 do begin
    Pen.Color :=
    0*256*256 // Red
    +Round(X*Factor)*256 // increase Green
    +255-Round(X*Factor); // decrease Blue
    MoveTo(X,0);
    LineTo(X,Height-1);
    end;
    [/code]
    This way you can also gradient from Red to Green, or Red to Blue. The code above also demonstrates how to flip a gradient. If you leave out the green in the code above, it will show the blue above gradient but flipped.

    I hope this helps you create the effect you wish for. Just play around with changing the various combinations of adding and subtracting colors and see what happens. It might produce some weird colors if one of the intensities falls below 0.
  • Andre YoungAndre Young USAMember Posts: 0

    __ ( http://forcoder.org ) free video tutorials and ebooks about // Go, Visual Basic, Scratch, C#, Python, Objective-C, PHP, C++, Delphi, Assembly, MATLAB, Perl, Visual Basic .NET, JavaScript, R, C, Ruby, Java, Swift, PL/SQL ML, Prolog, FoxPro, Rust, Erlang, Scheme, Logo, LabVIEW, D, Awk, Ada, Dart, Clojure, F#, Julia, Alice, Fortran, ABAP, Transact-SQL, Lua, SAS, Bash, Kotlin, COBOL, VBScript, Hack, Crystal, Scala, Lisp, Apex //

Sign In or Register to comment.