Rotations d'images décalées d'1 px

Version imprimable

Bonjour,

Je cherche actuellement à afficher des images (de 20x20px) sur lesquelles j'applique des rotations. (de 90, 180 ou 270°)
Cela fonctionne, mais ce n'est pas parfait, j'ai un décalage d'un pixel je pense dans certain cas.

C'est le code ci-dessous que j'utilise et qui me pose problème.

Code:

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 TRotImgs.FormShow(Sender: TObject);
var
  iDroit, iDroite(*, iGauche*), iTmp: TBGRABitmap;
  chemin: String;
begin
  // création des images
  fond := TBGRABitmap.Create(Panel1.Width, Panel1.Height, BGRAWhite);
 
  chemin  := Application.Location + 'imgs\';
  iDroit  := TBGRABitmap.Create(chemin + 'droit.png' );
  iDroite := TBGRABitmap.Create(chemin + 'droite.png');
  //iGauche := TBGRABitmap.Create(chemin + 'gauche.png');
  itmp    := TBGRABitmap.Create(20, 20, BGRA(0, 0, 0, 0));
 
  // chargement des images
  iDroite.Draw(fond.Canvas, 50, 50);
  TRotImgs.RotateImage(iDroit, iTmp, 2);
  iTmp.Draw(fond.Canvas, 50 + 20, 50);
 
  TRotImgs.RotateImage(iDroite, iTmp, 2);
  iTmp.Draw(fond.Canvas, 50 + 40, 50);
  TRotImgs.RotateImage(iDroit, iTmp, 3);
  iTmp.Draw(fond.Canvas, 50 + 40, 50 + 20);
 
  TRotImgs.RotateImage(iDroite, iTmp, 3);
  iTmp.Draw(fond.Canvas, 50 + 40, 50 + 40);
  TRotImgs.RotateImage(iDroit, iTmp, 4);
  iTmp.Draw(fond.Canvas, 50 + 20, 50 + 40);
 
  TRotImgs.RotateImage(iDroite, iTmp, 4);
  iTmp.Draw(fond.Canvas, 50, 50 + 40);
  iDroit.Draw(fond.Canvas, 50, 50 + 20);
 
  FreeAndNil(iDroit);
  FreeAndNil(iDroite);
  //FreeAndNil(iGauche);
  FreeAndNil(itmp);
end;
 
procedure TRotImgs.FormDestroy(Sender: TObject);
begin
  FreeAndNil(fond);
end;
 
procedure TRotImgs.Panel1Paint(Sender: TObject);
begin
  if (Assigned(fond)) then
    fond.Draw(Panel1.Canvas, 0, 0);
end;
 
class procedure TRotImgs.RotateImage(imgOrg, imgRot: TBGRABitmap; rot: Integer);
// rotation d'une image : 2 = 90 / 3 = 180 / 4 = 270
begin
  if (rot < 2) or (rot > 4) then Exit;
 
  imgRot.PutImageAngle(imgOrg.Width  div 2,
                       imgOrg.Height div 2,
                       imgOrg,
                       90 * (rot - 1),
                       imgRot.Width  div 2,
                       imgRot.Height div 2);
end;

Si des gens sont motivés, je peux mettre le projet à dispo.
c'est juste un projet de tests.

Savez-vous ce qui ne vas pas dans mon code, ou comment le corriger ?

Salut , Benoit

Citation:

Envoyé par benoit1024

Bonjour,

Je cherche actuellement à afficher des images (de 20x20px) sur lesquelles j'applique des rotations. (de 90, 180 ou 270°)
Cela fonctionne, mais ce n'est pas parfait, j'ai un décalage d'un pixel je pense dans certain cas.

Tu peux préciser les cas ?

sinon au 1er coup d'oeil
remplace
Code:

1 2 3 4 5 6 imgRot.PutImageAngle(imgOrg.Width div 2, imgOrg.Height div 2, imgOrg, 90 * (rot - 1), imgRot.Width div 2, imgRot.Height div 2);
Par
Code:

