Discussion :

[sebbur]

Bonjour à tous,

J'ai récemment commencé à programmer en c# et j'aimerai savoir comment afficher les axes X et Y dans une pictureBox.

J'aimerai également placer une checkBox qui permettrait d'afficher ou d'enlever ces deux axes.

Merci pour votre aide.

[theMonz31]

Bonjour

Il n'y a pas d'axe dans une pictureBox...

donc, si tu veux dessiner des axes, il faut faire un usercontrol dans lequel tu géreras toi même le dessin (le paint).

Ou sinon te tourner, si tu veux afficher des courbes vers le Graph Control de microsoft qui sont dédiés à l'affichage de courbes, etc...

[sebbur]

Je te remercie de ta réponse rapide.

Donc le UserControl je peux l'intégrer dans la pictureBox par après ?
Et comment je peux dessiner les axes dans le UserControl ?

Merci de ton aide.

[theMonz31]

Non,

tu te fais ton propre user control qui dans la méthode OnPaint() qui sera surchargé fera le dessin des Axes mais aussi de l'image.

Genre un truc comme:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
........OnPaint(object sender, ...) // j'ai plus les arguments en tete de la méthode OnPaint()
{
    Graphics g = e.Graphics // (e etant un paramètre passée à OnPaint() par le système
    g.clear(Color.White);
    // Dessine un axe
    Pen p = new Pen(Color.Black);
    g. DrawLine(p, 0,this.Height-5,this.Width, this.Height-5); // axe X, le -5 pour ne pas être sur le bord
    g.DrawLine(p, 0+5, 0, 0+5,  this.Height);
    g. DrawBitmap(TonImage, 0,0);
}

Voilà, j'ai fait du "pseudo code" car je n'avais pas Visual studio sous la main mais ça devrait t'aider !!!

[sebbur]

Merci pour l'aide !

J'ai testé mais il me dit que 'Graphics' ne contient pas de définition pour 'clear' et pour 'DrawBitmap'.

Voici mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
protected override void OnPaint(PaintEventArgs e) 
        {
            Graphics g = e.Graphics; // (e etant un paramètre passée à OnPaint() par le système
            g.clear(Color.White);
            // Dessine un axe
            Pen p = new Pen(Color.Black);
            g.DrawLine(p, 0, this.Height - 5, this.Width, this.Height - 5); // axe X, le -5 pour ne pas être sur le bord
            g.DrawLine(p, 0 + 5, 0, 0 + 5, this.Height);
            g.DrawBitmap(pictureBox1, 0, 0);
        }

[jopopmk]

Salut,

le code de Monz est un "pseudo code", il a été fait à la volée pour t'orienter
* la méthode Clear() prend une majuscule,
* la méthode DrawBitmap() fait, à mon avis, référence à DrawImage().

La fiche MSDN de la classe Graphics.

[sebbur]

Je te remercie pour tes indications.

Je vais potasser tout ça, et je vous en donnerai des nouvelles

[sebbur]

J'ai essayé le code ci-dessous, mais il ne se passe rien.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
protected override void OnPaint(PaintEventArgs e) 
        {
            Image monImage = Image.FromFile("Capture2.bmp");
            Graphics g = e.Graphics; // (e etant un paramètre passée à OnPaint() par le système
            g.Clear(Color.White);
            // Dessine un axe
            Pen p = new Pen(Color.Black);
            g.DrawLine(p, 0, this.Height - 5, this.Width, this.Height - 5); // axe X, le -5 pour ne pas être sur le bord
            g.DrawLine(p, 0 + 5, 0, 0 + 5, this.Height);
            g.DrawImage(monImage, 0, 0);
        }

J'ai regardé sur MSDN et sur Internet mais je n'ai pas trouvé grand chose pour afficher des axes..

Désolé de vous déranger et je vous remercie de votre aide !

[jopopmk]

Ton image serait-elle toute blanche ?
A noter d'ailleurs que tu devrais la dessiner en premier, sinon elle recouvrira tes draw précédents (tes lignes).

[MABROUKI]

bonjour

Pour montrer ou cacher les axex le dessin doit etre fait sur la surface du control Picbox dans son event Paint avec par exemple un checkbox....Tout dessin sur la surface du control n'altere pas l'image (n'est pas persiste sur l'image)....

Le dessin sur l'image ou bitmap doit etre gere à part car il altere l'image (si le but est de persister la bitmap avec les dessins rajoutes)...et la prop SizeMode du picbox doit etre sette soit sur:
- PictureBoxSizeMode.StretchImage
soit :
- PictureBoxSizeMode.AutoSize;

