Créer un bouton rond

Bonjour tout le monde,

y a-t-il possibilité de modifier un bouton pour le rendre rond. Dans le style de l'écran d'acceuil de Windows 10 :

Pièce jointe 221433

Suis sous Builder Xe 10.

Merci d'avance

C'est trivial :mrgreen: :mrgreen:: Tu mets un TImage (ou autre Gr32_image::TImage32 par exemple) et avec la transparence et l'évènement OnClick/ OnMouseUp tu as un bouton rond.


Ensuite tu as la technique de coder un Component (et en surchargeant l'évènement OnPaint ou petit frère) et avec la couleur du parent tu as de la transparence.
Je te laisse chercher comment coder un Component avec C++ Builder.

en sachant que mon image est rectangulaire je sais pas si c'est possible de faire comme cela.

Mais je vais faire des recherches sur le codage d'un component

Tu es sérieux ou quoi :weird: :weird: :weird:

Vcl.ExtCtrls.TImage.Transparent

Citation:

---

Envoyé par LoicH

en sachant que mon image est rectangulaire je sais pas si c'est possible de faire comme cela.

Mais je vais faire des recherches sur le codage d'un component

---

Alors utilises un TCircle avec la propriété Fill->Bitmap....
Pour apprendre à développer il est indispensable d'avoir en parallèle un minimum de maitrise avec les logiciels d'infographie comme Photoshop, Illustrator ou Gimp....

Citation:

---

Envoyé par foetus

Tu es sérieux ou quoi :weird: :weird: :weird:

Vcl.ExtCtrls.TImage.Transparent

---

Tout d'abord désolé mais mes compétences sont limitées. Par contre je vois toujours pas comment d'une image rectangulaire en activant la transparence cette dernière devienne ronde :?:?:?:?

Citation:

---

Envoyé par yvslms

Alors utilises un TCircle avec la propriété Fill->Bitmap....
Pour apprendre à développer il est indispensable d'avoir en parallèle un minimum de maitrise avec les logiciels d'infographie comme Photoshop, Illustrator ou Gimp....

---

Je connaissais pas ce composant. Mais après quelques recherches il me semble qu'il n'hexiste pas dans la VCL. Pour se qui est du montage, j'ai quelques heures de vol sur photoshop. Le truc c'est que j'aimerais que l'utilisateur choisisse n'importe quelle photo et quelle soit rognée pour devenir ronde. Je peux donc pas la traiter sous photoshop vu que l'utilisateur fait se qu'il veut.

Petit montage d'exemple :

Pièce jointe 221633

Au final cela peut aussi être un TImage (ou équivalent) et pas forcément un bouton

Citation:

---

Envoyé par LoicH

Tout d'abord désolé mais mes compétences sont limitées. Par contre je vois toujours pas comment d'une image rectangulaire en activant la transparence cette dernière devienne ronde :?:?:?:?

---

C'est la dernière fois que je réponds parce qu'il te manque des compétences :aie: :aie:

Ton bouton sera rectangulaire, mais visuellement il sera rond.

Le petit problème c'est le curseur de la souris. Lorsque la souris passe sur le bouton il changera.
Mais il changera aussi dans les 4 coins (cercle [inscrit ???] dans un rectangle)

Pour ton problème c'est trivial :mrgreen: Il faut prendre ton image fichier et charger ton bouton en recopiant qu'un cercle (et à l'extérieur du cercle tu fais de la transparence en mettant la couleur du fond/ du parent)

Citation:

---

Envoyé par LoicH

Je connaissais pas ce composant. Mais après quelques recherches il me semble qu'il n'hexiste pas dans la VCL.

---

Désolé c'est effectivement uniquement sur la FMX...

Citation:

---

Envoyé par foetus

C'est la dernière fois que je réponds parce qu'il te manque des compétences :aie: :aie:

Ton bouton sera rectangulaire, mais visuellement il sera rond.

Le petit problème c'est le curseur de la souris. Lorsque la souris passe sur le bouton il changera.
Mais il changera aussi dans les 4 coins (cercle [inscrit ???] dans un rectangle)

Pour ton problème c'est trivial :mrgreen: Il faut prendre ton image fichier et charger ton bouton en recopiant qu'un cercle (et à l'extérieur du cercle tu fais de la transparence en mettant la couleur du fond/ du parent)

---

Alors je suis d'accord il me manque des compétences ... c'est justement pour cela que je demande de l'aide.

J'ai bien compris le principe pas de problème. Cependant je ne sais pas comment le faire. Mettre un cercle sur une image et rendre le reste transparent.

Je vais continuer à chercher c'est pas grave. Je trouverais bien :oops:

Merci en tout cas à tous

Salut !

Tu peux aussi dessiner directement sur la form via le Canvas.
Pour travailler un cercle on a besoin de :

Code:

---

1 2	TPoint Centre; // quelque part sur la surface de la form int Rayon; // comme son nom l'indique !

---

Si tu veux dessiner ce cercle, c'est un bout de code à placer dans la OnPaint de la form :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

Canvas->Pen->Style = psSolid; Canvas->Pen->Mode = pmCopy; Canvas->Pen->Color = ... une Couleur;   Canvas->Brush->Style = bsSolid; Canvas->Brush->Color = ... une autre couleur;   Canvas->Ellipse(Centre.x - Rayon, Centre.y - Rayon, Centre.x + Rayon, Centre.y + Rayon);

---

Si maintenant tu veux savoir si le curseur est positionné sur le cercle :
Le prototype est à déclarer dans la classe de la TForm

Code:

---

bool __fastcall CurseurSurLeCercle(int X, int Y);

---

La méthode qui peut être appelée dans la onMouseMove ou la OnMouseDown de la Form:

Code:

---

1 2 3 4 5

bool __fastcall TForm1::CurseurSurLeCercle(int X, int Y) { int d = hypot( X-Centre.x, Y-Centre.y); return (d < Rayon); }

---

Maintenant si on veut travailler avec un bitmap, voici un bout de code, à placer là encore dans
la OnPaint de la Form et qui va dessiner la partie centrale du bitmap dans le cercle sur la form :
On suppose quelque part un :

Code:

---

Graphics::TBitmap *Bitmap = NULL; // donc à initialiser

---

Le bitmap va être scanné de ligne en ligne et de pixel en pixel par ligne
Si le pixel est dans le cercle alors on le reporte dans le cercle graphique
Ici, on va dessiner la partie centrale du bitmap (sinon il faudrait rajouter un offset... et faire quelques petits calculs supplémentaires).

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

int h; // distance du pixel par rapport au centre du bitmap int he, we; // hauteur et largeur du bitmap en termes de pixels int cx, cy; // centre du bitmap en termes de pixels int x,y; // compteurs pixels et lignes int rx, ry; // positions relatives du pixel par rapport au centre du bitmap   if(Bitmap != NULL) // on ne sait jamais !!! { // donc ici on initialise ce qui peut l'être we = Bitmap->Width; cx = we / 2; he = Bitmap->Height; cy = he / 2;   // et on déroule le scan for(y=0; y < he; y++) { ry = y - cy; // position relative en y des pixels pour cette ligne for(x = 0; x < we; x++) { rx = x - cx; // position relative en x pour le pixel h = hypot(rx,ry); // distance du pixel par rapport au centre // inclure math.h pour hypot// if(h < Rayon) // on rogne ce qui doit l'être { Canvas->Pixels[Position.x + rx] [Position.y + ry] = Bitmap->Canvas->Pixels[x][y]; } } } }

---

A vérifier et à tester (c'est ce que j'aurais développé jadis)!

Donc testé sur mon vieux portable avec BCB 3 Pro donc ...

A plus !

Merci henderson, je vais essayer ta méthode.

Ça me donne déjà un axe de recherche c'est déjà pas mal ;-)

Citation:

---

Envoyé par LoicH

Ça me donne déjà un axe de recherche c'est déjà pas mal ;-)

---

Désolé, mais t'es vraiment une quiche qui comprend que dalle :aie: :aie:. Surtout qu'il n'y a rien de sorcier parce que ce sont les bases, mais les bases les plus terre-à-terre

Parce henderson a donné un bout de code sur ce que j'avais dit le 30 septmebre 2016

Citation:

---

Envoyé par foetus

Pour ton problème c'est trivial :mrgreen: Il faut prendre ton image fichier et charger ton bouton en recopiant qu'un cercle (et à l'extérieur du cercle tu fais de la transparence en mettant la couleur du fond/ du parent)

---

Donc tu attends du code tout prêt :roll: :roll:

Citation:

---

Envoyé par foetus

Désolé, mais t'es vraiment une quiche qui comprend que dalle :aie: :aie:. Surtout qu'il n'y a rien de sorcier parce que ce sont les bases, mais les bases les plus terre-à-terre

Parce henderson a donné un bout de code sur ce que j'avais dit le 30 septmebre 2016


Donc tu attends du code tout prêt :roll: :roll:

---

Je vais peut être te décevoir mais tout le monde n'est pas programmeur dans la vie... et c'est pour cela que je demandais de l'aide ... sur un forum "d'entraide". Car c'est bien beau de me dire que c'est simple à faire, que je suis une quiche alors que ta contribution était de me dire de prendre l'image et mettre un cercle ...Excuse moi mais pour avoir un bouton rond je m'en doutais qu'il fallait mettre un cercle :calim2: Si ton but est de te la péter car tu sais programmer je vais te dire tant mieux pour toi, je te félicite.
Heureusement que pour les personnes qui ne sont pas des pros comme moi, il reste des personnes plus compréhensibles et qui apportent réellement leur aide.

Pour que tu comprenne mieux :

Tu crée une image carrée avec transparence (canal Alpha). Le fond de cette image sera donc transparent. Dans cette image, tu dessines ton rond. Tu fais en sorte que ton image soit carrée et soit juste assez grande pour contenir ton rond de façon à éviter l'effet décrit par Foetus lors du clic.

Pour créer une image transparente avec Gimp : https://doc.ubuntu-fr.org/tutoriel/c...rent_avec_gimp

Ensuite voir post #2

Salut !

Citation:

---

Envoyé par chrtophe

Pour que tu comprenne mieux :

...
Ensuite voir post #2

---

Heureusement que je n'ai pas proposé du code à base de HBITMAP et HDC ! :mouarf:
Oh pardon, j'avais oublié que ces notions là sont totalement "transparentes" en bureautique ! :mrgreen:
Donc à mon tour je redeviens transparent ... donc bonne continuation ! Et ça vaut pour tout le monde ici ! :bravo: