Farbe zur Laufzeit verändern?

[Simo]

Hey zusammen!!

Ich hätte eine Frage : Wie kann man die Farbe eines Komponentes während der Laufzeit verändern/verschieben.?
Z.b ein Panel.. [ gewölbt (rechts 80% blau, links 20% gelb). Und wenn ich drauf klicke muss sich die blaue Farbe nach rechts verschieben, so dass das ganze Panel fast gelb wird (~ 5% Blau bleibt am Rand rechts..) ??

Wie könne man sowas realisieren??

[DeddyH]

Bei Komponenten, die über einen Canvas verfügen (also z.B. TGraphicControl oder TCustomControl), kannst Du dazu das OnPaint-Ereignis nutzen. Speziell das TPanel hat zwar auch einen Canvas, aber der ist protected, so dass Du dazu eine Cracker-Klasse brauchen wirst.

[Simo]

Ich weiß leider nicht wie ich das machen soll/kann..-( ? Außerdem wie kriege ich das Panel gewölbt(Rand..) ??

[DeddyH]

Ich weiß zwar nicht so genau, was Du mit "gewölbt" meinst, aber prinzipiell könntest Du so etwas versuchen:

Delphi-Quellcode:

type
  TPanel = class(ExtCtrls.TPanel)
  private
    (* privates Feld hinzufügen *)
    FLeftValue: integer;
    (* Setter-Methode *)
    procedure SetLeftValue(const Value: integer);
  protected
    (* Paint-Methode überschreiben *)
    procedure Paint; override;
  public
    (* Property hinzufügen für den Zugriff von außen *)
    property LeftValue: integer read FLeftValue write SetLeftValue;
  end;

  TfrmTest = class(TForm)
    TestPanel: TPanel;
    btnUpdate: TButton;
    procedure btnUpdateClick(Sender: TObject);
  private
    { Private-Deklarationen }
  public
    { Public-Deklarationen }
  end;

...

procedure TPanel.Paint;
begin
  inherited;
  Canvas.Brush.Color := clBlue;
  Canvas.FillRect(Rect(0, 0, FLeftValue, Height));
  Canvas.Brush.Color := clYellow;
  Canvas.FillRect(Rect(FLeftValue, 0, Width, Height));
end;

procedure TPanel.SetLeftValue(const Value: integer);
begin
  if FLeftValue <> Value then
    begin
      FLeftValue := Value;
      Invalidate;
    end;
end;

procedure TfrmTest.btnUpdateClick(Sender: TObject);
begin
  TestPanel.LeftValue := TestPanel.LeftValue + 10;
end;

[TiGü]

1. Was hast du denn schon an Vorarbeit geleistet?
2. Wo ist dein bisheriger Quelltext?
3. Bei welchem KONKRETEN Schritt hast du ein Problem?

[himitsu]

Zitat:

Zitat von DeddyH (Beitrag 1261140)

so dass Du dazu eine Cracker-Klasse brauchen wirst.

Oder man packt eine PaintBox, oder Ähnliches, da rein.

Und wie man Farbverläufe zeichnet ... dazu sollten sich genügend Tutorials/Beispiele finden lassen, oder gar fertige Komponenten.

[Jumpy]

Ich habe das so verstanden, dass es nicht um Farbverläufe geht, sondern einen gelben und einen blauen Bereich, daher wäre mein Vorschlag auf das Panel (das man pnlMain nennen könnte) zwei weitere Panel zu legen. Eines mit Align: alLeft (nenn es pnlLeft) und eines mit Align: alClient.

Dann kannst du das pnlLeft so groß oder klein ziehen wie du das beim Start ungefähr haben willst und beide Panel wie gewünscht einfärben.

Dem OnClick beider Panel musst du dann die gleiche Prozedur zuweisen, in der dann die Größe des pnlLeft entsprechend verändert wird ala:

Code:

pnlLeft.Width=Round(pnlMain.Width*95/100) //~95% gelb

[Der schöne Günther]

Ich glaube wenn du in mspaint einmal aufmalst was du genau meinst kann man besser helfen.

[himitsu]

Ohne Farbverlauf: (dann sollte man vielleicht besser mal erklären, was "gewölbt" eigentlich bedeuten soll)

TGauge (unter Samples)
zwei TBevel
oder ein Canvas/TImage/TPaintBox, wo man das selber drauf malt

[Simo]

Danke alle für Ihre Hilfe,Antwort..
Hier ist der Anhang (unten...)

Wenn auf das Linke Bild (Panel) klicke soll es so werden (Bild rechts.) ??

[DeddyH]

Da ist doch ein Farbverlauf drauf. Allerdings würde ich mir überlegen, ob man nicht gleich eine eigene Komponente (abgeleitet von TCustomControl) dafür schreibt, da es doch bestimmt mehr als einen solcher "Buttons" geben soll, wie ich einfach mal mutmaße.

[edit] Statt komplett alles zur Laufzeit zu zeichnen, könnte man ja auch 2 vorgefertigte Grafiken nehmen ("ausgeklappt", "eingeklappt") die man dann je nach Zustand draufpinselt. Da dann noch das Icon und die jeweilige Beschriftung drübermalen, fertig is die Laube. [/edit]

[Simo]

Zitat:

Da ist doch ein Farbverlauf drauf. Allerdings würde ich mir überlegen, ob man nicht gleich eine eigene Komponente (abgeleitet von TCustomControl) dafür schreibt, da es doch bestimmt mehr als einen solcher "Buttons" geben soll, wie ich einfach mal mutmaße.

Das soll über ein OnClick-Ereignis passieren.. Wie kann ich das am besten machen? Zwei Panel drauf ? Wie verschiebt sich der blaue Bereich..

[Blup]

Die Bildqualität ist nicht besonders, aber die von dir dargestellte Komponente vereint eine Vielzahl von grafischen Effekten.
- Farbverlauf von Oben nach Unten
- abgerundete Ecken
- Kanten aufgehellt oder abgedunkelt
- Schrift mit 3D-Effekt
- Halbtransparenz
- Antialiasing

Du müsstest die erst einmal mit jedem Effekt ausführlich beschäftigen und diese dann in einer eigenen Komponente kombinieren.
Die einfachste Lösung:
- erstell jeweils eine Bild für beide Zustände des Button
- nimm eine Image-Komponente und tausche das Bild wenn darauf geklickt wird

[DeddyH]

Wieso soll der sich verschieben? Es genügt doch, wenn der Farbverlauf den entsprechenden Bereich übermalt.

[himitsu]

Zitat:

Zitat von DeddyH (Beitrag 1261165)

[edit] Statt komplett alles zur Laufzeit zu zeichnen, könnte man ja auch 2 vorgefertigte Grafiken nehmen ("ausgeklappt", "eingeklappt") die man dann je nach Zustand draufpinselt. Da dann noch das Icon und die jeweilige Beschriftung drübermalen, fertig is die Laube. [/edit]

Oder ein breiteres Bild, das jeweils nach links und rechts verschoben draufgemalt wird.
Den Rahmen kann man notfalls auch als Bild gestalten, wobei der innere Bereich natürlich transparent sein sollte.

Oder man malt eben alles selber.


Wobei mir noch unklar ist, ob das von links nacht rechts springt oder fliessend rübergleitet.



Und ich bin mir sicher, daß es schon fertige Button-Komponenten gibt, welchen man einfach die beiden Bilder gibt und die den Rest selber behandeln.

[Simo]

Wie bekommt man die Ecken abgerundet und die Kanten aufgehellt ??

[DeddyH]

Wie schon mehrfach gesagt: erstell doch einfach 2 Grafiken mit einem Zeichenprogramm (mspaint, InkScape, etc.) und tausche diese im OnClick aus. Ob diese Grafiken abgerundete Ecken haben oder sonstige Gimmicks, bleibt dabei Dir überlassen.

[himitsu]

http://stackoverflow.com/questions/1...ckground-image
http://forum.delphi-treff.de/index.p...threadID=16765
http://www.tmssoftware.com/site/labelsbuttons.asp
uvm.

[Der schöne Günther]

Eine Frage dazwischen: Sollen es im Endeffekt nur zwei getrennte Zustände sein oder soll das voll animiert sein?

[Simo]

Das soll voll animiert sein -)

[Simo]

Ich komme leider nicht voran..
Ich habe einen Code geschreiben, wenn auf das Panel klike(grau) dann wird es einfach blau! Aber das ist nicht was ich machen soll. Es muss genau aussehen wie im Anhang (Farbverlauf)!

Ich wäre echt sehr dankbar wenn mir jemand helfen kann..-)

