Blog de Gilles Vasseur - Pascal et compagnie

Dans ce billet, nous allons poursuivre notre exploration des effets de transition par recouvrement en compliquant très légèrement les calculs...

Le recouvrement (suite)

Le recouvrement OverBottomRight

Le recouvrement OverBottomRight, comme ceux qui suivent, utilise une diagonale pour la translation. Cela signifie simplement qu'il faut modifier dans le même mouvement les variables locales LX et LY.

OverBottomRight suivra le schéma ci-après :

Nous voyons clairement que l'abscisse doit passer de -x à 0 et que l'ordonnée doit suivre la même progression en passant de -y à 0. Ces mouvements se traduisent ainsi pour le code :

Code pascal :

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

1
2
LX := -imgResult.ClientWidth + imgResult.ClientWidth * fStep div 100; // OVERBOTTOMRIGHT
LY := -imgResult.ClientHeight + imgResult.ClientHeight * fStep div 100;

Une étape de l'affichage correspondra alors à l'écran suivant :

Rien de plus simple, n'est-ce pas ?

Le recouvrement OverBottomLeft

Nous devinons que OverBottomLeft sera très proche de ce que nous venons de traiter.

Comme d'habitude, le schéma de la translation désirée nous éclairera sur les calculs à effectuer :

Il nous faut donc passer de x à 0 et de -y à 0, c'est-à-dire décrémenter l'abscisse tout en incrémentant l'ordonnée. La traduction en code est immédiate :

Code pascal :

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

1
2
LX := imgResult.ClientWidth - imgResult.ClientWidth * fStep div 100; // OVERBOTTOMLEFT
LY := -imgResult.ClientHeight + imgResult.ClientHeight * fStep div 100;

L'instantané suivant de l'écran donne une idée de l'effet obtenu :

Le recouvrement OverTopRight

En continuant notre exploration des transitions de recouvrement par simple translation, nous chercherons à viser le haut à droite de l'image, ce qui se traduira par le schéma :

La lecture des données fournies par ce schéma montre que le recouvrement OverTopRight doit passer de -x à 0 pour l'abscisse et de y à 0 pour l'ordonnée.

Le code devient alors :

Code pascal :

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

1
2
LX := -imgResult.ClientWidth + imgResult.ClientWidth * fStep div 100; // OVERTOPRIGHT
LY := imgResult.ClientHeight - imgResult.ClientHeight * fStep div 100;

Une copie d'écran confirme la justesse de notre raisonnement et de nos calculs :

Le recouvrement OverTopLeft

L'ultime recouvrement que nous programmerons consiste à effectuer une translation vers le haut à gauche de l'image. Ce recouvrement sera nommé OverTopLeft. Son schéma correspondra à :

On y lit que l'abscisse doit décroître de x à 0 tout comme l'ordonnée qui doit passer de y à 0. Le code à écrire sera donc :

Code pascal :

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

1
2
LX := imgResult.ClientWidth - imgResult.ClientWidth * fStep div 100; // OVERTOPLEFT
LY := imgResult.ClientHeight - imgResult.ClientHeight * fStep div 100;

Une copie d'écran confirmera encore une fois que nous sommes sur la bonne voie :

Avec cette transition, nous terminons notre exploration des translations simples. Nous devons surtout retenir que quelques méthodes ont suffi pour obtenir ces résultats somme toute plutôt intéressants :

• Create et Free pour la création et la destruction des objets de dessin propres à la bibliothèque BGRABitmap ;
• Resample pour redéfinir les dimensions d'une image et donc normaliser les différentes images de travail ;
• FillRect pour dessiner un rectangle plein ;
• PutImage pour dessiner un objet de type TBGRABitmap sur un autre de même type, avec prise en compte de la transparence ;
• Draw pour dessiner un objet de type TBGRABitmap sur le canevas d'un contrôle par exemple.

La suite permettra de compléter cette liste au fur et à mesure de nos besoins : pour cela, nous devrons créer des transitions plus complexes.