Combiner zoom, rotation et transparence avec BGRABitmap

**Péhelji** · 26/11/2018, 18h44

Bonsoir,

Je souhaite pouvoir effectuer tout à la fois un zoom, une rotation ou encore une transparence sur un graphique contenu dans un BGRABitmap.
Le problème est que je ne parviens pas à associer les trois effets simultanément.

Je suis parti du code suivant, inspiré d'une démo trouvé sur le forum anglais :

Code :

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

1
2
3
4
procedure TfrmMap.bgraMainRedraw(Sender: TObject; Bitmap: TBGRABitmap);
begin
  Bitmap.PutImageAngle(Bitmap.Width/2-0.5, Bitmap.Height/2-0.5, bmp, tbAngle.Position, bmp.Width/2-0.5, bmp.Height/2-0.5, tbOpacity.Position);
end;

Où bmp est le graphique d'origine (taille: 1920x1080px) modifié et affiché dans Bitmap (taille: 856x624px).
Le code ci-dessus effectue superbement une rotation avec transparence en prenant le centre de Bitmap comme axe de rotation.
Mais je n'ai pas trouvé une procédure ou fonction qui permette en même temps de zoomer le graphique d'origine.

Aussi j'ai modifié le code de la manière suivante :

Code :

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
procedure TfrmMap.bgraMainRedraw(Sender: TObject; Bitmap: TBGRABitmap);
var
  affine: TBGRAAffineBitmapTransform;
  LBGRATemp: TBGRABitmap;
begin
  LBGRATemp := TBGRABitmap.Create(bgraMain.ClientWidth, bgraMain.ClientHeight, BGRABlack);
  try
    affine := TBGRAAffineBitmapTransform.Create(bmp, false);
    affine.GlobalOpacity := tbOpacity.Position;
    affine.RotateDeg(tbAngle.Position);
    affine.Scale(tbZoom.Position / 100);
    affine.Translate(bgraMain.ClientWidth / 2, bgraMain.ClientHeight / 2); 
    LBGRATemp.Fill(affine);
    Bitmap.PutImage(0, 0, LBGRATemp, dmSet, tbOpacity.Position);             
  finally
    LBGRATemp.Free;
    affine.Free;
  end;
end;

Et là j'avais les trois effets (transparence, rotation et zoom) réunis ! Le hic toutefois, c'est que la rotation ne s'effectue plus à partir du centre de l'image

!
Quelle procédure ou fonction dois-je ajouter à la variable affine pour parvenir à ce résultat ?
Merci d'avance pour votre aide.

**tourlourou** · 27/11/2018, 09h38

Bonjour,

Dans son tuto, Gilles utilise un code un peu différent : présente-t-il le même inconvénient ?

**BeanzMaster** · 27/11/2018, 11h03

Bonjour,
je ne suis pas a la maison pour vérifier mais dans ton exemple tu as 4 étapes :

Opacité --> Rotation --> Scale --> Translation

Ton problème je pense est l'ordre des transformations. C'est important. Pour ma part je ferai comme ceci

Scale --> Rotation --> Opacité --> (Translation si besoin)

A+

**Péhelji** · 28/11/2018, 00h30

Bonsoir BeanzMaster,

Envoyé par BeanzMaster

Ton problème je pense est l'ordre des transformations. C'est important. Pour ma part je ferai comme ceci :

Scale --> Rotation --> Opacité --> (Translation si besoin)

Merci de me faire profiter de ton expérience.
Si je laisse de côté l'opacité qui n'est pas vraiment un problème, j'en suis venu à penser qu'il valait mieux tourner l'image en premier pour ne pas perdre les parties de cette image qui sont dans les coins !
Après, il y a le problème de la "Translation" qui doit effectivement être considérée.
Mais je ne suis qu'au début de ma découverte de TBGRABitmap qui me semble très prometteur.
Merci beaucoup pour ton aide.

**BeanzMaster** · 28/11/2018, 12h18

Salut j'ai fait quelques recherche vite fait pour pouvoir effectuer un zoom et une rotation en même temps, regardes du coté de la fonction

Code :

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

