Zoomer Une image dans un picturebox

**Audrey43** · 01/03/2012, 12h45

Bonjour, J'avance petit à petit dans le developpement de mon application de drag and drop.

Actuellement je cherche comment Zoomer mon image de Picturebox.

Afin de savoir ou positionner mes images (codes-barres) sur mon image (plan), il faut que mon image soit assez grande, sinon c'est ilisible et on ne sais pas quel emplacement pour quel code-barres.

J'ai trouver une solution mais elle n'est pas trés simple d'utilisation.
Actuellement mon image s'ouvre en grand et je me déplace à l'intérieur avec des scrollbars...

Je souhaiterais pouvoir zoomer dans mon image, grace au clic, ou roulette de souris... je ne sais pas trop si c'est possible.

Pour le moment ce que j'ai trouvé ne me conviens pas lorsque je zoom dedans, cela réduit la qualité de mon image...

Voila si vous avait des idées, je suis preneuse.

Bonne journée ! Et merci d'avance !

**MABROUKI** · 03/03/2012, 22h59

bonjour Audrey43.
Bah zoomer dans un pocbox ou n'importe controle releve de tes connaissance gdi+qu'il va va falloir revister un peu.
Ce qui enbetant c'est bien le controle PictureBox qui n'est pas adapte ni au scrolling ni au zoom.

voici plusieurs exemple de methode GDI+ pour un PictureBox
-"englobe" dans un control Panel pour avoir des scrollbars....
-zoomable .

1/ 1er exemple utilise betement un trackbar et la classe GDI+ Graphics.ScaleTransform (more simplistic methode).....
2/ 2er exemple utilise betement 2 buttons (z+)et (z-) qui "mimics" la fonction TrackBar et Graphics.ScaleTransform (more simplistic methode).....

3/ 3exemple un plus elabore comporte:
- 2 buttons (z+)et (z-).
- un 1er PictureBox qui sert a afficher l'image et et à dessiner un "rectangle de selection" d'une zone sur l'image .
Pour deplacer le "rectangle de selection" clic souris dans l'image

- Le "rectangle de selection" est "ajustable" avec 2 numericupdowns.

- le 2eme PictureBox affiche uniquement la zone selectionnee sur l'image (rectangle de selection ) .Cette zone selectionnee est zoomable avec les 2 buttons (z+)et (z-) .C'est un "oeil d'epervier".

-de plus au lieu du class Graphics.ScaleTransform on utilise un autre class GDI+ avec la version surcharge de Graphics.DrawImage(Image, rectDest, rectSrc, GraphicsUnit.Pixel) qui permet de dessiner une image mise à l'echelle.

code 1er exemple

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
 
Public Class frmZoomTrackBar
    ' ----- Image active 
    Private currentImage As Image = Nothing
 
 
 
    Public Sub New()
 
        ' Cet appel est requis par le Concepteur Windows Form.
        InitializeComponent()
 
        ' Ajoutez une initialisation quelconque après l'appel InitializeComponent().
        ' ----- Un TrackBar
        TrackBDisplayScale.Dock = DockStyle.Top
        TrackBDisplayScale.Value = 10
        TrackBDisplayScale.Maximum = 200
        TrackBDisplayScale.Minimum = 50
 
        ' ----- INITIALISATION
        ' ----- Panel qui contient le picturebox PicDrawingArea
        Me.Panel1.AutoScroll = True
        Me.Panel1.AutoScrollMinSize = New Size(1072, 768)
        Me.Panel1.Dock = DockStyle.Fill
        ' ----- PictureBox
        Me.PicDrawingArea.SizeMode = PictureBoxSizeMode.StretchImage
        Me.PicDrawingArea.Dock = DockStyle.Fill
 
        ' ----- INITIALISATION
        currentImage = My.Resources.ZebrasThree
 
 
 
    End Sub
    Private Sub PicDrawingArea_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PicDrawingArea.Paint
        ' ----- Refresh the drawing area.
 
        If currentImage Is Nothing Then Return
 
        ' ----- Clear any existing content.
        e.Graphics.Clear(Color.White)
        e.Graphics.ResetTransform()
 
 
 
        ' ----- Scale according to the user's request.
        e.Graphics.ScaleTransform(TrackBDisplayScale.Value / 100, _
               TrackBDisplayScale.Value / 100)
 
        ' ----- Draw  the image.
        e.Graphics.DrawImage(currentImage, 0, 0)
 
    End Sub
 
 
    Private Sub TrackBDisplayScale_ValueChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles TrackBDisplayScale.ValueChanged
        ' ----- Force the image to redisplay.
        PicDrawingArea.Invalidate()
    End Sub