[TiGü]

Zitat:

Zitat von Simo (Beitrag 1261211)

Ich habe einen Code geschreiben, wenn auf das Panel klike(grau) dann wird es einfach blau! Aber das ist nicht was ich machen soll. Es muss genau aussehen wie im Anhang (Farbverlauf)!

Und wo ist dein Code?
Zeig ihn uns!
Trau dich!

[Simo]

Delphi-Quellcode:

unit Panel;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.ExtCtrls, Vcl.ImgList;

type
  TForm1 = class(TForm)
    Panel1: TPanel;
    procedure Panel1Click(Sender: TObject);
  private
    { Private-Deklarationen }
  public
  //procedure FormCreate(Sender: TObject);
    { Public-Deklarationen }
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}



procedure TForm1.Panel1Click(Sender: TObject);
const
  bgcolor = $00FF0000; //$00FFDDEE;
  linecolor = $00FFFFFF; //$00554366;
var
  img: array of TImage;
  reg: hrgn;
  i: Integer;
begin
  for i := 0 to ComponentCount - 1 do
  begin
    if Components[i].ClassName = 'TPanel' then
    begin
      setlength(img, Length(img) + 1);
      img[i] := TImage.Create(Self);
      img[i].Width := (Components[i] as TPanel).Width;
      img[i].Height := (Components[i] as TPanel).Height;
      img[i].Parent := (Components[i] as TPanel);
      img[i].Canvas.Brush.Color :=bgcolor;
      img[i].Canvas.pen.Color := bgcolor;
      img[i].Canvas.Rectangle(0,0,img[i].Width, img[i].Height);
      img[i].Canvas.pen.Color :=linecolor;
      img[i].Canvas.RoundRect(5,5,img[i].Width - 5,img[i].Height - 5,20,20);
      reg := CreateRoundRectRgn(0,0,(Components[i] as TPanel).Width,
        (Components[i] as TPanel).Height, 20,20);
      setwindowrgn((Components[i] as TPanel).Handle, reg, True);
      deleteobject(reg);
    end;
  end;