1 2 3 4 5 6 7 8 9 var SrcCenterX, SrcCenterY : Integer; SrcCenterX:=(imgOrg.Width div 2)-1; SrcCenterY:=(imgOrg.Height div 2)-1; imgRot.PutImageAngle((SrcCenterX, SrcCenter, imgOrg, 90 * (rot - 1), SrcCenterX, SrcCenterY);
Bon après je n'utilise pas assez BGRABitmap pour te le certifier. Mais pense que l’accès au pixels débutes à ZERO dans ton cas pour une image qui fais 20x20 tu accèdes aux pixels en x et y dans l’intervalle de 0 à 19 d'ou le -1

A+

Bonjour,

Je pense aussi que cela vient de ce problème.
Les images qui paraissent décalées sont en faite cette qui n'ont pas de rotation.

j'ai essayé de mettre -1 mais les écarts sont pires.
J'ai essayé de mettre -0.5 mais cela ne change rien.

La solution que j'ai trouvée est d'appliquer une rotation sur toutes les images, même celles déjà dans le bon sens mais avec un angle de 0.
J'obtiens ainsi bien l'image que j'attendais.

Code:

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
procedure TRotImgs.FormShow(Sender: TObject);
var
  iDroit, iDroite(*, iGauche*), iTmp: TBGRABitmap;
  chemin: String;
begin
  // création des images
  fond := TBGRABitmap.Create(Panel1.Width, Panel1.Height, BGRAWhite);
 
  chemin  := Application.Location + 'imgs\';
  iDroit  := TBGRABitmap.Create(chemin + 'droit.png' );
  iDroite := TBGRABitmap.Create(chemin + 'droite.png');
  //iGauche := TBGRABitmap.Create(chemin + 'gauche.png');
 
 
  // dessin des images
  iTmp := TBGRABitmap.Create(60, 60, BGRA(255, 0, 0));
  iTmp.Draw(fond.Canvas, 50, 50);
 
  FreeAndNil(itmp);
  itmp    := TBGRABitmap.Create(20, 20, BGRA(0, 0, 0, 0));
 
  TRotImgs.RotateImage(iDroite, fond, iTmp, 1, 50, 50);
  TRotImgs.RotateImage(iDroit,  fond, iTmp, 2, 50 + 20, 50);
 
  TRotImgs.RotateImage(iDroite, fond, iTmp, 2, 50 + 40, 50);
  TRotImgs.RotateImage(iDroit,  fond, iTmp, 3, 50 + 40, 50 + 20);
 
  TRotImgs.RotateImage(iDroite, fond, iTmp, 3, 50 + 40, 50 + 40);
  TRotImgs.RotateImage(iDroit,  fond, iTmp, 4, 50 + 20, 50 + 40);
 
  TRotImgs.RotateImage(iDroite, fond, iTmp, 4, 50, 50 + 40);
  TRotImgs.RotateImage(iDroit,  fond, iTmp, 1, 50, 50 + 20);
 
  FreeAndNil(iDroit);
  FreeAndNil(iDroite);
  FreeAndNil(itmp);
end;
 
procedure TRotImgs.FormDestroy(Sender: TObject);
begin
  FreeAndNil(fond);
end;
 
procedure TRotImgs.Panel1Paint(Sender: TObject);
begin
  if (Assigned(fond)) then
    fond.Draw(Panel1.Canvas, 0, 0);
end;
 
class procedure TRotImgs.RotateImage(src, dest, tmp: TBGRABitmap; rot, posX, posY: Integer);
// rotation d'une image : 1 = 0 / 2 = 90 / 3 = 180 / 4 = 270
begin
  tmp.PutImageAngle(src.Width   div 2 - 0.5,
                    src.Height  div 2 - 0.5,
                    src,
                    90 * (rot - 1),
                    tmp.Width  div 2 - 0.5,
                    tmp.Height div 2 - 0.5);
  tmp.Draw(dest.Canvas, posX, posY);
end;

13/06/2017, 18h00
Jipété

Bonsoir,

juste un mot :

Citation:

Envoyé par benoit1024

J'ai essayé de mettre -0.5 mais cela ne change rien.

C'est normal, tu travailles avec des entiers, donc il y a des chances pour que ton src.Width div 2 - 0.5 soit converti silencieusement en src.Width div 2 - 0.
Pas testé mais je sens bien ça comme ça.
14/06/2017, 00h31
BeanzMaster

1 pièce(s) jointe(s)

Resalut j'ai répondu vite cet après midi. Vérifies les dimensions de ton bitmap après rotation car regardes

Pièce jointe 285380
en noir surface virtuelle
rouge le dessin
en bleu lla dimension de la nouvelle surface

Donc soit BGRABitmap redimensionne ton bitmap soit tu te te retrouves avec une image tronquée.
14/06/2017, 07h31
Jipété

1 pièce(s) jointe(s)

Salut,

Citation:

Envoyé par BeanzMaster

Resalut j'ai répondu vite cet après midi. Vérifies les dimensions de ton bitmap après rotation car regardes

Pièce jointe 285380

Euh, y a pas une erreur, là ? :

Pièce jointe 285405 :koi:

Moi je vois plutôt une rotation à 45 °, :ptdr:

Et ce petit "c" au bout, il indique quoi ? Une température comme Celsius ? Je sais bien qu'il fait chaud en ce moment, mais quand même, :ptdr: :ptdr: :ptdr:
14/06/2017, 10h33
Invité

1 pièce(s) jointe(s)

je fais des rotations de 90, 180 ou 270°, la surface est donc la même.
BeanzMaster, on exemple est effectivement de 45° :)

Jipété, j'avais essayé de faire src.Width / 2 - 0.5, mais cela ne change rien non plus.

je vous poste mon projet de tests si vous souhaitez voir ce que cela fait exactement.
l'unité concernée est RotImgs.pas
14/06/2017, 10h56
Jipété

Citation:

Envoyé par benoit1024

Jipété, j'avais essayé de faire src.Width / 2 - 0.5, mais cela ne change rien non plus.

