Kopieren-Animation in Painbox zeichnen

[Glados]

Das Processmessages, egal ob unnötig oder nicht, lasse ich erst einmal drin. Das hat nix mit dem Problem zu tun, dass nicht gescrollt wird.

Hiermit im Timer schaffe ich es zu scrollen. Aber dabei wird das bitmap einfach immer nach rechts verlängert und links rutscht es in den Minusbereich.

Delphi-Quellcode:

// Timer
 bmp.Canvas.MoveTo(iPosX, bmp.Height - val);
 bmp.Canvas.LineTo(iPosX, bmp.Height);

 Inc(iPosX);

 if iPosX >= PaintBox1.Width then
  begin
   Dec(iPosXBmp);
   bmp.Width := bmp.Width + 1;
  end;

procedure TForm1.PaintBox1Paint(Sender: TObject);
begin
 TPaintBox(Sender).Canvas.Draw(iPosXBmp, 0, bmp);
end;

Zitat:

Füge in dem Timer mal so etwas wie meine Schleife ein.

Warum? Der Timer ist doch schon in etwa sowas wie eine Schleife.

[Glados]

---

[stahli]

Das Processmessages ist nicht unnötig sondern potentiell schädlich!

Was Du jetzt tust, ist Dein Bitmap bis ins unendliche zu verbreitern und immer den rechten Bereich zu kopieren.
Das kann man machen, sollte aber gelegentlich das Bitmap wieder verschmälern.
Du kannst auch, statt das Bitmap zu verbreitern dessen Inhalt um ein Pixel nach links kopieren und dann das rechte Pixel füllen.

Das reicht aber nicht mehr, wenn Du die Zoomstufe ändern willst. Dazu brauchst Du dann wieder die Originalwerte.
Daher würde ich meinen o.g. Wert mit der Schleife vorziehen.

[Glados]

Habe ein bisschen rumprobiert. Ist nicht einfach :(

Delphi-Quellcode:

var
 bmp: TBitmap;
 iPosXBmp: Integer;
 iOldPos, iNewPos: TPoint;

procedure TForm1.Timer1Timer(Sender: TObject);
var
 val: Integer;
begin
 val := RandomRange(25, 45);

 iNewPos.X := iNewPos.X;
 iNewPos.Y := bmp.Height - val;

 bmp.Canvas.Pen.Color := clBlack;
 bmp.Canvas.MoveTo(iNewPos.X, iNewPos.Y);
 bmp.Canvas.LineTo(iNewPos.X, bmp.Height);

 if iNewPos.X > 0 then
  begin
   bmp.Canvas.Pen.Color := clRed;
   bmp.Canvas.MoveTo(iOldPos.X, iOldPos.Y);
   bmp.Canvas.LineTo(iNewPos.X, iNewPos.Y);
  end;

 iOldPos.X := iNewPos.X;
 iOldPos.Y := bmp.Height - val;


 PaintBox1.Repaint;

 Inc(iNewPos.X, 5);
 if iNewPos.X >= PaintBox1.Width then
  begin
   Dec(iPosXBmp, 5);
   bmp.Width := bmp.Width + 5;
  end;

Zitat:

Du kannst auch, statt das Bitmap zu verbreitern dessen Inhalt um ein Pixel nach links kopieren und dann das rechte Pixel füllen.

Genau das möchte ich, weiß aber nicht wie.
Die Zoomstufe ist mir total egal. Muss ich nicht können.

Bekommt man das irgendwie besser hin, sodass es dem hier ähnelt?
ich dachte durch diese 5-Pixel-Verschiebung bekomme ich ein schönes Dach über den Strichen hin. War wohl falsch gedacht.
https://i.ytimg.com/vi/msVDJSMs8Z0/maxresdefault.jpg

[Dalai]

Für meine Klasse habe ich kein Bitmap verwendet. Ich denke aber mal darüber nach, denn das würde vielleicht wahrscheinlich die Umsortiererei des Arrays einsparen. Naja, egal, ist ja nicht relevant für deine Problemstellung.

Bei mir sieht es so aus (reduziert auf die relevanten Abschnitte): Klasse für die PaintBox:

Delphi-Quellcode:

type
  TBitrate = record
    Down : Cardinal;
    Up   : Cardinal;
  end;

type
  TTrafficDiagram = class(TGraphicControl)
  private
    [...]
    FDataValues           : array of TBitrate;
    FDataValuesInArray    : Word;
    function BitrateToPixel(const ABitrate, AMaxBitrate: Cardinal; const AMaxPixel: integer): integer;
  protected
    procedure Paint; override;
  public
    [...]
    function AddDataValue(const AValue: TBitrate): Boolean;
    property MaxDownstreamBitrate: Cardinal read FMaxBitrateDownstream write FMaxBitrateDownstream;
    property MaxUpstreamBitrate: Cardinal read FMaxBitrateUpstream write FMaxBitrateUpstream;
    property MaxDataValues: Word read FDataValuesInArray write SetMaxDataValues;
  end;

procedure TTrafficDiagram.Paint;
var
  Lgraphheight: integer;
  Llinestart, Llineend: TPoint;
  [...]
begin
    inherited;
    [...]
    Canvas.Pen.Color:= FColorDownstream;
    for I := 1 to FDataValuesInArray do begin
        Llinestart.X:= Self.Width-1 - (FGridLineDistance * (I-1));
        Llinestart.Y:= Lgraphheight - BitrateToPixel(FDataValues[I-1].Down, FMaxBitrateDownstream, Lgraphheight);
        Llineend.X:=   Self.Width-1 - (FGridLineDistance * (I));
        Llineend.Y:=   Lgraphheight - BitrateToPixel(FDataValues[I].Down, FMaxBitrateDownstream, Lgraphheight);
        if Llineend.X < 0 then
            Llineend.X:= -5;
        { No need to move anywhere after the first call of LineTo()
          since the Pen is already at the correct position }
        if I = 1 then
            Canvas.MoveTo(Llinestart.X, Llinestart.Y);
        Canvas.LineTo(Llineend.X, Llineend.Y);
    end;
    [...]
end;

Benutzen tue ich die Klasse dann so:

Delphi-Quellcode:

FTrafficDiagram:= TTrafficDiagram.Create(nil);
FTrafficDiagram.MaxUpstreamBitrate:= 128;
FTrafficDiagram.MaxDownstreamBitrate:= 1024;
FTrafficDiagram.MaxDataValues:= 50;

// im Timer
FBitrate.Up:= 10;
FBitrate.Down:= 100;
FTrafficDiagram.AddDataValue(FBitrate);
FTrafficDiagram.Refresh;

Die Datenpunkte werden bei mir ebenfalls via Timer erstellt (bzw. von der Quelle abgeholt) und dann wie gezeigt mit

Delphi-Quellcode:

AddDataValue()

hinzugefügt. Die Implementierung dieser Methode hab ich mal absichtlich weggelassen, weil einige beim Lesen des Codes wohl schwer atmen würden ;). Die Klasse TTrafficDiagram kümmert sich um das Array und das Zeichnen der Datenpunkte. Ein

Delphi-Quellcode:

FTrafficDiagram.Refresh;

löst den Aufruf von

Delphi-Quellcode:

TTrafficDiagram.Paint

aus. Daher verschwindet auch nix, wenn andere Fenster über der PaintBox liegen oder ähnliche Spielchen.

Aussehen tut das Ganze dann zum Beispiel wie im Anhang. Wobei man das Aussehen anpassen kann (Farbe, Rasterdichte, Raster ausschalten usw).

Ich hoffe, du kannst mit meinem Ansatz etwas anfangen. Leider weiß ich derzeit nicht, ob und vor allem wie man den Graph auch als Fläche zeichnen könnte (sofern das dein Ziel ist).

PS: Es spielt nicht wirklich eine Rolle, ob von TPainBox oder TGrahicControl abgeleitet wird, da erstere hauptsächlich Attribute von letzterer veröffentlicht (public oder published macht).

Grüße
Dalai

[Glados]

Ich würde das ja gerne verwenden. Aber es würde definitiv nichts bringen, da ich kein bisschen von dem Code verstehe. Erklären würde auch nix bringen.
Einzig interessant für mich ist gerade, dass das Ding skalierbar ist. D.h. wenn ein Wert den Rahmen (Anzeige) sprengt, könnte man damit wohl alles irgendwie anpassen.

Wär vielleicht besser wenn ich alles wieder verwerfe. Kapiere davon ja eh nix.

[stahli]

Helge meinte mal: "Lernen, lernen, popernen"

Wenn Du Zeit hast oder das Teilprojekt wichtig ist, dann taste Dich ran.
Andernfalls verwirf es, wenn Du keinen Bock drauf hast.

Da können wir Dir nichts raten.

[Glados]

Klappt doch eh nicht und skalieren muss das Ding auch können.

Um es bei deinen Worten zu belassen: hab ich keinen Bock drauf, obwohl ich es brauche.
Für die Skalierung würde sich was mit Prozentrechnung anbieten. Da ich kein Mathematiker bin und ein Matheschwächling, fällt das wieder raus.

Delphi-Quellcode:

var
 val: Integer;
begin
 val := RandomRange(25, 45);
 val := (val * 100) div StrToIntDef(Edit1.Text, PaintBox1.Height);

 iNewPos.X := iNewPos.X;
 iNewPos.Y := bmp.Height - val;

 bmp.Canvas.Pen.Color := clBlack;
 bmp.Canvas.Brush.Color := clBlack;
 bmp.Canvas.MoveTo(iNewPos.X, iNewPos.Y);
 bmp.Canvas.LineTo(iNewPos.X, bmp.Height);

 if iNewPos.X > 0 then
  begin
   bmp.Canvas.Pen.Color := clRed;
   bmp.Canvas.MoveTo(iOldPos.X, iOldPos.Y);
   bmp.Canvas.LineTo(iNewPos.X, iNewPos.Y);
  end;

 iOldPos.X := iNewPos.X;
 iOldPos.Y := bmp.Height - val;

 PaintBox1.Repaint;

 Inc(iNewPos.X, 5);
 if iNewPos.X >= PaintBox1.Width then
  begin
   Dec(iPosXBmp, 5);
   bmp.Width := bmp.Width + 5;  
  end;
end;

Probleme hier: rote Linie schießt oben raus, wenn Edit1.Text < 40
Hintergrund ist schwarz komischerweise.

[stahli]

Bei konkreten Fragen wird Dir hier bestimmt geholfen.

Aber die grundlegende Arbeit wird schon bei Dir bleiben. Dafür lernst Du aber auch was dabei.
Wenn Zeit dafür ist: Probiere es!

[Glados]

Habe oben mal was rumprobiert. Der Edit-Inhalt soll den Maximalwert darstellen, wo sich dann alle anderen Striche dran anpassen sollen.

Hier noch ein Update

Delphi-Quellcode:

var
 val, Max: Integer;
begin
 val := RandomRange(25, 45);

 Max := StrToIntDef(Edit1.Text, PaintBox1.Height);
 if Max > PaintBox1.Height then
  val := (val * 100) div Max
 else
  Max := PaintBox1.Height;

 Caption := val.ToString;

 iNewPos.X := iNewPos.X;
 iNewPos.Y := bmp.Height - val;

 bmp.Canvas.Pen.Color := clBlack;
 bmp.Canvas.Brush.Color := clBlack;
 bmp.Canvas.MoveTo(iNewPos.X, iNewPos.Y);
 bmp.Canvas.LineTo(iNewPos.X, bmp.Height);

 if iNewPos.X > 0 then
  begin
   bmp.Canvas.Pen.Color := clRed;
   bmp.Canvas.MoveTo(iOldPos.X, iOldPos.Y);
   bmp.Canvas.LineTo(iNewPos.X, iNewPos.Y);
  end;

 iOldPos.X := iNewPos.X;
 iOldPos.Y := bmp.Height - val;

 // horizontale Linie malen - ... jedenfalls die gescheiterte Idee
 bmp.Canvas.Brush.Color := clGreen;
 bmp.Canvas.MoveTo(0, iNewPos.Y);
 bmp.Canvas.LineTo(bmp.Width, iNewPos.Y);

 PaintBox1.Repaint;

 Inc(iNewPos.X, 5);
 if iNewPos.X >= PaintBox1.Width then
  begin
   Dec(iPosXBmp, 5);
   bmp.Width := bmp.Width + 5;
  end;

Das skalieren funktioniert so nun recht gut. Die Zahl im Edit ist immer das Maximum was es gegeben hat und daran passt sich der Rest dann an.

Nur habe ich jetzt ein neues Problem. Meine horizontale Linie die ich versuche zu malen wird natürlich immer und immer neu gezeichnet.
Meine Anfänger-Idee wäre jetzt, einfach ein TShape dafür zu nutzen was immer umpositioniert wird.