exemple code sur l'image du Koala:

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
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
81
82
83
84
85
86
87
88
89
90
91
92
 
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
 
namespace WinCustomCaret
{
    public partial class Form3 : Form
    {
 
        private Image monImage = null;
        private Graphics gr = null;
        public Form3()
        {
            InitializeComponent();
            pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
 
        }
        private void Form3_Load(object sender, EventArgs e)
        {
            monImage = WinCustomCaret.Properties.Resources.Koala;
            pictureBox1.Image = monImage;
        }
 
        //dessine sur le bitmap
         private void button1_Click(object sender, EventArgs e)
        {
             DessineSurBitmap();
        }
 
        //montre-cache les Axes
        private void checkBox1_CheckedChanged(object sender, EventArgs e)
        {
            //dessine sur le control picbox non le bitmap
            //n'altere pas l'image
            pictureBox1.Invalidate();
        }
 
        private void pictureBox1_Paint(object sender, PaintEventArgs e)
        {
            Graphics gr = e.Graphics;
            // enlever le gr.clear 
 
            // Dessine  axe des X sur l'avant plan (foreground)
            if (checkBox1.Checked)
            {
                using (Pen penAxe = new Pen(Color.Yellow, 2.0f))
                {
                    gr.DrawLine(penAxe, 0,pictureBox1.Height - 5,
                        pictureBox1.Width, pictureBox1.Height - 5); // axe X, le -5 pour ne pas être sur le bord
                    gr.DrawLine(penAxe, 0 + 5, 0, 0 + 5, pictureBox1.Height);
 
                }
            }
 
        }
        // Dessine  sur la bitmap ce qui pemet de persister le dessin
        // avec pictureBox1.Image.Save
        private void DessineSurBitmap()
        {
            if (monImage == null) return;
            Rectangle rect = Rectangle.Empty;
            using (Graphics gr = Graphics.FromImage(monImage))
            {
 
                rect = new Rectangle(50, 75, 300, 200);
                gr.DrawRectangle(Pens.White, rect);
 
                rect = new Rectangle(80, 120, 300, 400);
                gr.DrawEllipse(Pens.White, rect);
 
                Point P1 = new Point(100, 60);
                Point P2 = new Point(25, 350);
                gr.DrawLine(Pens.White, P1, P2);
 
            }
 
 
 
            pictureBox1.Image = monImage;
 
            //pictureBox1.Image.Save( cheminstring); ;
        }
 
 
    }
}

bon code....

[sebbur]

jopopmk : Oui mon image est blanche, rien n'apparaît :/

Mabrouki : Je te remercie pour ton aide et tes conseils. Je vais tester le code et regarder tout ça. Ensuite, je vous tiendrai informé du résultat !

Merci à tous

[sebbur]

Rebonjour à tous,

Mabrouki : Je te remercie encore une fois pour ton code, mais je n'ai juste pas compris ce que c'est " WinCustomCaret " et à quoi il sert.

Merci d'avance,

Sebbur

[MABROUKI]

bonjour
c'est simplement le nom du projet visual csharp que j'ai utilise dans une autre post à un member du forum qui voulait modifier le Caret (le curseur de saisie)d'un Textbox !!!

Pour aller vite ,je recycle tout ,le recyclage etant de mode !!!

[sebbur]

D'accord je te remercie, je n'avais pas bien compris !
C'est bien le résultat que je voulais obtenir donc merci encore à tous de m'avoir aidé !

Et une petite dernière question. Est-ce que c'est possible d'avoir le même résultat en fonction de la taille de la pictureBox, c'est-à-dire que si on applique un zoom in/out les axes se déplacent également ?

Merci d'avance pour vos réponses et vos aides !

[MABROUKI]

re

Et une petite dernière question. Est-ce que c'est possible d'avoir le même résultat en fonction de la taille de la pictureBox, c'est-à-dire que si on applique un zoom in/out les axes se déplacent également ?

Tu veux dire que les axes se deplacent avec ton image ? Alors il faut avoir :
- la prop PicBox.SizeMode = PictureBoxSizeMode.Normal
- ne pas utiliser la prop PictureBox.Image
- dessiner les axes sur un 2eme Bitmap (BmpAxis) de meme taille que ton image...
- Dessiner monImage SUIVI de BmpAxis (dans cet ordre ) sur la Surface du Control picbox ...

code revu avec zomm:

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
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
 
 
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Drawing.Drawing2D;
 
namespace WinCustomCaret
{
    public partial class Form6 : Form
    {
        private Image monImage = null;
        private Image bmpAxis = null;
 
        private Rectangle rectImage = Rectangle.Empty;
 