End Class

code 2er exemple

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
 
ublic Class frmSimpleZoom
    ' -----  Image active 
    Private currentImage As Image = Nothing
 
    ' ----- Variables pour facteur de 
    ' ----- zoom actuel
 
    Private ZoomValue As Integer = 10
    Private ZoomMaxi As Integer = 200
    Private ZoomMini As Integer = 50
    Private incZoom As Integer = 10
    Private DisplayScaleValue As Integer
    Public Sub New()
 
        ' Cet appel est requis par le Concepteur Windows Form.
        InitializeComponent()
 
        ' Ajoutez une initialisation quelconque après l'appel InitializeComponent().
 
        '---- 2 Buttons btnZoomPlus et btnZoomMoins
        Me.BtnZoomPlus.Dock = DockStyle.Top
        Me.btnZoomMoins.Dock = DockStyle.Top
 
        '---- Panel qui contient le picturebox PicDrawingArea
        Me.Panel1.AutoScroll = True
        Me.Panel1.AutoScrollMinSize = New Size(1072, 768)
        Me.Panel1.Dock = DockStyle.Fill
        'PictureBox
        Me.PicDrawingArea.SizeMode = PictureBoxSizeMode.StretchImage
        Me.PicDrawingArea.Dock = DockStyle.Fill
 
        '---- INITIALISATION
        currentImage = My.Resources.ZebrasThree
 
        DisplayScaleValue = ZoomValue
    End Sub
 
    Private Sub BtnZoomPlus_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BtnZoomPlus.Click
        DisplayScaleValue = DisplayScaleValue + incZoom
 
        If DisplayScaleValue > ZoomMaxi Then
            DisplayScaleValue = ZoomMaxi
 
        End If
        ' ----- Force   the image to redisplay.
        PicDrawingArea.Invalidate()
    End Sub
 
    Private Sub btnZoomMoins_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnZoomMoins.Click
        DisplayScaleValue = DisplayScaleValue - incZoom
 
        If DisplayScaleValue < ZoomMini Then
            DisplayScaleValue = ZoomMini
 
        End If
 
        ' ----- Force  the image to redisplay.
 
        PicDrawingArea.Invalidate()
    End Sub
 
    Private Sub PicDrawingArea_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PicDrawingArea.Paint
        ' ----- Refresh the drawing area.
 
        If currentImage Is Nothing Then Return
 
        ' ----- Clear any existing content.
        e.Graphics.Clear(Color.White)
        e.Graphics.ResetTransform()
 
 
 
        ' ----- Scale according to the user's request.
        e.Graphics.ScaleTransform(DisplayScaleValue / 100, _
             DisplayScaleValue / 100)
 
        ' ----- Draw  the image.
        e.Graphics.DrawImage(currentImage, 0, 0)
 
    End Sub
End Class