end;

end.

Wenn man drauf klickt dann wird das Panel einfach blau..
Ich möchte es genau programmieren wie im Anhang -(

??

[Simo]

Zitat:

TiGü :
Und wo ist dein Code?
Zeig ihn uns!
Trau dich!

Wie könnte man es genauso machen??
.

[Sir Rufo]

Diese Buttons sind mit 2 simplen Bildern gemacht worden auf die dann (zur Laufzeit) das Icon und der Text (weiß oder schwarz) gepinselt wurden.

Um die Breiten anpassen zu können und/oder zum Animieren, werden bestimmte Bereiche der Bilder wiederholt (sieht man sehr schön durch die Artefakte im blauen Bereich bei einer entsprechenden Vergrößerung)
Anhang 41295

[Simo]

Hey!
Danke für die Antwort..
das ist nur ein Button(Bild links)!! Erst wenn man drauf klickt wird es wie aufm rechten Bild..


Und wie kann ich das machen, Wie aufm Bild?
.

[Simo]

Ich hab's versucht.. ist aber leider nicht was ich will..

Delphi-Quellcode:

unit Panel;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.ExtCtrls, Vcl.ImgList;


type
  TPanel = class(Vcl.ExtCtrls.TPanel)
    private { Private-Deklarationen }
    FOnPaint: TNotifyEvent;
    protected { Protected-Deklarationen }
    procedure Paint; override; public
    { Public-Deklarationen }
    property Canvas;
    published { Published-Deklarationen }
    property OnPaint: TNotifyEvent read FOnPaint write FOnPaint;
    end;

type
  TForm1 = class(TForm)
    Panel1: TPanel;
    procedure FormCreate(Sender: TObject);
    procedure Panel1Click(Sender: TObject);
  private
    { Private-Deklarationen }
    procedure OnPanel1Paint(Sender: TOBject);
  public
  //procedure FormCreate(Sender: TObject);
    { Public-Deklarationen }
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}



procedure TForm1.Panel1Click(Sender: TObject);
const
  bgcolor = $00FF0000; //$00FFDDEE;
  linecolor = $00FFFFFF; //$00554366;
var
  img: array of TImage;
  reg: hrgn;
  i: Integer;
begin
  for i := 0 to ComponentCount - 1 do
  begin
    if Components[i].ClassName = 'TPanel' then
    begin
      setlength(img, Length(img) + 1);
      img[i] := TImage.Create(Self);
      img[i].Width := (Components[i] as TPanel).Width;
      img[i].Height := (Components[i] as TPanel).Height;
      img[i].Parent := (Components[i] as TPanel);
      img[i].Canvas.Brush.Color :=bgcolor;
      img[i].Canvas.pen.Color := bgcolor;
      img[i].Canvas.Rectangle(5,5,img[i].Width, img[i].Height);
      img[i].Canvas.pen.Color :=linecolor;
      img[i].Canvas.RoundRect(0,0,img[i].Width - 50,img[i].Height - 5,20,20);
      reg := CreateRoundRectRgn(0,0,(Components[i] as TPanel).Width,
        (Components[i] as TPanel).Height, 0,0);
      setwindowrgn((Components[i] as TPanel).Handle, reg, True);
      deleteobject(reg);
    end;
  end;
