Wie zeichnet man animierte Levelleiste in TVirtualStringTree?

Question

Ich bin Targeting eine benutzerdefinierte animierte Fortschrittsbalken in VST

Mein Ziel zu ziehen, um ein ähnliches Ergebnis wie Bild unten zeichnen, habe ich versucht, so etwas wie dieses OnBeforeCellPaint zu tun:

procedure TForm2.VTs1BeforeCellPaint(Sender: TBaseVirtualTree; 
    TargetCanvas: TCanvas; Node: PVirtualNode; Column: TColumnIndex; 
    CellPaintMode: TVTCellPaintMode; CellRect: TRect; var ContentRect: TRect); 
var 
    NewRect : TRect; 
    xOff, yOff : Integer; 
    ProgressBarRect: TRect; 
    Percents: Real; 
    DrawProgressBar: Boolean; 
begin 
    //draw progress 
    Percents := 10; // 40% 
    // progressBar on Column 3 
    begin 
    // draw progressbar 
    ProgressBarRect.Left := 0; 
    ProgressBarRect.Top := CellRect.Top + 1; 
    ProgressBarRect.Right := round((CellRect.Right - CellRect.Left) * Percents) + CellRect.Left; 
    ProgressBarRect.Bottom := CellRect.Bottom - 1; 
    if (ProgressBarRect.Right - ProgressBarRect.Left) > 0 then 
    begin 
     TargetCanvas.Brush.Color := RGB(179,255,102); 
     TargetCanvas.FillRect(ProgressBarRect); 
    end; 
    // ProgressBarRect 
    inc(ProgressBarRect.Left); 
    inc(ProgressBarRect.Top); 
    dec(ProgressBarRect.Right); 
    dec(ProgressBarRect.Bottom); 
    if (ProgressBarRect.Right - ProgressBarRect.Left) > 0 then 
    begin 
     TargetCanvas.Brush.Color := RGB(221,255,187); 
     TargetCanvas.FillRect(ProgressBarRect); 
    end; 
    end; 
end; 

aber ich kann nicht tut das gleiche Ergebnis und erreicht den gleichen Ansatz wie das Bild, das folgt:

, dass das Ergebnis, das ich habe bei der Codierung:

Die Fortschrittsbalken kommen zusammen mit dem Knoten nicht daneben und es ist nicht baugleich wie im Bild zeigt, es kommt gelb lange zurück Boden des Knotens ich es auf der linken Seite machen wollte von der Knoten und haben das gleiche Design des animierten Bildes, das ich oben gepostet habe.

Answer 1

wird nur einmal ausgelöst, bevor die Zelle gezeichnet wird.

Ich habe einen Timer verwendet, um das VST neu zu streichen, um das Rect zu "animieren".

Beachten Sie, dass Percents eine Dezimalzahl ist, kein Prozentwert, also 100% ist 1.

Eine sehr einfache Demo folgt:

private 
    Percents: Real; 

. . . 

implementation 

procedure TForm2.FormCreate(Sender: TObject); 
begin 
    Percents := 0; 
    VirtualStringTree1.AddChild(nil); 
end; 

procedure TForm2.Timer1Timer(Sender: TObject); 
begin 
    if Percents > 1 then 
    Percents := 0 
    else 
    Percents := Percents + 0.025; 

    VirtualStringTree1.Repaint; 
end; 

procedure TForm2.VirtualStringTree1BeforeCellPaint(Sender: TBaseVirtualTree; 
    TargetCanvas: TCanvas; Node: PVirtualNode; Column: TColumnIndex; 
    CellPaintMode: TVTCellPaintMode; CellRect: TRect; var ContentRect: TRect); 
const 
    CPROGBARWIDTH = 30;//rect width 
    CPROGBARSTEPS = 6;//how many rect is 100% 
var 
    r: TRect; 
    h, n: Integer; 
begin 
    if Percents > 1 then 
    Percents := 1 
    else if Percents = 0 then 
    Exit;//nothing to draw 

    h := Round(CellRect.Height/CPROGBARSTEPS) - 1; 

    r.Top := CellRect.bottom - h - 1; 
    r.Left := 1;{align left} 
    //r.Left := CellRect.Right - CPROGBARWIDTH - 1;{align right} 
    r.Width := CPROGBARWIDTH; 

    TargetCanvas.Brush.Color := clSkyBlue; 

    n := Ceil(Percents * CPROGBARSTEPS);//how many rect to draw? 

    while n > 0 do begin 
    r.Height := h; 
    TargetCanvas.FillRect(r); 
    Dec(r.Top, 1 + h); 
    Dec(n); 
    end; 