1
2
3
4
5
6
7
8
procedure PutImageAffine(Origin,HAxis,VAxis: TPointF; Source: TBGRACustomBitmap; AOutputBounds: TRect; AResampleFilter: TResampleFilter; AMode: TDrawMode; AOpacity: Byte=255); overload;
procedure PutImageAffine(Origin,HAxis,VAxis: TPointF; Source: TBGRACustomBitmap; AOutputBounds: TRect; AResampleFilter: TResampleFilter; AMode: TDrawMode; AOpacity: Byte=255); overload;
procedure PutImageAffine(Origin,HAxis,VAxis: TPointF; Source: TBGRACustomBitmap; AOutputBounds: TRect; AOpacity: Byte=255; ACorrectBlur: Boolean = false); overload;
procedure PutImageAffine(AMatrix: TAffineMatrix; Source: TBGRACustomBitmap; AOpacity: Byte=255; ACorrectBlur: Boolean = false); overload;
procedure PutImageAffine(AMatrix: TAffineMatrix; Source: TBGRACustomBitmap; AResampleFilter: TResampleFilter; AOpacity: Byte=255); overload;
procedure PutImageAffine(AMatrix: TAffineMatrix; Source: TBGRACustomBitmap; AResampleFilter: TResampleFilter; AMode: TDrawMode; AOpacity: Byte=255); overload;
procedure PutImageAffine(AMatrix: TAffineMatrix; Source: TBGRACustomBitmap; AOutputBounds: TRect; AResampleFilter: TResampleFilter; AMode: TDrawMode; AOpacity: Byte=255); virtual; abstract; overload;
procedure PutImageAffine(AMatrix: TAffineMatrix; Source: TBGRACustomBitmap; AOutputBounds: TRect; AOpacity: Byte=255; ACorrectBlur: Boolean = false); overload;

A l'aide des matrices tu pourras effectuer un zoom et une rotation

**Péhelji** · 28/11/2018, 19h01

Bonjour BeanzMaster,

Merci pour ces quelques recherches. Je me suis essayé avec PutImageAffine, mais je n'ai pas trouvé comment faire pivoter l'image à partir de son centre durant "l'affinage".

Code :

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
procedure TfrmMap.bgraMainRedraw(Sender: TObject; Bitmap: TBGRABitmap);
var
  LBGRATemp: TBGRABitmap;
  percent, ratio: single;
begin
  percent := (LBGRABase.Width / Bitmap.Width) / 100;
  ratio := tbZoom.Position * percent;
  LBGRATemp := TBGRABitmap.Create(LBGRABase.Width, LBGRABase.Height, BGRAWhite);
  try
    LBGRATemp.PutImageAffine(AffineMatrixScale(ratio, ratio) *
                             AffineMatrixRotationDeg(tbAngle.Position),
                             LBGRABase, tbOpacity.Position);
    LBGRATemp.Draw(Bitmap.Canvas, 0, 0);
  finally
    LBGRATemp.Free;
  end;
end;

**Péhelji** · 29/11/2018, 21h26

Bonsoir BeanzMaster,

Envoyé par Péhelji

J'en suis venu à penser qu'il valait mieux tourner l'image en premier pour ne pas perdre les parties de cette image qui sont dans les coins !

Je suis venu à bout de ce problème et à combiner les trois effets avec la procédure suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
  offsetX := round(((tbZoom.Position - 100) * LBGRABase.Width  div 2) / 100);
  offsetY := round(((tbZoom.Position - 100) * LBGRABase.Height div 2) / 100);
 
  LBGRATemp := TBGRABitmap.Create(LBGRABase.Width, LBGRABase.Height);
  try
    LBGRATemp.PutImageAngle(LBGRATemp.Width/2-0.5, LBGRATemp.Height/2-0.5, LBGRABase, tbAngle.Position,
                            LBGRABase.Width/2-0.5, LBGRABase.Height/2-0.5, tbOpacity.Position);
    rc := LBGRATemp.ClipRect;
    rc.Inflate(round(offsetX), round(offsetY));
 
    Bitmap.Canvas.CopyRect(Bitmap.ClipRect, LBGRATemp.Canvas, rc);
  finally
    LBGRATemp.Free;
  end;

Peut-être serait-il possible d'améliorer la fluidité du zoom en utilisant BGRAVirtualScreen ou encore BGRACanvas2D ?

J'ai trouvé de quoi plancher sur le sujet avec la démo LayerOriginal fournie avec BGRABitmap, et aussi celle postée ici par Circular.

**BeanzMaster** · 30/11/2018, 09h26

Salut,

je n'ai pas beaucoup de temps en ce moment et je n'utilise que très rarement BGRABitmap mais, pour ce qui est de la fluidité lis les tutoriels de Gilles,. Tu n'as pas vraiment besoin du BGRAVirtualScreen.
Le BGRACanvas2D c'est comme le TCanvas donc pas besoin dans ton cas.

Voila comment à fait Gilles pour la rotation et le zoom :

Code :

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
procedure TGVTransition.DoGrowCenterRotate(CCW: Boolean);
// *** GrowCenterCCWRotate et GrowCenterCWRotate ***
var
  LBGRATemp: TBGRABitmap;