end;



procedure TPanel.Paint;
begin
inherited;
  if assigned(fOnPaint) then
  fOnPaint(Self);
  end;


procedure TForm1.FormCreate(Sender: TObject);
begin
  Panel1.OnPaint := OnPanel1Paint;
end;

procedure TForm1.OnPanel1Paint(Sender: TOBject);
var r: Trect;
begin
  r := Panel1.ClientRect;
  InflateRect(r, -2, -2);
  With Panel1 do
  begin
  Canvas.Brush.Color :=$CD0000;//clWindow;
  Canvas.RoundRect(r.Left, r.Top, r.Right, r.Bottom, 20, 20);
  Canvas.Brush.Color := Panel1.Color;
  Canvas.Draw(5, 5, Application.Icon);
  Canvas.Brush.Color := $FFFFE0;
  Canvas.RoundRect(r.Left, r.Top, r.Right-120, r.Bottom, 30, 30);
  Canvas.Brush.Color:=Panel1.Color;
  Canvas.Draw(5, 5, Application.Icon);

  end;
end;

end.

[DeddyH]

Wo hakt es denn noch? Und muss es unbedingt ein Panel sein?

[Sir Rufo]

Zitat:

Zitat von Simo (Beitrag 1261297)

Hey!
Danke für die Antwort..
das ist nur ein Button(Bild links)!! Erst wenn man drauf klickt wird es wie aufm rechten Bild..


Und wie kann ich das machen, Wie aufm Bild?
.

:roll: Das weiß ich, ich wollte dir damit sagen, wie das gemacht worden ist.

Nimm 2 Bilder und zeige eins davon an. Sobald die Maustaste sich nach unten bewegt zeige das andere Bild an und wenn die Maustaste losgelassen wird, dann zeige wieder das erste Bild an.
Einfach gell?

[DeddyH]

Oder man erstellt nur eine Grafik und "schiebt die rein", damit das auch animiert aussieht. Erstmal dürfte dafür ein einfacher Timer genügen, ein Multimedia-Timer wäre allerdings hübscher.

[Simo]

Für alle Komponenten.. aber am Ende muss es ein Panel sein!!

Zitat:

Wo es noch hakt

Ich muss es genau so machen wie aufm Bild!
Auf dem Bild ist ja ein Farbverlauf von oben nach unten..und beim Click wird der blaue Bereich übermalt (schräg..usw). Die Ecken sind abgerundet als wäre es gewölbt)

Mit meinem Code komme ich nicht voran..

?

[DeddyH]

Lies doch die letzten beiden Posts noch einmal, viel einfacher wird es wohl nicht werden.

[Simo]

Und soll die Grafik aussehen? Einfach mit mspaint ?

Wie schiebe ich die Bilder/Grafik rein..? wäre dann mein genzer Code falsch ?

[Der schöne Günther]

Ich bin kein VCL-Kenner, erst recht nicht wenn es um Animationen geht.

Auf jeden Fall würde ich mir die Beschriftung und den Hintergrund (Farbverlauf) als zwei getrennte Grafiken einladen. Wie himitsu sagt würde ich auch einen Timer nehmen.

Hier habe ich auf die Schnelle mal was zusammengestrickt. Nur wie gesagt: Ich bin im Endeffekt bei dem Thema genauso unwissend wie du 8-)

[DeddyH]

Ich habe auch mal schnell was zusammengestrickt. Statt des gelben Rechtecks würde man dann eben die Grafik zeichnen.

Delphi-Quellcode:

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, ExtCtrls;

type
  TDingens = class(TCustomControl)
  strict private
    FAniTimer: TTimer;
    FCurrentStep: integer;
    FIncrement: integer;
    procedure DoOnTimer(Sender: TObject);
    procedure CMMouseEnter(var Msg: TMessage); message CM_MOUSEENTER;
    procedure CMMouseLeave(var Msg: TMessage); message CM_MOUSELEAVE;
  protected
    procedure Paint; override;
  public
    constructor Create(AOwner: TComponent); override;
    destructor Destroy; override;
  end;

  TfrmTest = class(TForm)
    procedure FormCreate(Sender: TObject);
  private
    { Private-Deklarationen }
    FDingens: TDingens;
  public
    { Public-Deklarationen }
  end;

