Discussion :

[LoicH]

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 :



Suis sous Builder Xe 10.

Merci d'avance

[foetus]

C'est trivial : 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.

[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

[foetus]

Tu es sérieux ou quoi

Vcl.ExtCtrls.TImage.Transparent

[yvslms]

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....

[LoicH]

Tu es sérieux ou quoi

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

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 :



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

[foetus]

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

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 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)

[yvslms]

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...

[LoicH]

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

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 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

Merci en tout cas à tous

[henderson]

Salut !

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

Code :

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

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 :

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

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 :

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

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 :

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

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 :

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

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 :

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
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 !

[LoicH]

Merci henderson, je vais essayer ta méthode.

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

[foetus]

Ç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 . 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

Pour ton problème c'est trivial 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

[LoicH]

Désolé, mais t'es vraiment une quiche qui comprend que dalle . 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

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 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.

[Christophe]

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

[henderson]

Salut !

Pour que tu comprenne mieux :

...
Ensuite voir post #2

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