end; 

---

August Urlaub Bonus AKA "100% nicht-animierte rect auf der linken Seite des animierten ein"

Dies ähnelt dem animierten GIF in der Frage.

Hier wird eine verschachtelte Routine verwendet.

procedure drawProgress(AWidth: Integer; APercent: Real; ASteps: Integer; ALeft: Integer = 1); 

AWidth die Rechteckbreite
APercent den Prozentsatz
ASteps Anzahl von Chunks, der die vollen 100% Fortschritt
ALeft horizontal von der linken oberen Eckpunkts des Rechtecks ​​

procedure TForm2.VirtualStringTree1BeforeCellPaint(Sender: TBaseVirtualTree; 
    TargetCanvas: TCanvas; Node: PVirtualNode; Column: TColumnIndex; 
    CellPaintMode: TVTCellPaintMode; CellRect: TRect; var ContentRect: TRect); 

    procedure drawProgress(AWidth: Integer; APercent: Real; ASteps: Integer; ALeft: Integer = 1); 
    var 
    r: TRect; 
    h, n: Integer; 
    begin 
    if APercent > 1 then 
     APercent := 1 
    else if APercent = 0 then 
     Exit;//nothing to draw 

    h := Round(CellRect.Height/ASteps) - 1; 

    r.Top := CellRect.bottom - h - 1; 
    r.Left := ALeft; 
    r.Width := AWidth; 

    TargetCanvas.Brush.Color := clSkyBlue; 

    n := Ceil(APercent * ASteps);//how many rect to draw? 

    while n > 0 do begin 
     r.Height := h; 
     TargetCanvas.FillRect(r); 
     Dec(r.Top, 1 + h); 
     Dec(n); 
    end; 
    end; 

begin 
    drawProgress(10,  1, 7); 
    drawProgress(30, Percents, 7, 1 + 10 + 1); 
end; 

Koordinaten machen

Answer 2

Zuerst müssen Sie Ihre Zelle (Zeile) Höhe größer machen. Ich nehme an, Sie wissen, wie man das macht.

Als nächstes, wie ich in meinen Kommentaren, die Sie in die falsche Richtung für Berechnungen verwenden:

Schließlich teilen Sie nicht Ihren Prozentsatz von 100, wie sollten Sie!

procedure TForm2.VTs1BeforeCellPaint(Sender: TBaseVirtualTree; 
    TargetCanvas: TCanvas; Node: PVirtualNode; Column: TColumnIndex; 
    CellPaintMode: TVTCellPaintMode; CellRect: TRect; var ContentRect: TRect); 
var 
    NewRect : TRect; 
    xOff, yOff : Integer; 
    ProgressBarRect: TRect; 
    Percents: Real; 
    DrawProgressBar: Boolean; 
begin 
    //draw progress 
    // Percents := 10; // 40% // for testing? 
    // progressBar on Column 3 
    begin 
    // draw progressbar 
    ProgressBarRect.Left := 0; 
    ProgressBarRect.Top := round((CellRect.Top - CellRect.Bottom) * Percents/100) + CellRect.Bottom; 
    ProgressBarRect.Right := 30; 
    ProgressBarRect.Bottom := CellRect.Bottom - 1; 
    if (ProgressBarRect.Top - ProgressBarRect.Bottom) > 0 then 
    begin 
     TargetCanvas.Brush.Color := RGB(179,255,102); 
     TargetCanvas.FillRect(ProgressBarRect); 
    end; 
    // ProgressBarRect 
    inc(ProgressBarRect.Left); 
    inc(ProgressBarRect.Top); 
    dec(ProgressBarRect.Right); 
    dec(ProgressBarRect.Bottom); 
    if (ProgressBarRect.Top - ProgressBarRect.Bottom) > 0 then 
    begin 
     TargetCanvas.Brush.Color := RGB(221,255,187); 
     TargetCanvas.FillRect(ProgressBarRect); 
    end; 
    end; 
end; 

Notiz bearbeiten

aktualisiert Testlinie zu entfernen, die Größe bei 10% fixiert