        public Form6()
        {
            InitializeComponent();
            pictureBox1.SizeMode = PictureBoxSizeMode.Normal  ;//normal
            pictureBox1.MouseWheel += new MouseEventHandler(pictureBox1_MouseWheel);
        }
 
 
        private void Form6_Load(object sender, EventArgs e)
        {
            monImage = WinCustomCaret.Properties.Resources.Koala;
            bmpAxis = new Bitmap(monImage.Width, monImage.Height);
            rectImage = new Rectangle(0, 0, monImage.Width , monImage.Height);
 
            pictureBox1.Invalidate();
        }
        private void button1_Click(object sender, EventArgs e)
        {
            DessineSurBitmap();
            pictureBox1.Invalidate();
        }
 
        private void btnZoomPlus_Click(object sender, EventArgs e)
        {
 
            pictureBox1.Invalidate(); 
 
        }
 
        private void btnZoomMoins_Click(object sender, EventArgs e)
        {
 
            pictureBox1.Invalidate();
        }
 
        private void pictureBox1_Paint(object sender, PaintEventArgs e)
        {
            Graphics gr = e.Graphics;
 
            gr.ResetTransform();
            Matrix m = new Matrix();
            m.Scale(factZoom , factZoom);
            gr.Transform = m;
            if (monImage != null)
            {
                // Dessine  monImage
 
                gr.DrawImage(monImage, rectImage);
            }
            // Dessine  bmpAxis
            if (checkBox1.Checked)
            {
                gr.DrawImage(bmpAxis , rectImage);
            }
        }
        // Dessine  sur la bitmap 
        private void DessineSurBitmap()
        {
 
            if (monImage == null) return;
 
 
            using (Graphics gr = Graphics.FromImage(monImage))
            {
                Rectangle rectDessin;
                rectDessin = new Rectangle(50, 75, 300, 200);
                gr.DrawRectangle(Pens.White, rectDessin);
 
                rectDessin = new Rectangle(80, 120, 300, 400);
                gr.DrawEllipse(Pens.White, rectDessin);
 
                Point P1 = new Point(100, 60);
                Point P2 = new Point(25, 350);
                gr.DrawLine(Pens.White, P1, P2);
 
            }
        }
 
        private void checkBox1_CheckedChanged(object sender, EventArgs e)
        {
            DessineSurBmpAxis();
            pictureBox1.Invalidate();
        }
 
        // Dessine  sur la bitmap des Axes
        private void DessineSurBmpAxis()
        {
 
            bmpAxis = new Bitmap(bmpAxis, rectImage.Size);
            using (Graphics grAxis = Graphics.FromImage(bmpAxis))
            {
                using (Pen penAxe = new Pen(Color.Yellow, 2.0f))
                {
                    grAxis.DrawLine(penAxe, 0, bmpAxis.Height - 5,
                        bmpAxis.Width, bmpAxis.Height - 5); // axe X, le -5 pour ne pas être sur le bord
                    grAxis.DrawLine(penAxe, 0 + 5, 0, 0 + 5, bmpAxis.Height);
 
                }
            }
        }
        // ce handler est necessaire pour PctureBox_MouseWheel
        private void pictureBox1_MouseEnter(object sender, EventArgs e)
        {
            pictureBox1.Focus();
        }
        Single factZoom = 1.0f;
        Single inc = 0.1f;
        Single zmax = 3.0f;
        Single zmin = 0.25f;
        void pictureBox1_MouseWheel(object sender, MouseEventArgs e)
        {
            if (e.Delta >0)
            {
                factZoom += inc;
                factZoom = Math.Min(zmax, factZoom);
            }
            else if(e.Delta <0)
 
            {
                factZoom -= inc;
                factZoom = Math.Max(zmin, factZoom);
            }
            pictureBox1.Invalidate();
 
        }
 
 
 
 
    }
}

bon code...

[sebbur]

Je te remercie Mabrouki, c'est bien ce que je voulais avoir comme résultat !
Et comment rendre les deux boutons de zoom actif ? Parce que pour le moment ils n'ont aucun effet sur la pictureBox. Sinon tout le reste fonctionne et c'est bien ce que je voulais

Merci encore pour tout !

[theMonz31]

oui

