Differenze tra le versioni di "Spostare con il mouse un'immagine all'interno di una PictureBox"
(Creata pagina con "Lo spostamento di un'immagine è operazione che in modo più corretto va adottata con una ''DrawingArea''. <SUP>[[[#Note|nota 1]]]</sup> Ad ogni modo nella presente...") |
|||
(20 versioni intermedie di uno stesso utente non sono mostrate) | |||
Riga 1: | Riga 1: | ||
Lo spostamento di un'immagine è operazione che in modo più corretto va adottata con una ''DrawingArea''. <SUP>[[[#Note|nota 1]]]</sup> | Lo spostamento di un'immagine è operazione che in modo più corretto va adottata con una ''DrawingArea''. <SUP>[[[#Note|nota 1]]]</sup> | ||
− | Ad ogni modo nella presente pagina cercheremo di ottenere l'effetto del movimento con il mouse di una immagine posta in una ''PictureBox'' | + | Ad ogni modo nella presente pagina cercheremo di ottenere l'effetto del movimento con il mouse di una immagine posta in una ''PictureBox'', <U>evitando di muovere tale Controllo grafico</u>, per ottenere l'effetto visivo dello spostamento dell'immagine caricata. |
− | < | ||
− | Bisogna considerare che la ''PictureBox'' è un area da disegno rigida, nel senso che non è possibile assegnare coordinate x e y, ove far apparire al suo interno l'immagine caricata. | + | Bisogna considerare che la ''PictureBox'' è un area da disegno ''rigida'', nel senso che non è possibile assegnare coordinate x e y, ove far apparire al suo interno l'immagine caricata. |
− | <BR>L'unica possibilità in tal senso è quella di usare la Proprietà ". | + | <BR>L'unica possibilità in tal senso è quella di usare la Proprietà ".Alignment" della ''PictureBox'', che però posiziona l'immagine caricata soltanto in coordinate prestabilite e fisse della ''PictureBox''. |
− | + | In questa pagina prenderemo in considerazione due casi, nei quali sarà spostata con il mouse una immagine caricata in una ''PictureBox'': | |
− | <BR>1) si | + | <BR>1) spostare l'immagine all'interno dell'Oggetto ''Image'' originario, ossia appartenente all'immagine medesima e dunque avente uguali dimensioni; |
− | <BR>2) poiché è possibile assegnare un'immagine all'interno di un'altra immagine, alle coordinate volute, si creerà un'immagine | + | <BR>2) spostare l'immagine all'interno di un Oggetto ''Image'' di dimensioni superiori all'immagine medesima. |
− | <BR> | + | |
− | <BR> | + | ===Muovere un'immagine all'interno del suo stesso Oggetto ''Image''=== |
− | <BR> | + | In questo caso lo spostamento dell'immagine con il mouse avverrà nell'ambito del suo stesso Oggetto ''Image'', avente dimensioni pari all'immagine caricata, mantenendo comunque ferme le dimensioni iniziali della ''PictureBox''. |
+ | Private PictureBox1 As PictureBox | ||
+ | Private im As Image | ||
+ | Private rc As Rect | ||
+ | Private x As Short | ||
+ | Private y As Short | ||
+ | |||
+ | |||
+ | Public Sub Form_Open() | ||
+ | |||
+ | im = Image.Load("/usr/share/gambas3/control/gb.term.form/termradiobutton.png") | ||
+ | |||
+ | Me.Resize(im.W, im.H) | ||
+ | |||
+ | rc = New Rect(0, 0, Me.W, Me.H) | ||
+ | |||
+ | With PictureBox1 = New PictureBox(Me) As "PictureBox1" | ||
+ | .Move(0, 0, im.W, im.H) | ||
+ | .Image = im.Copy(rc.X, rc.Y, rc.W, rc.H) | ||
+ | .Background = Color.SoftYellow | ||
+ | End With | ||
+ | |||
+ | End | ||
+ | |||
+ | |||
+ | Public Sub PictureBox1_MouseDown() | ||
+ | |||
+ | <FONT Color=gray>' ''I dati seguenti, utili per lo spostamento dell'immagine, sono raccolti, soltanto se si è cliccato nella immagine da muovere:''</font> | ||
+ | With rc | ||
+ | If Not .Contains(Mouse.X, Mouse.Y) Then Return | ||
+ | x = Mouse.X - .X | ||
+ | y = Mouse.Y - .Y | ||
+ | End With | ||
+ | |||
+ | End | ||
+ | |||
+ | |||
+ | Public Sub PictureBox1_MouseUp() | ||
+ | |||
+ | PictureBox1.Mouse = Mouse.Default | ||
+ | |||
+ | End | ||
+ | |||
+ | |||
+ | Public Sub PictureBox1_MouseMove() | ||
+ | |||
+ | With rc | ||
+ | <FONT Color=gray>' ''Lo spostamento avviene, soltanto se si è cliccato nella immagine da muovere:''</font> | ||
+ | If Not .Contains(Mouse.X, Mouse.Y) Then Return | ||
+ | <FONT Color=gray>' ''Sono quindi raccolti i seguenti dati utili per lo spostamento dell'immagine:''</font> | ||
+ | .X = Mouse.X - x | ||
+ | .Y = Mouse.Y - y | ||
+ | End With | ||
+ | |||
+ | PictureBox1.Mouse = 18 | ||
+ | |||
+ | With PictureBox1 | ||
+ | <FONT Color=gray>' ''Impedisce che il movimento rapido dell'immagine lasci tracce visibili del movimento precedente:''</font> | ||
+ | .Image = PictureBox1.Image.Fill(PictureBox1.Background) | ||
+ | <FONT Color=gray>' ''Effettua lo spostamento dell'immagine all'interno dell'immagine ospitante:''</font> | ||
+ | .Image = PictureBox1.Image.DrawImage(im, rc.X, rc.Y, rc.W, rc.H) | ||
+ | End With | ||
+ | |||
+ | End | ||
+ | |||
+ | ====Spostando un'immagine di dimensioni superiori a quelle della "PictureBox"==== | ||
+ | Vediamo questo sotto-caso, in cui viene ingrandita un'immagine mantenendo comunque ferme le dimensioni della ''PictureBox''. | ||
+ | <BR>L'immagine, pertanto, risulterà avere una dimensione superiore a quella della ''PictureBox'', e così una sua parte "deborderà" necessariamente dai limiti della ''PictureBox''. | ||
+ | <BR>La parte dell'immagine, che deborda dai limiti della ''PictureBox'', ovviamente non sarà più visibile, poiché ora viene a trovarsi al di fuori dell'area di disegno della ''PictureBox''. | ||
+ | <BR>Si vuole, dunque, poter muovere con il mouse l'immagine, mostrata ingrandita nella [i]PictureBox[/i], per vedere così anche le parti non più visibili, ossia quelle parti dell'immagine ormai capitate al di fuori della ''PictureBox'' a causa dell'ingrandimento dell'immagine oltre la dimensione della ''PictureBox''. | ||
+ | <BR>Si potrà riprendere il codice precedente, avendo cura di apportare le seguenti modifiche e integrazioni nella routine "Form_Open()": | ||
+ | ...... | ||
+ | |||
+ | Me.Resize(im.W, im.H) | ||
+ | |||
+ | im = im.Stretch(im.W * 2, im.H * 2) | ||
+ | |||
+ | rc = New Rect(0, 0, im.W, im.H) | ||
+ | |||
+ | ...... | ||
+ | |||
+ | |||
+ | ===Muovere un'immagine all'interno di un Oggetto ''Image'' di dimensioni superiori all'immagine medesima=== | ||
+ | In questo caso si procederà come segue: | ||
+ | <BR>1) si posizionerà ovviamente un'<U>unica</u> ''PictureBox'' sul ''Form''; | ||
+ | <BR>2) poiché è possibile assegnare un'immagine all'interno di un'altra immagine, alle coordinate volute, si creerà un Oggetto ''Image'' avente dimensioni superiori all'immagine da caricare, ad esempio di dimensioni uguale alla ''PictureBox''. | ||
+ | <BR>3) si attribuirà a tale Oggetto ''Image'' di base il medesimo colore di sfondo della ''PictureBox, affinché durante lo spostamento dell'immagine, caricata, non restino tracce visibili del movimento precedente; | ||
+ | <BR>4) tale Oggetto ''Image'', pertanto, <U>ospiterà</u> la vera immagine, della quale a noi interessa mostrare lo spostamento nella ''PictureBox''; | ||
+ | <BR>5) si disegnerà mediante il Metodo ".DrawinImage()", richiamato dall'Oggetto ''Image'' base, creato e descritto al precedente punto 2); | ||
+ | <BR>6) con l'Evento "_MouseMove()" della ''PictureBox'' si procederà allo spostamento dell'immagine, che ci interessa, all'interno di quella più grande ospitante. | ||
Mostriamo un esempio pratico: | Mostriamo un esempio pratico: | ||
Riga 18: | Riga 106: | ||
Private im AS Image | Private im AS Image | ||
Private im2 AS Image | Private im2 AS Image | ||
+ | Private rc As Rect | ||
+ | Private x As Short | ||
+ | Private y As Short | ||
− | Public | + | Public Sub Form_Open() |
With Me | With Me | ||
Riga 27: | Riga 118: | ||
End With | End With | ||
− | With PictureBox1 = New PictureBox(Me) | + | With PictureBox1 = New PictureBox(Me) As "PictureBox1" |
.W = Me.W | .W = Me.W | ||
− | .H = Me. | + | .H = Me.H |
.Background = Color.SoftYellow | .Background = Color.SoftYellow | ||
End With | End With | ||
− | + | ||
im = New Image(PictureBox1.W, PictureBox1.H, PictureBox1.Background, Image.Standard) | im = New Image(PictureBox1.W, PictureBox1.H, PictureBox1.Background, Image.Standard) | ||
im2 = Image.Load("/usr/share/gambas3/control/gb.term.form/termradiobutton.png") | im2 = Image.Load("/usr/share/gambas3/control/gb.term.form/termradiobutton.png") | ||
− | |||
− | |||
− | |||
− | PictureBox1.Image = im | + | rc = New Rect((PictureBox1.W / 2) - (im2.W / 2), (PictureBox1.H / 2) - (im2.H / 2), im2.W, im2.H) |
+ | |||
+ | <FONT Color=gray>' ''Pone l'immagine, da spostare, al centro della sua immagine ospitante vuota, facendola apparire al centro del "Form":''</font> | ||
+ | PictureBox1.Image = im.DrawImage(im2, rc.X, rc.Y, rc.W, rc.H) | ||
End | End | ||
− | Public | + | Public Sub PictureBox1_MouseDown() |
− | + | ||
+ | <FONT Color=gray>' ''I dati seguenti, utili per lo spostamento dell'immagine, sono raccolti, soltanto se si è cliccato nella immagine da muovere:''</font> | ||
+ | With rc | ||
+ | If Not .Contains(Mouse.X, Mouse.Y) Then Return | ||
+ | x = Mouse.X - .X | ||
+ | y = Mouse.Y - .Y | ||
+ | End With | ||
+ | |||
+ | End | ||
+ | |||
+ | |||
+ | Public Sub PictureBox1_MouseUp() | ||
+ | |||
PictureBox1.Mouse = Mouse.Default | PictureBox1.Mouse = Mouse.Default | ||
− | + | ||
End | End | ||
− | + | ||
+ | |||
Public SUB PictureBox1_MouseMove() | Public SUB PictureBox1_MouseMove() | ||
+ | |||
+ | With rc | ||
+ | <FONT Color=gray>' ''Lo spostamento avviene, soltanto se si è cliccato nella immagine da muovere:''</font> | ||
+ | If Not .Contains(Mouse.X, Mouse.Y) Then Return | ||
+ | <FONT Color=gray>' ''Sono quindi raccolti i seguenti dati utili per lo spostamento dell'immagine:''</font> | ||
+ | .X = Mouse.X - x | ||
+ | .Y = Mouse.Y - y | ||
+ | End With | ||
PictureBox1.Mouse = 18 | PictureBox1.Mouse = 18 | ||
− | <FONT Color=gray>' ''Impedisce il movimento rapido dell'immagine | + | <FONT Color=gray>' ''Impedisce che il movimento rapido dell'immagine lasci tracce visibili del movimento precedente:''</font> |
im = im.Fill(PictureBox1.Background) | im = im.Fill(PictureBox1.Background) | ||
− | im.DrawImage(im2, | + | <FONT Color=gray>' ''Effettua lo spostamento dell'immagine all'interno dell'immagine ospitante:''</font> |
− | + | PictureBox1.Image = im.DrawImage(im2, rc.X, rc.Y, rc.W, rc.H) | |
− | |||
End | End |
Versione attuale delle 11:36, 26 lug 2024
Lo spostamento di un'immagine è operazione che in modo più corretto va adottata con una DrawingArea. [nota 1]
Ad ogni modo nella presente pagina cercheremo di ottenere l'effetto del movimento con il mouse di una immagine posta in una PictureBox, evitando di muovere tale Controllo grafico, per ottenere l'effetto visivo dello spostamento dell'immagine caricata.
Bisogna considerare che la PictureBox è un area da disegno rigida, nel senso che non è possibile assegnare coordinate x e y, ove far apparire al suo interno l'immagine caricata.
L'unica possibilità in tal senso è quella di usare la Proprietà ".Alignment" della PictureBox, che però posiziona l'immagine caricata soltanto in coordinate prestabilite e fisse della PictureBox.
In questa pagina prenderemo in considerazione due casi, nei quali sarà spostata con il mouse una immagine caricata in una PictureBox:
1) spostare l'immagine all'interno dell'Oggetto Image originario, ossia appartenente all'immagine medesima e dunque avente uguali dimensioni;
2) spostare l'immagine all'interno di un Oggetto Image di dimensioni superiori all'immagine medesima.
Indice
Muovere un'immagine all'interno del suo stesso Oggetto Image
In questo caso lo spostamento dell'immagine con il mouse avverrà nell'ambito del suo stesso Oggetto Image, avente dimensioni pari all'immagine caricata, mantenendo comunque ferme le dimensioni iniziali della PictureBox.
Private PictureBox1 As PictureBox Private im As Image Private rc As Rect Private x As Short Private y As Short Public Sub Form_Open() im = Image.Load("/usr/share/gambas3/control/gb.term.form/termradiobutton.png") Me.Resize(im.W, im.H) rc = New Rect(0, 0, Me.W, Me.H) With PictureBox1 = New PictureBox(Me) As "PictureBox1" .Move(0, 0, im.W, im.H) .Image = im.Copy(rc.X, rc.Y, rc.W, rc.H) .Background = Color.SoftYellow End With End Public Sub PictureBox1_MouseDown() ' I dati seguenti, utili per lo spostamento dell'immagine, sono raccolti, soltanto se si è cliccato nella immagine da muovere: With rc If Not .Contains(Mouse.X, Mouse.Y) Then Return x = Mouse.X - .X y = Mouse.Y - .Y End With End Public Sub PictureBox1_MouseUp() PictureBox1.Mouse = Mouse.Default End Public Sub PictureBox1_MouseMove() With rc ' Lo spostamento avviene, soltanto se si è cliccato nella immagine da muovere: If Not .Contains(Mouse.X, Mouse.Y) Then Return ' Sono quindi raccolti i seguenti dati utili per lo spostamento dell'immagine: .X = Mouse.X - x .Y = Mouse.Y - y End With PictureBox1.Mouse = 18 With PictureBox1 ' Impedisce che il movimento rapido dell'immagine lasci tracce visibili del movimento precedente: .Image = PictureBox1.Image.Fill(PictureBox1.Background) ' Effettua lo spostamento dell'immagine all'interno dell'immagine ospitante: .Image = PictureBox1.Image.DrawImage(im, rc.X, rc.Y, rc.W, rc.H) End With End
Spostando un'immagine di dimensioni superiori a quelle della "PictureBox"
Vediamo questo sotto-caso, in cui viene ingrandita un'immagine mantenendo comunque ferme le dimensioni della PictureBox.
L'immagine, pertanto, risulterà avere una dimensione superiore a quella della PictureBox, e così una sua parte "deborderà" necessariamente dai limiti della PictureBox.
La parte dell'immagine, che deborda dai limiti della PictureBox, ovviamente non sarà più visibile, poiché ora viene a trovarsi al di fuori dell'area di disegno della PictureBox.
Si vuole, dunque, poter muovere con il mouse l'immagine, mostrata ingrandita nella [i]PictureBox[/i], per vedere così anche le parti non più visibili, ossia quelle parti dell'immagine ormai capitate al di fuori della PictureBox a causa dell'ingrandimento dell'immagine oltre la dimensione della PictureBox.
Si potrà riprendere il codice precedente, avendo cura di apportare le seguenti modifiche e integrazioni nella routine "Form_Open()":
...... Me.Resize(im.W, im.H) im = im.Stretch(im.W * 2, im.H * 2) rc = New Rect(0, 0, im.W, im.H) ......
Muovere un'immagine all'interno di un Oggetto Image di dimensioni superiori all'immagine medesima
In questo caso si procederà come segue:
1) si posizionerà ovviamente un'unica PictureBox sul Form;
2) poiché è possibile assegnare un'immagine all'interno di un'altra immagine, alle coordinate volute, si creerà un Oggetto Image avente dimensioni superiori all'immagine da caricare, ad esempio di dimensioni uguale alla PictureBox.
3) si attribuirà a tale Oggetto Image di base il medesimo colore di sfondo della PictureBox, affinché durante lo spostamento dell'immagine, caricata, non restino tracce visibili del movimento precedente;
4) tale Oggetto Image, pertanto, ospiterà la vera immagine, della quale a noi interessa mostrare lo spostamento nella PictureBox;
5) si disegnerà mediante il Metodo ".DrawinImage()", richiamato dall'Oggetto Image base, creato e descritto al precedente punto 2);
6) con l'Evento "_MouseMove()" della PictureBox si procederà allo spostamento dell'immagine, che ci interessa, all'interno di quella più grande ospitante.
Mostriamo un esempio pratico:
Private PictureBox1 AS PictureBox Private im AS Image Private im2 AS Image Private rc As Rect Private x As Short Private y As Short Public Sub Form_Open() With Me .W = Screen.AvailableWidth * 0.5 .H = Screen.AvailableHeight * 0.5 End With With PictureBox1 = New PictureBox(Me) As "PictureBox1" .W = Me.W .H = Me.H .Background = Color.SoftYellow End With im = New Image(PictureBox1.W, PictureBox1.H, PictureBox1.Background, Image.Standard) im2 = Image.Load("/usr/share/gambas3/control/gb.term.form/termradiobutton.png") rc = New Rect((PictureBox1.W / 2) - (im2.W / 2), (PictureBox1.H / 2) - (im2.H / 2), im2.W, im2.H) ' Pone l'immagine, da spostare, al centro della sua immagine ospitante vuota, facendola apparire al centro del "Form": PictureBox1.Image = im.DrawImage(im2, rc.X, rc.Y, rc.W, rc.H) End Public Sub PictureBox1_MouseDown() ' I dati seguenti, utili per lo spostamento dell'immagine, sono raccolti, soltanto se si è cliccato nella immagine da muovere: With rc If Not .Contains(Mouse.X, Mouse.Y) Then Return x = Mouse.X - .X y = Mouse.Y - .Y End With End Public Sub PictureBox1_MouseUp() PictureBox1.Mouse = Mouse.Default End Public SUB PictureBox1_MouseMove() With rc ' Lo spostamento avviene, soltanto se si è cliccato nella immagine da muovere: If Not .Contains(Mouse.X, Mouse.Y) Then Return ' Sono quindi raccolti i seguenti dati utili per lo spostamento dell'immagine: .X = Mouse.X - x .Y = Mouse.Y - y End With PictureBox1.Mouse = 18 ' Impedisce che il movimento rapido dell'immagine lasci tracce visibili del movimento precedente: im = im.Fill(PictureBox1.Background) ' Effettua lo spostamento dell'immagine all'interno dell'immagine ospitante: PictureBox1.Image = im.DrawImage(im2, rc.X, rc.Y, rc.W, rc.H) End
Note
[1] vedere al riguardo la seguente pagina: Spostare con il mouse un'immagine caricata in una DrawingArea