Oui, c'est bien ce que j'avais lu, ce que j'avais compris (ou cru comprendre) et ce à quoi j'ai répondu en disant que le compilo l'avait sans aucun doute traduit par src.Width / 2 - 0.0 d'où un résultat identique à src.Width / 2.

Me serais-je mal exprimé ?
14/06/2017, 11h51
anapurna

salut

en lisant ton code j'ai des sueurs froide :D
je vois pas l’intérêt de de faire rot-1
=> 0*90 = 0
=> 1*90 = 90
=> 2*90 = 180
=> 3*90 = 270
=> 4*90 = 360 =0
pour tes décalages posx,posy à quoi correspond les +20 + 40
a mon avis c'est là que le bas blesse
on sais qu'un segment mis en diagonal sa projection sur les axes x et y varie en fonction de l'angle
c'est le fameux triangle rectangle dans ton cas tu donne des valeurs arbitraire
14/06/2017, 14h26
Invité
anapurna,

L'idée initiale était d'avoir une fonction pour laquelle on passait un entier correspondant à la rotation à effectuer :
- 2 = 90°
- 3 = 180°
- 4 = 270°
Dans la fonction que fait donc une rotation de 90 * (rot - 1).

Le problème est que les images sans rotation sont décalées sur le rendu.
Je fais donc une rotation de 0° pour ne plus avoir ce décalage. On est bien d'accord que ce n'est pas très propre, mais cela me permet d'avoir un rendu correcte.

je cherche le moyen de faire de bonnes rotations pour résoudre ce décalage.
14/06/2017, 14h31
BeanzMaster

Oups desolé pour le 45° j'avais le point en haut à gauche dans la tête comme référence :pastaper:

[EDIT] Je suis tombé la dessus http://forum.lazarus.freepascal.org/....msg99866.html cela pourrais t'aider

Bonjour,

En relisant le code et la discussion, je crois voir plusieurs problèmes :

PutImageAngle admet des nombres de type single et non integer, ce qui laisse craindre des erreurs d'arrondi en utilisant div au lieu de / (Jipété a raison d'attirer l'attention sur le 0.5 qui ne sert à rien ou à accroître la confusion) ;
la procédure RotateImage est trop dépendante de données qu'elle peut créer elle-même (je pense à tmp par exemple) ;
la même procédure traite des problèmes qui ne sont pas de son ressort : pourquoi centrer l'image dans le canevas de destination alors que celui-ci ne sert que de transition vers le canevas final ? (il vaut sans doute mieux placer l'image en 0, 0 et la dessiner au bon endroit dans le canevas final) ;
il n'y a pas d'homogénéité des dimensions des différents canevas, ce qui ne peut que conduire à des distorsions.

Voici une réécriture possible d'une unité qui dessine les quatre orientations possibles sans perte :
Code:

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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 unit Unit1; {$mode objfpc}{$H+} interface uses Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, BGRABitmap, BGRABitmapTypes; type { TForm1 } TForm1 = class(TForm) procedure FormPaint(Sender: TObject); private procedure RotateImage(src, dest: TBGRABitmap; rot: Integer); public end; var Form1: TForm1; implementation {$R *.lfm} procedure TForm1.FormPaint(Sender: TObject); var iSrc, iDest: TBGRABitmap; begin // l'image de départ iSrc := TBGRABitmap.Create('essai.png'); try // l'image de destination avec la même taille que l'image source iDest := TBGRABitmap.Create(iSrc.Width, iSrc.Height); try // rotations et dessin sur le canevas final RotateImage(iSrc, iDest, 1); iDest.Draw(Canvas, 0, 10); RotateImage(iSrc, iDest, 2); iDest.Draw(Canvas, 100, 10); RotateImage(iSrc, iDest, 3); iDest.Draw(Canvas, 200, 10); RotateImage(iSrc, iDest, 4); iDest.Draw(Canvas, 300, 10); finally iDest.Free; end; finally iSrc.Free; end; end; // RotateImage est simplifiée : elle ne s'occupe pas du positionnement sur le canevas final qu'elle ne connaît pas. // Elle crée et détruit elle-même l'image temporaire avec les bonnes dimensions. procedure TForm1.RotateImage(src, dest: TBGRABitmap; rot: Integer); // rotation d'une image : 1 = 0 / 2 = 90 / 3 = 180 / 4 = 270 var Tmp: TBGRABitmap; begin Tmp := TBGRABitmap.Create(Src.Width, Src.Height, BGRABlack); try tmp.PutImageAngle(src.Width / 2, src.Height / 2, src, 90 * (rot - 1), tmp.Width / 2, tmp.Height / 2); tmp.Draw(dest.Canvas, 0, 0); finally Tmp.Free; end; end; end.
Il y a d'autres façons de traiter le problème (avec une fonction, par exemple), mais il me semble que le code est déjà plus clair et plus spécialisé.
De toute façon, l'image subit la bonne rotation, même sans appliquer une rotation initiale de 0 tout à fait arbitraire ;).