Blog de Gilles Vasseur - Pascal et compagnie

Après l'étude des transitions par bandes horizontales, nous allons rapidement nous pencher sur les bandes verticales.

Les bandes verticales

La réalisation de bandes verticales est très proche celle de bandes horizontales si bien que nous allons en profiter pour introduire une autre façon de gérer le nombre de bandes que l'emploi d'une constante.

Nous allons donc créer une fonction nommée NumberOfStrips imbriquée dans le gestionnaire OnClick dont nous nous servons sans cesse. Cette fonction retournera le nombre de bandes selon la largeur de l'image à produire : 1 bande pour une image de moins de 10 pixels de largeur*; 5 bandes pour moins de 300 pixels*; la largeur divisée par C_DefaultNumberOfStrips (une constante fixée à 20) pour moins de 1000 pixels*; 30 bandes pour les images plus larges.

Les valeurs choisies ont été fixées empiriquement. Le nombre de bandes par défaut bénéficie d'une constante, car il s'agit d'une valeur susceptible d'être modifiée selon les goûts de chacun*! Après avoir été toutes nommées, ces constantes pourront être regroupées dans une unité à part.

Voici le code proposé :

Code pascal :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function NumberOfStrips: Integer;
  const
    C_DefaultNumberOfStrips = 20;
  begin
    if imgResult.ClientWidth < 10 then
      Result := 1
    else
    if (imgResult.ClientWidth < 300) then
      Result := 5
    else
    if (imgResult.ClientWidth < 1000) then
      Result := imgResult.ClientWidth div C_DefaultNumberOfStrips
    else
      Result := 30;
  end;

Il sera bien entendu avantageux de proposer par la suite une fonction plus générale qui prendra aussi en compte la hauteur de l'image : il suffira pour cela d'introduire un paramètre qui remplacera la donnée figée ClientWidth. Mieux encore, le composant final autorisera le choix entre un calcul automatique du nombre de bandes et une entrée manuelle des valeurs.

Pour ce qui est du code de la transition StripsLeft, voici que nous pouvons écrire :

Code pascal :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
procedure TMainForm.btnGoClick(Sender: TObject);
// *** dessin ***
var
  LBGRAFrom, LBGRATo, LBGRAMask: TBGRABitmap;
  LY, LX, LI, LStripWidth: Integer;
 
  function NumberOfStrips: Integer;
  const
    C_DefaultNumberOfStrips = 20;
  begin
    if imgResult.ClientWidth < 10 then
      Result := 1
    else
    if (imgResult.ClientWidth < 300) then
      Result := 5
    else
    if (imgResult.ClientWidth < 1000) then
      Result := imgResult.ClientWidth div C_DefaultNumberOfStrips
    else
      Result := 30;
  end;
 
begin
  btnGo.Enabled := False;
  LStripWidth := 1 + imgResult.ClientWidth div NumberOfStrips;
  LBGRAFrom := TBGRABitmap.Create(imgResult.ClientWidth, imgResult.ClientHeight, BGRABlack);
  try
    LBGRATo := TBGRABitmap.Create(imgResult.ClientWidth, imgResult.ClientHeight, BGRABlack);
    try
      LBGRAMask := TBGRABitmap.Create(imgResult.ClientWidth, ClientHeight, BGRABlack);
      try
        fStep := 0;
        repeat
          Inc(fStep);
          LX := 0;
          LY := 0;
          LBGRAFrom.FillRect(ClientRect, BGRABlack);
          LBGRAFrom.PutImage(LX, LY, fBGRAFrom, dmDrawWithTransparency, Opacity(False));
          for LI := 0 to NumberOfStrips do
          begin
            LBGRAMask.FillRectAntialias(LStripWidth * LI - LStripWidth * fStep div 100, 0,
              LStripWidth * LI,
              imgResult.ClientHeight, BGRAWhite);
          end;
          LBGRATo.PutImage(0, 0, fBGRATo, dmSet);
          LBGRATo.ApplyMask(LBGRAMask);
          LBGRAFrom.PutImage(0, 0, LBGRATo, dmDrawWithTransparency, Opacity);
          LBGRAFrom.Draw(imgResult.Canvas, 0, 0);
          imgResult.Repaint;
          sleep(100 - fSpeed);
        until fStep = 100;
      finally
        LBGRAMask.Free;
      end;
    finally
      LBGRATo.Free;
    end;
  finally
    LBGRAFrom.Free;
    btnGo.Enabled := True;
  end;
end;

Ce sont à présent les ordonnées qui sont constantes en recouvrant toute la hauteur de l'image. Partant d'une position fixe déterminée par LI, les rectangles s'agrandissent vers la gauche de l'image en fonction de l'étape à réaliser.

Un instantané de cette transition donnera par exemple :

En diminuant fortement la largeur de l'image finale jusqu'à ce qu'elle ait une valeur inférieure à 300 pixels, nous obtiendrons par exemple, sans calculs supplémentaires :

Nous pouvons de la même manière créer la transition StripsRight. Nous n'en proposerons que le code et une vidéo de démonstration :

Code pascal :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
for LI := 0 to NumberOfStrips - 1 do
begin
  // chaque bande est un rectangle
  LBGRAMask.FillRectAntialias(LStripWidth * LI, 0,
  LStripWidth * fStep div 100 + LStripWidth * LI,
  imgResult.ClientHeight, BGRAWhite);
end;

https://gilles-vasseur.developpez.co...ripsright.webm

La prochaine étape ? Entrelacer des bandes et composer nos premiers essais...