code 3er exemple

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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
 
 
Public Class frmPicZoom
    Private MousePtOriginal As Point = New Point(0, 0)
    Private MousePtLast As Point = New Point(0, 0)
    Dim isMouseDown As Boolean = False
 
    'rectangle de selection de la zone à zoomer
    Private rectZoom As Rectangle
    Private penRectZoom As Pen = New Pen(Color.Yellow, 2.0)
    ' Image active 
    Private currentImage As Image = Nothing
 
    ' Valeurs utilisées pour fixer le facteur de zoom actuel
    ' echelle en %
    Private ZoomValue As Integer = 100
    Private ZoomMaxi As Integer = 500
    Private ZoomMini As Integer = 50
    Private incZoom As Integer = 10
    Private DisplayScaleValue As Integer
    Public Sub New()
 
        ' Cet appel est requis par le Concepteur Windows Form.
        InitializeComponent()
 
        ' Ajoutez une initialisation quelconque après l'appel InitializeComponent().
 
 
 
 
        '2 Buttons btnZoomPlus et btnZoomMoins
        Me.BtnZoomPlus.Dock = DockStyle.Top
        Me.btnZoomMoins.Dock = DockStyle.Top
 
        '2 NumericUpDowns pour dessiner  un rectangle de zoom
        'valeurs à personnaliser suivants vos besoins.....
        Me.NumUpWidthRect.Minimum = 50.0
        Me.NumUpWidthRect.Maximum = 500.0
        Me.NumUpWidthRect.Value = 100.0
        Me.NumUpWidthRect.Dock = DockStyle.Left
 
        Me.NumUpHeighRect.Minimum = 50.0
        Me.NumUpHeighRect.Maximum = 500.0
        Me.NumUpHeighRect.Value = 100.0
        Me.NumUpHeighRect.Dock = DockStyle.Right
 
        'Panel1 qui contient le picturebox PicDrawingArea
        Me.Panel1.AutoScroll = True
        Me.Panel1.AutoScrollMinSize = New Size(1072, 768)
        Me.Panel1.Dock = DockStyle.Fill
        'PictureBox1
        Me.PicDrawingArea.SizeMode = PictureBoxSizeMode.StretchImage
        Me.PicDrawingArea.Dock = DockStyle.Fill
 
        'Panel2 qui contient le picturebox PicDrawingArea2
        Me.Panel2.AutoScroll = True
        Me.Panel2.AutoScrollMinSize = New Size(1072, 768)
        Me.Panel2.Dock = DockStyle.Fill
        'PictureBox2
        Me.PicDrawingArea.SizeMode = PictureBoxSizeMode.StretchImage
        Me.PicDrawingArea.Dock = DockStyle.Fill
 
 
        'INITIALISATION
        currentImage = My.Resources.ZebrasThree
 
        ' rectangle de selection de la zone à zoomer
        rectZoom = New Rectangle(0, 0, Me.NumUpWidthRect.Value, Me.NumUpHeighRect.Value)
        ' zoom initial 1
        DisplayScaleValue = ZoomValue
 
    End Sub
 
    Private Sub BtnZoomPlus_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BtnZoomPlus.Click
        DisplayScaleValue = DisplayScaleValue + incZoom
 
        If DisplayScaleValue > ZoomMaxi Then
            DisplayScaleValue = ZoomMaxi
 
        End If
        ' ----- Force   the image to redisplay.
 
        PicDrawingArea.Invalidate()
        Me.PicDrawingArea2.Invalidate()
    End Sub
 
    Private Sub btnZoomMoins_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnZoomMoins.Click
        DisplayScaleValue = DisplayScaleValue - incZoom
 
        If DisplayScaleValue < ZoomMini Then
            DisplayScaleValue = ZoomMini
 
        End If
 
        ' ----- Force  the image to redisplay.
 
        PicDrawingArea.Invalidate()
        Me.PicDrawingArea2.Invalidate()
        Me.PicDrawingArea2.Invalidate()
    End Sub
 
    Private Sub PicDrawingArea_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles PicDrawingArea.Click
        Me.PicDrawingArea.Cursor = Cursors.Cross
        Dim picPoint As Point = Me.PicDrawingArea.PointToClient(Control.MousePosition)
        'Update rectZoom location
        Me.rectZoom.Location = New Point(picPoint.X - Me.rectZoom.Width / 2, picPoint.Y - Me.rectZoom.Height / 2)
 
 
 
        Me.PicDrawingArea.Invalidate()
        Me.PicDrawingArea2.Invalidate()
        Me.PicDrawingArea.Cursor = Cursors.Arrow
    End Sub
 
    Private Sub NumUpWidthRect_ValueChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles NumUpWidthRect.ValueChanged
        rectZoom.Width = Me.NumUpWidthRect.Value
        ' ----- Force   the image to redisplay.
        Me.PicDrawingArea.Invalidate()
        Me.PicDrawingArea2.Invalidate()
    End Sub
 
    Private Sub NumUpHeighRect_ValueChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles NumUpHeighRect.ValueChanged
        rectZoom.Height = Me.NumUpHeighRect.Value
        ' ----- Force   the image to redisplay.
        Me.PicDrawingArea.Invalidate()
        Me.PicDrawingArea2.Invalidate()
    End Sub
 
    Private Sub PicDrawingArea_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PicDrawingArea.Paint
        ' ----- Refresh the drawing area.
 
        If currentImage Is Nothing Then Return
 
        ' ----- Clear any existing content.
        e.Graphics.Clear(Color.White)
 
 
        ' ----- Draw  original  image.
        Dim rectImage As RectangleF = currentImage.GetBounds(GraphicsUnit.Display)
        e.Graphics.DrawImage(currentImage, 0, 0, rectImage.Width, rectImage.Height)
 
        ' ----- Draw zoom selection  image.
        ' ----- set rectSrc=rectZoom according to the user's request.
        Dim rectSrc As RectangleF = rectZoom
 
        ' ----- Set Scale rectDest= rectZoom (PicDrawingArea2)
        Dim rectDest As RectangleF = rectZoom
        rectDest.Width = rectZoom.Width
        rectDest.Height = rectZoom.Height
 
 
 
        ' ----- Draw  the rectangle selection.
 
        e.Graphics.DrawRectangle(penRectZoom, rectDest.X, rectDest.Y, rectDest.Width, rectDest.Height)
 
    End Sub
 
 
 
    Private Sub PicDrawingArea2_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PicDrawingArea2.Paint
        ' ----- Refresh the drawing area.
 
        If currentImage Is Nothing Then Return
 
        ' ----- Clear any existing content.
        e.Graphics.Clear(Color.White)
 
 
 
        ' ----- Draw zoom selection  image.
        ' ----- set rectSrc=rectZoom according to the user's request.
        Dim rectSrc As RectangleF = rectZoom
 
        ' ----- Set Scale rectDest= rectZoom * DisplayScaleValue.
        Dim rectDest As RectangleF = rectZoom
        rectDest.Width = rectZoom.Width * DisplayScaleValue / 100
        rectDest.Height = rectZoom.Height * DisplayScaleValue / 100
 
 
        ' ----- Draw  selection image scaled.
        e.Graphics.DrawImage(currentImage, rectDest, rectSrc, GraphicsUnit.Pixel)
 
        ' ----- Draw  the rectangle selection.
 
        e.Graphics.DrawRectangle(penRectZoom, rectDest.X, rectDest.Y, rectDest.Width, rectDest.Height)
 
    End Sub