begin
  LBGRATemp := fLBGRATo.Resample(
    ComputeInterpolationInt(C_MinResample, ClientWidth),
    ComputeInterpolationInt(C_MinResample, ClientHeight)) as TBGRABitmap;
  try
    fLBGRAFrom.PutImageAngle(ClientWidth / 2, ClientHeight / 2, LBGRATemp,
      ifthen(CCW, ComputeInterpolation(360, 0), ComputeInterpolation(-360, 0)),
      LBGRATemp.Width / 2, LBGRATemp.Height / 2,DestinationOpacity);
  finally
    LBGRATemp.Free;
  end;
end;

Moins de calcul déja ici

**Péhelji** · 01/12/2018, 07h03

Bonjour BeanzMaster,

J'ai téléchargé les tutoriels de Gilles et j'ai testé les démos et le test simple livré avec le tutoriel n°8. C'est pour le moins bluffant

!
C'est effectivement vers les transitions GrowCenter et GrowCenterCWRotate que je dois rechercher la solution à mon problème.
Quoique j'étais parvenu à une meilleure fluidité avec la séquence suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
  LBGRATemp := TBGRABitmap.Create(LBGRABase.Width, LBGRABase.Height{, BGRAWhite});
  try
    LBGRATemp.PutImageAffine(
      AffineMatrixScale(ratio, ratio) *
      AffineMatrixTranslation(LBGRABase.Width/2-0.5, LBGRABase.Height/2-0.5) *
      AffineMatrixRotationDeg(tbAngle.Position) *
      AffineMatrixTranslation(-LBGRABase.Width/2-0.5, -LBGRABase.Height/2-0.5),
      LBGRABase, tbOpacity.Position);
    LBGRATemp.Draw(Bitmap.Canvas, 0, 0);
  finally
    LBGRATemp.Free;
  end;

La rotation est nickel au centre du canvas... mais le zoom n'opère qu'à partir du coin supérieur gauche

!
Le nœud du problème se situe au niveau des paramètres passés à AffineMatrixTranslation. Je vais voir si les fonctions ComputeInterpolation des tutos ne seraient pas la solution.

Envoyé par BeanzMaster

Petite question que souhaites tu réaliser au final ? Une animation ? un mini-éditeur ?

Je travaille sur une application de cartographie et, dans un premier temps, je souhaite pouvoir ajuster des cartes de différentes tailles en les superposant (j'ai testé BGRALayers), chaque couche devant être modifiable par zoom, rotation, transparence et bien entendu déplacement.
Merci encore pour ta recherche et tes conseils.

**Péhelji** · 28/11/2018, 00h13

Bonsoir Tourlourou,

Envoyé par tourlourou

Gilles utilise un code un peu différent : présente-t-il le même inconvénient ?

J'avais repéré hier la série de tutoriaux de Gilles Vasseur (au demeurant bienvenus) mais n'avais pas eu le temps de les étudier en profondeur.
J'ai modifié la procédure principale de la façon suivante :

Code :

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
 
  LBGRATemp := TBGRABitmap.Create(imgResult.ClientWidth, imgResult.ClientHeight, BGRABlack);
  try
    fStep := 0;
    ratio := round((imgResult.Width / imgTo.Picture.Width) * 100);
 
    repeat //
      Inc(fStep);
 
      // traitement ici...
      LX := imgResult.ClientWidth div 2;
      LY := imgResult.ClientHeight div 2;
      LBGRATemp.PutImageAngle(LX, LY, fBGRATo, fStep, fBGRATo.Width div 2, fBGRATo.Height div 2, Opacity);
      LBGRATemp.Draw(imgResult.Canvas, 0, 0);
      Application.ProcessMessages;
      sleep(100 - fSpeed);
 
      //inc(ratio);
      BGRAReplace(fBGRATo, fBGRATo.Resample(fBGRATo.Width + 2, fBGRATo.Height + 2));
      fBGRATo.StretchPutImage(fBGRATo.ClipRect, fBGRATest, dmSet);
      //until (ratio = 100);
      until (fStep = 360);
  finally
    LBGRATemp.Free;
    btnGo.Enabled := True;
  end;

Tel quel, ce code redimensionne l'image d'origine (quel magnifique rouge-gorge !) tout en la faisant tourner par incrément d'un degré autour de son centre.
L'incrément de 2 dans la procédure Resample est arbitraire. Il est censé être remplacé par un pourcentage de la taille originale de l'image.
C'est dire que le code a encore besoin d'être amélioré

!
Merci pour ton aide.

Combiner zoom, rotation et transparence avec BGRABitmap [Lazarus]

Lazarus Pascal

Vue hybride

Discussions similaires

Partager

Partager