enfin, si on veut faire quelque chose de propre et de réutilisable, on fait un Usercontrol avec les propriétés qui vont bien (genre Une pour l'image),
une du genre "displayAxes" et une deux méthodes genre "zoomIn, zoomOut"...

comme ça, c'est beaucoup plus propre, réutilisable, portable, etc...

[MABROUKI]

sebber
Et comment rendre les deux boutons de zoom actif ? Parce que pour le moment ils n'ont aucun effet sur la pictureBox

Ooups ! les 2 boutons sont inutiles cette version,car la gestion du Zoom est fait par le MouseWheel...

Si tu veux une version de da la gestion du Zoom avec les 2 boutons (+ et -) la voici (out le mousewheel) :

code .cs revu:

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
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
 
 
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Drawing.Drawing2D;
 
namespace WinCustomCaret
{
    public partial class FormRevu : Form
    {
        private Image monImage = null;
        private Image bmpAxis = null;
 
        private Rectangle rectImage = Rectangle.Empty;
 
        public FormRevu()
        {
            InitializeComponent();
          pictureBox1.SizeMode = PictureBoxSizeMode.Normal  ;//normal
        }
        private void FormRevu_Load(object sender, EventArgs e)
        {
            monImage = WinCustomCaret.Properties.Resources.Koala;
            bmpAxis = new Bitmap(monImage.Width, monImage.Height);
            rectImage = new Rectangle(0, 0, monImage.Width, monImage.Height);
 
            pictureBox1.Invalidate();
        }
        private void button1_Click(object sender, EventArgs e)
        {
            DessineSurBitmap();
            pictureBox1.Invalidate();
        }
        Single factZoom = 1.0f;
        Single inc = 0.1f;
        Single zmax = 3.0f;
        Single zmin = 0.25f;
        private void btnZoomPlus_Click(object sender, EventArgs e)
        {
            factZoom += inc;
            factZoom = Math.Min(zmax, factZoom);
            pictureBox1.Invalidate();
 
        }
 
        private void btnZoomMoins_Click(object sender, EventArgs e)
        {
 
            factZoom -= inc;
            factZoom = Math.Max(zmin, factZoom);
            pictureBox1.Invalidate();
        }
 
        private void pictureBox1_Paint(object sender, PaintEventArgs e)
        {
            Graphics gr = e.Graphics;
 
            gr.ResetTransform();
            Matrix m = new Matrix();
            m.Scale(factZoom, factZoom);
            gr.Transform = m;
            if (monImage != null)
            {
                // Dessine  monImage
 
                gr.DrawImage(monImage, rectImage);
            }
            // Dessine  bmpAxis
            if (checkBox1.Checked)
            {
                gr.DrawImage(bmpAxis, rectImage);
            }
        }
 
        private void checkBox1_CheckedChanged(object sender, EventArgs e)
        {
            DessineSurBmpAxis();
            pictureBox1.Invalidate();
        }
        // Dessine  sur la bitmap 
        private void DessineSurBitmap()
        {
 
            if (monImage == null) return;
 
 
            using (Graphics gr = Graphics.FromImage(monImage))
            {
                Rectangle rectDessin;
                rectDessin = new Rectangle(50, 75, 300, 200);
                gr.DrawRectangle(Pens.White, rectDessin);
 
                rectDessin = new Rectangle(80, 120, 300, 400);
                gr.DrawEllipse(Pens.White, rectDessin);
 
                Point P1 = new Point(100, 60);
                Point P2 = new Point(25, 350);
                gr.DrawLine(Pens.White, P1, P2);
 
            }
        }
 
        // Dessine  sur la bitmap des Axes
        private void DessineSurBmpAxis()
        {
 
            bmpAxis = new Bitmap(bmpAxis, rectImage.Size);
            using (Graphics grAxis = Graphics.FromImage(bmpAxis))
            {
                using (Pen penAxe = new Pen(Color.Yellow, 2.0f))
                {
                    grAxis.DrawLine(penAxe, 0, bmpAxis.Height - 5,
                        bmpAxis.Width, bmpAxis.Height - 5); // axe X, le -5 pour ne pas être sur le bord
                    grAxis.DrawLine(penAxe, 0 + 5, 0, 0 + 5, bmpAxis.Height);
 
                }
            }
        }
    }
}

Maintenant comme dit par TheMonz31, tout le code donne(version precedente et la derniere ) peuvent etre mis dans un UserControl (remplacer tout les references au Form par celle du UserControl)...
bon code...

[sebbur]

Merci beaucoup pour toutes vos réponses et merci d'avoir pris le temps de m'aider ! Vous m'avez été d'une grande aide !
Le résultat est bien celui que je souhaitais avoir, je vais désormais essayé avec un UserControl.

Merci encore,

Sebbur

[sebbur]

Et est-ce qu'il est possible que les axes gardent la même épaisseur quand on zoom in ou out ? Et que les axes soient placés au centre de la photo ?
C'est-à-dire que les axes restent à la bonne position par rapport à la photo (par exemple si les axes sont au centre de la photo, quand on zoom in ou out les axes sont encore au centre de cette photo) mais que les traits gardent la même épaisseur ?