End Class

Pour le moment ce que j'ai trouvé ne me conviens pas lorsque je zoom dedans, cela réduit la qualité de mon image...

La tu meconnais 2 choses:
-la notion de resolution d'image pour un informatitcien c'est la 'nettete" pour un artiste .
- resolution horizontale = nbre de pixels/largeur
- resolution verticale = nbre de pixels/longueur
La resolution d'origine de l'image depend de l'appareil qui a capture l'image(appreil photo,camera video,scanner, moniteur d'ecran eh oui qui a capture d'image par code...).Elle n'est pas modifiable.

Quand on affiche une image notre moniteur utilise sa resolution propre -en general- 96 dpi et fait une espece de regle de trois pour entre sa resolution propre et la resolution d'origine de l'image pour recalibrer l'image d'origine.

De plus quand on "zoom" par nos methodes precedentes nous multiplions les dimensions d'image "longueur" et "largeur" d'image avec les facteurs de scale.
D'emblee nous changeons ainsi la resolution d'image car "longueur" et "largeur" se trouvent au denominateur , toutes choses etant egales par ailleurs (nombre de pixels /dimension).

bon code....................................

**Audrey43** · 04/03/2012, 17h29

Bonjour, MABROUKI !

Je te remerci de m'avoir répondu !
Je suis entrain de tester les bout de code que tu m'as envoyé mais je suis bloquée a un endroit ...

'INITIALISATION
currentImage = My.Resources.ZebrasThree

Quand je veux faire linitialisation de la variable currentImage

je n'ai pas "ZebrasThree"... j'ai seulement "Culture" ou "ResourceManager"... dans My.Recources... Pourais-tu me dire a quoi correspond le "ZebrasThree" ... Merci d'avance !

**MABROUKI** · 05/03/2012, 01h14

rebonjour Audrey43
bah c'est une simple image d'essai avec la photo de 3 zebres en balade dans une reserve d'animaux sauvages ....probablement au kenya...
Tu mets a la place dans:
-Projet =>Proprietes=>Resources=>Fichier Image
-=>Ajouter un fichier existant........ et selectionne une image de ton choix.
-tu regeneres le projet.
-dans l'intellisense dans My.resources... apparaitra My.Resources.ImageAudry (nom de ton image) au lieu ZebrasThre le nom de mon image .
Apres tu fais le test....
bon code..................

**Audrey43** · 05/03/2012, 08h35

Daccord, merci je n'avais pas compris que c'était le nom de ton image !

Je vais faire le test merci bien !

**Audrey43** · 06/03/2012, 18h38

Bonjour, j'ai testée le code ! cela correspond, mais bon je ne vais finalement pas l'utiliser dans mon code je penses ... cela ne conviens pas vraiment au futur "utilisateur" donc je vais resté sur mon idée de base.

Mais en un grand merci à MABROUKI !

Cela me sera surement utile pour un projet personnel à l'avenir.

Merci beaucoup bonne soirée !

Zoomer Une image dans un picturebox [Débutant]

VB.NET

Discussions similaires

Partager

Partager