Discussion :

[Coussati]

salut

je suis entrain de travailler sur un jeu de carte et pour le moment, l'interface de l'utilisateur ressemble à ça :





c'est à dire que les cartes s'affiche dans des Timage côte à côte

mais voilà que j'aimerais faire quelque chose de plus sympa, en affichant les images dans ce genre :









je suis ouvert à toute proposition, même payant si c'est efficace (composant spécial)

sachant que je dois cliquer sur l'image pour sélectionner un carte

avez vous des idées sur le sujet ?

[Paul TOTH]

Voir ceci
http://www.delphiarea.com/products/d...s/rotateimage/

sinon je suis prestataire

NB: sous Firemonkey c'est natif

[Coussati]

salut Paul

comme toujours tes réponses sont toujours intéressante; et à vrai dire j’espérais que tu répondes :p

j'ai jeté un coup d’œil du coté de TrotateImage, et ça fonctionne assez bien

par contre j'ai un pti soucis :

la taille du TrotateImage doit être toujours plus grand que l'image en elle même, sinon lorsqu'on manipule l'image à certain moment, certain côtés seront masqué

mon problème est donc que si un utilisateur clique sur le TrotateImage dans les espaces vides, l'action se déclenchera

une idée pour esquiver se problème ?

[Paul TOTH]

salut Paul

comme toujours tes réponses sont toujours intéressante; et à vrai dire j’espérais que tu répondes :p

j'ai jeté un coup d’œil du coté de TrotateImage, et ça fonctionne assez bien

par contre j'ai un pti soucis :

la taille du TrotateImage doit être toujours plus grand que l'image en elle même, sinon lorsqu'on manipule l'image à certain moment, certain côtés seront masqué

mon problème est donc que si un utilisateur clique sur le TrotateImage dans les espaces vides, l'action se déclenchera

une idée pour esquiver se problème ?

une solution très simple à ce problème est de regarder la couleur du pixel sous la souris...si l'est vert tapis, ce n'est pas une carte

de façon générale, si ce n'est pas suffisant, il suffit de créer un bitmap hors écran de la taille de l'écran, de le remplir d'une couleur et de tracer les cartes dans une couleur différence chacune, le pixel aux coordonnées de la souris donnera automatiquement la carte cliquée.

une autre approche possible est mathématique, on connait la position des carte, leurs dimensions, et leur angle de rotation; détermine si un point est à l'intérieur ou non c'est juste un peu de mathématiques.

[Andnotor]

En 32 bits, il faudra plutôt contrôler l'image elle-même pour savoir si on est sur un pixel transparent ou non
Sinon, passer par GDI+. Créer une région avant rotation, elle devrait ensuite suivre la même transformation. Alors en GDI, plus qu'à contrôler que le point soit dans la région.

[Coussati]

Andnotor, contrôler le pixel, c'est un peu la première idée de Paul ? ou tu parles d'autre chose ? GDI+ je ne connais pas, je peux jetter un coup d’œil ...


Paul, remplir le Timage d'une couleur quelconque qui n’apparaît dans aucune carte, et définir la transparence, oui c'est cette idée qui m'étais venu à l'esprit au début, et dessiner la carte directement incliné ... ça supposera que pour chacune des cartes en main, il faudra un exemplaire incliné de toute les cartes du jeu :/

alors je pense qu'utiliser le TrotateImage me permettra d'avoir un seul exemplaire de chaque carte

Code :

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

1
2
 
Image1.Canvas.Pixels[x, y];

est ce suffisant pour savoir si la couleur est celle d'une carte ou la transparence ?

en même temps plus je pense à ta proposition d'utiliser les maths, et plus je me dis que ce n'est peut être pas si compliqué que ça ? s'il n'y avait pas inclinaison je dirais banco, mais avec cette histoire d'angle, j'essais d'éviter le sujet

[Gilbert Geyer]

Salut Jeff,

