Blog de Gilles Vasseur - Pascal et compagnie

Nous allons continuer à explorer quelques transitions qui serviront de base à notre composant. Aujourd'hui, ce sont les côtés des images qui vont nous intéresser.

Jeu avec les côtés de l'image

Parmi les transitions à définir grâce aux masques, celles qui exploitent les côtés des images sont parmi les plus faciles à implémenter. Nous définirons ainsi quatre nouvelles transitions : HorizontalExpand, HorizontalShrink, VerticalExpand et VerticalShrink. Avec ces transitions, nous reprenons bien évidemment notre modèle habituel de test.

Voici le schéma correspondant à HorizontalExpand :

Son implémentation en découle immédiatement :

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
procedure TMainForm.btnGoClick(Sender: TObject);
// *** dessin ***
var
  LBGRAFrom, LBGRATo, LBGRAMask: TBGRABitmap;
  LY, LX: Integer;
begin
  btnGo.Enabled := False;
  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);
          // traitement 1 ici (source)
          LX := 0;
          LY := 0;
          LBGRAFrom.FillRect(ClientRect, BGRABlack);
          LBGRAFrom.PutImage(LX, LY, fBGRAFrom, dmDrawWithTransparency, Opacity(False));
          // traitement 2 ici (destination)...
          LBGRAMask.FillRectAntialias(0, 0, imgResult.ClientWidth, imgResult.ClientHeight, BGRABlack);
          LBGRAMask.FillRectAntialias(imgResult.ClientWidth * (100 - fStep) div 200,
            0, imgResult.ClientWidth * (100 + fStep) div 200,
            imgResult.ClientHeight, BGRAWhite);
          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;

La transition HorizontalShrink obéira quant à elle à un schéma très proche de la précédente. Toutefois, il faudra deux rectangles pour construire le masque :

Comme souvent, il serait possible d'implémenter autrement cette transition en faisant remarquer qu'elle peut être considérée comme la disparition progressive en allant vers le centre de l'image d'origine. Il faudrait alors, comme nous l'avons fait en plusieurs occasions, inverser les images de travail. Nous n'aurions alors qu'un rectangle de masque à dessiner.

Son implémentation ne différera par conséquent que par les deux lignes pour calculer les coordonnées des rectangles nécessaires au masque :

Code pascal :

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

1
2
LBGRAMask.FillRectAntialias(0, 0, imgResult.ClientWidth * fStep div 200, imgResult.ClientHeight, BGRAWhite);
LBGRAMask.FillRectAntialias(-1 + imgResult.ClientWidth * (200 - fStep) div 200, 0, imgResult.ClientWidth, imgResult.ClientHeight, BGRAWhite);

Vous aurez remarqué la constante -1 placée en début d'expression du second rectangle constituant le masque : elle est là pour éviter l'arrondi du calcul sur les pixels qui produirait une ligne verticale non couvrante.

Les deux dernières transitions opèrent de la même façon, mais en jouant sur la verticale. Nous nous contenterons de fournir le code qui les concerne.

Pour VerticalExpand, nous aurons :

Code pascal :

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

LBGRAMask.FillRectAntialias(0, (100 - fStep) * imgResult.ClientHeight div 200, imgResult.ClientWidth, (100 + fStep) * imgResult.ClientHeight div 200, BGRAWhite);

Pour VerticalShrink, il faudra écrire :

Code pascal :

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

1
2
3
LBGRAMask.FillRectAntialias(0, 0, imgResult.ClientWidth,
  imgResult.ClientHeight * fStep div 200, BGRAWhite);
LBGRAMask.FillRectAntialias(0, -1 + imgResult.ClientHeight * (200 - fStep) div 200, imgResult.ClientWidth, imgResult.ClientHeight, BGRAWhite);

That's all for now folks!