var
  frmTest: TfrmTest;

implementation

{$R *.dfm}

const
  X_OFFSET = 10;

{ TDingens }

procedure TDingens.CMMouseEnter(var Msg: TMessage);
begin
  inherited;
  FIncrement := abs(FIncrement);
  FAniTimer.Enabled := true;
end;

procedure TDingens.CMMouseLeave(var Msg: TMessage);
begin
  inherited;
  FIncrement := -abs(FIncrement);
  FAniTimer.Enabled := true;
end;

constructor TDingens.Create(AOwner: TComponent);
begin
  inherited;
  FIncrement := 10;
  FCurrentStep := X_OFFSET;
  FAniTimer := TTimer.Create(self);
  FAniTimer.Enabled := false;
  FAniTimer.Interval := 10;
  FAniTimer.OnTimer := DoOnTimer;
  Width := 75;
  Height := 25;
end;

destructor TDingens.Destroy;
begin
  FAniTimer.Enabled := false;
  inherited;
end;

procedure TDingens.DoOnTimer(Sender: TObject);
begin
  inc(FCurrentStep, FIncrement);
  if FCurrentStep > Width - X_OFFSET then
    begin
      FAniTimer.Enabled := false;
      FCurrentStep := Width - X_OFFSET;
    end
  else if FCurrentStep < X_OFFSET then
    begin
      FAniTimer.Enabled := false;
      FCurrentStep := X_OFFSET;
    end;
  Invalidate;
end;

procedure TDingens.Paint;
begin
  inherited;
  Canvas.Brush.Color := clBlue;
  Canvas.FillRect(Rect(0, 0, Width, Height));
  Canvas.Brush.Color := clYellow;
  Canvas.FillRect(Rect(0, 0, FCurrentStep, Height));
end;

procedure TfrmTest.FormCreate(Sender: TObject);
begin
  FDingens := TDingens.Create(self);
  FDingens.Left := 20;
  FDingens.Top := 20;
  FDingens.Parent := self;
end;

Um die Grafik reinzuschieben, muss man ja nur die X-Koordinate negativ initialisieren und dann im Timer in Einzelschritten an die 0 heranführen.

[Der schöne Günther]

Ich habe das Gefühl, mit FireMonkey wäre das alles in 2 Minuten erledigt gewesen, kann das sein? Das "AnimationDemoHD" zu Animationen sieht man ja wirklich tolle Beispiele für all sowas...

[DeddyH]

Ich nix wisse, Feueraffe nix mein Baustell :mrgreen:

[Simo]

Vielen Dank euch allen !!!

Sehr nett von euch!!

Ich mache jetzt allein weiter.. Grafik reinschieben.. animation!!

LG
Simo'n

[Simo]

Guten morgen zusammen!

Ich bin's wieder!

Nach Rücksprache ist mein Code leider falsch (Panel ist blau und wenn ich mit der Maus drauf gehe..wird 80% der blauen Bereich grün übermalt) .

Ich sollte es genauso machen (Anhang, wenn ich aufm linken Bild clicke soll so ausehen wie aufm rechten Bild). Strich links..schräg..Text..Farbe..alles gleich -(.

Ich habe überlegt. Ich schneide diese Grafik (Button) in 3 Griken mit Snipping Tool aus und lade sie auf ein Panel ein...:?: ?

Ich freue mich auf Ihre Hilfe & Vorschläge..

Lg

[TiGü]

Zitat:

Zitat von Simo (Beitrag 1261787)

Ich habe überlegt. Ich schneide diese Grafik (Button) in 3 Griken mit Snipping Tool aus und lade sie auf ein Panel ein...:?: ?

Schön, dass du jetzt schon überlegt hast!

Diese Vorgehensweise wird dir ungefähr seit zweieinhalb Threadseiten vorgeschlagen.
Es gibt sogar schon Sourcecode, wo das Ganze animiert abläuft (vgl. Post von DeddyH vom 04.06).

Hast du konkrete Fragen, die nicht schon mit der Suchfunktionen dieses Forums beantwortet werden können?
Es schreibt dir keiner umsonst (d.h. ohne Geld) dieses Programm.

Wenn du Schwierigkeiten hast diese sehr simple Aufgabe zu lösen, dann versuche dein Problem in Teilprobleme zu unterteilen.
Wenn du konkrete Fragen hast, kannst du sie stellen.
Ggf. in einen neuen Thread!