A mon avis (j'aime les choses simples) le plus simple c'est :
- effectivement d'utiliser le TrotateImage qui te permettra d'avoir un seul exemplaire de chaque carte,
- de donner au "blanc" de chacune des cartes un epsilon de différence : 52 cartes / 3 = 17,33
exemple :
- on diminue le bleu sur les 17 premières cartes carte n° 1 RGB(255,255,255), carte n° 2 RGB(255,255,254), carte n° 3 RGB(255,255,253), etc
- on diminue le vert sur les 17 cartes suivantes carte n° 18 RGB(255,254,255), carte n° 19 RGB(255,253,255), carte n° 20 RGB(255,252,255), etc
- on diminue le rouge sur les 18 cartes suivantes carte n° 35 RGB(254,255,255), carte n° 36 RGB(253,255,255), carte n° 37 RGB(252,255,255), etc
ces différences de nuance sont indécelables à l'œil nu, mais ton Image1.Canvas.Pixels[x, y] reconnaîtra les différences et saura sur quelle carte on a cliqué.
c'est beaucoup plus simple que la solution des maths avec le régions.

Après avoir donné au "blanc" des cartes ces epsilon de différence vérifier dans l'angle inférieur gauche en 0,Height-1 qu'elles y comportent toutes la même couleur de transparence et que les parties à rendre transparentes sur les cartes inclinées comportent cette même couleur.

Quant à GDI+ c'est génial pour faire par exemple du traitement d'images sophistiqué ... mais pour des cartes à jouer une routine de rotation d'image c'est largement suffisant.

A+.

[Coussati]

salut Gilbert comment vas tu ?

mon problème ne se situe pas au niveau de l'identification d'une carte, elles sont numéro depuis la propriété tag

le soucis, c'est que le curseur de la souris prend la forme d'une main au passage sur une carte

je compte prendre une couleur de transparence, par exemple du jaune ou du rose (une couleur qui n’apparaît pas sur les cartes)

imagine une carte incliné dans un Timage qui aura forcément la forme d'un rectangle, il y aura des bouts, ceux qui seront transparent; et bien au passage de la souris sur ces bouts) pour l'utilisateur c'est du vide, mais comme c'st le composant, la souris se transformera en main

alors c'est ce que je veux empêcher : faire en sorte qu'au passage et au clique dans le vide (qui est toujours le Timage) qu'il n'y ait aucune exécution

dernière chose : j'ai testé rapidement, mais j'espère qu'après rotation l'image ne perd pas de sa qualité

[Coussati]

la décision est tombé !

je ne suis pas fier, mais je dois abandonner le composant Trotateimage

c'était trop beau, trop simple, mais je relève 2 beugs :

1/ l'image une fois incliné, perd en qualité

2/ en cherchant la couleur des pixels (CouleurPixel:=RotateImage1.Canvas.Pixels[x,y] il y a un vilain problème : je ne sais pas comment expliqué mais l'expliquer, mais les pixels ne se détecte pas correctement, on dirait même qu'il fait comme si l'image n'était pas incliné



en haut à droite, c'est l'image d'origine

autre idée ? :/

[Paul TOTH]

à mon avis déjà tu laisse tomber l'idée d'un composant par carte. Tu dessine simplement tes cartes sur un Bitmap avec une méthode ou une autre, si tu veux changer l'aspect de la souris tu le gères sur OnMouseMove tout simplement (en fonction de la couleur du pixel sous la souris). Pour le problème d'antialiasing, GDI+ et Graphics32 le gèrent sans problème.

[Gilbert Geyer]

Bonjour,

Coussati : salut Gilbert comment vas tu ?

Bien, merci, et toi ?

mon problème ne se situe pas au niveau de l'identification d'une carte, elles sont numéro depuis la propriété tag

Oui ... mais le tag du TImage est détecté même lorsque l'on clique en-dehors d'une carte inclinée dans une partie transparente.

le soucis, c'est que le curseur de la souris prend la forme d'une main au passage sur une carte

Bof, c'est plus un soucis si, comme le dit Paul TOTH, tu changes l'aspect de la souris dans le OnMouseMove.

je compte prendre une couleur de transparence, par exemple du jaune ou du rose (une couleur qui n’apparaît pas sur les cartes)
imagine une carte incliné dans un Timage qui aura forcément la forme d'un rectangle, il y aura des bouts, ceux qui seront transparent; et bien au passage de la souris sur ces bouts) pour l'utilisateur c'est du vide, mais comme c'st le composant, la souris se transformera en main
alors c'est ce que je veux empêcher : faire en sorte qu'au passage et au clique dans le vide (qui est toujours le Timage) qu'il n'y ait aucune exécution

Bin, pour empêcher ceci il suffit d'ajouter dans le OnMouseDown un test if Pixels[x,y] = CouleurTransparente then Execute := False;

dernière chose : j'ai testé rapidement, mais j'espère qu'après rotation l'image ne perd pas de sa qualité

Quelle que soit la technique utilisée, lorsqu'on incline une droite initialement horizontale ou verticale et bien nette, on perd toujours plus ou moins en qualité y compris en y appliquant l'antialiasing car celui-ci consiste consiste à mettre un peu de flou dans les coins des escaliers.

2/ en cherchant la couleur des pixels (CouleurPixel:=RotateImage1.Canvas.Pixels[x,y] il y a un vilain problème : je ne sais pas comment expliqué mais l'expliquer, mais les pixels ne se détecte pas correctement, on dirait même qu'il fait comme si l'image n'était pas incliné

Bin, c'est que tu as effectué des rotations sans ajouter de l'antialising.

autre idée ?

Pour commencer je remplacerais le contour noir de tes cartes par un trait gris comme celles-ci car c'est ton contour noir qui rend l'effet d'escaliers nettement visible :



A+.

[Coussati]

salut

Paul j'ai déjà conçu mon programme avec un composant par carte, je fais pas mal de vérification et traitement, je n'ai pas encore la force de remettre cette partie en question

peut être que je le ferai plus tard si c'est vraiment avantageux

Gilbert tu m'as convaincu de continuer avec TrotateImage ! avec plusieurs tests et en changeant l'image notamment, ça commence à prendre forme

pour faire rapide : le curseur de mon image devient une main lorsque la carte peut être joué (toutes les cartes ne sont pas jouable selon la situation)

afin d'éviter ce qu'on peut voir sur l'image ci dessous : une main dans le vide, alors que la souris n'est même pas sur la carte, je dois faire une vérification du pixel dans le OnMouseMove (ça je l'ai compris) et je l'ai déjà fait avec un Timage

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var
CouleurPixel: TColor;
begin
 
  CouleurPixel:=Image1.Canvas.Pixels[x,y];
 
   if ( ColorToString(CouleurPixel) = '$FFFFFFFF') then  Image1.Cursor := crdefault else Image1.Cursor := crHandPoint;
 
 
   memo1.Lines.Add(ColorToString(CouleurPixel)) ;
 
end;

pour infos "$FFFFFFFF" représente la couleur du Timage lorsque le Timage est plus large que l'image et que donc la partie est vide : en gros ça représente les parties vides, qui ne sont pas comblé par l'image qui sera placé dans le Timage

j'ai mis un memo pour justement contrôler les couleurs

encore une fois pour un Timage ça marche bien, par contre le TrotateImage c'est différent

vous verrez sur mon screen ci dessous, que clwhite apparait dans le Tmemo alors qu'on n'est pas sur du blanc : le pixel sous la souris est donc faux !

je ne sais pas si vous aviez compris que c'était ça mon problème, si oui il me semble que le mot qui revient est : antialising

mais je ne comprends rien à ça

que dois je donc faire pour que les pixels sous la souris me donne la bonne couleur ?

concernant les TrotateImage, je les affiche sur la fiche et je modifie juste la propriété angle afin de choisir l'inclinaison qu'aura l'image une fois chargé



P.S : la capture ne prend pas en charge la souris, j'ai donc mis un X bleu la ou le curseur de la souris est une main pour l'exemple

[Paul TOTH]

bon, mis à part que ceci me choque un peu ColorToString(CouleurPixel) = '$FFFFFFFF', ceci CouleurPixel := $FFFFFFFF (EDIT: "=" et non ":=" évidemment) suffira

il faut utiliser l'image dans RotatedBitmap qui est le Bitmap après rotation, tu peux t'amuser à l'afficher d'ailleurs

Code :

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

1
2
3
4
5
 
procedure TForm1.PaintBox2Paint(Sender: TObject);
begin
  PaintBox2.Canvas.Draw(0, 0, RotateImage1.RotatedBitmap);
end;

d'autre part TRotateImage utilise StrechDraw, donc si tu utilises des images de plus grande taille cela devrait limiter l'effet de pixellisation des bords (encore que StrechDraw ne fait pas d'antialiasing, donc ça peut aussi baver...)

[Andnotor]

Un TImage posé sur un TPanel (pour avoir un handle) et une région appliquée au panel...

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
procedure TForm1.FormCreate(Sender: TObject);
var
  Rgn :hRgn;
  Pts :array[0..3] of TPoint;
 
begin
  Image1.Cursor := crHandPoint;
 
  Pts[0].X := 0;
  Pts[0].Y := 40;
  Pts[1].X := 40;
  Pts[1].Y := Image1.Height;
  Pts[2].X := Image1.Width;
  Pts[2].Y := Image1.Height -40;
  Pts[3].X := Image1.Width -40;
  Pts[3].Y := 0;
 
  Rgn := CreatePolygonRgn(Pts, Length(Pts), WINDING);
 
  SetWindowRgn(Panel1.Handle, Rgn, TRUE);
end;

...et tous tes problèmes se résoudront d'eux-mêmes

encore que StrechDraw ne fait pas d'antialiasing

On peut passer par StretchBlt en appelant SetStretchBltMode(..., HALFTONE) avant.

[Andnotor]

Le test de couleur serait plutôt :

Code :

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

CouleurPixel and $FFFFFF = $FFFFFF

[Coussati]

salut

me revoilà après quelques tests :/

Andnotor je n'ai pas encore vérifier ton code, mais Paul j'ai essayé ce que tu dis, je vois bien ce qu'il y a dans le TRotadeImage se reproduire dans le paintbox, mais au final pour faire quoi ?

avoir plus paintbox ?

je continue mon acharnement sur le TrotateImage parce que j'arrive enfin facilement à mettre mes images comme je le souhaite

mais encore le problème de pixel existe ! je vous ai fait un petit shéma pour expliquer :



les mesures ne sont pas exacte, j'ai fais rapidement

sur les 2 images, le pixel (1.1) est rouge ! alors qu'on devrait avoir couleur jaune pour l'image de gauche

c'est donc qu'il considère l'image comme s'il était placé dans un Timage :/

je commence à désespérer de régler ce problème de pixel :s et je me demande si je ne devrais pas faire comme Paul a proposé, en passant par les maths :/

est ce vraiment possible de faire une fonction qui prend en compte la taille du Trotateimage, ainsi que l'image en elle même avec l'angle de rotation ?

je pense que c'est facile à faire si l'image n'avait pas d'inclinaison, mais autrement :/

[Paul TOTH]

sur les 2 images, le pixel (1.1) est rouge ! alors qu'on devrait avoir couleur jaune pour l'image de gauche

comment lis tu ces deux pixels ? car dans RotatedBitmap il n'est clairement pas rouge.

[Coussati]

comment lis tu ces deux pixels ? car dans RotatedBitmap il n'est clairement pas rouge.

je récupère la couleur d'un pixel ainsi : Canvas.Pixels[x,y];

mais j'ai du me tromper en faite, toujours est il que les couleurs de pixel ne sont pas respecté (je ne sais pas vraiment quel décalage, ou et comment, mais il n'est pas respecté :/ après rotation)

bref, j'ai un plus gros soucis là, et je me demande si je ne serai pas obliger d'abonner l'idée de un compo par image (carte)

PAUL c'est un peu ce que tu avais proposé non ? je suis prêt à t'écouter si tu as une idée

pourquoi ma résignation ? je viens de m’apercevoir que même si j'arrive à régler le curseur, comme il faut, je buterai sur autre chose :

les composants Trotate (ou autre si j(utilise un par image) sont posé sur la fiche un à côté de l'autre, plus, sont superposé un sur l'autre avec un décalage bien sûr) et alors lorsque je vais vouloir cliquer sur une carte qui n'est pas au 1er plan dans l'éventail, ça ne sera pas possible vu que je serai toujours sur le compo d'une autre carte

je ne sais pas si vous m'avez compris, je peux faire une capture pour mieux expliquer

la nouveauté par rapport à hier, c'est que je suis moins abattu, et prêt à retravailler mon code si je dois tous déssiner sur le même compo

[Gilbert Geyer]

Bonjour,

Problème du RotateImage1.Canvas.Pixels[x,y] : réglé avec cette fonction :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function ScreenPixelMousePos: TColor;
// Renvoie la couleur du point de l'écran sous la souris même hors fiche
var Dc: HDC;
begin
  DC := CreateDC('DISPLAY', nil, nil, nil);
  try
    Result := GetPixel(DC, Mouse.CursorPos.X, Mouse.CursorPos.Y);
  finally
    DeleteDc(DC);
  end;
end;

Pour plus de détails voir ZIP ci-joint :

A+.

EDIT : Remarques sur le contenu du ZIP ci-joint :
- Pour re-compiler le code il faut au préalable installer le composant "Rotate Image Component" téléchargeable sur le lien cité par Paul Toth celui-ci : http://www.delphiarea.com/products/d...s/rotateimage/
- Sinon, on peut se contenter d'examiner le code et d'en tester les résultats en activant l'EXE présent dans le ZIP.
- Pour l'instant seule l'identification de la carte pointée par la souris donne satisfaction, reste à améliorer le fonctionnement du déplacement et de la rotation d'une carte par ripage avec la souris, en attendant de savoir si Coussati souhaite permettre à l'utilisateur de positionner lui-même ses cartes à l'aide de la souris ???

A+.

[Paul TOTH]

Bonjour, voici la technique que j'évoquais plus haut, j'utilise GDI+ mais la même chose pourrait être faite en GDI, Graphics32, OpenGL...

cochez la checkbox pour voir le bitmap de détection des pixels




Cartes.zip